Assignment Week – 3

For this assignment I tried my best to wrap my head around arrays and classes and how to go about them. I wanted to also add an interactive element where the circles respond to disturbance of the mouse – proud of that 🙂

There wasn’t really a specific idea, It was trial and error until I found what works for this assignment which is that. However, I wasn’t successful with randomizing the floating orange colors.

let oranges = [];

function setup() {
  createCanvas(600, 600);
  rectMode(CENTER);

  for (let i = 0; i < 10; i++) {
    let x = random(width);
    let y = random(height);
    let diameter = random(30, 50);
    let velocity = random(1, 5);
    let orangeColor = color(random(255), random(255), 0);
    let orange = new Orange(x, y, diameter, orangeColor, velocity);
    oranges.push(orange);
  }
}

function draw() {
  background(174, 198, 207);

  for (let orange of oranges) {
    orange.update();
    orange.display();
    if (orange.isMouseOver()) {
      orange.disturb();
    }
  }
}

class Orange {
  constructor(x, y, diameter, color, velocity) {
    this.x = x;
    this.y = y;
    this.diameter = diameter;
    this.color = color;
    this.velocity = velocity;
    this.originalX = x;
    this.originalY = y;
  }

  update() {
    this.x += this.velocity;

    if (this.x > width + this.diameter / 2) {
      this.x = -this.diameter / 2;
      this.y = random(height);
    }
  }

  display() {
    fill(this.color);
    ellipse(this.x, this.y, this.diameter);
  }

  isMouseOver() {
    let d = dist(this.x, this.y, mouseX, mouseY);
    return d < this.diameter / 2;
  }

  disturb() {
    this.x += random(-5, 5);
    this.y += random(-5, 5);
  }
}