如何使用 p5.js 绘制简单的动画？

动画是一种方法，其中以特定方式组合图像集合并进行处理，然后将它们显示为运动图像。建筑动画使屏幕上的对象看起来是活的。

在本文中，我们将学习在 p5.js 中使用线条、矩形和椭圆制作房屋的各个部分来制作房屋的简单动画。

方法：

• 制作一个列表来存储房子的所有顶点。
• 声明两个变量 iter 和 counter。
• 设置输出窗口大小、颜色和背景的函数setup()，初始化iter和counter的值为1，初始化顶点列表。
• 设置添加描边、描边粗细的函数draw。
• 如果是的话，做一个 if 条件来检查 iter 是否将计数器增加 0.05 并将计数器的 ceil 值作为 iter ，如果没有退出厕所。
• 函数添加房子的顶点，作为 addVertices() 给出线的起点和终点。
• 现在制作函数来绘制房屋的各个部分：
• 制作函数以在房屋中绘制垂直和水平线。
• 制作绘制方形窗口的函数
• 制作函数来绘制门。
• 使函数绘制圆形窗口。
• 制作绘制烟囱的函数。
• 经过这一步，现在创建一个开关盒来逐步添加房子的所有部分。

下面是上述方法的实现：

Javascript

// List to store all the vertices
let vertices = [];
 
// Variable declared
var iter;
var counter;
 
// Function to set up output window
function setup() {
 
    // Size of output window
    createCanvas(600, 600);
 
    // Fill the color
    fill(31);
 
    // Background of output window
    background(31);
 
    // Put the value of variables as 1
    iter = 1;
    counter = 1;
 
    // Initialize the list of vertices
    addVertices();
}
 
// Set the draw function
function draw() {
 
    stroke(255);
    strokeWeight(4);
    step();
 
    // Condition to check within bound
    if (iter < 11) {
 
        // Increase counter everytime
        counter += 0.05;
 
        // Set the iter variable to the
        // floor value of counter
        iter = floor(counter);
    }
    else {
 
        // If iter increases by 11 then
        // stop the loop
        noLoop();
    }
}
 
// Function to add vertices of house giving
// start and end point of line
function addVertices() {
    vertices.push(new p5.Vector(100, 300));
    vertices.push(new p5.Vector(340, 300));
    vertices.push(new p5.Vector(40, 380));
    vertices.push(new p5.Vector(160, 380));
    vertices.push(new p5.Vector(400, 380));
    vertices.push(new p5.Vector(40, 550));
    vertices.push(new p5.Vector(160, 550));
    vertices.push(new p5.Vector(400, 550));
}
 
// Function to draw lines in house
function drawLine(a, b) {
    line(vertices[a].x, vertices[a].y,
        vertices[b].x, vertices[b].y);
}
 
// Function to draw gate
function addGate() {
    rectMode(CENTER);
    rect(100, 500, 70, 100);
}
 
// Function  to draw window
function addWindow() {
    rect(280, 430, 40, 30);
}
 
// Function to add  circular window
function addOculus() {
    ellipse(100, 340, 20, 20);
}
 
// Function to add Chimney
function addChimney() {
    rect(320, 295, 16, 20);
    ellipse(320, 285, 16, 10);
}
 
// Function to draw parts of
// house step by step
function step() {
    switch (iter) {
        case 1:
            drawLine(5, 6);
            break;
        case 2:
            drawLine(6, 7);
            break;
        case 3:
            drawLine(2, 5);
            drawLine(3, 6);
            break;
        case 4:
            drawLine(4, 7);
            break;
        case 5:
            drawLine(2, 3);
            drawLine(3, 4);
            break;
        case 6:
            drawLine(0, 2);
            drawLine(0, 3);
            drawLine(1, 4);
            break;
        case 7:
            drawLine(0, 1);
            break;
        case 8:
            addGate();
            break;
        case 9:
            addWindow();
            break;
 
        case 10:
            addOculus();
            break;
        case 11:
            addChimney();
            break;
    }
}

输出：