如何使用p5.js创建颜色变化和移动的立方体动画

在本文中，我们将看到如何使用p5.js创建颜色改变和旋转立方体的动画。p5.js是一个JavaScript库，帮助创建用户可以交互的图形，并且易于使用，有助于可视化不同类型的图形和动画。本文将向您展示如何使用p5.js创建颜色改变和旋转立方体的动画。

方法：

创建此动画的方法包括以下步骤：

初始化变量： 声明用于旋转角度、颜色过渡、立方体位置、立方体速度和颜色数组的变量。
设置画布： 在“setup()”函数中，使用“createCanvas(400, 400, WEBGL)”创建画布，并设置立方体的目标颜色和初始颜色。
绘制立方体： 在“draw()”函数中，清除背景并设置光照。平移和旋转立方体，使用当前颜色填充它，并绘制一个边长为200的立方体。
旋转立方体： 每个帧中更新旋转角度，使立方体围绕x、y和z轴旋转。
颜色过渡： 每个帧中，使用“lerpColor()”对当前颜色和目标颜色进行插值来更新当前颜色。如果当前帧计数是60的倍数，则将目标颜色更改为颜色数组中的下一个颜色。
移动立方体： 在每个帧中，通过将“cubeSpeed”添加到“cubeX”、“cubeY”和“cubeZ”来更新立方体的位置。检查立方体是否已达到画布边缘，并在必要时颠倒“cubeSpeed”，使立方体向相反方向移动。
重复： 在每个帧中连续调用“draw()”函数，使立方体持续旋转、过渡颜色并在画布上移动。
使用的函数：

以下函数用于在p5.js中创建在画布上改变颜色并移动的三维立方体：

setup() 函数： 这个函数设置画布并初始化变量。
draw() 函数： 这个函数绘制立方体，旋转它，渐变它的颜色，并在画布上移动它。
rotateX()、rotateY() 和 rotateZ() 函数： 这些函数分别围绕 x、y 和 z 轴旋转立方体。
lerpColor() 函数： 这个函数在两种颜色之间进行插值，并将插值结果作为颜色值返回。
fill() 函数： 这个函数为后续形状设置填充颜色。
box() 函数： 这个函数绘制一个具有指定边长的三维立方体。
translate() 函数： 这个函数将坐标系的原点移动到一个新位置。
ambientLight() 和 pointLight() 函数： 这些函数为三维场景创建光照。
background() 函数： 这个函数设置画布的背景颜色。

示例： 在这个示例中，我们将使用 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>

输出：

如何使用p5.js创建颜色变化和移动的立方体动画