Creating a Dynamic Geometric Animation in ps

Introduction

In this tutorial, you will learn how to create a dynamic and colorful geometric animation using p5.js. This animation symbolizes the idea that "the world is full of fabulous and incredible people doing wonderful things." 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.

The above is the detailed content of Creating a Dynamic Geometric Animation in ps. For more information, please follow other related articles on the PHP Chinese website!