Reverse Movement

var x=300;

var y=5;

var dir=1;

var ydir=10;

​

var x1=10;

var y1=150;

var dir1=10;

var ydir1=1;

​

function setup(){

  createCanvas(800,800);

}

function draw(){

  //background(255);

  fill(21,71,21);

  rect(x,y,width/5,height/5);

  fill(62,10,62,random(100));

  rect(x,y+50,width/4,width/4);

  fill(47,87,47,x);

  ellipse(x,y,50,50);

  x=x+dir;

  y=y+ydir;

  if(x>600 || x<0){

    dir=dir*-1;

  }

  if(y>height|| y<0){

    ydir=ydir*-1;

  }

  fill(21,71,21);

  rect(x1,y1,width/5,height/5);

  fill(62,10,62,random(100));

  rect(x1,y1+50,width/4,width/4);

​

  fill(47,87,47,x1);

  //ellipse(x1,y1,50,50);

  x1=x1+dir1;

  y1=y1+ydir1;

  if(x1>600 || x1<0){

    dir1=dir1*-1;

  }

  if(y1>height|| y1<0){

    ydir1=ydir1*-1;

  }

}