在其中心旋转每个轨迹粒子：p5.js

Question

我正在制作一个小动画，其中的主广场不断旋转。现在我想给它添加一条踪迹，所以我在网上搜索并观看了 Coding Train 的视频。然后我尝试旋转粒子，但是当我尝试这个时，一切看起来都很糟糕。我知道您可以使用 rotate() 函数在 p5 中旋转内容，但首先您必须使用 translate()，这可能会破坏一切。

我已经使用了这些功能，但正如我之前提到的那样，一切都崩溃了。我想问你是否有任何其他方法可以在它们的中心旋转这些粒子，这不会破坏一切。

这是我的代码：

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 255);
  document.oncontextmenu = function() {
    return false;
  }

}

let a = 0;
let hue = 0;
let w = 100;
let h = 100;
let history = [];

function draw() {
background(36);


let v = createVector(mouseX, mouseY);


history.push(v);

if (history.length > 100) {
  history.splice(0, 1);
}


push()
noStroke()
for (let i = 0; i < history.length; i++) {
  // THE ROTATION SHOULD BE HERE:


  let pos = history[i];
  fill((hue + i), 255, 255)
  rect(pos.x - w / 2, pos.y - h / 2, i, i)
}
pop()

push()
noStroke();
translate(mouseX, mouseY);
rotate(a);
fill(hue, 255, 255)
rect(0 - w / 2, 0 - h / 2, w, h);
pop()
a += 1 / 120;
hue += 1 / 5;

if (hue >= 255) {
  hue = 0;
}

}

html,
body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Sketch</title>

  <link rel="stylesheet" type="text/css" href="style.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>
</head>

<body>
  <script src="sketch.js"></script>
</body>

</html>

Answer 1

不是在您希望的位置绘制粒子，而是将它们平移。这允许 canvas 的 (0, 0) 坐标定位在 mouseX 和 mouseY 上。要将粒子集中在 canvas 的 (0, 0) 处，只需将它们绘制在 -w/2 和 -h/2 处。一旦你翻译和旋转了它们，一定要旋转并将它们翻译回原来的样子。

  let pos = history[i];
  translate(pos.x, pos.y)
  rotate(a)
  fill((hue + i), 255, 255)
  rect(-w/2, -h/2, i, i)
  rotate(-a)
  translate(-pos.x , -pos.y)

用上面的代码替换你的部分代码。

在其中心旋转每个轨迹粒子：p5.js

Rotate each trail particle at its center: p5.js

javascript

animation

p5.js