# Best way to emulate a rotary encoder wheel?

**URL:** <https://discourse.processing.org/t/best-way-to-emulate-a-rotary-encoder-wheel/21982>\
**Category:** Libraries\
**Created:** [June 18, 2020, 11:37pm UTC](https://discourse.processing.org/t/best-way-to-emulate-a-rotary-encoder-wheel/21982 "2020-06-18T23:37:36Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 20, 2020, 4:23pm UTC](https://discourse.processing.org/t/best-way-to-emulate-a-rotary-encoder-wheel/21982/6 "2020-06-20T16:23:20Z")

</div>

Hello,

Thanks for asking this! Had some fun with it…

Sharing my initial steps…

I did not look at other examples.

1. Create a PGraphic image. I used random circles but this could be your encoded wheel or anything.
2. Move the mouse over the canvas to detect colors.
3. Do something with the detected colors.
4. The rest is up to your creativity and imagination. I used the same concepts in the past to do something similar.

In my example the mouse location turned red or green depending on color it detected.  
You can leave the mouse location and rotate image with key ‘4’ and ‘6’.  
You can create a new image with key ‘5’.

Code is not commented so you can go through it.  
Ask if you have questions.

> **Example Code \< Expand this!**
>
> ```auto
> // Rotary Encoder 
> // v1.0.0
> // GLV 2020-06-20
> 
> // Step one to creating a rotary encoder simulation
> 
> PGraphics pg;
> color dot;
> float angle = 0;
> 
> void setup() 
> {
> size(400, 400);	
> pg = createGraphics(300, 300);
> ranCircles();
> }
> 
> void draw() 
> {
> background(255);
> push();
> translate(width/2, height/2);
> rotate(angle);
> imageMode(CENTER);
> image(pg, 0, 0);
> pop();	
> 
> int c = get(mouseX, mouseY);
>   
> if (c == color(0))
> {
> dot = color(0, 255, 0);
> }
> else
> {
> dot = color(255, 0, 0);  
> }
> noStroke();
> fill(dot);
> circle(mouseX, mouseY, 10);
> }
>   
> void keyPressed()
> {
> if (key == '5')
> ranCircles();
> if (key == '6')
> angle += TAU/100;
> if (key == '4')
> angle -= TAU/100;
> }
> 
> void ranCircles()
> {
> pg.beginDraw();
> pg.imageMode(CENTER);
> pg.background(color(255, 0));
> pg.noStroke();
> pg.fill(0);
> for(int i = 0; i<= 50; i++)
> {
> float theta = random(0, TAU);
> float r = random(0, 140);
> float x = r*cos(theta) + 150;
> float y = r*sin(theta) + 150;
> pg.circle(x, y, 20);
> }
> pg.endDraw();  
> }
> 
> ```

I took the code above, added a rotating arm and detected color at a point on the arm as it rotated.

screenX() and screenY() were used in place of mouseX and mouseY.  
Just be careful to detect color before you draw over the point you are detecting.

[https://processing.org/reference/screenX\_.html](https://processing.org/reference/screenX_.html)

`:)`

![rot01](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/897535ad3b685ee01be72f7c086893d9514b499d.gif)

I also used the image from the Wikipedia page directly:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/01fb8d612474f2b4fc77e9b14a95fda2cd8910cb.png)

See [https://processing.org/reference/PImage.html](https://processing.org/reference/PImage.html) to load and display images.

References:

> **[Rotary encoder](https://en.wikipedia.org/wiki/Rotary_encoder)**
>
> A rotary encoder, also called a shaft encoder, is an electro-mechanical device that converts the angular position or motion of a shaft or axle to analog or digital output signals.
> There are two main types of rotary encoder: absolute and incremental. The output of an absolute encoder indicates the current shaft position, making it an angle transducer. The output of an incremental encoder provides information about the motion of the shaft, which typically is processed elsewhere into information su...

---

_[View the full topic](https://discourse.processing.org/t/best-way-to-emulate-a-rotary-encoder-wheel/21982)._