SOURCE

console 命令行工具 X clear

                    
>
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>