javascript - 绘制简单的对象并制作动画

Question

在 P5.js 中创建一个运行以下动画的程序：

1. 创建一个宽度为 400 和高度为 500 的画布，在其中使用函数绘制 3 个机器人，其中 2 个将被动画化，以便它们在屏幕上移动（见下文）

2. 绘制机器人的函数应该只使用参数（如果需要函数本地的变量），它不应该使用任何全局变量。机器人有一个方形的头，身体是一个长方形，手臂应该是水平然后垂直，腿是垂直的，它的脚上有轮子。参数应该是头部的“宽度”（它与身体的宽度相同），身体的“高度”，以及左上角的“x”和“y”坐标头。机器人

3. 通过调用绘制机器人的函数创建 3 个机器人，其中两个大小相同但在屏幕上的 x 和 y 坐标不同，第三个机器人应该比前两个大，并且在屏幕上的其他位置（没有机器人之间的重叠）。

4. 通过让较小的机器人和较大的机器人向左移动直到它们到达屏幕的末端，然后它们应该向右移动直到它们到达屏幕的另一个末端，依此类推，左右移动，从而为较小的机器人和较大的机器人设置动画。小型机器人的移动速度是大型机器人的两倍。

我无法复制机器人。

function setup() {
    createCanvas(400, 500);
}

function draw() {
    background(220);
    rect(100, 100, 50, 50);
    line(125, 150, 125, 170);
    rect(100, 170, 50, 100);
    line(80, 170, 170, 170);
    line(80, 170, 80, 270);
    line(170, 170, 170, 270);
    line(100, 270, 100, 370);
    line(150, 270, 150, 370)
    ellipse(150, 370, 15, 15);
    ellipse(100, 370, 15, 15);
}

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

标签： javascriptprocessing