Creating a Dynamic Geometric Animation with p5.js

Introduction

In this tutorial, you will learn how to create a dynamic and colorful geometric animation using p5.js.The shapes will move randomly across the canvas, changing colors and creating a visually captivating effect.

---

Step 1: Setting Up Your Environment

1. Download p5.js:

   • Go to the p5.js website and download the latest version of p5.js.
   • Alternatively, you can use the online p5.js editor editor.p5js.org, which allows you to write and run your code directly in your browser.

2. Create a New Project:

   • If you’re using the online editor, create a new sketch by clicking on "New" in the top left corner.
   • If you’re coding locally, create a new HTML file and link the p5.js library.

---

Step 2: Writing the Basic Structure

Let’s start by setting up the basic structure of our p5.js sketch. This includes defining the setup() and draw() functions.

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();  // Disable stroke for the shapes
}

function draw() {
  background(30, 30, 60, 25);  // Dark background with transparency
}

Explanation:

• createCanvas(windowWidth, windowHeight);: This sets the canvas size to match your browser window.
• noStroke();: This removes the border from the shapes we will create.
• background(30, 30, 60, 25);: This sets the background color to a dark blue with some transparency, creating a trailing effect for the shapes.

Step 3: Adding Dynamic Geometric Shapes

Now, let’s add the code to create random shapes with varying colors, positions, and sizes.

function draw() {
  background(30, 30, 60, 25); // Dark background with transparency

  for (let i = 0; i < 5; i++) {
    let x = random(width);
    let y = random(height);
    let size = random(20, 80);
    let colorR = random(255);
    let colorG = random(255);
    let colorB = random(255);
    let shapeType = random(['ellipse', 'rect', 'triangle']);

    fill(colorR, colorG, colorB, 150); // Set fill color with some transparency

    if (shapeType === 'ellipse') {
      ellipse(x, y, size, size);
    } else if (shapeType === 'rect') {
      rect(x, y, size, size);
    } else if (shapeType === 'triangle') {
      triangle(x, y, x + size, y, x + size / 2, y - size);
    }
  }
}

Explanation:

• Randomized Variables:

  • x and y determine the position of each shape on the canvas.
  • size controls the size of each shape.
  • colorR, colorG, colorB generate random values for the red, green, and blue components of the fill color.
  • fill(colorR, colorG, colorB, 150);: This sets the fill color with a slight transparency.

• Shape Types:

  • ellipse(x, y, size, size);: Draws a circle or ellipse.
  • rect(x, y, size, size);: Draws a square or rectangle.
  • triangle(x, y, x + size, y, x + size / 2, y - size);: Draws a triangle.

Step 4: Making the Animation Responsive

To make sure the canvas resizes with the window, add the following function:

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Step 5: Running Your Sketch

• If you’re using the p5.js online editor, simply press the "Play" button to see your animation.
• If you’re coding locally, open your HTML file in a web browser to view the animation.