Drawing new line instead of updating existing one about react

[CubeOfCheese]

You accidentally posted your sketch.js twice instead of your raindrop class.
I think you might be able to work around this by pushing and popping your raindrop object to an array and drawing that array. I also opened an issue that worked in the p5 online simulator, so maybe our problems are related.

[F-Moody]

Thanks! fixed that.

[CubeOfCheese]

I am running into the same problem as you are now and I tested my suggestion of using an array, but I realized that it does not have any effect. What is interesting is that they are not all independent objects, they are only left over images of where the object used to be.

[CubeOfCheese]

I believe that this is not only a problem with objects but also regular p5 drawings such as in this example.
p5.draw = function () { p5.ellipse(p5.mouseX, p5.mouseY, 30); }
Rather than having a circle follow my mouse as it should, it leaves a trail of circles as shown here.

[and-who]

Question, do you clear the FrameBuffer on the beginning of the new draw cycle?
e.g. with setting the Background?
https://github.com/and-who/react-p5-wrapper/blob/2275f7972522b8b6a449a5cea2e1a79e9acb5d3b/example/src/sketches/sketch.js#L15

[F-Moody]

Funny enough, i've just tried that and it works now.
Can you explain me why?

[and-who]

I assume the following, since it works in other GraphicSystems similar.

p5 stores the calculated Image in an FrameBuffer.
To clear the Frame Buffer would be additional operations, so why not keep it, because you could use it in your next Frame.

I actually have an Example how you could use it :D
On my Webpage I create a nice Effect by drawing with some Transparency over my last rendered image and moving the circles a bit:
http://wolfandreas.com/

[CubeOfCheese]

Wow! Thank you. I think this issue can be closed now. This makes total sense now.