Best way to emulate a rotary encoder wheel?

Processing Libraries
6

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! 
// 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

:)

rot01

I also used the image from the Wikipedia page directly:

image

See https://processing.org/reference/PImage.html to load and display images.

References:

2 Likes