Assignment 3: Geometrical Orbs

For this assignment, my inspiration came from an image I saw while scrolling on Instagram:

The image was coupled with some headline, but I can’t remember what exactly it was. The main thing that struck me about this photo was how it didn’t seem like the orbs and their nodes had any noticeable pattern, and yet somehow, this sphere was created. Did someone create the sphere and then click around? Was there a program? What are the chances this was done randomly? Thus, I was inspired to create a program that has users create orbs that bounce around the screen when they drag their mouse around, and if they are close, create a line connecting them. The output would be constantly evolving and up to the user as they can choose to add more orbs if they want. Who knows, maybe a sphere like shape would be seen on the screen temporarily. The results of my efforts are as follows:

(Drag your mouse!)

This assignment ended up being much harder than I expected because I had to make the orbs all look and act different, but not too different that they look bad on screen. I learned a lot about the p5.vector() and the types of attributes I can apply to it when creating my orb class which can be seen below. Figuring out how to create the connection line only if the orbs are close to each other also took a little bit.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
class Orb {
constructor(x, y) {
this.pos = createVector(x, y); // Position vector
this.vel = p5.Vector.random2D(); // Assign velocity
this.vel.mult(random(1, 3)); // Assign magnitude
this.size = random(8, 20); // Random size for each orb
this.color = color(random(100, 255), random(100, 255), random(255), 150); // Random semi-transparent color
}
move() {
this.pos.add(this.vel); // Update position
// Bounce off edges
if (this.pos.x <= 0 || this.pos.x >= width) {
this.vel.x *= -1;
}
if (this.pos.y <= 0 || this.pos.y >= height) {
this.vel.y *= -1;
}
}
display() {
noStroke();
fill(this.color);
ellipse(this.pos.x, this.pos.y, this.size); // Draws orb
}
// Determines if orbs are within 100 pixels of each other
isCloseTo(other) {
let distance = this.pos.dist(other.pos);
if (distance < 100) {
return true;
} else {
return false;
}
}
}
class Orb { constructor(x, y) { this.pos = createVector(x, y); // Position vector this.vel = p5.Vector.random2D(); // Assign velocity this.vel.mult(random(1, 3)); // Assign magnitude this.size = random(8, 20); // Random size for each orb this.color = color(random(100, 255), random(100, 255), random(255), 150); // Random semi-transparent color } move() { this.pos.add(this.vel); // Update position // Bounce off edges if (this.pos.x <= 0 || this.pos.x >= width) { this.vel.x *= -1; } if (this.pos.y <= 0 || this.pos.y >= height) { this.vel.y *= -1; } } display() { noStroke(); fill(this.color); ellipse(this.pos.x, this.pos.y, this.size); // Draws orb } // Determines if orbs are within 100 pixels of each other isCloseTo(other) { let distance = this.pos.dist(other.pos); if (distance < 100) { return true; } else { return false; } } }
class Orb {
  constructor(x, y) {
    this.pos = createVector(x, y); // Position vector
    this.vel = p5.Vector.random2D(); // Assign velocity
    this.vel.mult(random(1, 3)); // Assign magnitude
    this.size = random(8, 20); // Random size for each orb
    this.color = color(random(100, 255), random(100, 255), random(255), 150); // Random semi-transparent color
  }
  
  move() {
    this.pos.add(this.vel); // Update position
    // Bounce off edges
    if (this.pos.x <= 0 || this.pos.x >= width) {
      this.vel.x *= -1;
    }
    if (this.pos.y <= 0 || this.pos.y >= height) {
      this.vel.y *= -1;
    }
  }
  
  display() {
    noStroke();
    fill(this.color);
    ellipse(this.pos.x, this.pos.y, this.size); // Draws orb
  }

// Determines if orbs are within 100 pixels of each other
  isCloseTo(other) {
    let distance = this.pos.dist(other.pos);
    if (distance < 100) {
      return true;
    } else {
    return false;
  }
 }
}

To improve, I think I could play around more with the colors and upping the interactivity. It could be that the user can determine the colors of the orbs or have the colors all be the same but change each time the mouse is dragged. Ideally, it would also be cool to have the speed or density with which the user clicks affect the amount of orbs created. Overall though, I had fun working on this assignment and learned a lot.

 

One thought on “Assignment 3: Geometrical Orbs”

  1. Ooh, flowy! I really like this one. This would be an interesting one to combine with some of the machine vision techniques we’re looking at now, including Posenet or the handsfree library (for tracking gestures).

Leave a Reply