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…


This content originally appeared on DEV Community and was authored by 🦄 Maris Botero✨

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.


This content originally appeared on DEV Community and was authored by 🦄 Maris Botero✨


Print Share Comment Cite Upload Translate Updates
APA

🦄 Maris Botero✨ | Sciencx (2024-08-27T19:05:47+00:00) Creating a Dynamic Geometric Animation with p5.js. Retrieved from https://www.scien.cx/2024/08/27/creating-a-dynamic-geometric-animation-with-p5-js/

MLA
" » Creating a Dynamic Geometric Animation with p5.js." 🦄 Maris Botero✨ | Sciencx - Tuesday August 27, 2024, https://www.scien.cx/2024/08/27/creating-a-dynamic-geometric-animation-with-p5-js/
HARVARD
🦄 Maris Botero✨ | Sciencx Tuesday August 27, 2024 » Creating a Dynamic Geometric Animation with p5.js., viewed ,<https://www.scien.cx/2024/08/27/creating-a-dynamic-geometric-animation-with-p5-js/>
VANCOUVER
🦄 Maris Botero✨ | Sciencx - » Creating a Dynamic Geometric Animation with p5.js. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/27/creating-a-dynamic-geometric-animation-with-p5-js/
CHICAGO
" » Creating a Dynamic Geometric Animation with p5.js." 🦄 Maris Botero✨ | Sciencx - Accessed . https://www.scien.cx/2024/08/27/creating-a-dynamic-geometric-animation-with-p5-js/
IEEE
" » Creating a Dynamic Geometric Animation with p5.js." 🦄 Maris Botero✨ | Sciencx [Online]. Available: https://www.scien.cx/2024/08/27/creating-a-dynamic-geometric-animation-with-p5-js/. [Accessed: ]
rf:citation
» Creating a Dynamic Geometric Animation with p5.js | 🦄 Maris Botero✨ | Sciencx | https://www.scien.cx/2024/08/27/creating-a-dynamic-geometric-animation-with-p5-js/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts