Dear community!
Maybe you could help me?
So I have 5 different emotions that have values from 0 till 100 percent.
I would like to make a vizualisation for this data, like:
If “EMOTION” from 0 till 10 percent - image 1
if “EMOTION” from 10 till 20 percent - Image 2.
Please advice how to do this in Processing… I am sure, that you can =)
What is your problem exactly?
You will need to be a bit more precise for us to help you 
Sure. What code do you have so far? Post your code! Do you have the emotion values stored in an array? Or different variables? Do you understand how setup() and draw() work? Do you have the images loading in the right place? Can you make a loop over the emotions? Can you use conditional statements to pick which image to draw?
There’s a lot to do and asking us to help you without showing us what you have working already makes it seem like you have nothing ad just want the whole thing done for you!
I have just started with Processing, I have already learned, how to load and display an image, but I can´t find how to code if…else so far…=(
If you’re just starting out, you should try to get more comfortable doing research. Google is every programmer’s best friend.
You could start out by googling “Processing if statement” or “Java if statement”. Since Processing is built on top of Java, most Java tutorials will also apply to Processing.
Shameless self-promotion: here is a tutorial on if statements in Processing:
For these kind of troubles you can always go check on the reference page of processing:
https://processing.org/reference/
You’ll find some example on those basic structures of the language and other functions. For example here is the page for the keyword if: https://processing.org/reference/if.html and here is one for the else keyword: https://processing.org/reference/else.html
Copy the example they gave and then try to change them to fit your needs and then come back with what you have done
// Discourse.Processing.org/t/data-visualization-with-own-images/2452/7
// GoToLoop (2018/Aug/07)
static final int EMOTICONS = 5, MAX_EMOTION = 100;
static final color OPAQ = PImage.ALPHA_MASK;
static final color RED = 020, REDDISH = 0x100 / EMOTICONS;
final PImage[] emoticons = new PImage[EMOTICONS];
int emotion, intensity;
void setup() {
noLoop();
for (int i = 0; i < EMOTICONS; ) {
final PImage img = emoticons[i++] = createImage(width, height, ARGB);
java.util.Arrays.fill(img.pixels, i*REDDISH << RED | OPAQ);
img.updatePixels();
}
keyPressed();
}
void draw() {
final PImage chosen = emoticons[intensity];
set(0, 0, chosen);
}
void mousePressed() {
keyPressed();
}
void keyPressed() {
emotion = (int) random(MAX_EMOTION);
println("Emotion: " + emotion);
intensity = emotion * EMOTICONS / MAX_EMOTION;
println("Intensity: " + intensity);
redraw();
}
Oh thank you so much!!! I will try it right now=)
Hey guys!
Please help!
Now I have created if else statement, I have taken it from the example and have linked if else statement from this example with my own images. And it works =) but how to make this if else statement not for the “time” but for the data from my csv-table? Can you help me with this? An example what I would like to do is: if smile < 50 than img 1, if smile >50, than img 2… and so on and this data I would like to take from the csv table… Omg! It´s so compicated:scream:
Here is my code for this moment -
void setup() {
size(700, 700);
}
void draw() {
background(0);
textSize(48);
if (hour() < 5) {
//between midnight and 5AM
text(“Go to sleep!”, 20, height-20);
}
else if (hour() < 12) {
//between 5AM and noon
PImage morning;
morning = loadImage(“morning.gif”);
image(morning,0,0);
}
else if (hour() < 16) {
//between noon and 4PM
PImage hog;
hog = loadImage(“hog.gif”);
image(hog,0,0);
}
else if (hour() < 21) {
//between 4PM and 9PM
PImage evening;
evening = loadImage(“evening.gif”);
image(evening,0,0);
}
else {
//between 9PM and midnight
text(“Good night!”, 20, height-20);
}
}
Hey,
Can you pease format your code by selecting it and clicking the following icon: </>.
You can edit your code by clicking the pen icon at the bottom right of your post.
Also, please read this thread for rules when posting on this forum: Guidelines—Tips on Asking Questions
Now for you problem you can read the data by using the loadStrings() function with the split() one.
This way you can store them in a variable and do what you want with them.
To help you more we would need to know how you want to use those data, if you want them to evolve over time, if you want several images next to each other… maybe have an example of what the data file look like.
Hey!
Now I have worked a bit more and now it looks this way -
void setup() {
size(700, 700);
}
float smile = 85;
boolean isGradeA = smile >= 90;
void draw() {
background(0);
textSize(48);
if(isGradeA){
background(0, 0, 0);
fill(0);
PImage morning;
morning = loadImage("morning.gif");
image(morning,0,0);
}
else{
background(255, 0, 0);
fill(0);
PImage morning;
morning = loadImage("morning.gif");
image(morning,0,0);
}}
The problem is, that I can visualize only 1 emotion, but I have 5 and for every emotion I have an if else statement… do you know how to add one more similar code to the existing? but for example not Smile, but angry?
It is not clear on how you want to change your emotion…
Is it every x minutes change the emotion and take a randm one?
Is it everytime the user hit space change to the next emotion?
Is it something else?
Sensors will show me 5 emotions for 1 person. Like this - smile: 24; disgust: 62, anger: 2, sadness:95, fear: 0. Of course each person has his own emotions and his own percentage. And I would like to visualize every emotion with image. in this case smile < 90 - image 1, disgust <90 - image with background (or something), sadness > than 90 - another image… so as I understand all the time I work at the same time with 5 different floats and at the same time i need to visualize all this 5 floats. But I have written a code only for 1 float and if I add the same code the programm writes ERROR…
Here what the strucutre of your code could look like:
float sensorValue;
void setup() {
size(700, 700);
frameRate(1);
}
void draw() {
sensorValue = random(100); //This would be where you read your sensor value instead of getting a random number
if (sensorValue < 10) {
println("Image1");
} else if (sensorValue < 50) {
println("Image2");
} else {
println("Image3");
}
}
In processing the draw function is called over and over and over so the code inside will keep playing over and over.
In the example I constrain the draw function to be launched only one time per second with the frameRate(1); line but otherwise it is called as often as it can.
So what you can do is replace the random line I used to get the value of your sensor. This way it will keep changing depending on what your sensor read.
And since the sensorValue is changing over and over the if…else structure will give a different value over time depending on your sensorValue.
Wow! Thank you so much!!! I will try it right now!
hmmmm… If I add a second condition (sadness) that must be run at the same time with the first one (anger) processing shows error… Duplicate method draw() in type sketch… Why?
float anger = 0;
float sadness = 54;
float disgust = 26;
float joy = 39;
float surprise = 0;
float fear = 0;
float contempt = 0;
float engagement = 97;
float attention = 100;
void setup() {
size(700, 700);
frameRate(1);
}
void draw() {
anger = 0;
if (anger < 25) {
PImage morning;
morning = loadImage("morning.gif");
image(morning,0,0);
} else if (anger > 25) {
PImage hog;
hog = loadImage("hog.gif");
image(hog,0,0);
} else if (anger > 50) {
PImage evening;
evening = loadImage("hog.gif");
image(evening,0,0);
}else {
background(255, 0, 0);
fill(0);
}
}
void draw(){
sadness = 54;
if (sadness < 25) {
PImage img1;
img1 = loadImage("img1.gif");
image(img1,0,0);
} else if (sadness > 25) {
PImage img2;
img2 = loadImage("img2.gif");
image(img2,0,0);
} else if (sadness > 50) {
PImage evening;
evening = loadImage("hog.gif");
image(evening,0,0);
}else {
background(255, 0, 0);
fill(0);
}
}
You can’t put two draw() function in your sketch, only one exist.
Maybe start with a simpler project to get the basic of processing and java programming langage. I can advise you to visit that page https://processing.org/tutorials/ to get started.
When you get more familiar about the structure of a processing sketch and the different mechanism use in coding (loops, condition, data structure…) then you will be able to put everything together to get what you want to achieve.
To come back to your project, I think you should draw a graph to show how all your conditions behave together to give a result because right now you try to run two sets of condition in parallel and there is no real logic in it. What happen if anger = 20 AND sadness = 53? You need to have a logic structure that handle all the possible combinations.
if anger = 20 AND sadness = 53 - two images must be shown at the same time. All the 11 images for every emotion have can work together, because they are transparent… It is only a small question, how all of the emotions can work in processing at the same time, if I can.t use this function draw? =(
Ok, now it starts to make sense to me, I was having a hard time understanding what you wanted to do 
You just need to have all your condition in the draw() function.
Then you can use the tint() function to draw your image with some transparency.
Also please be careful when you are loading your image. You should load them all in the setup() function for performance matter. Now you are asking processing to reload the pic at every frame.
Thank youuuu!!! The last question. Why doesn´t it still work?? Everything seems to be OK… Maybe I am too stupid for programming but I have a project in September…=( Maybe I have just forgotten a comma? Expecting EOF found “sadness”…
float anger = 0;
float sadness = 54;
float disgust = 26;
float joy = 39;
float surprise = 0;
float fear = 0;
float contempt = 0;
float engagement = 97;
float attention = 100;
void setup() {
size(700, 700);
frameRate(1);
}
void draw() {
anger = 50;
if (anger < 25) {
PImage morning;
morning = loadImage("morning.gif");
image(morning,0,0);
} else if (anger > 25) {
PImage hog;
hog = loadImage("hog.gif");
image(hog,0,0);
} else if (anger > 50) {
PImage evening;
evening = loadImage("hog.gif");
image(evening,0,0);
}else {
background(255, 0, 0);
fill(0);
}
}
sadness = 54;
if (sadness < 25) {
PImage img1;
img1 = loadImage("img1.gif");
image(img1,0,0);
} else if (sadness > 25) {
PImage img2;
img2 = loadImage("img2.gif");
image(img2,0,0);
} else if (sadness > 50) {
PImage evening;
evening = loadImage("hog.gif");
image(evening,0,0);
}else {
background(255, 0, 0);
fill(0);
}
}