Use Potentiometer as mousepressed/mouseclicked

edited January 2018 in Arduino

Hi, i did not have any background information about programming languages until the 2 days ago. Basically, the interaction with the prototype starts with pressing movement and 'potentiometer' should be used for that. After that one of random jpg has to be displayed on the screen embedded in the structure for a certain time, than disappears. When pressing again, a new random jpg pops up in the screen.

I could code the part of displaying the output on the screen and set the timing in the processing. Also, i could figure out how to convert codes from arduino into processing and tried to combine each sample in this forum with my code. But i could not manage it with 2 days basic knowledge. When i wrote down random image part to void draw, loop is starting and potentiometer codes and the if statement did not function or i tried even 'void potentiometer'...

Here is my processing code without combining with arduiono's. I want to use potentiometer instead mousePressed/ clicked. Is there any way to do that? Or is the problem using picArray, random with image? Or am i doing wrong with working processing, should i code in arduino? and at the end the code will run in iPad or a monitor. Maybe these are so easy questions but I will be so glad, if you help me to further.

My basic code:

int value = 0;
PImage p0, p1, p2, p3;
PImage[] picArray = new PImage[4];

int endTime;
int holdTime=3000; //3 seconds 

void setup(){



p0 = loadImage("goetheundschiller.jpg");
p1 = loadImage("jetaons.jpg");
p2= loadImage("looneytunes.jpg");
p3= loadImage("southpark.jpg");
picArray[0]= p0;
picArray[1]= p1;
picArray[2]= p2;
picArray[3]= p3;


void draw() {
    endTime=millis() + holdTime; 


void mouseClicked(){
   image(picArray[int(random(picArray.length))],0, 0);


An example that i found from google search. Potentiometer moves ellips exactly how i want to do in my prototype, but i could not combine with mine, got confused in the map part. Here:

import processing.serial.*;
Serial myPort;

int value;
int padding = 100;
float m;

void setup() {
  size(1440, 900);
  //  println("Available serial ports:");
  //  println(Serial.list());
  myPort = new Serial(this, "COM3", 9600);

void draw() {
  if (myPort.available() > 0) {
    value =;
    m = map(value, 255, 0, padding, width-padding);
  line(padding, height/2, width-padding, height/2);
  ellipse(m, height/2, 150, 150); 


  • Answer ✓

    Divide and conquer! Don't try to accomplish all at once.

    First thing would be:

    After that one of random jpg has to be displayed on the screen embedded in the structure for a certain time, than disappears

    This can be done on its own. When this part is done, you can move to the next part of your code. The next code is untested.


    final int holdTime=3000; //3 seconds 
    PImage[] picArray = new PImage[4];
    int current = 0;
    int endTime;
    void setup() {
      size(960, 640); 
      picArray[0] = loadImage("goetheundschiller.jpg");
      picArray[1] = loadImage("jetaons.jpg");
      picArray[2]= loadImage("looneytunes.jpg");
      picArray[3]= loadImage("southpark.jpg");
    void draw() {
      if (millis()<endTime) {    
         image(picArray[current], 0, 0);
    void mouseClicked() {
  • sorry for the late answer. thank you very much, it was really useful and helped me to solve my prototype.

Sign In or Register to comment.