drawing object trails doesn't work

Slothside

Hi guys, I'm trying to achieve the same effect as in this sketch:

https://codepen.io/Slothside/pen/bBWdVO

But without to delete the background and with the possibility to trigger the trail effect on and off. Can't get it to work. When I try to save the circles position in an array, it seems only to save the position (0,0), I think it conflicts with the translate function.

Here is what I tried so far: https://www.openprocessing.org/sketch/426350

I used this method: https://github.com/CodingTrain/Rainbow-Code/tree/master/p5.js/9.4_p5.js_particle_object_trails

I found this sketch, which I think does what i want to do, but I don't understand the script. https://codepen.io/Slothside/pen/OmOyZq

Maybe someone can point me in the right direction. Best, E

koogs

every time he presses the mouse he adds another particle. this is the trail.

you have exactly 1 particle (drawn 3 times) so no trail.

Slothside

hey, the thing i want to achieve is, that all circles leave a trail as they are rotating, like in the sketch i linked at first. So in this case i want the particle which is drawn 3 times to leave a trail, as if you would remove the background. I used an array like shiffman to store the position of the particle , but it can't get it to work. Maybe it's more clear now what I want to do. On the last link you can see a sketch which kind of achieves what I want to do, but I don't understand how it works.

koogs

they are both storing the trail as multiple particles.

you don't add any particles after the first one. so no trail.

looking st the rainbow code

var particles = [];

that defines an ARRAY of particles

function mousePressed() {
  particles.push(new Particle(mouseX, mouseY));
}

note the new particle at mouse position. he's pushing it onto the end of the list.

for (var i = 0; i < particles.length; i++) {
  ...
}

and here he's drawing ALL the particles.

koogs

ok, looking at your particle tab, i think you might be creating multiple particles but i think you are creating them all with the same position. (which should be obvious from the console log)

you are moving them using rotate. which works on the screen, not the particles. you are basically spinning the camera rather than moving the particles.

Slothside

hey koogs,thanks for your insight, do you have any idea how i can rotate the objects themself? And did you see this sketch? Here it seems to work but I don't understand it. https://codepen.io/Slothside/pen/OmOyZq

GoToLoop

Here it seems to work but I don't understand it.

The sketch at http://CodePen.io/Slothside/pen/OmOyZq/right?editors=001 is written in TypeScript.

In order to run in a browser it 1st needs to be transpiled to JS language.

@ CodePen, that's automatically done by setting up its preprocessor to TypeScript in Pen Settings.

Slothside

I figured that, but I'm hoping to use the same principle in my p5 sketch.