Estoy haciendo una pequeña animación en la que la plaza principal gira constantemente. Ahora quería agregarle un rastro, así que busqué en línea y vi un video del Coding Train . Luego traté de rotar las partículas, pero cuando intento esto, todo se ve horrible. Sé que puedes rotar cosas en p5 usando la función de rotate() , pero primero tienes que usar translate() y eso puede romperlo todo.
He usado estas funciones, pero como mencioné antes, todo simplemente se rompe. Quiero preguntarte si hay alguna otra forma de hacer girar estas partículas en su centro, que no rompa todo.
Aquí está mi código:
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>En lugar de dibujar sus partículas en la posición que desea, tradúzcalas en su lugar. Esto permite que la coordenada (0, 0) del lienzo se posicione en mouseX y mouseY. Para centrar las partículas en el (0, 0) del lienzo, simplemente dibújalas en -w/2 y -h/2 . Una vez que los haya traducido y rotado, asegúrese de rotarlos y traducirlos al original.
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)Reemplace la parte de su código con lo anterior.