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);
}
}
