How to create animation of color changing and moving cube using p5.js ?

Last Updated : 20 Feb, 2023

In this article, we are going to see how to create the animation of color-changing and rotating cubes using p5.js. p5.js is a JavaScript library that helps in creating graphics that users can interact with and is easy to use and helps in visualizing different kinds of graphics and animations. This article will show you how to create the animation of color-changing and rotating cubes using p5.js.

Approach:

The approach to creating this animation involves the following steps:

Initialize variables: Declare variables for the rotation angle, color transition, position of the cube, speed of the cube, and an array of colors.
Set up the canvas: In the “setup()” function, create the canvas using “createCanvas(400, 400, WEBGL)”, and set the target color and the initial color of the cube.
Draw the cube: In the “draw()” function, clear the background and set up the lighting. Translate and rotate the cube, fill it with the current color, and draw a box with a side length of 200.
Rotate the cube: Update the rotation angle by a small value in each frame, so that the cube rotates around the x, y, and z axes.
Transition color: In each frame, update the current color by interpolating the current color and the target color using “lerpColor()”. If the current frame count is a multiple of 60, change the target color to the next color in the array of colors.
Move the cube: Update the position of the cube by adding the “cubeSpeed” to “cubeX”, “cubeY”, and “cubeZ” in each frame. Check if the cube has reached the edge of the canvas and reverse the “cubeSpeed” if necessary so that the cube moves in the opposite direction.
Repeat: Call the “draw()” function continuously in each frame, so that the cube rotates, transitions color, and moves around the canvas continuously.

Used Functions:

The following functions are involved in creating a 3D cube changing color and moving around the canvas in p5.js:

setup() function: This function sets up the canvas and initializes the variables.
draw() function: This function draws the cube, rotates it, transitions its color, and moves it around the canvas.
rotateX(), rotateY(), and rotateZ() functions: These functions rotate the cube around the x, y, and z axes, respectively.
lerpColor() function: This function interpolates between two colors and returns the result as a color value.
fill() function: This function sets the fill color for subsequent shapes.
box() function: This function draws a 3D cube with a specified side length.
translate() function: This function moves the origin of the coordinate system to a new location.
ambientLight() and pointLight() functions: These functions create lighting for the 3D scene.
background() function: This function sets the background color for the canvas.

Example: In this example we are going to create the animation of color changing and rotating cube, using p5.js.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Animation of color changing and moving cube</title> 
    <script src= 
        "https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"> 
    </script> 
  
</head> 
  
<body> 
    <h2 style="color: green;"> 
        GeeksforGeeks 
    </h2> 
  
    <script> 
        let angle = 0; 
        let colorIndex = 0; 
        let targetColor; 
        let currentColor; 
        let cubeX = 0; 
        let cubeY = 0; 
        let cubeZ = 0; 
        let cubeSpeed = 0.05; 
        let colors = [[255, 0, 0], 
        [0, 255, 0], 
        [0, 0, 255], 
        [255, 255, 0], 
        [0, 255, 255], 
        [255, 0, 255], 
        [255, 255, 255], 
        ]; 
  
        function setup() { 
            createCanvas(300, 300, WEBGL); 
            targetColor = color(colors[colorIndex][0], 
                colors[colorIndex][1], colors[colorIndex][2]); 
            currentColor = targetColor; 
        } 
  
        function draw() { 
            background(0); 
            noStroke(); 
            lights(); 
  
            translate(cubeX, cubeY, cubeZ); 
            rotateX(angle); 
            rotateY(angle * 1.3); 
            rotateZ(angle * 0.7); 
  
            currentColor = lerpColor(currentColor, targetColor, 0.1); 
            fill(currentColor); 
            box(100); 
  
            angle += 0.03; 
  
            if (frameCount % 60 === 0) { 
                colorIndex = (colorIndex + 1) % colors.length; 
                targetColor = color(colors[colorIndex][0], 
                    colors[colorIndex][1], colors[colorIndex][2]); 
            } 
  
            cubeX += cubeSpeed; 
            if (cubeX > width / 10 || cubeX < -width / 10) { 
                cubeSpeed = -cubeSpeed; 
            } 
            cubeY += cubeSpeed; 
            if (cubeY > height / 10 || cubeY < -height / 10) { 
                cubeSpeed = -cubeSpeed; 
            } 
            cubeZ += cubeSpeed; 
            if (cubeZ > width / 10 || cubeZ < -width / 10) { 
                cubeSpeed = -cubeSpeed; 
            } 
        } 
    </script> 
</body> 
  
</html> 