Assignment 3 (production 3) – Windows desktop!

The nostalgic interactive window displays and desktop backdrops that many of us cherish from our early years serve as the inspiration for this digital artwork assignment. My creative imagination has been deeply impacted by the joy and simplicity of those early interactive experiences, where one could lose hours exploring the graphical user interfaces of outdated operating systems and watching screensavers. This project started as an exercise in the classroom where we were to animate some balls and make them travel around the screen to look like they were bouncing off its edges. This exercise inspired me to create something new and dynamic that is similar to the old screens, while also bringing back fond memories of them.

I wanted to create an experience that would preserve the spirit of the effervescent Windows screensaver while adding contemporary interactive aspects. The idea was to design a dynamic canvas that, in response to human interaction, fills with bubbles, creating a lively and entertaining space evocative of a screensaver.

I wanted the bubbles to appear anytime the mouse was touched to make it more interactive. Therefore, I employed a mouse-press function that, based on the mouse’s position on the cavas, produced bubbles. Then, in order to make the entire piece more dynamic and creative—just as I was fascinated by the Windows screen when I was a youngster, so too would this pique kids’ interest in the labor of love that goes into creating it—I randomized a number of factors, including size, pace, and even the colors of the bubbles.

The code that I have is a lot similar to the one we had in class the only changes that I did is that I created an array to hold all the randomly generated bubbles in. This is the Bubbles file that has the class that generates the bubbles:

class Ball {
  // Constructor to initialize new Ball
  constructor(x, y, xspeed, yspeed, size) {
    this.x = x; // Ball x-coordinate
    this.y = y; // Ball y-coordinate
    this.xspeed = xspeed; // Ball speed in x-direction
    this.yspeed = yspeed; // Ball speed in y-direction
    this.size = size; // Diameter of ball
  }

  // Method to update ball position based on its speed
  move() {
    this.x += this.xspeed; // Update x-coordinate by x-speed
    this.y += this.yspeed; // Update y-coordinate by y-speed
  }

  // Method to change ball direction if it hits the canvas wall
  bounce() {
    // Checks if ball hits left or right edge of canvas
    if (this.x + this.size/2 > width || this.x - this.size/2 < 0) {
      this.xspeed *= -1; // Reverse x-direction speed
    }
    // Checks if ball hits top or bottom edge of canvas
    if (this.y + this.size/2 > height || this.y - this.size/2 < 0) {
      this.yspeed *= -1; // Reverse y-direction speed
    }
  }

  // Method to display ball on canvas
  display() {
    stroke(255); 
    strokeWeight(0); 
    fill(random(255), random(255), random(255)); // Sets fill color to random color
    ellipse(this.x, this.y, this.size, this.size); // Draws ellipse with specified size
  }
}

Then, I had the createBubble function in draw() so that every bubble that is created is randomized over and over again. This is the code for that:

// Initializes empty array to hold all Balls 
let balls = []; 


function setup() {
  createCanvas(600, 600); 
}


function draw() {
  background(0); 
  
  // Loops through each ball in balls array
  for (let ball of balls) {
    ball.move(); 
    ball.bounce(); 
    ball.display(); 
  }
}


function mousePressed() {
  createBall(); // Calls createBall function to create new Ball 
}


function createBall() {
  // Sets new ball's position to current mouse position
  let x = mouseX; 
  let y = mouseY;
  // Generates a random speed for new ball in both x and y directions
  let xspeed = random(-5, 5); 
  let yspeed = random(-5, 5);
  // Generates random size for new ball
  let size = random(10, 50); 

  // Creates new Ball object with specified parameters and adds it to balls array
  balls.push(new Ball(x, y, xspeed, yspeed, size));

I think a way to make this even better is to make the bubbles look more realistic like the bubbles in the windows server.