Category: F2024 – Nimrah

Concept:

I got the idea for this assignment after seeing the work of our Artist of the Week: Memo Akten, especially his piece on Simple Harmonic Motion. His smooth, rhythmic designs instantly made me think of nature—like the gentle sway of a flower’s petals in the wind. That’s when it clicked! I decided to create my own version, a flower-like pattern with oscillating petals, using p5.js. I wanted to bring the flower to life by making its petals pulse and move in a way that mimicked real-life motion.

Embedded Sketch:

The code creates a dynamic flower-like pattern with oscillating petals using the sin() function to control smooth, rhythmic motion. First, the flower is centered on the canvas using translate(), and the petals are drawn in a loop, with each petal’s size oscillating based on the sine wave. Multiple layers of petals are added for depth, giving the flower a complex appearance. The stem and leaves are then positioned right below the flower, and the leaves gently sway using the same oscillation logic. The time variable drives the continuous animation, making the flower feel alive and constantly moving.

What I’m Proud Of in the Code:

One of the highlights of my project is how the petals grow and shrink over time, giving the flower a breathing effect. Here’s a key part of the code:

let petalOscillation = amplitude + sin(time + angle + l) * 20;
ellipse(layerOffset, 0, petalWidth, petalHeight);

This section makes use of the sin() function to create the smooth back-and-forth movement of the petals. By adjusting the size of each petal with a sine wave, the flower seems to come alive, as the petals expand and contract in a rhythmic way. Adding multiple layers of petals helped give the flower more depth, making it look more complex and natural.

Challenges I Faced:

One of the main challenges was figuring out how to position the stem and flower correctly. At first, the stem kept appearing on top of the flower, which looked strange. I had to experiment with the translation (moving the origin point) in p5.js to get the stem to sit underneath the flower, where it belongs.

Reflection:
Looking back, I’m really happy with how the petals move in such a smooth and natural way. Working on this project helped me better understand how to use harmonic motion and how to layer shapes and elements in p5.js. The flower ended up feeling dynamic and alive, which was exactly what I was aiming for.

In the future, I’d like to:

1.Add interactivity: It would be cool if the flower could respond to user input, like mouse movement. For example, maybe the user could change how fast the petals pulse or how big they grow.

2. Try 3D: Moving this concept into 3D would make the flower even more exciting. Imagine the petals not just growing and shrinking, but also rotating and moving in a 3D space.

3.Make the movement more natural: Right now, the movement is smooth, but it could feel even more organic if I added some Perlin noise to the oscillations. This would make the petals and leaves move in a way that’s a little less predictable and more like how things behave in nature.

Inspiration

My inspiration for this sketch is Memo Akten. However, I also wanted to include something I have seen before. I initially started experimenting with 16 points to create the Tesseract, a 4-dimensional cube. Later I found that to be a bit difficult and moved on to just experimenting with multiple points and connections to create something that has a DNA helix-like structure but also oscillates and moves.

Sketch

Highlight of Code

function generateLayers(n, r) {
  let layerPoints = [];
  let angleStep = TWO_PI / n;  // divide the circle into equal segments
  
  // create points in a circular layout
  for (let i = 0; i < n; i++) {
    let angle = i * angleStep;
    let x = r * cos(angle);
    let y = r * sin(angle);
    layerPoints.push({ x: x, y: y });
  }
  
  points.push(layerPoints);  // add this layer to the points array

  // base case: stop when there's only one point in the layer
  if (n > 1) {
    // recursive call to generate the next layer with half the points and a smaller radius
    generateLayers(floor(n / 2), r * 0.7);  // reduce the radius and number of points for each layer
  }
}

This is the function that generates the layers of points. The function generates circular layers based on the number of layers and the radius of each layer. Changing the radius and the number of points changes the visualization completely

Concept:

This week, we were tasked with gathering inspiration from Memo Akten’s work, focusing on visualizing simple harmonic motion (SHM). When I looked through his work I was reminded of the structure of DNA, with its two intertwining sine waves resembling the periodic motion characteristic of SHM. So, for my assignment I wanted to replicate that and try to mimic the movement and design of a DNA structure.

Key Features:

• Sine Waves as DNA Backbones: Two sinusoidal waves form the backbone of the DNA structure. These waves oscillate vertically and reflect the nature of simple harmonic motion.
• Bunched Particles: Along both sine waves, I added clusters of red particles to mimic the molecular bonds on a DNA strand, creating a more organic and dynamic feel.
• Colorful Connecting Rungs: The colorful “rungs” between the two sine waves change color as they move along the structure, representing the diversity and vibrancy found in DNA.
• 3D Rotation: The entire DNA strand rotates around the y-axis, adding a three-dimensional element to the animation.

embedded sketch:

Code I’m Most Proud Of:

I’m particularly proud of the code that generates the particles along the sine waves and the rungs. By combining randomness and structured positions, I was able to create visually interesting clusters that closely mimic the complexity of a DNA strand. Additionally, the color transitions in the connecting rungs add an appealing vibrancy to the piece, making it more engaging to look at.

// Function to draw bunched-up red particles along the sine waves
function drawParticles(x, y) {
  noStroke();
  fill(255, 0, 0);  // Red particles
  let numParticles = 5;  // Number of particles in each bunch
  let particleSize = 4;  // Size of each particle
  let spread = 5;  // Spread between particles in a bunch

  for (let i = 0; i < numParticles; i++) {
    // Create small offsets for the particles to make them appear bunched
    let offsetX = random(-spread, spread);
    let offsetY = random(-spread, spread);

    // Draw particle at each offset position
    ellipse(x + offsetX, y + offsetY, particleSize, particleSize);
  }
}

// Function to draw particles along the connecting strands (rungs)
function drawRungParticles(x1, x2, y) {
  noStroke();
  fill(0, 255, 0);  // Green particles for the connecting rungs
  let numRungParticles = 4;  // Number of particles along each rung
  let particleSize = 4;  // Size of each particle

  for (let i = 0; i < numRungParticles; i++) {
    // Calculate positions along the line between x1 and x2
    let t = i / (numRungParticles - 1);  // Normalize t to range [0, 1]
    let x = lerp(x1, x2, t);  // Linear interpolation between x1 and x2

    // Draw particle along the line connecting x1 and x2 (rung)
    ellipse(x, y, particleSize, particleSize);
  }
}

main functions:

1. drawParticles():
   • Red Particles: Randomly places red particles along each sine wave.
   • Bunching: The function creates clusters of particles by adding random offsets (offsetX, offsetY) to the position. This simulates the bunched look of molecules along DNA strands.
2. drawRungParticles():
   • Green Particles: Particles along the rungs (the connections between the two sine waves).
   • Structured Positions: The function calculates positions between the two sine waves using linear interpolation (lerp()), ensuring that the particles are evenly distributed along the connecting lines.

Reflections for Future Work:

In the future, I’d like to explore further how I can simulate more biological properties in this visualization. One idea is to add more complexity to the particles, making them behave like molecules interacting with one another. I also think it would be interesting to explore interactivity, where users can manipulate the DNA strand’s rotation, zoom, or even the particle behavior, allowing for a more immersive experience.

Concept

While scouring through the internet looking for harmonic motions, I stumbled upon a mathematical figure called the Lissajous Figures.  Essentially, we put a grid table of circles of both the x and y axes. Then, if we unite the value of just one axis of one dot on the top and the value of the other axis of a dot on the side, you’ll get the coordinates of the dot where the rows intersect. And since they are moving at different speeds they make shapes. This phenomenon was studied cohesively by mathematician Jules-Antoine Lissajous in 1857 (Wolfram).

The most basic use of Lissajous figures is as the phase-space plots of harmonic motion in multiple dimensions. In other words, we can observe the speed-location graphs of repeating motion in 2D, 3D and beyond by using this graph.

Sketch

Development & How it works

Initially, I followed Shiffman’s tutorial regarding this particular harmonic motion. However, after giving it some thought, I wanted to experiment with it further. Instead of having a line drawing the shapes, what if I used multiple ellipses connected by lines, to expand beyond the initial shapes?  To do that, I had to simplify the code from arrays into singular objects.

for (let i = 0; i < pointNum; i++) {
    // Added phase to smooth out things 
    var phase = i * TWO_PI / pointNum;

    // Calculating the x and y positions
    var x = 160 * sin(a * t * phase + PI / 2);
    var y = 160 * sin(b * t * phase);

By utilizing for loops and the mathematical formula of LIssajous’ pattern, I was able to get somewhat a series of ellipses drawing just like the pattern. However, it was not close enough to the smooth, harmonic-like motion that I was aiming for.

Next, I added a trail lines between each ellipses by storing the information of each lines in a trails array. Combined with an added RGB color based off the x and the y positions, we get something like the sketch above.

// Store the trail information
    var trail = {
      x: width / 2 + x,
      y: height / 2 + y,
      r: r,
      g: g,
      bColor: bColor,
      alpha: 255
    };

    trails.push(trail);

Challenges Faced & Future Improvements

One particular challenge that I faced was making the motion smoother. After a bit of messing around with fading background and what nots, I discovered that by adjusting the time increment (t +=) to a very little amount, we can essentially, slice down into the tiniest fraction of frames, which results in a super smooth motion that I envisioned.

Playing around with the alpha values of the lines also somewhat affected the entire ellipses and canvas too, which results in a visual that I wanted to avoid very much. For future improvements, I wanted to see how the figures could be affected by other waves, such that they resemble something else, while oscillating back into its original forms. Perhaps even accompany it with acoustics to make it more appealing.

Resources Used

Lissajous Table in Processing – Daniel Shiffman

About Lissajous Curve – Wolfram

Lissajous Curve Discussions – Reddit

Reading Lissajous – Flemming, J., and A. Hornes.

Introduction

For this assignment, I tried to challenge myself a bit more by implementing a different concept. I spent some days thinking about what I could implement for this assignment, for example, I was thinking about making either an abstract pattern or a “musical face”. Although, one thought led to another, and I arrived at mechanical keyboards and the 2000s aesthetic!

Full-screen version: Full-screen version

The concept

Since in this week we saw the concepts of oscillation and, mainly, we had to be inspired by the artist Memo Akten, it was necessary to implement something similar. That means, almost synchronized movements via mathematical functions, and peaceful timed sounds.

As mentioned, I was thinking in implementing an abstract design, but I found myself more interested in creating a more cohesive canva. This cohesive design combines things I am fond of, which include 2000s aesthetics, nostalgia and computers.

Highlight of the code I am proud of

The main challenge of this code was to implement the sound system. I am not very proud of some parts of the code of this system, since I had to implement quick fixes. Nevertheless, one of the key features of this is that, according to the letter specified, it will assign a certain value to start the audio for the key, since all the sound effects are integrated into a single file.

Since all the system of the audio is distributed in the class Keycap, I will share the corresponding code.

class Keycap{
    constructor(x,y,letter){
        this.sound = loadSound("files/sound.ogg"); //The only solution to avoid overlaps and sudden sound stops was to do this.
        this.position = createVector(x,y);
        this.w = 40;
        this.h = 40;
        this.letter = letter;
        this.soundstart = 0;  //This variable will keep a value to jump the sound to play the sound.
        this.sound_played = 0;
        this.sound_time = 0; ///Check by how much time the sound played.
    }

    //Displays and also determines which sound to play according to the key cap.
    display(){
        push();
        noStroke();

        fill(235, 235);
        rect(this.position.x-5,this.position.y-2,this.w+10,this.h+10);

        fill(224, 223);
        rect(this.position.x,this.position.y,this.w,this.h);


        strokeWeight(30);
        textSize(23);
        fill(0);

        switch (this.letter) {
            case "q":
                text("q",this.position.x+15,this.position.y+25);
                this.soundstart = 2.90;
                break;
        
            case "w":
                text("w",this.position.x+15,this.position.y+25);
                this.soundstart = 4.90;
                break;

            case "e":
                text("e",this.position.x+15,this.position.y+25);
                this.soundstart = 5.90;
                break;
            
            case "r":
                text("r",this.position.x+15,this.position.y+25);
                this.soundstart = 6.90;
                break;

            case "t":
                text("t",this.position.x+15,this.position.y+25);
                this.soundstart = 7.90;
                break;

            case "y":
                text("y",this.position.x+15,this.position.y+25);
                this.soundstart = 8.90;
                break;

            default:
                break;
        }
        pop();
    }

    keypressed(){

        //Highlight that the key was pressed.
        push();
        strokeWeight(10);
        fill(235, 235, 235);
        rect(this.position.x-5,this.position.y-2,this.w+10,this.h+10);
        fill(235, 235, 235);
        rect(this.position.x,this.position.y,this.w,this.h);
        textSize(15);
        fill(0);
        pop();
    
        ///Then play a sound according to the letter.
        this.play_sound();
    }
  
    play_sound(){
      if (this.sound_played == 0){
        this.sound.play();
        this.sound.jump(this.soundstart);
        this.sound_played = 1;
      } 
    }
  
    stop_sound(){
        this.sound.stop();
        this.sound_played = 0;
      }
  
}

In a very summarized version, what is happening is the following:

• • • According to the letter specified when creating the class, and in the constructor, it will go through a switch() case to determine the start point of the audio.
    • Once one of the moving rectangles enters one of the key caps (or the range of it), will activate the function keypressed().
    • Once keypressed() is started, it changes the visual design of the key caps for a short moment, to then play the sound via the function play_sound().
    • Once the function is called, it determines if the audio is currently playing via the variable this.sound_played, and once it is determined that it has not started, it will play using the specific start point. Likewise, to avoid overlapping, the audio then assigns this.sound_played to 1.
      
    • Once the moving rectangle leaves the area of the key cap, it calls the function stop_sound().

Reflection

Compared to last assignments, I am happy with the end result. It feels that the ideas that I wanted to implement on my mind could become real. Nevertheless, I would say that for future assignments I would like to improve upon the code, since I feel it is a bit redundant this time, as well as not very optimized.

References

1. 1. 17.3: Timing, Jumps and Cues – p5.js Sound Tutorial
   2. CherryMX Black – ABS keycaps
   3. JavaScript Switch Statement
   4. Late-night Sim City 2000
   5. text()
   6. Where can I get a windows keycap that looks like this?

 

Concept:

For this project, I was inspired by the Memo Akten Simple Harmonic Motion project. What stood out to me in this project was the sound and how particles would change if they approached a different line or object. For this project, I decided to experiment with a Dancing wave that would function similarly.

Highlight of code:

I had so many challenges in this code and debugging and figuring out the logic behind the functionality took me some time. There are many parts that I am proud of in this code. I am particularly the flow I created of the animated video.

rotate(PI / 3);

  for (let i = 0; i < angles.length; i++) {
    beginShape();
    for (let i = 0; i < angles.length; i++) {
      let y = map(sin(angles[i]), -1, 1, -150, 150);
      let x = map(i, 0, angles.length, -350, 350);

      let particleSize = r * 0.9; // Default particle size

      // Check if the particle touches the line (y is close to 0)
      if (abs(y) < 5) {
        //draw the shape gradually on canvas

        fill(touchedLineColor); // Change color when touching
        particleSize = r * 2.5; // Increase the size of the particle
      } else {
        fill(getWaveColor(y)); // Get color based on y value
      }

      stroke(getWaveColor(y));
      strokeWeight(1);
      line(cos(x), 0, x, y); // Draw line from middle to particle
      noStroke();
      circle(x, y, particleSize); // Draw the particle
      noFill();
      vertex(x, y);

      endShape();
    }
 angleV[i] = constrain(angleV[i], -0.01, 0.5);
    angles[i] -= angleV[i];
    angleV[i] += angleA[i];
  }
}

The video starts by drawing a simple line that has a sort of random noise. This line is the point of transformation of the color of particles when they touch it. Then, I drew the wave, which gradually increases its acceleration over time. I initially wanted the wave to appear on the canvas slowly before the animation started. I tried so many ways to do that, for instance, making a static wave, then adding the animated one on it, and creating nested loops; however, none of the ways worked, so I decided to improve on it in future work.
Additionally, I am proud of being able to check if the particles are close to the invisible line so that they change color and size. Even though, though it has a simple logic, figuring it out took some time.

Embedded Sketch:

Future Work:
For future work, I want to play more with the wave’s acceleration so that it would accelerate and decelerate when I want it. I also want to experiment with different waves to see the different esthetics I can create, and finally, adding the wave gradually into the canvas would be a strong attribute to the design of this animation.

Reference:

Sketch: 

Example drawing

Concept Inspiration

My project was created with a focus on intersection of art and mathematics. I was particularly intrigued by the concept of Fourier transforms and their ability to break down complex patterns into simpler components. After seeing various implementations of Fourier drawings online, I was inspired to create my own version with a unique twist. I wanted to not only recreate drawings using Fourier series but also add an interactive coloring feature that would make the final result more visually appealing and engaging for users.

Process of Development

I began by following the Coding Train tutorial on Fourier transforms to implement the basic drawing and reconstruction functionality. This gave me a solid foundation to build upon. Once I had the core Fourier drawing working, I shifted my focus to developing the coloring aspect, which became my main contribution to the project.

The development process was iterative. I started with a simple algorithm to detect different sections of the drawing and then refined it over time. I experimented with various thresholds for determining when one section ends and another begins and worked on methods to close gaps between sections that should be connected. Even now, it is far from perfect but it does what I initially intended to.

How It Works

The application works in several stages:

1. User Input: Users draw on a canvas using their mouse or touchscreen.
2. Fourier Transform: The drawing is converted into a series of complex numbers and then transformed into the frequency domain using the Discrete Fourier Transform (DFT) algorithm. This part is largely based on the Coding Train tutorial.
3. Drawing Reconstruction: The Fourier coefficients are used to recreate the drawing using a series of rotating circles (epicycles). The sum of all these rotations traces out a path that approximates the original drawing.
4. Section Detection: My algorithm analyzes the original drawing to identify distinct sections based on the user’s drawing motion.
5. Coloring: Each detected section is assigned a random color.
6. Visualization: The reconstructed drawing is displayed, with each section filled in with its assigned color.
7. Re: User is able to start the process again and creature unique coloring look.
8. Save: User is able to save the image to their local machine.

Code I’m Proud Of

While the Fourier transform implementation was based on the tutorial, I’m particularly proud of the section detection and coloring algorithm I developed:

 

function detectSections(points) {
  let sections = [];
  let currentSection = [];
  let lastPoint = null;
  const distanceThreshold = 20;

  // Iterate over each point in the drawing
  for (let point of points) {
    if (lastPoint && dist(point.x, point.y, lastPoint.x, lastPoint.y) > distanceThreshold) {
      // If the distance between the current point and the last point exceeds the threshold,
      // consider it a new section and push the current section to the sections array
      if (currentSection.length > 0) {
        sections.push(currentSection);
        currentSection = [];
      }
    }
    // Add the current point to the current section
    currentSection.push(point);
    lastPoint = point;
  }

  // Push the last section to the sections array
  if (currentSection.length > 0) {
    sections.push(currentSection);
  }

  // Close gaps between sections by merging nearby sections
  return closeGapsBetweenSections(sections, distanceThreshold * 2);
}

function closeGapsBetweenSections(sections, maxGapSize) {
  let mergedSections = [];
  let currentMergedSection = sections[0];

  // Iterate over each section starting from the second section
  for (let i = 1; i < sections.length; i++) {
    let lastPoint = currentMergedSection[currentMergedSection.length - 1];
    let firstPointNextSection = sections[i][0];

    if (dist(lastPoint.x, lastPoint.y, firstPointNextSection.x, firstPointNextSection.y) <= maxGapSize) {
      // If the distance between the last point of the current merged section and the first point of the next section
      // is within the maxGapSize, merge the next section into the current merged section
      currentMergedSection = currentMergedSection.concat(sections[i]);
    } else {
      // If the distance exceeds the maxGapSize, push the current merged section to the mergedSections array
      // and start a new merged section with the next section
      mergedSections.push(currentMergedSection);
      currentMergedSection = sections[i];
    }
  }

  // Push the last merged section to the mergedSections array
  mergedSections.push(currentMergedSection);
  return mergedSections;
}

This algorithm detects separate sections in the drawing based on the distance between points, allowing for intuitive color separation. It also includes a method to close gaps between sections that are likely part of the same continuous line, which helps create more coherent colored areas.

Challenges

The main challenge I faced was implementing the coloring feature effectively. Determining where one section of the drawing ends and another begins was not straightforward, especially for complex drawings with overlapping lines or varying drawing speeds. I had to experiment with different distance thresholds to strike a balance between oversegmentation (too many small colored sections) and undersegmentation (not enough color variation).

Another challenge was ensuring that the coloring didn’t interfere with the Fourier reconstruction process. I needed to make sure that the section detection and coloring were applied to the original drawing data in a way that could be mapped onto the reconstructed Fourier drawing.

Reflection

This project was a valuable learning experience. It helped me understand how to apply mathematical concepts like Fourier transforms to create something visually interesting and interactive. While the core Fourier transform implementation was based on the tutorial, developing the coloring feature pushed me to think creatively about how to analyze and segment a drawing. Nevertheless, following tutorial also helped me comprehend mathematical side of the concept.

I gained insights into image processing techniques, particularly in terms of detecting continuity and breaks in line drawings. The project also improved my skills in working with canvas graphics and animation in JavaScript.

Moreover, this project taught me the importance of user experience in mathematical visualizations. Adding the coloring feature made the Fourier drawing process more engaging and accessible to users who might not be as interested in the underlying mathematics.

 

Future Improvements

Looking ahead, there are several ways I could enhance this project:

1. User-defined Colors: Allow users to choose their own colors for sections instead of using random colors.
2. Improved Section Detection: Implement more sophisticated algorithms for detecting drawing sections, possibly using machine learning techniques to better understand the user’s intent.
3. Smooth Color Transitions: Add an option for smooth color gradients between sections instead of solid colors.
4. Interactivity: Allow users to manipulate the colored sections after the drawing is complete, perhaps by dragging section boundaries or merging/splitting sections.
5. Improved interface: make interface look more modern and polished.

References

1. The Coding Train’s Fourier Transform tutorial by Daniel Shiffman
2. P5.js documentation and examples
3. Various online sources

My goal was to use p5.js to build a dynamic visualisation of Simple Harmonic Motion (SHM), inspired by Memo Akten. Vibrant circles oscillate vertically in the sketch, adding to its visual attractiveness with a trace effect. The intention was to play with colour and motion while capturing the essence of oscillation’s beauty.

//Assignment 4 - SP
let numCircles = 15;
let circles = [];
let amplitude = 50; // maximum displacement
let frequency = 0.08; // speed of the motion

function setup() {
  createCanvas(400, 400);
  background(0); //
  for (let i = 0; i < numCircles; i++) {
    circles.push({
      x: width / 2 + (i - numCircles / 2) * 30,
      angle: random(TWO_PI),
      color: color(random(255), random(255), random(255)),
    });
  }
}

function draw() {
  fill(0, 20); // semi-transparent black
  rect(0, 0, width, height);

  for (let circle of circles) {
    // calculate y position using sine function
    let y = height / 2 + amplitude * sin(circle.angle);

    fill(circle.color);
    noStroke();
    ellipse(circle.x, y, 30, 30);

    // increment the angle to create motion
    circle.angle += frequency;
  }
}

Highlighted Code:

One part I’m particularly proud of is the fading background, which enhances the trace effect. The use of fill(0, 50) allows for gradual fading and creates a more immersive experience as the circles move.

Reflection:

This project taught me a lot about using p5.js for visualizations. I encountered challenges with managing the transparency and ensuring the circles maintained their vibrancy against the fading background.

For future iterations, I’d like to:

• Experiment with varying the amplitude and frequency based on user input.
• Add interactivity, such as changing colors or shapes when the mouse hovers over the circles.
• Explore other wave patterns beyond simple harmonic motion.

Concept:

For this week’s assignment, I used simple harmonic motion to create a cyclone-looking animation.

Sketch:

Code snippet:

// circles re-iteration
  for (let i = 0; i < total; i++) {
    let y = map(sin(angles[i]), -1, 1, -100, 100);
    let x = map(i, 0, total, -200, 200);
    
    push(); // saves the current state
    
    stroke(235);
    rotate(angles[i]);
    circle(y, x, r);

    pop(0); //pop() restores the previous state after rotation is complete

    // incrementation
    let increment = TWO_PI / 60;
    angles[i] += increment;
  }

This part of the code continuously draws the circles to create the animation. I used push() and pop() to not affect other parts of the code.

Reflection and Improvements:

• One of the difficulties I faced was getting the background to be a blue-ish color while also having it re-drawn to give the animation a fading effect.
• For improvement, I would want it to look more like a cyclone and have some sort of user interaction. I would also add sounds to it.

Check out the sketch here!

Concept & Inspiration

This weekend, a lot of things happened. Because some unfortunate things happened, I decided to re-watch a few Marvel movies. After this I got an inspiration for Week 3’s assignment to create an eye that looks like Dormamu’s, the main antagonist of Doctor Strange.

Sketch

How it works

A particle class called Particle takes a few arguments (position, velocity, color). Overall, the class defines the behavior of a particle in the sketch. It contains a display() method that checks whether the particle is in a certain position, within a certain distance from the attractor, and whether it should be reflected or not. The particle’s path is visualized as a line between its current and previous positions.

class Particle {
  constructor(pos, v, color) {
    this.pos = pos; //Current Position
    this.pos_before = pos; //Previous Position
    this.v = v; //Velocity
    this.a = createVector(0, 0); //Acceleration, starting at 0,0
    this.color = color; //Color
  }
display() {
push();
stroke(this.color.x, this.color.y, this.color.z); //Stroke color based on XYZ
line(this.pos.x, this.pos.y, this.pos_before.x, this.pos_before.y); //Line from current to prev. pos this gives a trail effect.
pop();

If a particle comes into contact with an attractor (the one in the middle), a reflection occurs:

1. The particle is moved to the surface of the attractor by adjusting its position vector.
2. The velocity vector is  (multiplied by -1), and the particle is slightly rotated to simulate a reflection angle.
3. The velocity is also scaled down by multiplying 0.9 to simulate some loss of energy upon reflection.

The main sketch sets up the canvas, initializes particles, and controls their movement under the influence of gravity and collision dynamics. A central attractor is created as a rotating ring of gravitational points. Particles are randomly spawned outside the central attractor and move according to gravitational forces. Each particle reacts to the gravitational field by accelerating toward attractor points, and each particle can reflect off the surfaces of attractors if they collide.

Challenges and things to improve

I wanted to create a particle simulation that does not rely on particle systems. As an alternative, I relied mostly on arrays. Due to this, some calculations required me to deep dive into a bit of mathematics more than I initially planned. Also, initially, I wanted to make two eyes, but having two attractors provided to break the entire simulation, perhaps part of n-body problem characteristics. Thus, I did not want to go further into that concept.

Resources Used

Mutual Attraction – Daniel Shiffman

Inverse Square Law – Derek Owens

angleBetween – p5.js

rotate – p5.js