Assignment 3 – Pavly Halim

Concept 

The concept of using Perlin noise to simulate natural, fluid motion in the particles is inspired. Perlin noise generates a more natural and organic flow compared to purely random movement, as it ensures smooth transitions and variations. This approach is commonly used in generative art and simulations to mimic natural phenomena like smoke, fire, and flowing water.

Code Highlight 

// Update the particle's position
move() {
  // Calculate a noise value for organic movement
  let noiseValue = noise(this.noiseOffset);
  this.pos.x += map(noiseValue, 0, 1, -1, 1) * this.rate;
  this.pos.y += map(noiseValue, 0, 1, -1, 1) * this.vertRate;
  
  // Wrap the particle around edges to make it looks like space
  if (this.pos.x > width) this.pos.x = 0;
  if (this.pos.x < 0) this.pos.x = width;
  if (this.pos.y > height) this.pos.y = 0;
  if (this.pos.y < 0) this.pos.y = height;
      
  // Increment the noise offset for the next frame
  this.noiseOffset += 0.01;
}

The move() function in the particle system utilizes Perlin noise to simulate organic and fluid motion, creating a natural, lifelike behavior in each particle. By calculating a smoothly varying noise value and mapping it to influence the particle’s velocity, the function ensures each particle moves in a unique, seamless manner that mimics natural phenomena. Additionally, the function incorporates edge wrapping to create a continuous, boundless effect on the canvas, enhancing the illusion of a natural, endless environment. This innovative use of Perlin noise, combined with the edge wrapping technique, sets the function apart by providing a sophisticated method to generate complex, visually appealing animations that evoke the randomness and elegance of the natural world.

Embedded Sketch

Code

let particles = [];

function setup() {
  createCanvas(600, 600);
    // Initialize particles and add them to array
  for (let i = 0; i < 400; i++) {
    particles.push(new Particle());
  }
}

function draw() {
  background(0);
    // Loop through all particles to display and move them
    for (let particle of particles) {
        particle.display();
        particle.move();
    }
}

// Define the Particle class
class Particle {
  constructor() {
    // Set initial position to a random point within the canvas
    this.pos = createVector(random(width), random(height));
    this.size = random(0.5, 2);
    //Set random transparency value
    this.alpha = random(150, 255);
    this.noiseOffset = random(0, 1000);
    this.rate = random(-1, 1); 
    this.vertRate = random(-1, 1); 
  }
  
  // Display the particle on the canvas
  display() {
    noStroke();
    fill(255, this.alpha);
    ellipse(this.pos.x, this.pos.y, this.size);
  }

  // Update the particle's position
  move() {
    // Calculate a noise value for organic movement
    let noiseValue = noise(this.noiseOffset);
    this.pos.x += map(noiseValue, 0, 1, -1, 1) * this.rate;
    this.pos.y += map(noiseValue, 0, 1, -1, 1) * this.vertRate;
    
    // Wrap the particle around edges to make it looks like space
    if (this.pos.x > width) this.pos.x = 0;
    if (this.pos.x < 0) this.pos.x = width;
    if (this.pos.y > height) this.pos.y = 0;
    if (this.pos.y < 0) this.pos.y = height;
        
    // Increment the noise offset for the next frame
    this.noiseOffset += 0.01;
  }
}

 

Reflection

I was creating this particle system with p5.js, especially using Perlin noise for fluid motion. This approach transformed a basic animation into a mesmerizing display that closely mirrors the elegance of natural phenomena. The seamless movement and edge wrapping created an endless, captivating visual experience. This project pushed the boundaries of what I thought possible with code and deepened my appreciation for programming as a form of creative expression.

Future work

Looking ahead, I’m excited to explore further possibilities with this particle system, such as introducing interactions between particles to simulate forces like attraction and repulsion, adding color gradients for a more dynamic visual effect, and experimenting with different noise algorithms to vary the motion patterns.