Drawing multiple rect() while have clear() in the draw()

UsamaRehan

I have a rect() which moves from bottom to top which is making the y postion of the rect -1 each time the draw() is called. That works fine.

function setup(){ createCanvas(600,600); var x = random(0,width); var y = height-50; var speed = 1; } function draw(){ clear(); y -= speed; rect(x,y,200,20); }

Now,as the rect() keeps moving to the top,I want new rect() to appear from the bottom after a certain time say 1000ms. I tried to keep track of the history of the first rect() in a vector and I drew another rect from the vector. but it draw rect() but none of the rect() is moving to top. I am sure I am missing something here,and would like to someone to point that out for me.

Here is what I have tried so far.

function rectangles(x,y,w,h,speed){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.speed = 1;

this.records = [];

    this.getAllPaths = function(){
       this.records.push(createVector(this.x,this.y));
    }

    this.drawRectangles = function(){
      this.y -= this.speed;
      rect(this.x,this.y,this.w,this.h);
    }
}

function setup(){
  createCanvas(window.innerWidth,window.innerHeight);
 }

function draw(){
   background(255);
   var r = new rectangles(random(0,width) , height-50 , random(50,300) , 10);
   r.getAllPaths();
   r.drawRectangles();
}

Chrisir

if only one rectangle is visible at a time, just reset it y value to height.

UsamaRehan

there are multiple rect to be draw on the canvas

GoToLoop

http://Bl.ocks.org/GoSubRoutine/1a0d21828319cf18fecf44101764bd60