​

// this is to know how to have something that you paint that layers over time

//that leaves like a trail but also something you can paint with that doesnt

//layer over time, that animates without leaving where it was before

​

//this is to learn how to have the rectangle move around with out leaving 

//a trail but also be able to paint over th canvas 

//you can either put the background in set up and everything will leave a 

//trail or if you put background in draw nothing will leave a trail 

//so to avoid this use createGraphics(); what this will do it is it will 

//let you have 2 canvases , one wiht trails one without trails and the

//one with trails i can layer on the one with trials 

​

// why cnat you use create canvas again? you have to use different 

//terminology. The canvas only refers to the actaul thing you are seeing

//but i want to create an offscreen canvas thats a grphics object

// i can call a function called clear , and what it does is make that 

//extra canvas transparent 

// if you want to the  red rect to be on top just move the rect after the 

//2nd canvas

// the background is frist then the second canvas then the rect 

var squares = []

​

let x = 200;

let y = 200; 

let extraCanvas;

​

function setup() {

  createCanvas(400, 400);

  extraCanvas= createGraphics(400,400); 

  extraCanvas.clear ();

  background (0);

   for(var i = 0; i<10 ;i++){

  squares [i] = {

  x:random(0,width),

  y: random (0, height),

  display: function  (){

  fill (255,0,0);

  noStroke();

  rectMode(CENTER);

  rect(this.x,this.y,20,20);

},

   move: function (){ 

   this.x= this.x+random(-2,2);

   this.y= this.y +random (-2,2);

  }

}

   }

}

function draw() {

//no trails

  background(0);

 for (i = 0; i< squares.length; i++){

 squares [i].move();

  squares[i].display();

 }

//trails 

//if (mouseIsPressed){

extraCanvas.fill(255,150);

extraCanvas.noStroke();

  let starX= random(width);

  let starY = random(height);

  extraCanvas.ellipse (starX,starY, 10,10);

//extraCanvas.ellipse(mouseX,mouseY,60,60);

//}

   image(extraCanvas,0,0);

  x = x+random (-5,5);

y= y+ random (-5,5);

}