Generative Art 1

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 arr = [];

function setup() {
  createCanvas(650, 450);
  for (let row = 75; row <= 575; row += 125) {
    for (let col = 100; col <= 350; col += 125) {
      switch (round(random(0, 2))) {
        case 0:
          arr.push(new Ball(row, col));
          break;
        case 1:
          arr.push(new HBall(row, col));
          break;
        case 2:
          arr.push(new VBall(row, col));
          break;
      }
    }
  }
}

function draw() {
  background(240);
  for (let i = 0; i < 15; i++)
    arr[i].display();
}

class Ball {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 30;
    this.c = color(random(20, 255), random(20, 255), random(20, 255));
  }
  display() {
    fill(this.c);
    circle(this.x, this.y, this.size);
  }
}

class HBall {
  constructor(x, y) {
    this.size = 30;
    this.x1 = x;
    this.x2 = x;
    this.y = y;
    this.speed = 1;
    this.toggle = true;
    this.limit = 25;
    this.c1 = color(random(20, 255), random(20, 255), random(20, 255));
    this.c2 = color(random(20, 255), random(20, 255), random(20, 255));
    this.r = round(random(0, 1));
    if (this.r == 1) {
      this.x2 += this.size - 4;
      this.speed = -1;
    }

  }
  display() {
    noStroke();
    fill(this.c1);
    square(this.x1, this.y - this.size / 2, this.size);
    circle(this.x1, this.y, this.size);
    circle(this.x1 + this.size - 5, this.y, this.size);
    fill(this.c2);
    circle(this.x2, this.y, this.size);
    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;
    }
  }
}

class VBall {
  constructor(x, y) {
    this.size = 30;
    this.x1 = x;
    this.x2 = x;
    this.y = y - this.size / 2;
    this.y2 = y;
    this.speed = 1;
    this.toggle = true;
    this.limit = 25;
    this.c1 = color(random(20, 255), random(20, 255), random(20, 255));
    this.c2 = color(random(20, 255), random(20, 255), random(20, 255));
    this.r = round(random(0, 1));
    if (this.r == 1) {
      this.y += this.size - 4;
      this.speed = -1;
    }

  }
  display() {
    noStroke();
    fill(this.c1);
    square(this.x1, this.y2 - this.size / 2, this.size);
    circle(this.x1 + this.size / 2, this.y2 - this.size / 2, this.size);
    circle(this.x1 + this.size / 2, this.y2 + this.size / 2 - 5, this.size);

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

// inspired by
// book cover of Mood and Trope by John Brenkman
// https://www.bibliovault.org/thumbs/978-0-226-67326-4-frontcover.jpg

thumbnail.png