How do I get trailing lines not dots?

`function setup() {
createCanvas(800, 800);

function draw() {

if (mouseIsPressed) {
stroke(mouseX, 0, mouseY);
point(mouseX-5, mouseY-5, pmouseX, pmouseY );
point(mouseX*-1+800, mouseY-5, pmouseX, pmouseY);
point(mouseX*-1+800, mouseY*-1+800);
point(mouseX-5, mouseY*-1+800);

Preformatted text`

Like this? examples | p5.js

1 Like

Yess, that kind of trail.But still being able to draw the lines with when the mouse is pressed.


Example here:

And lots more here:


hi, thank you!
I understand how to draw continuous lines, Im trying to get four mirrored lines but I can only figure out how to do it with points.

There are examples in the forum.

Please use the search and do some exploration.


oh ok sweet, thank you!


I was able to do this with example I provided:

Add another line:
line(mouseX, mouseY, pmouseX, pmouseY);

And… make some modifications to it.
Think of the the math involved for mirroring.

Add or subtract a number to the x and y coordinates and observe.

This may come in handy:


when I add numbers to the x an y values I get a straight line from the third point. Not four separate lines. Apologies I’m still learning about all of this.

the reference is talking about the createCanvas? I don’t understand how that can break the fill in between the two lines?

similar to this but with lines that’s fade and not points

I think you can achive this using linear interpolation. processing has it by default, its lerp()