Author: Dhabia Alhosani

Concept and Approach:

For this assignment  I decided through utilizing simple harmonic motion to attempt to mimic the look of the Northern Lights. In terms of coding, my approach was quite simple, I focused mostly on the colors, their opacities, and angles, to achieve the effect of the aurora.

To start off I used the simple harmonic motion code we worked on in class as a basis, I then followed Daniel Schiffman’s video  that details the basics of creative coding with simple harmonic motion:

Similar to Schiffman’s method I created an array of shapes that move in a simple harmonic motion but instead of having my shapes be based on the built in shape functions of p5js I used the ‘begin/ end shape’ functions. Through these functions I was able to create my own shapes that look somewhat similar to what I imagine the aurora to look like.

Because I was layering the same shapes on top of each other to achieve the effect I am looking for I decided to place my wave shape into a class that I could call to create as many layers of the waves as needed in different positions.

<iframe src=”https://editor.p5js.org/dhabialhosani/full/DpbyDHhHa”></iframe>

Two elements that I am particularly proud of are the use of the ‘perlin noise’ function and the jagged effect I achieved through the shift of the vertices. When I first created the layers without the perlin noise function, they looked somewhat unnatural with their position and angling. When introducing the ‘noise’ function the program generated more natural looking patterns.

beginShape();
    // looping for the length of the angles array 
    for (let i = 0; i < angles.length; i++) 
    {
      strokeWeight(1);
      stroke(this.waveColor);
      // calculate x, y coordinates based on a perlin noise value that is affected by a sine wave 
      let y = map(noise(this.amplitude*(sin(angles[i] + this.c)) + this.d), -1, 1, this.minMapY, this.maxMapY);
      let x = map(i, 0, angles.length, this.minMapX, this.maxMapX);
      // vertex point for wave
      vertex(x, y);
      // another vertex to left (gives jagged effect)
      vertex(x - 100, y - 400);
      // increment to have waves moving
      angles[i] += 0.001;
    }
    endShape();
  }

In terms of the effect achieved with the shape, I was very confused as to how I am supposed to create it, at first I attempted to use rectangles, however I wasn’t satisfied with the outcome. I realized then that I could create a series of lines that move in a simple harmonic motion through just using the vertex function with the coordinates. By adjusting the coordinates and creating shifts in their values, I was able to achieve the desired look.

Reflection and Ideas:

While I took a rather simple route with this assignment I still feel like I learnt a lot and realized the power of the sine waves when it comes to creative coding. One thing I would like to further explore is the additive waves, as right now my code relies more on the perlin noise function to create a randomized wave effect. With the additive waves I feel like I could create a more consistent yet natural fluctuating look that could possibly make the design look better. I also would like to further experiment with colors and their opacities to see if I could create a mix in saturations and vibrancies.

Code for Reference: 

https://editor.p5js.org/dhabialhosani/sketches/DpbyDHhHa

Concept and Approach:

For this assignment my intention was to have the movers draw some sort of rose or flower through their attraction to the attractors. I began with the aim of drawing a rose like the one below.

I stumbled upon a code of a sketch that I though I could use as inspiration, however I realized while trying to understand its approach that it utilized the Lorenz Attractor mathematical model which was pretty complicated for me to grapple with. With that said, I did manage to tweak parts of the code to achieve the top part of the rose.

<iframe src=”https://editor.p5js.org/dhabialhosani/full/oQNKBKXil”></iframe>

Reference Code: https://editor.p5js.org/igarizio/sketches/_cmEg1gXg

I was eager to continue exploring the model but I was certain that my approach to drawing a simple rose was far more complicated than it should be. From there I decided to our simpler approach of attractors and movers to achieve my desired design. By applying the formulas and following the methods we learnt I found myself achieving random movements around the attractors, similar to those created in class, which made it even more difficult for me to attempt a sketch of a rose using movers and attractors.

This was when I decided to go for a rather geometric flower. I came across Daniel Schiffmen’s video on drawing mathematical rose patterns which helped me create the markings for where my attractors must lie.

Moving on from that step, I followed steps similar to what we had done with the mover and attractors in class, relying on the distance from the attractors to the movers to calculate the force and updating the acceleration accordingly.

To achieve the second part of the assignment, that is, adding other forces to cause turbulence or repulsion, I created an if mouse pressed condition that contains a force vector that attracts the movers away from the geometric rose attractors. It does so randomly based on where the mover is when the mouse is pressed. This ends up distorting the regular shape of the geometric flower. Once the mouse is released though, the geometric flower slowly starts reforming.

<iframe src=”https://editor.p5js.org/dhabialhosani/full/HHZeJfArz” width =360 height=640></iframe>

While simple, this aspect of the code is one that I am proud of because prior to learning how to create a geometric flower like such, I was confused about where exactly I should be placing my attractors to create the intended designs.

//for loop creates attractor points
      for (let i = 0; i < dots; i++) 
        {
          //mapping the value of 'i' to an angle value between 0 to TWO_PI
           let angle = map(i, 0, dots, 0, TWO_PI);
          //calculating the x and y components based on the angles
           x = cos(angle) * d;
           y = sin(angle) * d;
          //creating new attractor vector
           attractor = (createVector(x, y));
        }

As seen above I created a for loop that loops for a total of six times to create six different attractors. I created a variable called angle that maps the value of I which ranges from 0 to 6 to angle values of a full circle from 0 to 2PI. This way I was able to equally spread my attractors around a full circle creating a flower-like shape. I then just used the trigonometric functions to extract the x and y coordinates of the attractors to be able to then create a vector for the each attractor based on the calculated coordinates.

The repulsion aspect of my code is also one that I am happy with. When I first attempted to tackle the turbulence element of the assignment I was determined to add another attractor somewhere around the canvas having it alter the shape of my geometric flower without completely ruining it. This was difficult to achieve as adding one attractor on a corner did not alter the shape like I imagined it would, and adding multiple around the canvas distorted the flower completely. Following Daniel Schiffmen’s video on attraction on repulsion forces I was able to create a force of repulsion that was only activated if the mouse was pressed.

// repulsion mode if mouse is pressed
      else if (mouseIsPressed) 
      {
        // Calculating repulsion force based on distance. F=(G(m1m2)/||r^2||)
        let forceMagnitude = -5 / (d * d); 
        // Calculating force vector away from the attractor
        forceDirection = p5.Vector.sub(this.position, this.attractor.position);
        forceDirection.normalize();
        forceDirection.mult(forceMagnitude);
        // Adding the force to the repel vactor
        this.repelAttractor.add(forceDirection);
        // Adding the repel vector to the mover's acceleration
        this.acceleration.add(this.repelAttractor);
      }
    }

 

First I calculated the a magnitude for the force based on the distance between the mover and attractor. In place of the gravity and masses  I added a constant negative number to achieve the repulsion effect. I then calculated the force vector’s direction away from the attractor, got its normal value, multiplied it with the magnitude to achieve a new value which I used as the magnitude for the repulsion force. I then added this force the acceleration which led to the desired repulsion effect.

Reflection and Ideas:

I am not sure how I would further improve on this sketch however I would really like to continue exploring my initial approach with the rose and see how far I could go with that. I am still unsure if it’s possible to create that design using just attractors and movers, but perhaps it is, especially if other methods were introduced.

Code for Reference: 

https://editor.p5js.org/dhabialhosani/sketches/HHZeJfArz

For this assignment I was inspired by a video I took during the summer break of a group of ducks that left the lake in search for food. Every time people tossed seeds they ran as group towards them.

duckVideo

I attempted to mimic their movement in my code assigning each duck different acceleration while still having them all move in the same direction. I decided to attach to the mouse’s movement seeds to indicate what it is that the ducks are following.

The code was relatively simple however there was one section that was somewhat challenging for me to explore, that is, regarding the bounce back of the ducks. Initially before measuring the distance between the ducks and limiting their movement to avoid their overlap, the ducks lied on top of each other making their movement unrealistic.

Below is a snippet of the part of the code I found challenging:

for (let singleDuck of newDuck) {
      if (singleDuck !== this) 
      {
        //measures distance between ducks
        let distance = p5.Vector.dist(singleDuck.position, this.position);

        if (distance < (this.radius *2)) {
          // Calculate the overlap amount
          let overlap = (this.radius *2) - distance;
          // Calculate the vector from this duck to the new duck
          let direction = p5.Vector.sub(this.position, singleDuck.position);
          direction.normalize();
          // Calculate the bounce back force
          let collide = p5.Vector.mult(direction, overlap * 0.1);
          // Apply bounce back to the duck by adding value to acceleration
          this.acceleration.add(collide);
        }
      }
    }

First I made the move method of the Duck class specific to the argument newDuck, that is, it runs in relation to the newDuck variable. I did that because I need it to check for the collisions while handling the movement of the ducks.

Then in this method I created a for loop that runs through all the variables ‘singleDuck’ of the collection ‘newDuck’. In this for loop there is an if statement that runs as long as ‘newDuck’ is not being compared by itself ‘this’. This if statement checks for the distance between the ducks and ensures they do not overlap but rather collide and bounce. It does so by detecting their direction, and scaling the magnitude of it then adding to the value of acceleration.  This leads to a more realistic and natural movement for the ducks.

 

Reflection and Ideas:

I am quite proud of how this code turned out. I think in the future I could elements that show more interactivity between the ducks and the seeds. This could be done through the seeds disappearing gradually as the ducks come across them. This at the moment is not something I know how to accomplish but I look forward to learning it.

 

Below is the code for reference: 

https://editor.p5js.org/dhabialhosani/sketches/iLiewRjl7

 

Random Walker through RGB Space

My approach for this assignment was very simple. I decided to simply create the random walker like we did earlier in class and give it a 50% chance of moving towards the mouse pointer, at the times where it was not moving towards the pointer, I assigned it a random movement through the RGB space. 

While my code was mostly based on the random Walker we had already worked on in class, the section with the movement within the RGB space was something I explored and was glad I was able to accomplish. 

Below is a snippet of that section: 

else {
      // Random walker changing color in RGB
      let choice = floor(random(3)); // 0 for R, 1 for G, 2 for B

      //changing color components with =in respective range
      if (choice === 0) {
        this.r = (this.r + random(-5, 5)) % 255;
      } else if (choice === 1) {
        this.g = (this.g + random(-5, 5)) % 255;
      } else {
        this.b = (this.b + random(-5, 5)) % 255;
      }

As shown above this was part of my if statement that determined the movement of the Walker. If the Walker did not move towards the mouse, that is, the randomly generated value was less than the probability, then the color of the random Walker would change. In this case I decided to make the change specific to every color component. I created assigned a random number from 0-3 to the variable choice and from there I created nested if statements that were responsible from changing the RGB color components accordingly. I created a range for change between (-5, 5) to ensure that the respective components do not change drastically allowing for a smooth look in the color transformations. 

Challenges: 

The main challenge I faced was in terms of having the Walker move at first. I had all the elements of the code according the example we did in class but it turned out that I was failing to update the value of the coordinates of the direction which would result in my Walker staying still on the page. Once I added the lines that incremented the value of the coordinates I eliminated the issue in hand. I also added the p5js embedded ‘normalize’ function to the direction vector this way I was able to scale the vectors length to 1 while preserving its direction. This prevented a scattered display of the walker but rather a uniform continuous line. 

Reflection and Ideas:

When working on this assignment I was unsure of whether or not I was meeting the exact guidelines of creating a random walker with dynamic probabilities, while also having it walk through the RGB space, however I attempted to work on it to the best of my abilities. For the future I would want to experiment with ways that could combine both prompts together rather than having them in an if statement. This was not something I was able to accomplish as I have not yet grappled the concept of moving through RGB or HSB spaces, but I believe it is certainly possible to accomplish both prompts simultaneously and I plan on hopefully returning to update this code using a different approach. 

Below is the editor link for reference:

https://editor.p5js.org/dhabialhosani/sketches/08pvhUyNH

In “The Computational Beauty of nature” Gary Flake explores the various methods used to understand the universe and the inherent attributes that are always present in nature. Flake highlights the importance of considering different approaches to study the same topic as each approach can result in a different outcome. Flake’s example of studying ants using reductionism highlights how such an approach can strip away the intricate beauty of their colony systems. On the other hand, studying humans as groups takes away the individualistic essence of each person. This concept underscores the realization that many aspects of life remain imperfectly understood due to the universe’s intricate complexity.

This concept has made me realize how mimicking nature in programs can be done in many different ways depending on the task required. For instance, mimicking an ant colony system might require a holistic approach to capture its intricate beauty, while emulating individual human behaviors may necessitate a more nuanced focus. It is hard to understand how we should interpret each of these subjects because of the complexity of the universe knowing that some systems are parallel while others adapt and evolve due to their environment. So many things could be studied and mimicked using different approaches which could result in different outcomes.