Linear Potentiometer

Processing Electronics (Arduino, etc.)
1

Hi,
i am trying to make a game using a single linear potentiometer where you can draw line Up, Down, Left and Right.

So far i am able to move in every direction by pressing ‘H’ to change the axis direction to up and down.
However, when i press ‘H’ it redraws my rectangle in a different location, before allowing me to draw in a new direction.

Any ideas on how i can keep my rectangle in the same location when I change direction?
I have included my code so far below.

Thanks!

boolean Xaxis = true;
boolean Yaxis = false;
float xpos;

import processing.serial.*;
import cc.arduino.*;
import com.tinkerkit.*;

Arduino arduino;

//declare the potentiometer
TKPotentiometer pot;

float minVal = 123;
float maxVal = 0;

void setup() {  
  background(200);
  size(512, 512);

  println(Arduino.list());
  arduino = new Arduino(this, Arduino.list()[0], 57600);    

  //for every tinkerkit component we have to pass
  //the arduino and the port
  pot = new TKPotentiometer(arduino, TK.I0);

  noStroke();
}

void draw() {

  background(200);
  //get the potentiometer values
  float val = pot.read();

  //calibration
  if (val < minVal) minVal = val;
  if (val > maxVal) maxVal = val;  

  //map the values of the potentiometer
  //on the width of the window
  val = map(val, minVal, maxVal,0, width);

  //draw a rectangle 
  fill(255);
  rectMode(CENTER);

  
  
if (key=='h'){
  Xaxis = false;
  Yaxis = true;
}
if (key=='g'){
  Xaxis = true;
  Yaxis = false;
}
 if(Xaxis==true){
     rect(val, width/2, 50, 50);
xpos = val;
 }
 if(Yaxis==true){
     rect(xpos, val, 50, 50);
 }


  //print the potentiometer values
  println(val);
}
1 Like
2

You might want to take a different approach. Changing the Axis your value adds to leads to the rect jumping from ex (100, 0) to (0, 100) if 100 is the value.

But that‘s probably not what you‘d want. What you can do is to store the position of the rect (x, y) in a global variable. Then you set the one of the current axis to the potentiometer.

And when you swap axis, you reset the potentiometer value, so that even though it didn‘t move, it‘s value is not 100, but 0. (you can also just add a variable with the last potentiometer value before swap and subtract it from the actual value.

This would look like (100, 0) and after swap (100, 100-100), which might be confusing, so i‘ll add variable names (x, y) (x was set to potentiometer value) and after swap (x, y-lastPotentiometerBeforeSwap) (in this case x is still 100, y is 100 too, because it’s the current axis and the current axis is set to potentiometerValue.

Also, you‘ll need a lastPotentiometerBeforeSwapX and Y since they‘ll vary.

Summary

What you need is 4 global variables x, y, lastX and lastY.
You need to set the respective x or y to your val-lastX or val-lastY depending on the current axis.
Upon switch, you set the previous axis‘s lastX or lastY to the current axis x or y.
To draw the rect, you use x and y.

2 Likes
3

possibly not understand your idea correctly,
but to use 2 sliders for w and h of rect …
here example for mouseX and mouseY AND Arduino CSV line “1023,1023,”

//________________________________________________ Processing program:
import processing.serial.*;
Serial myPort;
String data; //___________________________________ latest arduino line
int[] datai; //___________________________________ as array of integers understood CSV
StringList list = new StringList(); //____________ stored lines
int listlong = 18; //_____________________________ many lines on canvas


int sldrw=10, sldrh=10, sldrmax=100;

void setup () {
  size (500, 500);
  setup_serial();
}

void draw() {
  background(200, 200, 0);
  for ( int i = 0; i < list.size(); i++ ) text( list.get(i), 10, 20+i*20 ); // running list of arduino lines
  translate(width/2, height/2);
  rect(0, 0, sldrw, sldrh); //____________________ this draws the rectangle in the center with w and h +- MAX
}

void mousePressed() { //__________________________ example use mouse click X and Y as rect size
  sldrw = (int)map(mouseX, 0, width, -sldrmax, sldrmax);
  sldrh = (int)map(mouseY, 0, height, -sldrmax, sldrmax);
}

void setup_serial() { // USB arduino..
  printArray(Serial.list());
  String portName = Serial.list()[0]; //__________ adjust 0.. x port
  myPort = new Serial(this, portName, 9600);
  myPort.clear();
  myPort.bufferUntil('\n');
  println("try connect to "+portName);
}

void serialEvent(Serial p) { //___________________ handle serial data
  data = trim(p.readStringUntil('\n'));
  if (data != null) {
    //println(data); // print every GOOD line
    datai = int( split(data, ",") ); //___________ create int array from CSV
    if ( datai.length >=2 ) {
      sldrw = (int)map(datai[0], 0, 1023, -sldrmax, sldrmax);
      sldrh = (int)map(datai[1], 0, 1023, -sldrmax, sldrmax);
    }
    list.append( data ); //_______________________ add store line as String list
    if ( list.size() >= listlong ) list.remove(0); //______ but erase the oldest
  }
}
1 Like
4

That‘s not really what he meant.

He was looking for a way to move a rectangle in 2D with only 1 potentiometer (or 1 Slider).

Since a slider is 1D, he tried to switch the axis of motion with the ‚h‘ key from x-axis to y-axis and back.

But this results in the rect jumping. This is solved by my answer, so all should be good once it‘s implemented :wink:

(Also, the summary in my answer is really easy to follow, so there shouldn‘t be any problems :sweat_smile:)

1 Like
5

yes, just additionally, like

  • when use second slider in arduino,
  • or move the “button” into the arduino
    can do the multiplexing already there

and send an 2 value CSV line from there.
your logic stays.

1 Like
6

Ah ok :sweat_smile: i though you meant a different approach