Week 3 Assignment: Closer Look

The overall concept for this week’s assignment is that I wanted to portray what things look like in a closer look. The vibrating movements of various atoms and molecules based on the interactivity of the user is what i wanted to make. Based on mouse pressing and mouse dragging, there are different actions for each of them. If the mouse is pressed, a random shape subclass will be painted on the canvas, while if mouse is dragged, the background color, size changes and the shapes gain erratic movement. I used a parent class Shape and subclass for different shapes with move, display, and update methods. Although I encountered no visible problems, it was refreshing to make color and interactive artwork.

Shapes class Code:

class Shape {
  constructor(x, y, size, color) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.color = color;
    this.offsetX = random(-1, 1);
    this.offsetY = random(-1, 1);
  }
  
  display() {
    // Abstract method 
  }
  
  update(x, y) {
    // Abstract method 
  }
  
  move(){
    // Abstract method 
  }
}
//star subclass
class Star extends Shape {
  constructor(x, y) {
    super(x, y, random(20, 100), color(random(255), random(255), random(255), 100));
  }
  
  display() {
    fill(this.color);
    beginShape();
    for (let i = 0; i < 10; i++) {
      let angle = TWO_PI * i / 10;
      let r = this.size * (i % 2 === 0 ? 0.5 : 1);
      let x = this.x + cos(angle) * r;
      let y = this.y + sin(angle) * r;
      vertex(x, y);
    }
    endShape(CLOSE);
  }
  
  update(x, y) {
    let d = dist(this.x, this.y, x, y);
    this.size = map(d, 0, width, 20, 100);
  }
  
  move() {
    // Vibrate the molecule in place
    this.x += random(-1, 1);
    this.y += random(-1, 1);
  }
}

//diamond subclass
class Diamond extends Shape {
  constructor(x, y) {
    super(x, y, random(20, 100), color(random(255), random(255), random(255), 100));
  }
  
  display() {
    fill(this.color);
    beginShape();
    vertex(this.x, this.y - this.size / 2);
    vertex(this.x - this.size / 2, this.y);
    vertex(this.x, this.y + this.size / 2);
    vertex(this.x + this.size / 2, this.y);
    endShape(CLOSE);
  }
  
  update(x, y) {
    let d = dist(this.x, this.y, x, y);
    this.size = map(d, 0, width, 20, 100);
  }
  
  move() {
    // Vibrate the molecule in place
    this.x += random(-1, 1);
    this.y += random(-1, 1);
  }
}

//atom subclass
class Atom extends Shape {
  constructor(x, y) {
    super(x, y, random(20, 100), color(random(255), random(255), random(255), 100));
  }
  
  display() {
    fill(this.color);
    ellipse(this.x, this.y, this.size, this.size);
    fill(255);
    ellipse(this.x - this.size / 4, this.y - this.size / 4, this.size / 2, this.size / 2);
  }
  
  update(x, y) {
    let d = dist(this.x, this.y, x, y);
    this.size = map(d, 0, width, 20, 100);
  }
  
  move() {
    // Vibrate the molecule in place
    this.x += random(-1, 1);
    this.y += random(-1, 1);
  }
}

//molecule subclass
class Molecule extends Shape {
  constructor(x, y) {
    super(x, y, random(20, 100), color(random(255), random(255), random(255), 100));
  }
  
  display() {
    fill(this.color);
    ellipse(this.x, this.y, this.size, this.size);
    fill(255);
    ellipse(this.x - this.size / 4, this.y - this.size / 4, this.size / 2, this.size / 2);
    ellipse(this.x + this.size / 4, this.y + this.size / 4, this.size / 2, this.size / 2);
  }
  
  update(x, y) {
    let d = dist(this.x, this.y, x, y);
    this.size = map(d, 0, width, 20, 100);
  }
  
  move() {
    // Vibrate the molecule in place
    this.x += random(-1, 1);
    this.y += random(-1, 1);
  }
}

//water molecule subclass
class WaterMolecule extends Shape {
  constructor(x, y) {
    super(x, y, random(20, 100), color(0, 0, 255, 100)); // Blue color for water
  }
  
  display() {
    fill(this.color);
    ellipse(this.x, this.y - this.size / 4, this.size / 2, this.size / 2); // Oxygen atom
    fill(255);
    ellipse(this.x - this.size / 4, this.y + this.size / 4, this.size / 3, this.size / 3); // Hydrogen atom 1
    ellipse(this.x + this.size / 4, this.y + this.size / 4, this.size / 3, this.size / 3); // Hydrogen atom 2
  }
  
  update(x, y) {
    let d = dist(this.x, this.y, x, y);
    this.size = map(d, 0, width, 20, 100);
  }
  
  move() {
    // Vibrate the molecule in place
    this.x += random(-1, 1);
    this.y += random(-1, 1);
  }
}

//Co2 subclass
class CarbonDioxideMolecule extends Shape {
  constructor(x, y) {
    super(x, y, random(20, 100), color(255, 0, 0, 100)); // Red color for carbon dioxide
  }
  
  display() {
    fill(this.color);
    ellipse(this.x, this.y - this.size / 4, this.size / 2, this.size / 2); // Carbon atom
    fill(255);
    ellipse(this.x - this.size / 3, this.y + this.size / 4, this.size / 3, this.size / 3); // Oxygen atom 1
    ellipse(this.x + this.size / 3, this.y + this.size / 4, this.size / 3, this.size / 3); // Oxygen atom 
  }
  
  update(x, y) {
    let d = dist(this.x, this.y, x, y);
    this.size = map(d, 0, width, 20, 100);
  }
  
  move() {
    // Vibrate the molecule in place
    this.x += random(-1, 1);
    this.y += random(-1, 1);
  }

}