Rotate each trail particle at its center: p5.js

user_15761019 0
Viewed 55

I'm making a small animation in which the main square is rotating constantly. Now I wanted to add a trail to it so i searched online and watched a video by the Coding Train. Then I tried to rotate the particles, but when I try this everything just looks awful. I know that you can rotate things in p5 using the rotate() function, but first you have to use translate() and that can break everything.

I have used these functions, but as I mentioned before then everything just breaks. I want to ask You if there is any other way of rotating these particles at their center, which doesn't break everything.

Here is my code:

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>

p5.js animation javascript
1 Answers

Instead of drawing your particles at the position you want them translate them their instead. This allows the (0, 0) coordinate of the canvas to be positioned at the mouseX and mouseY. To center the particles at the (0, 0) of the canvas just draw them at -w/2 and -h/2. Once you have them translated and rotated be sure to roate and translate them back to the 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)

Replace the portion of your code with the above.

user_140878650
Related