# How to rotate or setState of easycam during mouse wheel zooming?

**URL:** <https://discourse.processing.org/t/how-to-rotate-or-setstate-of-easycam-during-mouse-wheel-zooming/14925>\
**Category:** Libraries\
**Created:** [October 24, 2019, 2:30pm UTC](https://discourse.processing.org/t/how-to-rotate-or-setstate-of-easycam-during-mouse-wheel-zooming/14925 "2019-10-24T14:30:44Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![hmdeif](https://avatars.discourse-cdn.com/v4/letter/h/b487fb/32.png) [@hmdeif](https://discourse.processing.org/u/hmdeif)\
**Post date:** [October 24, 2019, 2:30pm UTC](https://discourse.processing.org/t/how-to-rotate-or-setstate-of-easycam-during-mouse-wheel-zooming/14925/1 "2019-10-24T14:30:44Z")

</div>

Currently I’m trying to rotate a cube if the camera approaches it at a certain distance (300). But all rotation or setState functions are not working properly as it seems they are not interrupting the current zoom process.  
Here is the code:  
[https://editor.p5js.org/hmdeif/sketches/Tr18pfOdw](https://editor.p5js.org/hmdeif/sketches/Tr18pfOdw)

Additionally, even the rotation that happens (if it happens) is not accurate sometimes, it is as if it rotates at random angles sometimes, whether I use the button or zoom in/out.  
Thanks

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 25, 2019, 3:38am UTC](https://discourse.processing.org/t/how-to-rotate-or-setstate-of-easycam-during-mouse-wheel-zooming/14925/2 "2019-10-25T03:38:11Z")

</div>

-a- i would say it seems to work only on double click  
need work on the toggle logic  
( start by adding a inside 2 times a `print(" limit 300 toggle now"+rotateToggle );` )  
so the question is not related to library

-b- hint add a

```auto

document.oncontextmenu = function() {
  return false;
}

```

so the RIGHT mouse button zoom ( mouseY up down ) works

---

<div class="post-metadata">

**Author:** ![hmdeif](https://avatars.discourse-cdn.com/v4/letter/h/b487fb/32.png) [@hmdeif](https://discourse.processing.org/u/hmdeif)\
**Post date:** [October 25, 2019, 6:14pm UTC](https://discourse.processing.org/t/how-to-rotate-or-setstate-of-easycam-during-mouse-wheel-zooming/14925/3 "2019-10-25T18:14:44Z")

</div>

Thanks for your thoughts. Double click resets the camera. So this does not solve the problem.

---

<div class="post-metadata">

**Author:** ![hmdeif](https://avatars.discourse-cdn.com/v4/letter/h/b487fb/32.png) [@hmdeif](https://discourse.processing.org/u/hmdeif)\
**Post date:** [October 31, 2019, 8:44am UTC](https://discourse.processing.org/t/how-to-rotate-or-setstate-of-easycam-during-mouse-wheel-zooming/14925/4 "2019-10-31T08:44:21Z")

</div>

Is someone out there trying to help solve this problem? or is it unsolvable?

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [November 2, 2019, 11:59pm UTC](https://discourse.processing.org/t/how-to-rotate-or-setstate-of-easycam-during-mouse-wheel-zooming/14925/5 "2019-11-02T23:59:36Z")

</div>

@hmdeif To better assist you, can yow show us the code where you tried to implement your conditions? So far it seems to rotate regardless on the 300 limit. Correct?

---

<div class="post-metadata">

**Author:** ![hmdeif](https://avatars.discourse-cdn.com/v4/letter/h/b487fb/32.png) [@hmdeif](https://discourse.processing.org/u/hmdeif)\
**Post date:** [November 3, 2019, 2:30am UTC](https://discourse.processing.org/t/how-to-rotate-or-setstate-of-easycam-during-mouse-wheel-zooming/14925/6 "2019-11-03T02:30:03Z")

</div>

Here is my rotation code:

```auto
function moveCameraXYZ_v2(x,y,z)
{
  var st=easycam.getState();
  var rotXYZ = QuaternionToEuler(st.rotation[0], st.rotation[1], st.rotation[2], st.rotation[3]);
  st.rotation=EulerToQuaternion(rotXYZ[0]+x,rotXYZ[1]+y,rotXYZ[2]+z)
  easycam.setState(st, 500);
}

```

In this code the duration is 500. It does not rotate at this duration. It only rotates if the duration is set to zero. I don’t know if this is a bug in the easycam library. If so, what is the alternative?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 3, 2019, 2:54am UTC](https://discourse.processing.org/t/how-to-rotate-or-setstate-of-easycam-during-mouse-wheel-zooming/14925/7 "2019-11-03T02:54:15Z")

</div>

sorry, again only can advice to use print, and as sometimes not obvious what is a new print line:

```auto

let count = 0;

// later
function moveCameraXYZ_v2(x,y,z)
{
  var st=easycam.getState();
  var rotXYZ = QuaternionToEuler(st.rotation[0], st.rotation[1], st.rotation[2], st.rotation[3]);
  st.rotation=EulerToQuaternion(rotXYZ[0]+x,rotXYZ[1]+y,rotXYZ[2]+z)
  print(count+" moveCameraXYZ_v2"); count++;
  easycam.setState(st, 2000); // test 2 sec
}

```

so i see that it is executed ( and more slow works too )  
looks like you not overworked the click logic part.  
still i must double click to get the action,  
but insofar it’s working.

from your easycam.js :

```auto

  //
  // STATE (rotation, center, distance)
  //
  /** @returns {Object} a copy of the camera state {distance,center,rotation} */
  getState() {
    return this.state.copy();
  }  
  /** 
   * @param {Object} a new camera state {distance,center,rotation}.
   * @param {long} animation time in millis.
   */
  setState(other, duration) {
    if(other){
      this.setDistance(other.distance, duration);
      this.setCenter (other.center , duration);
      this.setRotation(other.rotation, duration);
    }
  }

```