I am making this tile using createGraphics
and a for
loop. Is there any way that I can make the random ball start in a different position in each tile?
Here is the code that I've tried:
let graphics;let x;let y;function setup() { createCanvas(400, 400); pixelDensity(1); graphics=createGraphics(200,200); graphics.background(255,0,0); x=graphics.width/2; y=graphics.height/2;}function draw() { background(220); for ( let i=0; i<width; i+=200){ for ( let j=0; j<height; j+=200){ image(graphics,i,j); graphics.fill(0); graphics.strokeWeight(2); graphics.stroke(255,0,0); graphics.ellipse(x+i,y+j,10); x+=random(-5,5); y+=random(-5,5); if ( x<0 || x > graphics.width){ x=graphics.width/2; } if ( y<0 || y > graphics.height){ y=graphics.height/2; } } } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>