# Data visualization with own images

**URL:** <https://discourse.processing.org/t/data-visualization-with-own-images/2452>\
**Category:** Coding Questions\
**Created:** [August 7, 2018, 7:06pm UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452 "2018-08-07T19:06:06Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![wrdy28](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wrdy28/32/1052_2.png) [@wrdy28](https://discourse.processing.org/u/wrdy28)\
**Post date:** [August 7, 2018, 7:06pm UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/1 "2018-08-07T19:06:06Z")

</div>

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 =)

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 7, 2018, 7:11pm UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/2 "2018-08-07T19:11:49Z")

</div>

What is your problem exactly?

- Code an if…else structure
- Display an image
- Load an image
- …

You will need to be a bit more precise for us to help you 🙂

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [August 7, 2018, 7:12pm UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/3 "2018-08-07T19:12:32Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![wrdy28](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wrdy28/32/1052_2.png) [@wrdy28](https://discourse.processing.org/u/wrdy28)\
**Post date:** [August 7, 2018, 7:15pm UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/4 "2018-08-07T19:15:50Z")

</div>

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…=(

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [August 7, 2018, 7:19pm UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/5 "2018-08-07T19:19:35Z")

</div>

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:

> **[If Statements](https://happycoding.io/tutorials/processing/if-statements)**
>
> Learn how to use if statements to make decisions in your code.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 7, 2018, 7:20pm UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/6 "2018-08-07T19:20:29Z")

</div>

For these kind of troubles you can always go check on the reference page of processing:  
[https://processing.org/reference/](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](https://processing.org/reference/if.html) and here is one for the else keyword: [https://processing.org/reference/else.html](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 🙂

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 7, 2018, 7:36pm UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/7 "2018-08-07T19:36:23Z")

</div>

```auto
// 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();
}

```

---

<div class="post-metadata">

**Author:** ![wrdy28](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wrdy28/32/1052_2.png) [@wrdy28](https://discourse.processing.org/u/wrdy28)\
**Post date:** [August 8, 2018, 8:35am UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/8 "2018-08-08T08:35:08Z")

</div>

Oh thank you so much!!! I will try it right now=)

---

<div class="post-metadata">

**Author:** ![wrdy28](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wrdy28/32/1052_2.png) [@wrdy28](https://discourse.processing.org/u/wrdy28)\
**Post date:** [August 9, 2018, 10:09am UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/9 "2018-08-09T10:09:12Z")

</div>

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);  
}  
}

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 9, 2018, 11:39am UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/10 "2018-08-09T11:39:01Z")

</div>

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](https://discourse.processing.org/t/guidelines-tips-on-asking-questions/2147)

Now for you problem you can read the data by using the [loadStrings()](https://processing.org/reference/loadStrings_.html) function with the [split()](https://processing.org/reference/split_.html) 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.

---

<div class="post-metadata">

**Author:** ![wrdy28](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wrdy28/32/1052_2.png) [@wrdy28](https://discourse.processing.org/u/wrdy28)\
**Post date:** [August 9, 2018, 11:57am UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/11 "2018-08-09T11:57:42Z")

</div>

Hey!  
Now I have worked a bit more and now it looks this way -

```auto
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?

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 9, 2018, 12:06pm UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/12 "2018-08-09T12:06:21Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![wrdy28](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wrdy28/32/1052_2.png) [@wrdy28](https://discourse.processing.org/u/wrdy28)\
**Post date:** [August 9, 2018, 12:16pm UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/13 "2018-08-09T12:16:57Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 9, 2018, 12:36pm UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/14 "2018-08-09T12:36:43Z")

</div>

Here what the strucutre of your code could look like:

```auto
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`.

---

<div class="post-metadata">

**Author:** ![wrdy28](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wrdy28/32/1052_2.png) [@wrdy28](https://discourse.processing.org/u/wrdy28)\
**Post date:** [August 10, 2018, 4:18pm UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/15 "2018-08-10T16:18:35Z")

</div>

Wow! Thank you so much!!! I will try it right now!

---

<div class="post-metadata">

**Author:** ![wrdy28](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wrdy28/32/1052_2.png) [@wrdy28](https://discourse.processing.org/u/wrdy28)\
**Post date:** [August 10, 2018, 5:43pm UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/16 "2018-08-10T17:43:05Z")

</div>

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?

```auto
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);
  }
}

```

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 10, 2018, 6:20pm UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/17 "2018-08-10T18:20:08Z")

</div>

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/](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.

---

<div class="post-metadata">

**Author:** ![wrdy28](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wrdy28/32/1052_2.png) [@wrdy28](https://discourse.processing.org/u/wrdy28)\
**Post date:** [August 10, 2018, 6:25pm UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/18 "2018-08-10T18:25:03Z")

</div>

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? =(

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 10, 2018, 6:33pm UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/19 "2018-08-10T18:33:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![wrdy28](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wrdy28/32/1052_2.png) [@wrdy28](https://discourse.processing.org/u/wrdy28)\
**Post date:** [August 10, 2018, 6:41pm UTC](https://discourse.processing.org/t/data-visualization-with-own-images/2452/20 "2018-08-10T18:41:02Z")

</div>

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”…

```auto
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);
  }
}

```

[Next page](https://discourse.processing.org/t/data-visualization-with-own-images/2452.md?page=2)