如何在 p5.js 中制作动画？

Question

我正在尝试为线条设置动画，但我不知道如何proceed.The我目前写的代码是这样的。

 function setup() {
  createCanvas(400, 400);
  textSize(8);
}
function temp(){
  strokeWeight(5);
  point(150,108);
  point(56,75);
  point(121,185);
  strokeWeight(1);
  line(150,108,56,75);
  line(56,75,121,185);
}
function draw() {
  clear();
  background(220);
  translate(35,60);
  temp();
}

我想要的是线条按照绘制的顺序一条一条出现，当它们绘制时屏幕清晰，然后再一条一条基本上应该按顺序出现。我不知道该怎么做。

GIF ===>https://thumbs.gfycat.com/SnoopyWildDuckbillcat.webp

我得到的输出是这样的 The output

Answer 1

创建一个对象数组，这些对象具有坐标并知道如何绘制。在 draw 函数中你可以遍历数组，根据你的逻辑修改每个对象的坐标并调用它们的 draw 方法。

在绘图函数中调用背景，您可以删除清除调用，因为背景会绘制在线条上

Answer 2

创建点列表：

var pointList = [[150, 108], [56, 75], [121, 185]]

设置帧率 frameRate():

frameRate(5);

在循环中的多个点之间画线。要绘制的点数取决于frameCount。使用取模 (%) 运算符计算点数（% 运算符计算除法的余数：

function temp(){
    var noOfPoints = frameCount % (pointList.length+1);
    strokeWeight(5);
    for (var i = 0; i < noOfPoints; i++) {
        point(...pointList[i]);
    }
    strokeWeight(1);
    for (var i = 0; i < noOfPoints-1; i++) {
        line(...pointList[i], ...pointList[i+1]);
    }
}

示例：

var pointList = []

function setup() {
    createCanvas(220, 220);
    frameRate(5);
    for (var i = 0; i <= 10; i++) {
        var angle = TWO_PI * i / 10;
        var radius = i % 2 == 0 ? 100 : 50;
        pointList.push([radius * sin(angle), radius * -cos(angle)])
    }
}

function temp(){
    var noOfPoints = frameCount % (pointList.length+1);
    strokeWeight(5);
    for (var i = 0; i < noOfPoints; i++) {
        point(...pointList[i]);
    }
    strokeWeight(1);
    for (var i = 0; i < noOfPoints-1; i++) {
        line(...pointList[i], ...pointList[i+1]);
    }
}

function draw() {
    clear();
    background(220);
    translate(110, 110);
    temp();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>

如何在 p5.js 中制作动画？

How to animate in p5.js?

javascript

animation

p5.js