# Help with making objects transparent and draggable

**URL:** <https://discourse.processing.org/t/help-with-making-objects-transparent-and-draggable/32545>\
**Category:** Coding Questions\
**Created:** [October 1, 2021, 8:46am UTC](https://discourse.processing.org/t/help-with-making-objects-transparent-and-draggable/32545 "2021-10-01T08:46:57Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [October 1, 2021, 8:46am UTC](https://discourse.processing.org/t/help-with-making-objects-transparent-and-draggable/32545/1 "2021-10-01T08:46:57Z")

</div>

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

 ![Q4NM2-1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6b7759941eb61479d1021ffcd5ce60b31e505553.jpeg)

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.

[https://editor.p5js.org/Chigoz/sketches/ulMnSYag4](https://editor.p5js.org/Chigoz/sketches/ulMnSYag4)

---

<div class="post-metadata">

**Author:** ![philipplehmann](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philipplehmann/32/4111_2.png) [@philipplehmann](https://discourse.processing.org/u/philipplehmann)\
**Post date:** [October 1, 2021, 11:25am UTC](https://discourse.processing.org/t/help-with-making-objects-transparent-and-draggable/32545/2 "2021-10-01T11:25:55Z")

</div>

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.

```auto
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.

---

<div class="post-metadata">

**Author:** ![philipplehmann](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philipplehmann/32/4111_2.png) [@philipplehmann](https://discourse.processing.org/u/philipplehmann)\
**Post date:** [October 1, 2021, 11:40am UTC](https://discourse.processing.org/t/help-with-making-objects-transparent-and-draggable/32545/3 "2021-10-01T11:40:33Z")

</div>

Something like this: [p5.js Web Editor](https://editor.p5js.org/zuvala/sketches/DSqgowbbx)  
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._

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [October 1, 2021, 4:12pm UTC](https://discourse.processing.org/t/help-with-making-objects-transparent-and-draggable/32545/4 "2021-10-01T16:12:28Z")

</div>

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.

Chigozie

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [October 1, 2021, 7:18pm UTC](https://discourse.processing.org/t/help-with-making-objects-transparent-and-draggable/32545/5 "2021-10-01T19:18:10Z")

</div>

Answered this [on StackOverflow](https://stackoverflow.com/questions/69392331/opacitytransparency-and-dragging-in-p5-js-javascript)

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

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [October 1, 2021, 7:46pm UTC](https://discourse.processing.org/t/help-with-making-objects-transparent-and-draggable/32545/6 "2021-10-01T19:46:56Z")

</div>

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