我正在制作一個小影片，其中主廣場不斷旋轉。現在我想給它添加一條線索，所以我在網上搜索并觀看了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>uj5u.com熱心網友回復：
不是在您希望它們的位置繪制您的粒子，而是將它們翻譯成自己的。這允許將畫布的 (0, 0) 坐標定位在 mouseX 和 mouseY 處。要將粒子居中在畫布的 (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)
用上面的代碼替換部分代碼。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/404501.html
標籤：