FlowFields- Assignment 3

This week’s assignment delved into the world of object-oriented programming and arrays. My inspiration for this project stemmed from my previous encounter with Perlin noise and flow fields. Initially, I found the code for implementing these concepts somewhat complex. However, this week’s lessons on noise, arrays, and classes made things clearer. This video by “The Coding Train”, about Perlin noise really put things into perspective for me, and this is how I stumbled upon my artwork.

The artwork I created is essentially a flow field, which consists of an array of points moving in response to their positions relative to where the mouse was clicked. Firstly, I wanted to create a Perlin noise piece, but I also wanted to have a high level of interactivity in my piece. Searching “moving Perlin noise” led me to achieve this.

I utilized a class called “point” and developed functions to display and update these particles. When the mouse was clicked, the “push” function was invoked to relocate the particle randomly, resulting in an interactive field when the user interacted with the mouse.

The most challenging aspect of this project was the “update” function. It was responsible for moving the particles to random positions on the screen and recalculating noise values based on their positions. The difficulty arose from the new concept of noise scale, which I struggled to grasp accurately. Additionally, handling particles that went out of bounds and ensuring they returned to random positions proved to be a complex task. However, by drawing on the bouncing ball problem we studied in class, I eventually overcame this challenge. Below is the snippet of code I take most pride in:

//update particles position based on the noise
update() {
  //calculate noise value based on position
  let n = noise(
    this.position.x * noiseScale,
    this.position.y * noiseScale,
    frameCount * noiseScale * noiseScale
  );
  
  //Map noise to an angle
  let a = TAU * n;
  
  //Update particles position based on the angle
  this.position.x += cos(a);
  this.position.y += sin(a);

  //if particle is off-screen, reset to random location
  if (!this.onScreen()) {
    this.position.x = random(width);
    this.position.y = random(height);
  }
}

For future improvements, I aspire to introduce a gradient shift in the flow fields, dynamically changing colors as they traverse the canvas. As I reflect on this assignment, I take pride in the progress I made in understanding these intricate concepts. Looking ahead, I am eager to continue refining my work, with plans to enhance the visual impact of the flow field. This assignment has undoubtedly been a steppingstone in my journey to mastering interactive media coding.