# Load random images every time the button is pressed - Processing - Arduino

**URL:** <https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960>\
**Category:** Electronics (Arduino, etc.)\
**Created:** [April 4, 2019, 12:03pm UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960 "2019-04-04T12:03:56Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sol81](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Sol81](https://discourse.processing.org/u/Sol81)\
**Post date:** [April 4, 2019, 12:03pm UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/1 "2019-04-04T12:03:56Z")

</div>

Hey guys,

I need to use a button through an Arduino to be able to load random images on screen every time this button is pressed.

I have a background image and want to be able first time I press the button to see a bullet trace appearing on top of this image in a random place, then this trace stays and the secong time I press the same button, another trace appear … and so on until the background image is all covered with bullet traces.

Can anyone help me with the code or how to do that?

---

<div class="post-metadata">

**Author:** ![Abel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/abel/32/3289_2.png) [@Abel](https://discourse.processing.org/u/Abel)\
**Post date:** [April 5, 2019, 11:11am UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/2 "2019-04-05T11:11:42Z")

</div>

Hey @Sol81! 😊

Certainly. But it will be much easier to get help when you post the code you tried already so the community can add on to that.

Best.

---

<div class="post-metadata">

**Author:** ![Sol81](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Sol81](https://discourse.processing.org/u/Sol81)\
**Post date:** [April 7, 2019, 11:57am UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/3 "2019-04-07T11:57:32Z")

</div>

Thank you Abel 🙂

I have succeeded to do the load image thing (every time I type with any random key of the keyboard, it loads a random bullet trace on the background) I used the following code:

```auto
PImage img;

void setup() {
  img = loadImage("Throne_2.jpg");
  background(img);
  size(1500, 900);
}

void draw() { 
  // (val = = )
  if (keyPressed == true) {
    print("ddd\n");
    img = loadImage("1.png");
    image(img, random (0, 1500), random (0, 900), 34, 45);
  }
  delay(100);
  //loop ();
}

```

Now I need to replace the keyboard key with a button on arduino, so every time I press the button on Arduino it does the same thing which is loading a random bullet trace on top of the background image.

I have connected my Arduino and I wrote the codes for both Arduino software and Processing software but it is not working. I am not able to know how to do that. Here is the codes for both:

--------- Code for processing:

```auto
import processing.serial.*;
Serial port; // Create object from Serial class
int val = 0; // Data received from the serial port
int oldval = 0;
// int numFrames = 15;
int frame = 0;
// PImage[] images = new PImage(numFrames);

PImage img;

void setup() {
  img = loadImage("Throne_2.jpg");
  background(img);
  size(1500, 900);
  
  // println(Serial.list()); // print a list of all available ports
  println((Object[])Serial.list());
  port = new Serial(this, Serial.list()[0], 9600);
  // choose the port to which the Arduino is connected
  // on PC is usually COMI, on Mac is usually tty.usbserial-XXX
  
}

void draw() { 
  if (0 < port.available()) {
  val = port.read();
  }
  // if (port.digitalRead(7) == HIGH) {
  if (val !=oldval && val == 7) {
  // if (keyPressed == true) {
    print("ddd\n");
    img = loadImage("1.png");
    image(img, random (0, 1500), random (0, 900), 34, 45);
  }
  delay(100);
}

```

--------- Code for Arduino:

```auto
int switchPin = 7; // Switch connected to pin 7
int LEDPin = 13;

void setup() {
  pinMode(7, INPUT); // Set pin 0 as an input
  pinMode(13, OUTPUT);
  Serial.begin(9600); // Start serial communication at 9600 bps
}

void loop() {
  if (digitalRead(7) == HIGH) { // If switch is ON,
    Serial.write(2); // send 2 to Processing
    digitalWrite(13, HIGH);
  } else { // If the switch is not ON,
    Serial.write(1); // send 1 to Processing
    digitalWrite(13, LOW);
}
  delay(100); // Wait 100 milliseconds
}

```

Can you help me please?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 7, 2019, 2:48pm UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/4 "2019-04-07T14:48:38Z")

</div>

pls format your code in above post.

in processing IDE you use [ctrl][t] to format,  
here at forum ( in edit your above post )  
you use the

```auto
</> code formatter

```

and paste your code into it.

* * *

you think you have communication with your arduino?  
why you not

```auto
val = port.read();
println(val);

```

and show us what you get.

---

<div class="post-metadata">

**Author:** ![Sol81](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Sol81](https://discourse.processing.org/u/Sol81)\
**Post date:** [April 7, 2019, 3:48pm UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/5 "2019-04-07T15:48:09Z")

</div>

I have formated my codes. Thank you!

my Arduino is connected and when I press the button the led flashes which gives me the impression that there is communication.

and I can see that is connected through the Arduino software:

 ![44](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f4158dd4b18c695263618fea829f0f43e42251c2.jpeg)

But how can I know that both softwares Arduino and processing are connected?

Sorry I am new to this and it is my first time, I am doing this project for my study, so I am not sure if you want me to include

val = port.read();  
println(val);

in processing ? I did so but it gave me method is missing.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 7, 2019, 4:11pm UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/6 "2019-04-07T16:11:44Z")

</div>

you can not have the arduino IDE monitor running  
AND the processing, because the USB port will only talk to one partner.

i wanted you to run processing and include the line  
`println(val);`

after your existing line  
`val = port.read();`

and then there should be a list of

> 1  
> 2  
> 2  
> 1

in your console???

if not check your port connection  
why you have  
`Serial.list()[0]`

---

<div class="post-metadata">

**Author:** ![Sol81](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Sol81](https://discourse.processing.org/u/Sol81)\
**Post date:** [April 7, 2019, 4:29pm UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/7 "2019-04-07T16:29:39Z")

</div>

I added it, but didn’t get the 1 2 2 1

 ![59](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/87ea0e402440f09619383aefd4b79abb5cca4fe5.png)

I have  
Serial.list()[0]  
because I thought it is necessary to connect to the arduino and I they told me on Mac it is usually [0]  
Shouls I delete the whole thing or just edit the number? if I should edit the number, how can I find the correct one?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 7, 2019, 4:32pm UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/8 "2019-04-07T16:32:51Z")

</div>

you look at that list and see that arduino ( 14201 ) is list item 2 ( 0,1,2 )  
so you use  
`Serial.list()[2]`

---

<div class="post-metadata">

**Author:** ![Sol81](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Sol81](https://discourse.processing.org/u/Sol81)\
**Post date:** [April 7, 2019, 5:07pm UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/9 "2019-04-07T17:07:55Z")

</div>

Ok thank you!

Can I explain to you quick what I am trying to do, maybe you can help me because I really need to get this done for next week otherwise Im screwed.

I have a background image on processing

---

<div class="post-metadata">

**Author:** ![Sol81](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Sol81](https://discourse.processing.org/u/Sol81)\
**Post date:** [April 7, 2019, 5:08pm UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/10 "2019-04-07T17:08:48Z")

</div>

and I used the following code to load random bullet traces when I press any key on my keyboard

```auto
PImage img;

void setup() {
  img = loadImage("Throne.jpg");
  background(img);
  size(1500, 900);
}

void draw() { 
  // (val = = )
  if (keyPressed == true) {
    print("ddd\n");
    img = loadImage("Bullet.png");
    image(img, random (0, 1500), random (0, 900), 34, 45);
  }
  delay(100);
}

```

---

<div class="post-metadata">

**Author:** ![Sol81](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Sol81](https://discourse.processing.org/u/Sol81)\
**Post date:** [April 7, 2019, 5:09pm UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/11 "2019-04-07T17:09:52Z")

</div>

Now what I need is to replace the “KeyPressed” with something that would allow my Arduino to give the order of the random bullet traces instead of my laptop keyboard. And here is the problem for me, because I am not sure how to change my code on processing and what is the Arduino code that I should have on Arduino to connect it to processing. I already followed the following instructions  
( Instructions

1. Unzip the library and copy the “arduino” folder into the “libraries” sub-folder of your Processing Sketchbook. (You can find the location of your Sketchbook by opening the Processing Preferences. If you haven’t made a “libraries” sub-folder, create one.)
2. Run Arduino, open the Examples \> Firmata \> StandardFirmata sketch, and upload it to the Arduino board. )

and is the wires connections is correct? You can see in the following pic that the one of the leds go off when I press which mean I can control it

 ![IMG_8494](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/725a282ba11e7fca021b1b40f0627d3445622148.jpeg)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 7, 2019, 5:15pm UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/12 "2019-04-07T17:15:07Z")

</div>

now all is going backward,  
as you say you follow a total different instruction set.  
we will not discuss that now.

you have shown a arduino code  
and i must assume it is the one you loaded!

and a processing code  
and we know the processing code can not run  
but that is secondary until we have the communication going  
++ while we work on the communication and later on the logic.

* * *

after change the port as i suggested?  
you get anything printed at the console?

what values you see when button pressed and when not?

---

<div class="post-metadata">

**Author:** ![Sol81](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Sol81](https://discourse.processing.org/u/Sol81)\
**Post date:** [April 7, 2019, 5:38pm UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/13 "2019-04-07T17:38:51Z")

</div>

Sorry for that! I have removed the images!

I have used number 2 for port and now I see at the console 255 when I press run from processing (not when I press the button on my Arduino) but the Arduino LED starts flashing and the bullet traces are not appearing on the background images even if I press the Arduino button.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 7, 2019, 5:47pm UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/14 "2019-04-07T17:47:45Z")

</div>

hm  
i only talk about the processing code lines reading  
what the arduino should send.

pls forget the image loading for now  
as the

```auto
if (val !=oldval && val == 7) 

```

can not work  
( as oldval not set and no idea if val ever is interger 7 ( where did that come from?? )) ( later )

* * *

pls stop processing sketch  
start arduino IDE open monitor window / set 9600  
data come from arduino?  
according your arduino sketch you send no linefeed… as use no println() only print()  
so you should see 11112222221111  
about 10 chars per second?

* * *

check the baud rate again, in arduino code, in processing code , and in arduino monitor window…

your code show 9600  
your picture show 57600  
i not care what you choose, but must be same at all 3 places

* * *

i check on your problem tomorrow again

---

<div class="post-metadata">

**Author:** ![Sol81](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Sol81](https://discourse.processing.org/u/Sol81)\
**Post date:** [April 7, 2019, 7:03pm UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/15 "2019-04-07T19:03:31Z")

</div>

I copied this actually

if (val !=oldval && val == 7)

so I am not sure if it is correct.

Baud rate now set for 9600 in arduino code and in processing code, you said I should also make it 9600 in the “arduino monitor window” where is that? is it diffrent than the arduino code?

 ![08](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7acc1dfb5afb93ee972d43b39330b5ab36e43926.png)

is all what I wrote in the window correct? I don’t see 11112222221111

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 8, 2019, 12:41am UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/16 "2019-04-08T00:41:02Z")

</div>

well  
-a- the arduino serial monitor is  
a tool in the arduino IDE  
/Tool / Serial Monitor /  
( or the symbol at the right )  
and one of the parameter of a serial monitor is again the baud rate it should check the  
incoming stream for.

-b- and what i see ( in the monitor ) when i run your code  
that there is something coming, but not readable.

 ![SNAG-0061](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a4ee5c5e7db924412bd6765d9e82193c650dfb62.jpeg)

for you as a beginner you should make code where you can do diagnostic on,  
means talk plain ASCII

so not send (1) or (2), send (‘1’) or (‘2’)

 ![SNAG-0062](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/be6725d07613202cbed0ac8770afd0db7e69a512.jpeg)

the used processing code to see that:

```auto
import processing.serial.*;
Serial port;

void setup() {
  printArray(Serial.list());
  port = new Serial(this, Serial.list()[1], 9600); // here i found arduino on port [1]
}

void draw() { 
  if ( port.available() > 0 ) {
    char in = char(port.read());
    println(in);
  }
}

```

or, if you send int (1) or (2)

```auto
// arduino change back from ('1') to (1) ascii to int
import processing.serial.*;
Serial port;
int val;

void setup() {
  printArray(Serial.list());
  port = new Serial(this, Serial.list()[1], 9600); // here i found arduino on port [1]
}

void draw() { 
  if ( port.available() > 0 ) {
    val = char(port.read());
    println(val);
  }
}

```

works here also.

* * *

so we nee to include your if () again

```auto
// arduino change back from ('1') to (1) ascii to int
import processing.serial.*;
Serial port;
int oldval, val;

void setup() {
  printArray(Serial.list());
  port = new Serial(this, Serial.list()[1], 9600); // here i found arduino on port [1]
}

void draw() { 
  if ( port.available() > 0 ) {
    val = char(port.read());
    println(val);
  }

  if (val !=oldval && val == 2 ) {
    //
    println("button pressed event");
  }
  oldval = val; // memory
}

```

when all good can use

```auto
boolean diagp = false;

//...
    if ( diagp) println(val);

```

---

<div class="post-metadata">

**Author:** ![Sol81](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Sol81](https://discourse.processing.org/u/Sol81)\
**Post date:** [April 8, 2019, 2:10pm UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/17 "2019-04-08T14:10:59Z")

</div>

Hey, all what you’ve sent me worked well and I am able to use the button in processing. Thank you!

For what I should use  
boolean diagp = false;

//…  
if ( diagp) println(val);

and is the next step now to include in the processing my load image code

```auto
PImage img;

void setup() {
  img = loadImage("Throne_2.jpg");
  background(img);
  size(1500, 900);
}

void draw() { 
  // (val = = )
  if (keyPressed == true) {
    print("ddd\n");
    img = loadImage("1.png");
    image(img, random (0, 1500), random (0, 900), 34, 45);
  }
  delay(100);
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 8, 2019, 2:25pm UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/18 "2019-04-08T14:25:45Z")

</div>

-a- both image load in setup()  
-b- not load 2 image under same variable name.  
-c- no delay in draw() !

---

<div class="post-metadata">

**Author:** ![Sol81](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Sol81](https://discourse.processing.org/u/Sol81)\
**Post date:** [April 8, 2019, 2:42pm UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/19 "2019-04-08T14:42:45Z")

</div>

You mean like that

```auto
import processing.serial.*;
Serial port;
int oldval, val;
boolean diagp = false;
PImage img;

void setup() {
  printArray(Serial.list());
  port = new Serial(this, Serial.list()[2], 9600);  
   img = loadImage("Background_Throne.jpg");
  background(img);
  size(1500, 900);
  img = loadImage("Bullet_Trace.png");
    image(img, random (0, 1500), random (0, 900), 34, 45);
}

void draw() { 
  if ( port.available() > 0 ) {
    val = char(port.read());
    println(val);
  }

  if (val !=oldval && val == 2 ) {
    //
    println("button pressed event");
  }
  oldval = val; // memory
  
  if ( diagp) println(val);
}

```

Note: Just to make it clear, I just changed the background name from Throne\_2.jpg to “Background\_Throne.jpg” and the random loaded repeatitive image on top of the background 1.png to “Bullet\_Trace.png”

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 8, 2019, 3:02pm UTC](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960/20 "2019-04-08T15:02:13Z")

</div>

no, i mean

```auto
PImage img_bg, img_bullet;

```

but the image show  
i expect in draw() inside

```auto
if ( arduino send something good ) { image(img_bullet, random (0, 1500), random (0, 900), 34, 45); }

```

[Next page](https://discourse.processing.org/t/load-random-images-every-time-the-button-is-pressed-processing-arduino/9960.md?page=2)