Month: February 2025

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

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:

 

After reading The Art of Interactive Design, Ch. 1, I’m realizing that we as a society and industry throw around the term “interactivity” very liberally. I used to classify interactivity as response to user input, but that may be too broad or too simple. For example, my p5.js sketches consist of clicks from a user to make something happen, but it’s the same process over and over again. For it to be more complexly interactive, these inputs and outputs should engage in a conversation. Maybe as time goes on and more inputs are made by the user, different responses are created. Depending on the type of input, different outputs will be created. Or if a user’s input can change how a system operates. I think giving users more agency in how a “story” plays out is interactivity. A movie for example doesn’t let the viewer change its outcome. However, interactivity gives users agency (albeit in a confined system, but said system should give users enough freedom to feel like they have power to change things the way they want to). Over time, a system should respond differently to a user’s input given the amount of history and new information it has to work with (kind of like in a conversation). Interactive systems aren’t stagnant and progress with time; this allowed users to stay engaged. If a process presents the same steps repeatedly, how are users supposed to care and give their sustained attention? I think giving users the ability or tools to create something entirely new can also be implemented into interactivity as prolonged engagement is the goal of any good conversation. However, the tool can’t be a standalone piece, but a part of a system since “tool” implies no complex thought behind receiving inputs. A piano for example is a tool for creating something entirely new, but a system that senses dance moves to create sounds based on the user’s movement over time (sounds build up over time, not just linearly mapping one movement to one sound) might constitute more as interactive.

In the future, I should take these principles into account and create more complex interactions where multiple processes are happening, not just one.

What do you consider to be the characteristics of a strongly interactive system?

A strongly interactive system, as suggested from the reading, would be one that would be actively involved in communication with us. I agree with the authors suggestions about certain forms of media thought to be interactive are not. The author presented a good example about movies which seem to be interactive to some people, but in reality whatever we do, we can not change the outcome or decisions of the actions in the movie. Same would go for something like videogames which we would think is the most interactive media. I believe that in games, even if they allow us to make decisions and even if our decision change certain outcomes, we will still end up with one of the selected endings which have been previously scripted. I think right now the strongest interactivity could be our conversations with chatbot ais, like ChatGPT which is capable of not only having an active conversation with us, but also thinking about its answers.

What ideas do you have for improving the degree of user interaction in your p5 sketches?

It would be really hard to implement complete interactivity such as one I mentioned in the previous text. But one way I could improve the interactivity is by making the program in such way that users decision will lead to some outcome which is random and not predictable even by me. I don’t think complete interactivity can be achieved, but I believe there can be made an illusion of complete interactivity with some randomness put into the outcome of users decisions.

Concept

The concept of this project was to create a winter landscape featuring falling snowflakes and a couple trees. The snowflakes would fall from the top of the canvas, continuously reappearing at the top after they fall off the bottom. To create this effect, the trees and the snowflakes are drawn with random sizes  making each one look unique.

Code Highlight

One of the main challenges in this project was the randomization of the snowfall. To do this, I created a snowflake class to handle the snowflakes falling and reappearing at random positions. In the constructor in the code below, the snowflake’s x and y coordinates were set. Additionally, each snowflake is given a random size and speed , which adds variation to the scene, making each snowflake unique. The fallingsnow() function then moves the snowflake down the screen by adding its speed value to the y position. Then, when a snowflake reaches the bottom of the canvas, it resets by positioning it randomly at the top and also randomizes the x coordinate to create this illusion of continuity. I also did the same for  the trees where each tree’s size was randomized.

class Snowflake {
  constructor(x, y) {
    this.x = x; 
    this.y = y; 
    this.size = random(3, 7); 
    this.speed = random(0.5, 2); 
  }

  fallingsnow() {
    this.y += this.speed; // moves snowflake down by speed value

    // Reset snowflake to top once at bottom
    if (this.y > height) {
      this.y = random(-100, -10); 
      this.x = random(width); 
    }
  }

  display() {
    fill(255); 
    noStroke(); 
    ellipse(this.x, this.y, this.size); 
  }
}

class Tree {
  constructor(x, y) {
    this.x = x; 
    this.y = y; 
    this.size = random(30, 50); 
  }

  display() {
    
    //tree bark
    fill(139, 69, 19); 
    rect(this.x - 5, this.y, 10, this.size); 
    
    // tree leaves
    fill(34, 139, 34);
    triangle(
      this.x - this.size / 2,
      this.y,
      this.x + this.size / 2,
      this.y,
      this.x,
      this.y - this.size
    ); 
  }
}

 

Reflection/Future Improvements

Looking ahead, there are several ways I could improve this project. First, I could introduce a more complicated behavior for the snowflakes, like adding slight variations to their horizontal movement, so they kind of drift as they fall, maybe mimicking wind. Additionally, I could implement different types of snowflakes with unique characteristics, such as their  varying colors or shapes, to add more variety to the snowfall. In addition to this I could also add interactions with other elements in the scene, such as snowflakes collecting on the ground or interacting with objects like trees, enhancing the immersion of the winter scene.

 

What do you consider to be the characteristics of a strongly interactive system? 

A strongly interactive system is one where both the user and the system actively respond to each other. It’s more than just pressing a button and getting a reaction, it feels like a conversation. A good interactive system listens, processes the input, and gives meaningful feedback. Examples include video games or apps where user actions change the experience in real time.

What ideas do you have for improving the degree of user interaction in your p5 sketches?

To improve user interaction in my p5 sketches, I can incorporate elements that enhance the sense of back and forth engagement. For example, instead of just having objects that move randomly, I can allow users to manipulate them through mouse movement or keyboard input. Adding real time feedback, such as changing colors, dynamic animations, or evolving patterns based on user interaction, can make the experience more immersive.

Concept:

For this assignment, I tried incorporating OOP, arrays and functions in different ways to make it interesting. When I was first doing the assignment I wanted to keep the same theme as the last art project and go for something to do with the beach. in the beginning, I was going to make the crab move sideways while his claws open and close but I found that challenging. I still wanted to go along with the theme, so instead I took an Inspiration from a GIF I found online:

https://media.gifdb.com/crab-summer-kawaii-art-06bvdd0otf5hfr0t.gif

And from these drawings I found online:

Code Highlight:

I figured out how to make the background change after the shades hit a specific coordinate but what I found challenging was finding the right values for the rays so that it looks like the GIF. I had to do a lot of trial and error:

  //draws sun rays from the crabs center
  function drawSunRays() {
    let centerX = width / 2;
    let centerY = height - 120;
    let numRays = 12; //number of rays
    let angleStep = TWO_PI / numRays; //even spacing between rays

  //loop through each ray
    for (let i = 0; i < numRays; i++) {
  //finding angle for this ray 
    let angle = i * angleStep;
    let rayX = centerX + cos(angle) * width; //move in x direction
    let rayY = centerY + sin(angle) * height; //move in y direction
    
    stroke(sunRayColors[int(random(sunRayColors.length))]); //picks a random color
    strokeWeight(random(4, 8))
    line(centerX, centerY, rayX, rayY);
  }
}

Reflection and future improvement:

It was pretty fun and challenging doing this assignment and trying to somehow incorporate randomness and arrays into making the rays. I really enjoyed trying to make my art project come close to my inspiration even though I did not fully incorporate everything. So for the future maybe I will try to make it so that another background would show up before it resets, just like the GIF, or implement interactions with the mouse.

Inspiration

This idea initially was sparked by my a Youtube channel called 3Blue1Brown, from this video specifically.

Design

Initially, before implementing any program, you have to design proper psuedocode and sometimes a flowchart to aid with you coding your project.

I first did my research on the topic, from a page in Wikipedia, this gave me some general ideas of the mathematical concepts used to utilize Discrete Fourier Transformation. I then watched this youtube video to give me a better idea to how to design and implement the DFT algorithm. Moreover, this article gave me more insight on the topic.

I didn’t need to do any sketches as the videos and blogs I watched and read gave me a rough idea, I only had to design the algorithms I am going to use.

I used latex to design my algorithms.

I made use of the built in p5 functions to implement those mathematical notations as such:

 

Then I implemented the resample function, which standardizes the distribution of points along a given path.

 

Lastly, I designed the draw function to keep the drawing animated.

 

Sketch

Creativity elements: what makes this different that other DFT projects?

The usage of DFT (Discrete Fourier Transformation) in video projects or art sketches is usually done by setting certain coordinates for pre-determined shapes and objects. For my project, the user gets to draw their own shape which will be traced by the epicycles, which revolutionizes DFT to be much more utilizable in different fields. The background, being plane black acts as a canvas for the user to not be influenced or distracted with background elements but rather truly unleash the original shape the user has in mind.

Moreover, the big center circle acts as a centralizer, if the user draws a triangle on the corner of the canvas for example, the exact same triangle will be traced but it will be in the middle of the canvas, this enhances user experience and avoids uninentional behavior. Lastly, It would be really hard for the user to precisely trace a fully enclosed shape if the user is using a mouse to draw, therefore, for aesthetic purposes and improved user experience, the shapes automatically close upon mouse release.

Code Highlights

// -------------- epicycle class --------------
// represents one epicycle for fourier reconstruction
class Epicycle {
  constructor(x, y, coeff) {
    this.x = x; // x coordinate of center
    this.y = y; // y coordinate of center
    this.freq = coeff.freq; // set freq from coefficient
    this.amp = coeff.amp * scaleFactor; // set amplitude with scaling
    this.phase = coeff.phase; // set phase from coefficient
  }
  // compute endpoint of epicycle at given time
  update(time) {
    let angle = this.phase + TWO_PI * this.freq * time; // calc angle using phase and freq
    let dx = this.amp * cos(angle); // calc x displacement
    let dy = this.amp * sin(angle); // calc y displacement
    return createVector(this.x + dx, this.y + dy); // return new endpoint as vector
  }
  // draw epicycle's circle on canvas
  display() {
    stroke(255, 100); // set stroke color with transparency
    noFill(); // no fill for circle
    ellipse(this.x, this.y, 2 * this.amp); // draw circle with diameter equal to 2 * amp
  }
}

This is the class I used that is used to create the epicycles to draw the the traced curves.

if (closedShape && path.length > 0) {
  // if closed shape flag set and path exists
  vertex(path[0].x, path[0].y); // close shape by connecting to first pt
}

This code ensures that the shape is closed by checking the distance between initial point and the last point of the array

Struggles I faced

I was struggling with the smoothness of the curves, so I tried to implement a moving average filter, which is a filter for the coordinates. That was really bad so I texted my friend who is pretty smart at coding.

I remembered that a low pass filter is used to smoothen frequencies, and I did impelement that after my friend Iakob inspired me, it ended up so nice.

Future Improvements

The animation of how the shape closes is very fast in relation to the drawing animation, I need to enhance the algorithm to match the number of epicycles and control the speed of the closing animation accordingly

I really dislike how the speed has to change when the number of epicycles changes, and you basically have to trial-and-error your way through, I want to re-implement some stuff to combine those two things which would make anyone whos tweaking the code’s life much easier

AI usage declaration

I admit that I used artificial intelligence to help me with this assignment, especially with the resample function, but all the work, design, concept, and implementation was mine, I only used AI to help me debug and orient/guide me throughout the process of creating this art piece.

Click on the piece with your mouse:

Link to sketch: https://editor.p5js.org/bobbybobbb/full/GKQffo525

When brainstorming ideas for this generative piece, I thought about pixel art and how you can generate complex images with simple shapes. You just need a lot of these simple shapes, and since we’re working with arrays this week, it’d be easy to store this data. I had this idea of a 100 pixel grid and how combining lines and diagonals can make shapes like flowers. It can be simple and have one color, so you essentially only need to store one thing: whether or not a specific pixel is colored. I created an object for the flowers where a boolean is stored in a 10 x 10 2d array. To display the flower, I just have to go through the array and fill in pixels that are true with a color and not filled in otherwise. The most difficult part about this process was creating a dynamic algorithm for generating each flower shape. I didn’t want to create individual shapes from scratch that were hard-coded in, so I used numbers like each pixel’s coordinate on the grid (the x and y value), an argument for the object that’s a randomly generated number each time, and the distance of the pixel from the center of the grid, to create equations and true or false statements to determine whether a pixel is colored or not. This part came with a lot of experimentation; I would generate 20 flowers on the screen to test out whether or not I like the way the numbers are being manipulated and the specific shapes of the flowers. Brainstorming how to manipulate the numbers and making sure there was a diverse range of shapes took the most amount of time.

Here’s some ways I generated the flower shapes: (this.shape is a random number passed into the object as an argument, i and j are the x and y coordinates of the pixel)

// distance of pixel to center of flower
let distFromCenter = dist(j,i,5,5);

// random pattern, weird alg after testing 
if ((distFromCenter - this.shape)==0) {
  this.pixArr[i][j] = true;
}
        
// another random pattern
if ((i * j + i + j + distFromCenter)%this.shape==0) {
  this.pixArr[i][j] = true;
}

// diagonal pattern
if (diag) {
  // diagonal
  if ((i+j==10) || (i==j)) {
    this.pixArr[i][j] = true;
  }
}

Every time the user clicks their mouse, a random flower (different shape, size, color) is generated. Each flower also has a green stem (its size is determined by the flower size). I didn’t want the flowers to exist in a vacuum so I created cloud objects as well that move across the screen and a blue background to seem like a sky. The clouds also have randomly generated speeds and positions within a given range. The flowers’ positions are also limited to the lower half of the screen because it wouldn’t make sense for them to be in the sky. There’s a “clear” button at the bottom of the screen to clear the flowers as well.

Randomness for the flowers’ parameters:

var xCoor = random(-20,400);
var yCoor = random(200,400);
var pixelSize = random(2,10);
var col = color(random(255), random(255), random(255));
var shape = floor(random(5));

For future improvements, I want to develop more algorithms that’ll give me more complex flower shapes, because right now, you can tell these flowers have a limited range of shapes.

Brainstorming: