Assignment 2 – Pavly Halim

The Concept

I created a dynamic grid of squares that continuously change in color and size, creating a mesmerizing animation effect. Perlin noise, sine, and cosine functions influence the grid’s behavior, which modulates the color and the size of each square in the grid based on the frame count variable. This results in a fluid, ever-changing pattern that is both visually appealing and technically intriguing.

Highlight of the Code

What stands out in the code is the use of mathematical functions to drive the animation’s dynamics. Specifically, the combination of Perlin noise, sin, and cos functions with the frameCount variable to alter the color and size of the squares over time showcases a sophisticated understanding of how to create complex visual effects with relatively simple code.

// Calculate noise-based angle and size variations using Perlin noise
let noiseFactor = noise(i * animationSpeed, j * animationSpeed, frameCount * animationSpeed);
let angle = noiseFactor * 360;

//more color and size variations using Sine Cosine 
//https://p5js.org/examples/math-sine-cosine.html
let colorShift = (sin(angle) + 1) * 128;
let sizeShift = (cos(angle) + 1) * (gridSize / 0.1);

Embedded Sketch

 

let gridSize = 20;
let animationSpeed = 0.01;

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES);
  noStroke();
}

function draw() {
  background(220);
  
  //nested for loop to go through each grid position
  for (let i = 0; i < width; i += gridSize) {
    for (let j = 0; j < height; j += gridSize) {
      push();
      
      // Calculate noise-based angle and size variations using Perlin noise
      let noiseFactor = noise(i * animationSpeed, j * animationSpeed, frameCount * animationSpeed);
      let angle = noiseFactor * 360;
      
      //more color and size variations using Sine Cosine 
      //https://p5js.org/examples/math-sine-cosine.html
      let colorShift = (sin(angle) + 1) * 128;
      let sizeShift = (cos(angle) + 1) * (gridSize / 0.1);
      
      // Apply transformations
      translate(i + gridSize / 2, j + gridSize / 0.5);
      rotate(angle);

      fill(colorShift, 100, 150, 200);
      rect(-sizeShift / 2, -sizeShift / 2, sizeShift, sizeShift);

      pop();
    }
  }
}

Reflection

The integration of Perlin noise into the animation brings a significant enhancement in terms of visual and organic dynamics. Moving away from the predictable cycles of sine and cosine functions, Perlin noise introduces a natural, fluid variability to the movement and transformation of the grid. It showcases the power of combining mathematical concepts with computer graphics to simulate natural phenomena.

Future Work

Develop an interactive landscape where users can influence the flow and form of the animation through mouse movements, clicks, or keyboard inputs, simulating natural elements like wind or water currents.