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?
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.
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:
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:
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:
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?
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
</> code formatter
and paste your code into it.
you think you have communication with your arduino?
why you not
val = port.read();
println(val);
and show us what you get.
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:
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.
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]
I added it, but didn’t get the 1 2 2 1
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?
you look at that list and see that arduino ( 14201 ) is list item 2 ( 0,1,2 )
so you use
Serial.list()[2]
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
and I used the following code to load random bullet traces when I press any key on my keyboard
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);
}
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
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
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?
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.
hm
i only talk about the processing code lines reading
what the arduino should send.
pls forget the image loading for now
as the
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
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?
is all what I wrote in the window correct? I don’t see 11112222221111
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.
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’)
the used processing code to see that:
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)
// 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
// 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
boolean diagp = false;
//...
if ( diagp) println(val);
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
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);
}
-a- both image load in setup()
-b- not load 2 image under same variable name.
-c- no delay in draw() !
You mean like that
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”
no, i mean
PImage img_bg, img_bullet;
but the image show
i expect in draw() inside
if ( arduino send something good ) { image(img_bullet, random (0, 1500), random (0, 900), 34, 45); }