using potentiometer values to scroll left and right.

Programming Questions

ryan.coupe

using potentiometer values to scroll left and right.

in Programming Questions • 5 months ago

I originally want to map images to values from a potentiometer, but now I just want to scroll left and right in a slideshow using a potentiometer;

The code below, scrolls from right to left showing the different images;

PImage img;
int x,y;
void setup()
{
size(1000,664);
img = loadImage("imagescroll.jpg"); // image is 1600 x 600
}
void draw()
{
// background(0);
// not needed as image is bigger than size
// and thus overwrites all areas
x = constrain(x, 0, img.width - width);
// ensures that "scrolling" stops at right end of image
// y = constrain(y, 0, img.height - height);
// Not needed here, as scolling only in x
image(img, -x, 0);
// overwrites the whole screen with the "shifted" image
x = frameCount;
// advances the image with each new frame
// do whatever is wanted from here on
// like after a call of background();
//stroke(0,0,0);
//ellipse(mouseX,mouseY,15,15);
}

I want to use the values 0 to 1023 I get from using a potentiometer, I want to use the values to select how quickly I scroll through the images and in which direction. Values near 512 stop the scroll, values dropping below 512 would scroll left and values increasing above 512 would scroll right.

How would I write this into the code above?

Cheers

Replies(7)

amnon.owed

Re: using potentiometer values to scroll left and right.

5 months ago

You can use the map() method and add the movement to the x location. Move the mouse left and right to simulate incoming values. You can change the img width to something different and the code will still work.

Adapted Code

PImage img;
int x, moveSpeed = 10;
void setup() {
size(1000, 600);
img = createImage(1600, 600, RGB);
for (int i=0; i<img.pixels.length; i++) {
img.pixels[i] = color(i%img.width%255,i/img.width%255,random(255));
}
x = -(img.width-width)/2; // start in middle
}
void draw() {
float potentiometer = map(mouseX, 0, width, 0, 1023); // incoming 0 to 1023
float movement = map(potentiometer, 0, 1023, -moveSpeed, moveSpeed); // map from range (0, 1023) to (-moveSpeed, moveSpeed)
x += movement; // add movement to location
x = constrain(x, -(img.width-width), 0); // constrain image by 0 (at the beginning) and -600 (aka a remaining visible image width of 1000 equal to the canvas width).
image(img, x, 0); // draw the image
frame.setTitle(x + ""); // see the x in the top-left
}

ryan.coupe

Re: using potentiometer values to scroll left and right.

5 months ago

I really appreciate you for writing up that code, I changed the image to what I wanted to use and it still works. How would I change it so it reads the potentiometer values to right, left and stop?

I'm using this code to read the values coming from the potentiometer

import processing.serial.*;
Serial myPort;
String sensorReading="";
PFont font;
void setup() {
size(400,200);
myPort = new Serial(this, Serial.list()[16], 9600);
myPort.bufferUntil('\n');
font = createFont(PFont.list()[2],32);
textFont(font);
}
void draw() {
//The serialEvent controls the display
}
void serialEvent (Serial myPort){
sensorReading = myPort.readStringUntil('\n');
if(sensorReading != null){
sensorReading=trim(sensorReading);
}
writeText("Sensor Reading: " + sensorReading);
}
void writeText(String textToWrite){
background(255);
fill(0);
text(textToWrite, width/20, height/2);
}

Is it just copying some of this code over to the one that you changed ?

Thanks again.

amnon.owed

Re: using potentiometer values to scroll left and right.

5 months ago

You'll want the sensorReading as a float, not as a String. There are different ways to convert a String to a float. See the reference, forum and google. If you have a float, then you are at the starting point in line 14 of my example sketch.

ryan.coupe

Re: using potentiometer values to scroll left and right.

5 months ago

Hey,

I've done the research into converting it into a float, but I'm still confused on how it would be structured. From what I can find, no one has done anything similar to scrolling the images left and right with a potentiometer. I know it might be a big ask, is there any way that you could write the structure of the code so that it would read the values and move the images from left and right ? Or just an example so it reads the numerical values from the potentiometer so I just see how it works? I really am struggling to get my head around it?

If this is possible, I'll be greatly thankful.

Many thanks

amnon.owed

Re: using potentiometer values to scroll left and right.

5 months ago

Something like this (untested)...

Code Example

import processing.serial.*;
Serial myPort;
String sensorReading = "";
float sensorFloat = 511.5;
PFont font;
PImage img;
int x, moveSpeed = 10;
void setup() {
size(1000, 600);
img = createImage(1600, 600, RGB);
for (int i=0; i<img.pixels.length; i++) {
img.pixels[i] = color(i%img.width%255,i/img.width%255,random(255));
}
x = -(img.width-width)/2; // start in middle
myPort = new Serial(this, Serial.list()[16], 9600);
myPort.bufferUntil('\n');
font = createFont(PFont.list()[2],32);
textFont(font);
}
void draw() {
float potentiometer = sensorFloat;
float movement = map(potentiometer, 0, 1023, -moveSpeed, moveSpeed); // map from range (0, 1023) to (-moveSpeed, moveSpeed)
x += movement; // add movement to location
x = constrain(x, -(img.width-width), 0); // constrain image by 0 (at the beginning) and -600 (aka a remaining visible image width of 1000 equal to the canvas width).
image(img, x, 0); // draw the image
fill(0);
text(textToWrite, width/20, height/2);
frame.setTitle(x + ""); // see the x in the top-left
}
void serialEvent (Serial myPort){
sensorReading = myPort.readStringUntil('\n');
if(sensorReading != null){
sensorReading = trim(sensorReading);
sensorFloat = float(sensorReading);
}
}

ryan.coupe

Re: using potentiometer values to scroll left and right.

5 months ago

It worksYou have no Idea how thankful I am for this, now looking at what you have changed and inputted I'm slowly understanding what needed doing. Thank you very much, Now to build on that.

Cheers

amnon.owed

Re: using potentiometer values to scroll left and right.

5 months ago

I think you should separate your problem again. First you had one image, now you're talking about multiple images, which is different. Try to make a working prototype of this new sketch first, without the arduino stuff. Once you got it working, then combine the codes. Your getImage() method doesn't look like a very solid solution. Search the forum(s) for slideshow examples. Those should get you started on sliding between multiple images.

Top Reply