Multiple canvases in p5

Question

I'm writing code for a neuro evolution project that should learn to play the game snake. I'm using js and p5.js. I want to have 10 game canvases parallel and each game should individually play the game.

What I'm struggling with is the multiple canvases part. When I use this:

let screens = 10;
    for(let k = 0; k < screens ;k++){
        
      var t = function( p ) { 
        p.setup = function() {
            p.createCanvas(200, 200);
            let x = Math.random()*100;
            console.log(x);
            snake = new Snake(x,50);
            food = new Food();
        };
      
        p.draw = function() {
            p.background(0);
            snake.placeSnake(p);
            snake.think(p);

            if(counter % 50 == 0){
                snake.moveSnake();
            }
            if(snake.offScreen(p)){
                //kill snake
            }
            }

            food.placeFood(p);

            if(food.hitsFood(snakes)){
                food.generateFood(p);
            }
            counter++;
        };
      };
      var myp5 = new p5(t);
    }

All the screens are identical to the last one spawned. How would I do different so that each canvas is unique? thanks in advance.

Answer 1

This might be a variable scope issue (untested, as I don't have all your code).

Try adding let snake, food, counter = 0; inside the var t= function(p){} defintion, like this:

    let screens = 10;
    for(let k = 0; k < screens ;k++){
        
      var t = function( p ) { 
        let snake, food, counter = 0;    // declare here as shared between setup and draw
        p.setup = function() {
            p.createCanvas(200, 200);
            let x = Math.random()*100;
            console.log(x);
            snake = new Snake(x,50);
            food = new Food();
        };
      
        p.draw = function() {
            p.background(0);
            snake.placeSnake(p);
            snake.think(p);

            if(counter % 50 == 0){
                snake.moveSnake();
            }
            if(snake.offScreen(p)){
                //kill snake
            }
            //}

            food.placeFood(p);

            if(food.hitsFood(snakes)){
                food.generateFood(p);
            }
            counter++;
        };
      };

      var myp5 = new p5(t);
    }

The explanation for this would be that, if you don't declare the variables, they are implicitly declared in the global scope, and so every snake points to the same snake (and likewise with food). The canvases are unique, but the snake and food variables for each one only point to the last snake or food created.

(Depending on the context, it might be worth preventing this kind of problem from occurring by using strict mode, which does not allow undeclared variables).