Video problems only in p5.js editor

p5.js Coding Questions
1

I’m trying to create a test project based on Daniel Shiffman’s Game of Life. In code, I’m using the webcam to create a new matrix every 20 frames. In offline everything works fine. Someone can help why this code does not work in P5.js editor?

sketch.js:

var video;
var vScale = 10;
var slider;
var counter = 0;
var ca;
function setup() {
	createCanvas(640, 480);
        background(255);
    pixelDensity(1);
    video = createCapture(VIDEO);
    video.size(width/vScale, height/vScale);
    //vide.hide(); // hide DOM element
    //slider = createSlider(0, 255, 127);
    ca = new CA(vScale);
    ca.threshold = 200;
    
   
}

function draw() {
    if (counter == 10){
        ca.getStates(video);
        counter = 0;
    }
    
    ca.display();
    ca.compute();
   counter++;
}

And CA.js Class

class CA {
    
    constructor(_resolution){
        this.resolution = _resolution;
        this.threshold = 255;
        this.onColor = 0;
        this.ofColor = 255;
        this.cols = floor(width/this.resolution);
        this.rows = floor(height/this.resolution);
        this.grid = this.make2dArray(this.cols,this.rows);
        this.restart();
        
    }
    
    restart(){
        for (let i = 0; i<this.cols; i++){
            for (let j = 0; j<this.rows; j++){
                this.grid[i][j] = floor(random(2));
            }
        }
    }
    
    getStates(videoBuffer){
        videoBuffer.loadPixels();
        for (var y = 0; y < videoBuffer.height; y++){
            for (var x = 0; x < videoBuffer.width; x++) {
                var index = (videoBuffer.width - x + 1 + (y * videoBuffer.width))*4; // mirror version
                var r = videoBuffer.pixels[index];
                var g = videoBuffer.pixels[index+1];
                var b = videoBuffer.pixels[index+2];
                var bright = (r+g+b)/3;

                if (bright < this.threshold){
                    this.grid[x][y] = 0;
                } else {
                    this.grid[x][y] = 1;
                }
            }
        }
    }

    make2dArray(cols, rows){
        var arr = new Array(cols);
        for (var i = 0; i < arr.length; i++) {
           arr[i] = new Array(rows);
        }
        return arr;
    } 
    
    display(){
        for (let i = 0; i<this.cols; i++){
            for (let j = 0; j<this.rows; j++){
                let x = i * this.resolution;
                let y = j * this.resolution;
                
                if (this.grid[i][j] == 1) {
                    fill(this.onColor);
                } else {
                    fill(this.ofColor);
                }
                stroke(this.onColor);
            rect(x,y,this.resolution-1,this.resolution-1);
            }
        }
    }
    
    compute(){
        let nextGrid = this.make2dArray(this.cols, this.rows);
        for (let i = 0; i < this.cols; i++){
            for (let j = 0; j < this.rows; j++){
                let myState = this.grid[i][j];
                let neighbors = this.countNeighbors(i,j);
                if (myState == 0 && neighbors == 3)
                    {
                        nextGrid[i][j] = 1;
                    } else if (myState == 1 && (neighbors < 2 || neighbors > 3)){
                        nextGrid[i][j] = 0;
                    } else {
                        nextGrid[i][j] = myState;
                    }
            }
        }
        
        this.grid = nextGrid;
        
        
    }
    
    countNeighbors(x,y){
        let sum = 0;
        for (let i = -1; i <2; i++){
            for (let j = -1; j<2; j++){
                
                let tCol = (x+i+this.cols)%this.cols;
                let tRow = (y+j+this.rows)%this.rows;
                sum += this.grid[tCol][tRow];
            }
        }
        sum -= this.grid[x][y];
        return sum;
    }
}

Thanks for the help!!!

2

Hi,

I think that the problem is not in your code but rather the web browser / version you are using. Did you check if the website permissions were ok to use your webcam?

Personally, I am using Firefox and the examples in the documentation works perfectly once I accept the permissions to use my camera. You need to accept it each time.

Capture d’écran de 2020-06-14 23-03-23

3

Hi Josephh,

Thanks for reply. The webcam works fine after authorizing. I can see the capture DOM element working at the bottom of the browser canvas. But when the code calls getStates() function in my class, the code stops. This only happens in p5.js Editor. Using offline, everything works fine. I could figure out why.