You could simpify / cleanup playGif() first:
offset doesn't seem to do anything at the moment (it "increments" from 0 to 0)
image() is called twice with the same coordinates overdrawing the same content on top of itself. once image() call should do
- you probably don't need the for loop since you're drawing one frame at a time
currentFrame is increment to the next frame and loops back to the start at the start of playGif(), however, when rendering the image, the array index is incremented by offset (0) again. it's unclear what the intention is. you can do without
currentFrame can control play/pause: if it increments it plays, otherwise it's paused. it's good to have a separation between updating data (currentFrame) and rendering with updated data (image(image[currentFrame],0,0))
- you could also rename the
image array to images so it's more representative of what it is and it's harder to get confused between that and the image() function
For example playGif() could turn to:
void playGif(){
currentFrame = (currentFrame+1) % numFrames; //use % to cycle through frames!
image(image[currentFrame], 0, 0);
}
Regarding control using Arduino, as mentioned above, simply check if you get a "1" to update currentFrame (otherwise it will stay(paused) at the same value):
void playGif(){
if(instring.equals("1")){
currentFrame = (currentFrame+1) % numFrames; //use % to cycle through frames!
}
image(image[currentFrame], 0, 0);
}
I'm using equals() above, because it's a String, even though you are sending a single character. (alternatively comparing the first character would've worked if(instring.charAt(0) == '1') )
I have a few notes on that as well:
- in the Arduino code you use
print(), not println(), which means no \n will be sent, hence no need for myPort.bufferUntil('\n'); nor instring = myPort.readString();
- you can read a single character with
myPort.read(); (which you can by the way compare with == (instead of String's equals()) (e.g. if(myPort.read() == '1'){...)
while is blocking and I recommend not using it. It won't make a huge difference in your case since you're sending a single byte, but on more complex programs that send more bytes this will block Processing from rendering a single frame until it's received all the data
Here's an example:
import processing.serial.*;
int numFrames = 22; //number of frames in animation
int currentFrame = 0;
PImage[] images = new PImage[numFrames];
Serial myPort;
void setup() {
myPort = new Serial(this, Serial.list()[1], 9600);
size(1600, 900);
frameRate(30);
background(0);
//Load images below
for (int i = 0; i < numFrames; i++)
{
images[i] = loadImage("PatMovingFace" + i + ".png");
}
}
void draw() {
// if there's at least one byte to read and it's '1'
if(myPort.available() > 0 && myPort.read() == '1'){
// increment frame, looping to the start
currentFrame = (currentFrame+1) % numFrames; //use % to cycle through frames!
}
// render current frame
image(images[currentFrame], 0, 0);
}
A more cautious version, checking for what coould go wrong (serial connection, data loading) would look like this:
import processing.serial.*;
int numFrames = 22; //number of frames in animation
int currentFrame = 0;
PImage[] images = new PImage[numFrames];
Serial myPort;
void setup() {
String[] ports = Serial.list();
int portIndex = 1;
if(ports.length <= portIndex){
println("serial ports index " + portIndex + " not found! check cable connection to Arduino");
println("total ports: " + ports.length);
printArray(ports);
exit();
}
try{
myPort = new Serial(this, ports[portIndex], 9600);
}catch(Exception e){
println("error connecting to serial port: double check the cable is connected and no other program (e.g. Serial Monitor) uses this port");
e.printStackTrace();
}
size(1600, 900);
frameRate(30);
background(0);
//Load images below
try{
for (int i = 0; i < numFrames; i++)
{
images[i] = loadImage("PatMovingFace" + i + ".png");
}
}catch(Exception e){
println("image loading error");
e.printStackTrace();
}
}
void draw() {
// if Arduino connection was successfull
if(myPort != null){
// if there's at least one byte to read and it's '1'
if(myPort.available() > 0 && myPort.read() == '1'){
// increment frame, looping to the start
currentFrame = (currentFrame+1) % numFrames; //use % to cycle through frames!
}
}else{
text("serial port not initialised", 10, 15);
}
if(images[currentFrame] != null){
// render current frame
image(images[currentFrame], 0, 0);
}else{
text("serial port not loaded", 10, 15);
}
}
or with the same thing in grouped using functions:
import processing.serial.*;
int numFrames = 22; //number of frames in animation
int currentFrame = 0;
PImage[] images = new PImage[numFrames];
final int SERIAL_PORT_INDEX = 1;
final int SERIAL_BAUD_RATE = 9600;
Serial myPort;
void setup() {
size(1600, 900);
frameRate(30);
background(0);
setupArduino();
//Load images below
loadImages();
}
void setupArduino(){
String[] ports = Serial.list();
int numSerialPorts = ports.length;
// optional debug prints: useful to double check serial connection
println("total ports: " + numSerialPorts);
printArray(ports);
// exit if requested port is not found
if(numSerialPorts <= SERIAL_PORT_INDEX){
println("serial ports index " + SERIAL_PORT_INDEX + " not found! check cable connection to Arduino");
//exit();
}
// try to open port, exit otherwise
try{
myPort = new Serial(this, ports[SERIAL_PORT_INDEX], SERIAL_BAUD_RATE);
}catch(Exception e){
println("error connecting to serial port: double check the cable is connected and no other program (e.g. Serial Monitor) uses this port");
e.printStackTrace();
//exit();
}
}
void loadImages(){
try{
for (int i = 0; i < numFrames; i++)
{
images[i] = loadImage("PatMovingFace" + i + ".png");
}
}catch(Exception e){
println("image loading error");
e.printStackTrace();
//exit();
}
}
void serialUpdateImage(){
// if Arduino connection was successfull
if(myPort != null){
// if there's at least one byte to read and it's '1'
if(myPort.available() > 0 && myPort.read() == '1'){
// increment frame, looping to the start
currentFrame = (currentFrame+1) % numFrames; //use % to cycle through frames!
}
}else{
text("serial port not initialised", 10, 15);
}
}
void displayCurrentImage(){
if(images[currentFrame] != null){
// render current frame
image(images[currentFrame], 0, 0);
}else{
text("image " + currentFrame + " not loaded", 10, 25);
}
}
void draw() {
serialUpdateImage();
displayCurrentImage();
}