Hi,
You will have to forgive my ignorance as my background is in design but I’m currently doing a short course called Machine Learning for Musicians and Artists, which has inspired me to learn new things and get involved in creative computing.
My aim is to send an OSC message from Wekinator to an output written in Processing that will display a different image for each class triggered (I am using 5 classes and 1 output in Wekinator).
So far, I have used oscP5 to send and receive OSC messages. For testing purposes, I am using mousePressed() to send an OSC message back to Processing.
However, I really can’t figure out how to trigger images using OSC messages. I have no problem displaying an image on the canvas with mousePressed() but I can’t figure out how to do it with an OSC message.
If anyone could help point me in the right direction I would really appreciate it as I’ve really been struggling with this 
Below is my code so far…
import oscP5.*;
import netP5.*;
OscP5 oscP5;
NetAddress myRemoteLocation;
PImage img1; // Declare variable "a" of type PImage
PImage img2;
void setup() {
size(300, 447);
/* Load images */
img1 = loadImage("vampire.png");
img2 = loadImage("vampire-2.png");
/* start oscP5, listening for incoming messages at port 12000 */
oscP5 = new OscP5(this,12000);
/* myRemoteLocation is a NetAddress. a NetAddress takes 2 parameters,
* an ip address and a port number. myRemoteLocation is used as parameter in
* oscP5.send() when sending osc packets to another computer, device,
* application. usage see below. for testing purposes the listening port
* and the port of the remote location address are the same, hence you will
* send messages back to this sketch.
*/
myRemoteLocation = new NetAddress("127.0.0.1",12000);
}
void draw() {
}
void mousePressed() {
/* create a new osc message object */
OscMessage myMessage = new OscMessage("/test");
/* send the message */
oscP5.send(myMessage, myRemoteLocation);
}
void oscEvent(OscMessage theOscMessage) {
/* check if theOscMessage has the address pattern we are looking for. */
if(theOscMessage.checkAddrPattern("/test")==true) {
println("### received an osc message with address pattern "+theOscMessage.addrPattern());
}
}
Hey CameronNorris,
What do you mean by “trigger images”? Do you want to have an image flash on screen or stay on screen when a certain message is received?
Do you receive the messages correctly, and are just not sure where to go from there?
Hi Nicolas,
Thanks for getting back to me!
Yes, I want the image to change and remain on screen in relation to the message received.
For example: 0 = img1, 1 = img2, etc. In this project, I am trying to use /test to show a single image.
I receive the messages correctly and I can show an image on screen using mousePressed() but I can’t figure out how to show an image when the /test OSC message is received.
void oscEvent(OscMessage theOscMessage) {
/* check if theOscMessage has the address pattern we are looking for. */
if(theOscMessage.checkAddrPattern("/test")==true) {
println("### received an osc message with address pattern "+theOscMessage.addrPattern());
}
}
So yes, not sure where to go from here 
The most basic way you could do it would be to use a global variable to keep track of which image to display based off of which message was received, just like in your example.
So you could have something like int imgToDisplay = 0.
Then, when you receive a certain image, in this case /test, inside your if you just add imgToDisplay = (value you want).
Then in draw():
void draw() {
if(imageToDisplay == 0) {
image(img1, 0, 0);
} else if(imageToDisplay == 1) {
image(img2, 0, 0);
}
...
}
Now of course if you are going to be using lots of images this would not be the way to go since it’s kind of an ugly, straightforward solution.
Another thing you could do is have an array of PImages, so that your imgToDisplay variable becomes the index of the image you want to display, so all you would have in draw() would be:
image(images[imgToDisplay], 0, 0);
3 Likes
It’s working! Thank you so much!
This has really helped me to better understand Processing.
I also took your advice and set up the array of PImages.
Here is my code…
import oscP5.*;
import netP5.*;
OscP5 oscP5;
NetAddress myRemoteLocation;
PImage[] images; // Declare variable "a" of type PImage
int imageToDisplay = 0; // Create a global variable to keep track of what image to display
void setup() {
size(300, 447);
/* creates array that can hold 2 PImage objects */
images = new PImage[2];
/* Load images */
images[0] = loadImage("vampire.png");
images[1] = loadImage("vampire-2.png");
/* start oscP5, listening for incoming messages at port 12000 */
oscP5 = new OscP5(this,12000);
/* myRemoteLocation is a NetAddress. a NetAddress takes 2 parameters,
* an ip address and a port number. myRemoteLocation is used as parameter in
* oscP5.send() when sending osc packets to another computer, device,
* application. usage see below. for testing purposes the listening port
* and the port of the remote location address are the same, hence you will
* send messages back to this sketch.
*/
myRemoteLocation = new NetAddress("127.0.0.1",12000);
}
void draw() {
image(images[imageToDisplay], 0, 0);
}
void mousePressed() {
/* create a new osc message object */
OscMessage myMessage = new OscMessage("0");
/* send the message */
oscP5.send(myMessage, myRemoteLocation);
}
void oscEvent(OscMessage theOscMessage) {
/* check if theOscMessage has the address pattern we are looking for. */
if(theOscMessage.checkAddrPattern("0")==true) {
println("### received an osc message with address pattern "+theOscMessage.addrPattern());
imageToDisplay = 1;
}
}
From here, I should be able to figure out how to connect it directly with Wekinator and have lots of fun building new things! Thanks again!
1 Like
