console
let translatingEllipse;
function setup(){
createCanvas(500,150);
background(200);
translatingEllipse = new TranslatingEllipse(10,10,20,60,6,5);
}
function draw(){
background(200);
translatingEllipse.move();
translatingEllipse.drawing();
}
class TranslatingEllipse{
constructor(ellipseX,ellipseY,ellipseD,ellipseColor,ellipseXSpeed,ellipseYSpeed){
this.ellipseX=ellipseX;
this.ellipseY=ellipseY;
this.ellipseD=ellipseD;
this.ellipseColor=ellipseColor;
this.ellipseXSpeed=ellipseXSpeed;
this.ellipseYSpeed=ellipseYSPeed;
}
move(){
push();
if((this.ellipseX>width-this.ellipseD/2)||(this.ellipseX<this.ellipseD/2)){
this.ellipseXSpeed=-this.ellipseXSpeed;
}
else if((this.ellipseY>height-this.ellipseD/2)||(this.ellipseY<this.ellipseD/2)){
this.ellipseYSpeed=-this.ellipseYSpeed;
}
this.ellipseX+=-this.ellipseXSpeed;
this.ellipseY+=-this.ellipseYSpeed;
}
drawing(){
translate(this.ellipseX,this.ellipseY);
fill(this.ellipseColor);
ellipse(this.ellipseX,this.ellipseY,this.ellipseD,this.ellipseD);
pop();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>