Toggle Object - Random Colors

index.html

<script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script>
<script src="script.js"></script>

script.js

let b;

function setup() {
  createCanvas(650, 450);
  b = new Ball(width/2,height/2);
}

function draw() {
  background(220);
  b.display();
}

class Ball {  
  constructor(x, y) {
    this.x1 = x;
    this.x2 = x;
    this.y = y;
    this.speed=2;
    this.toggle = true;
    this.limit = 25;
    this.c1 = color(random(255),random(255),random(255));
    this.c2 = color(random(255),random(255),random(255));

  }
  display() {
    noStroke();
    fill(this.c1);
    square(this.x1, this.y - 25, 50);
    circle(this.x1, this.y, 50);
    circle(this.x1+50, this.y, 50);

    fill(this.c2);
    circle(this.x2, this.y, 50);
        if (this.toggle == true) {
        this.x2 += this.speed;
    }
    if (frameCount % this.limit == 0) {
        this.toggle = !this.toggle;
    }
    if (frameCount % (2 * this.limit) == 0) {
        this.speed *= -1;
    }
  }
  
}

thumbnail.png