Help with making objects transparent and draggable

I need help with changing the opacity(transparency) of the objects and dragging the objects. I can change the opacity(transparency) but when I do the objects are no longer draggable.

The image below sheds more light on the question

The relevant lines for fill colour are lines 54-74

The relevant lines for dragging objects are lines 117-161

You can run and edit the code using P5.js editor,

This is the link to the code.

The problem is that in mouseDragged you check for a specific color to identify the handle. Thus the dragging doesnt work if you change the color.

119: let cp1 = [255, 120, 120, 255];

I suggest you store the two points into a variable (PVector) and check the distance of the mouse when clicking.

Something like this: p5.js Web Editor
To avoid ‘loosing’ the handle when moving fast there is a variable storing the currently dragged point.
Of course this would be nicer using arrays and classes to ditch the code duplication.

Thank you very much philipplehmann, I truly appreciate your help. Someone did that in this forum and I do not really understand what he did. I will study your approach and see if I can make modifications.


1 Like

Answered this on StackOverflow

PSA: Please tell us, in both places, when you cross post! Otherwise you risk wasting peoples time (very rude, in my humble opinion).


I didn’t know that people on stack overflow are actively on this forum.
I’m just realising this from your reply.

1 Like