Assignment 3 – Introduction to Interactive Media

Ideation

The goal of this project was to create a dynamic, interactive orbiting system that simulates celestial movement. This was inspired on top of my previous assignment that utilized oscillating, vibrant circles. Using object-oriented programming (OOP) and arrays, the system generates multiple orbits, each consisting of particles that rotate around a central point.

To add interactivity, the speed of orbiting particles changes based on mouse movement, and the color intensity varies depending on the mouse’s vertical position. Additionally, users can click to add new orbits dynamically, making the system more engaging and expandable.

Code Highlight

A key challenge in this project was ensuring a more natural and organic movement of the particles while allowing user interaction. To address this, I added quite a bit of attributes to the Particle class such as its radius, speed, angle, and color properties.

In the constructor below, each particle is assigned a randomized orbit speed and color offset to create diversity in motion and color. The update() function adjusts each particle’s speed based on mouse movement (mouseX), while the display() function continuously updates the position and color.

class Particle {

constructor(radius, speed, angle, colorOffset) {

this.radius = radius;

this.speed = speed;

this.angle = angle;

this.colorOffset = colorOffset;

}

update() {

let speedFactor = map(mouseX, 0, width, 0.5, 2); // mouseX changes speed

this.angle += this.speed * speedFactor;

}

display() {

let x = this.radius * cos(this.angle);

let y = this.radius * sin(this.angle);

// mouseY modifies color intensity

let colorFactor = map(mouseY, 0, height, 0.5, 2);

let r = (sin(this.colorOffset + frameCount * 0.01) * 127 + 128) * colorFactor;

let g = (cos(this.colorOffset + frameCount * 0.015) * 127 + 128) * colorFactor;

let b = (sin(this.colorOffset + frameCount * 0.02) * 127 + 128) * colorFactor;

stroke(r, g, b, 180);

strokeWeight(2);

point(x, y);

}

class Particle { constructor(radius, speed, angle, colorOffset) { this.radius = radius; this.speed = speed; this.angle = angle; this.colorOffset = colorOffset; } update() { let speedFactor = map(mouseX, 0, width, 0.5, 2); // mouseX changes speed this.angle += this.speed * speedFactor; } display() { let x = this.radius * cos(this.angle); let y = this.radius * sin(this.angle); // mouseY modifies color intensity let colorFactor = map(mouseY, 0, height, 0.5, 2); let r = (sin(this.colorOffset + frameCount * 0.01) * 127 + 128) * colorFactor; let g = (cos(this.colorOffset + frameCount * 0.015) * 127 + 128) * colorFactor; let b = (sin(this.colorOffset + frameCount * 0.02) * 127 + 128) * colorFactor; stroke(r, g, b, 180); strokeWeight(2); point(x, y); } }

class Particle {
  constructor(radius, speed, angle, colorOffset) {
    this.radius = radius;
    this.speed = speed;
    this.angle = angle;
    this.colorOffset = colorOffset;
  }

  update() {
    let speedFactor = map(mouseX, 0, width, 0.5, 2); // mouseX changes speed
    this.angle += this.speed * speedFactor; 
  }

  display() {
    let x = this.radius * cos(this.angle);
    let y = this.radius * sin(this.angle);

    // mouseY modifies color intensity
    let colorFactor = map(mouseY, 0, height, 0.5, 2);
    let r = (sin(this.colorOffset + frameCount * 0.01) * 127 + 128) * colorFactor;
    let g = (cos(this.colorOffset + frameCount * 0.015) * 127 + 128) * colorFactor;
    let b = (sin(this.colorOffset + frameCount * 0.02) * 127 + 128) * colorFactor;

    stroke(r, g, b, 180);
    strokeWeight(2);
    point(x, y);
  }
}

The mousePressed() function allows dynamic expansion of the system by generating new orbits when the user clicks, making the artwork feel infinite and ever-changing.

Reflection

I’m happy with how this project turned out, especially the dynamic orbits and interactive elements like mouse-controlled speed and color variations. That said, I see several ways to improve it. I could introduce random variations in particle paths, like elliptical or wobbly orbits, to make the motion feel more natural. Adding a subtle trail effect would enhance the visuals, making the movement more fluid. I’d also love to experiment with gravity-based interactions, where particles respond to the mouse, either pulling toward it or being repelled. Well, this kind of seems like maybe this could be a new project all on its own haha.

Check out the final work:

Leave a Reply Cancel reply