CODEWITHSUNDEEP
javascriptp5.js
AVN
AVN

Reputation: 63

Is it possible to create hundreds of p5 canvases?

I'm working on a neuroevolution snake game. I wanted to display all the individuals of the current generation on the screen. However it's really slowing things down. Here's the code which creates the canvas.

play_game() {
    let game = this;
    new p5(p => { 
        p.setup = function() {
            p.createCanvas(game.width, game.width);
            p.strokeWeight(1);
            tf.setBackend('cpu');
            p.frameRate(game.frameRate);
        }
            
        p.draw = function() {
            p.background("#ddd");
            game.snake.display(game.unit, p);
            game.snack.display(game.unit, p);
            let inputs = game.vision();
            game.snake.think(inputs);
            let dead = game.check_conditions();
            if(dead) {
                game.snake.brain.dispose();
                game.snake = new Snake([5,5], "#000");
            }
        };
    });    
}

Here is the code calling it:

game_array = [];
for(let i = 0; i < 500; i++) {
    game_array.push(new Game(100, 20, 10));
}
for(let i = 0; i < 500; i++) {
    game_array[i].play_game();
}

Is there a better way to do this or is it even possible?

Upvotes: 0

Views: 72

Answers (1)

ffmaer
ffmaer

Reputation: 781

It is possible to create hundreds of p5 canvases. The key is to run p5 in instance mode. Here is the code to create 400 canvases.

let sketch = function (p) {
    p.setup = function () {
        p.createCanvas(50, 50);
        p.background(p.random(255), p.random(255), p.random(255));
        p.stroke(p.random(255), p.random(255), p.random(255));
    };
    p.draw = function () {
        p.point(p.random(p.width), p.random(p.height));
    };
};
for (let i = 0; i < 400; i++) {
    new p5(sketch);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>

An idea for speeding up is to combine contents on 400 canvases and draw on 1 canvas.

enter image description here

400 separated canvases

rendering speed on my computer: 19 fps

demo: https://glitch.com/~400-canvases

combine contents on 400 canvases and draw on 1 canvas

rendering speed: 37 fps

demo: https://glitch.com/~400-canvases-faster

Upvotes: 2

Related Questions