# Working with mouseDragged() and other mouse events inside a class

**URL:** <https://discourse.processing.org/t/working-with-mousedragged-and-other-mouse-events-inside-a-class/2829>\
**Category:** Coding Questions\
**Created:** [August 22, 2018, 2:04am UTC](https://discourse.processing.org/t/working-with-mousedragged-and-other-mouse-events-inside-a-class/2829 "2018-08-22T02:04:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [August 22, 2018, 2:04am UTC](https://discourse.processing.org/t/working-with-mousedragged-and-other-mouse-events-inside-a-class/2829/1 "2018-08-22T02:04:56Z")

</div>

I usually work with the philosophy of “code now, fix later”. However, in my recent work, I’ve been trying to plan out my code ahead of time. So my question right now is, what’s the best way for working with mouseDragged() inside a class?

In the past, I just put a little bit of the detection in mousePressed(), a little in mouseDragged(), and the rest bouncing around in global variables. But I figure there’s got to be a better way. Here’s some of my spaghetti code if you want to take a look.

> **[Bezier Splines - OpenProcessing](https://www.openprocessing.org/sketch/577977)**
>
> Learning about bezier splines.
> https://www.particleincell.com/2012/bezier-splines/

I _have_ considered using [p5.Elements](https://p5js.org/reference/#/p5.Element) to access their mouseOver() and mousePressed() functions, but unlike Processing, they don’t have a mouseDragged() method.

**The Question:**

- Can I detect mouse-stuff _within_ a class definition?

Anyways, my eventual hope is to have a class that implements the kind of drag-and-drop interface in the sketch above all in one neat class definition.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 22, 2018, 5:33am UTC](https://discourse.processing.org/t/working-with-mousedragged-and-other-mouse-events-inside-a-class/2829/2 "2018-08-22T05:33:44Z")

</div>

> [@tony](#):
>
> …, what’s the best way for working with **mouseDragged()** inside a class?

Callback **mouseDragged()** is merely a fancy **mouseMoved()** which also checks for _mouseIsPressed_. 🖱

In this online p5js sketch below: 😊

> <https://gist.github.com/GoSubRoutine/a117ecb16a8b0f939a190f87d3a13267>

Function **rotateCube()** is chosen as the **mouseMoved()** callback for the sketch’s `<canvas>`: 🔲  
`createCanvas(400, 400).mouseMoved(rotateCube);`

And inside **rotateCube()**, _mouseIsPressed_ is checked in order to emulate **mouseDragged()**: ✔

```auto
function rotateCube() {
  if (mouseIsPressed) {
    rotateY3D(mouseX - pmouseX, nodes);
    rotateX3D(mouseY - pmouseY, nodes);
    redraw();
  }

  ({ mouseX: pmouseX, mouseY: pmouseY } = window);
}

```

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [August 22, 2018, 6:27am UTC](https://discourse.processing.org/t/working-with-mousedragged-and-other-mouse-events-inside-a-class/2829/3 "2018-08-22T06:27:11Z")

</div>

Thanks for the reply!

`({ mouseX: pmouseX, mouseY: pmouseY } = window);`

Also, what kind of assignment _is_ this?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 22, 2018, 6:42am UTC](https://discourse.processing.org/t/working-with-mousedragged-and-other-mouse-events-inside-a-class/2829/4 "2018-08-22T06:42:47Z")

</div>

`({ mouseX: pmouseX, mouseY: pmouseY } = window);`  
is equivalent to:  
`pmouseX = window.mouseX, pmouseY = window.mouseY;`  
and b/c prefixing w/ _window_ is optional, just:  
`pmouseX = mouseX, pmouseY = mouseY;`

That technique is called “Object Destructuring Assignment”, btW: 👨‍💻

> **[Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring)**
>
> The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

This is just a temporary workaround though. 🤕  
p5js fails to update _pmouseX_ & _pmouseY_ for p5.Element mouse callbacks! 🤒  
I believe they might be fixing it now, not sure. 🙄

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [August 22, 2018, 7:08am UTC](https://discourse.processing.org/t/working-with-mousedragged-and-other-mouse-events-inside-a-class/2829/5 "2018-08-22T07:08:16Z")

</div>

I was looking at the p5.Element reference, and they mention that graphics buffers are considered elements. How does that work? I messed around a little with a PGraphic below:

```auto
  class MyClass
  {
     constructor()
     {
		this.g = createGraphics(20,20);
		this.g.position(100,100);
		this.g.fill(255,0,255);
		this.g.noStroke();
		this.g.rect(0,0,10,10);
		this.g.mouseOver( function(){ println("BLEGH"); });
		image(this.g, 100, 100);
      }
  }

```

While it does have a position, it gets drawn separately. How do I access the mouse-events if it’s not an actual object on the screen?

Edit: Literally a minute later I got it working. Though now the purpose of defining dimensions with both createGraphics() and g.size() confuses me 🤔

Also, pixelDensity() is janky.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 22, 2018, 7:38am UTC](https://discourse.processing.org/t/working-with-mousedragged-and-other-mouse-events-inside-a-class/2829/6 "2018-08-22T07:38:08Z")

</div>

- Each instance of p5 got a [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) element ([HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement)) attached to it.
- Just like a Processing Java Mode’s [PApplet](https://processing.org/reference/) got a canvas ([PGraphics](https://processing.org/reference/PGraphics.html)) as well.
- When we call **[createCanvas()](https://p5js.org/reference/#/p5/createCanvas)**, it returns a [p5.Renderer](https://p5js.org/reference/#/p5.Renderer) object; which is a subclass of [p5.Element](https://p5js.org/reference/#/p5.Element) btW.
- Besides the main [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas), we can create additional offscreen canvases via **[createGraphics()](https://p5js.org/reference/#/p5/createGraphics)**.
- However, it returns a hackish wrapper [p5.Graphics](https://p5js.org/reference/#/p5.Graphics) instead of an actual [p5.Renderer](https://p5js.org/reference/#/p5.Renderer)!
- A [p5.Graphics](https://p5js.org/reference/#/p5.Graphics) got all of the properties of a [p5](https://p5js.org/reference/#/p5) instance, besides those inherited by [p5.Element](https://p5js.org/reference/#/p5.Element).
- We can even access _[TAU](https://p5js.org/reference/#/p5/TAU)_ and call **[random()](https://p5js.org/reference/#/p5/random)**, **[cos()](https://p5js.org/reference/#/p5/cos)**, etc. from it!
- Notice in my online sketch [“Rotating Cube”](https://bl.ocks.org/GoSubRoutine/a117ecb16a8b0f939a190f87d3a13267), I’m calling **[mouseMoved()](https://p5js.org/reference/#/p5.Element/mouseMoved)** method over the [p5.Renderer](https://p5js.org/reference/#/p5.Renderer) object returned by **[createCanvas()](https://p5js.org/reference/#/p5/createCanvas)**.