Coding Assignment “Geometric Flower” – Week 3

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.

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.

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

Leave a Reply Cancel reply