Question

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

创建一个宽度为400，高度为500的画布，其中使用功能，绘制3个机器人，其中2个将动画化，以便它们在屏幕上移动（见下文）
绘制机器人的函数应仅使用参数（如果函数本地所需的变量），则不应使用任何全局变量变量。机器人有一个方形的头，身体是一个矩形，手臂应该是水平然后垂直，腿是垂直的，并且脚上的轮子。参数应为头部的“宽度”（即等于主体的宽度），主体的“高度”以及头部左上角的“ x”和“ y”坐标。机器人
通过调用绘制机器人的函数来创建3个机器人，其中两个它们的大小相同，但在屏幕上的x和y坐标不同，第三个机器人应该比前两个机器人大，并且屏幕上其他位置（机器人之间没有重叠）。
通过使较小的机器人和较大的机器人之一对它们进行动画处理向左移动，直到达到屏幕的极限，然后他们应该向右移动，直到碰到屏幕的另一端，依此类推，左右移动。小型机器人的运动速度是大型机器人的两倍。

我无法复制机器人。

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>

绘制简单的对象并设置动画

0 个答案: