如何用p5给一个物体一个正方形的螺旋运动

Question

这个练习的要点是让球在每个循环中移动较小的距离，因此它会留下一个类似西班牙式的痕迹，并最终在画布的中间。

我的逻辑告诉我；del"；它随着每一个循环而变大，并将其添加到旅行距离的限制中。除了左边(循环结束的地方(，它对所有边都很好。如果我把变量加到那一边，球就永远不会达到极限。

我该怎么修？提前感谢您！

let speed = 7;
let speedX = speed;
let speedY = 0;
let ellipseD = 50;
let ellipseR = ellipseD / 2;
let x = 0;
let y = ellipseR;
let limit = 25;
let del = 0;
function setup() {
createCanvas(500, 500);
}
function draw() {
background(166, 236, 255, 10);
fill(255);
strokeWeight(2);
stroke(21, 171, 212);
ellipse(x, y, ellipseD, ellipseD);
x = x + speedX;
y = y + speedY;
if (x >= width - (limit + del)) {
speedX = 0;
speedY = speed;
}
if (y >= height - (limit + del)) {
speedX = -speed;
speedY = 0;
}
if (y >= height - (limit + del) && x < limit) {
speedX = 0;
speedY = -speed;
}
if (y < limit + del && x <= limit) {
speedX = speed;
speedY = 0;
del = del + 50;
console.log(del);
}
}

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

Answer 1

我尝试的第一种方法是将最后一个分支(通过递增del来缩小平方空间的分支(更改为：

if (y < limit + (del + 50) && x <= limit) {

这里的50是增量，它确保在蛇与它已经访问过的区域重叠之前发生右转。

问题是，这种情况会变得过于激进，过早地开火。我使用的修复方法是在每个分支中添加对speedX和speedY的检查，以确保蛇在触发条件之前朝着正确的方向移动。由于每帧的所有条件都应该是不相交的，为了清晰起见，我将它们设为else ifs。

最后，如果speed不能干净地划分ellipseD和ellipseR，您可能会在蛇形图案中看到一些伪影和间隙，所以我分别使用7、42和21(42/2(来稍微清理间隙。你可能需要玩一下这些尺寸才能获得想要的效果。

const speed = 7;
let speedX = speed;
let speedY = 0;
const ellipseD = 42;
const ellipseR = ellipseD / 2;
let x = 0;
let y = ellipseR;
const limit = 25;
let del = 0;
function setup() {
createCanvas(500, 500);
}
function draw() {
background(166, 236, 255, 10);
fill(255);
strokeWeight(2);
stroke(21, 171, 212);
ellipse(x, y, ellipseD, ellipseD);
x += speedX;
y += speedY;
if (x >= width - (limit + del) && speedX > 0) {
speedX = 0;
speedY = speed;
}
else if (y >= height - (limit + del) && speedY > 0) {
speedX = -speed;
speedY = 0;
}
else if (y >= height - (limit + del) && 
x < (limit + del) && speedX < 0) {
speedX = 0;
speedY = -speed;
}
else if (y < limit + ellipseD + del && speedY < 0) {
speedX = speed;
speedY = 0;
del += ellipseD;

if (del > width / 2) {
noLoop();
}
}
}

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

Answer 2

我认为左侧行为最明显的问题是，在检查x:时没有考虑del

// This checks if the ellipse is in the bottom left
if (y >= height - (limit + del) && x < limit) {
speedX = 0;
speedY = -speed;
}

此代码的问题在于x < limit应该是x < limit + del。当椭圆在左上角时，在检查中也存在类似的问题。

然而，一旦你"修复"；您将开始出现问题，因为随着del的增加速度快于椭圆的移动速度，左上角的复选框将重复激发。因此，在更新速度和del的值之前，有必要添加检查以查看椭圆的移动方向。

let speed = 7;
let speedX = speed;
let speedY = 0;
let ellipseD = 50;
let ellipseR = ellipseD / 2;
let x = ellipseR;
let y = ellipseR;
let limit = ellipseR;
let del = 0;
function setup() {
createCanvas(500, 500);
}
function draw() {
background(166, 236, 255, 10);
fill(255);
strokeWeight(2);
stroke(21, 171, 212);
ellipse(x, y, ellipseD, ellipseD);
x = x + speedX;
y = y + speedY;
if (x >= width - (limit + del) && x >= width - (limit + del) && speedX > 0) {
speedX = 0;
speedY = speed;
console.log('top right');
}
if (y >= height - (limit + del) && x >= width - (limit + del) && speedY > 0) {
speedX = -speed;
speedY = 0;
console.log('bottom right');
}
if (y >= height - (limit + del) && x <= (limit + del) && speedX < 0) {
speedX = 0;
speedY = -speed;
console.log('bottom left');
}
if (y < (limit + del) && x <= limit + del && speedY < 0) {
speedX = speed;
speedY = 0;
del = del + 50;
console.log(del);
console.log('top left');
}
}

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