# Creating a temperature simulation

**URL:** <https://discourse.processing.org/t/creating-a-temperature-simulation/21183>\
**Category:** Coding Questions\
**Created:** [May 22, 2020, 9:46pm UTC](https://discourse.processing.org/t/creating-a-temperature-simulation/21183 "2020-05-22T21:46:44Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![abc123](https://avatars.discourse-cdn.com/v4/letter/a/b5e925/32.png) [@abc123](https://discourse.processing.org/u/abc123)\
**Post date:** [May 22, 2020, 9:46pm UTC](https://discourse.processing.org/t/creating-a-temperature-simulation/21183/1 "2020-05-22T21:46:45Z")

</div>

I’m trying to creating a temperature simulation. I’m loading a picture of a room, and I want to add an arrow showing the temperature. The temperature should increase when a certain key is pressed. I’m wondering how I can create this, I came up with this so far, I’m a beginner.

```auto
PImage bathImg;

void setup() {
  size(800,600);
  
  bathImg = loadImage("picture URL"); //picture of the room
  
}

void draw() {
   background(0);
  if (bathImg != null) {
    for (int i = 0; i < 5; i++) {
      image(bathImg, 0, bathImg.height * i);
  }
 }
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 22, 2020, 10:13pm UTC](https://discourse.processing.org/t/creating-a-temperature-simulation/21183/2 "2020-05-22T22:13:21Z")

</div>

Hi,

Welcome to the community! 🙂

Some advice on your code :

- Don’t check `if(bathImg != null)` in the `draw()` function, because it’s going to check this every frame which is useless. Instead, put an if statement in the setup function after you loaded your image. (You might not even want to do this because Processing raise an error when an image is not correctly loaded…)

- What is the point of doing a `for` loop where you display your images? Unless your image is very small (but you can’t see it), putting `bathImg.height * i` in the y coordinate of the function `image()` is going to display them at 1 pixel of difference each time

This results in doing :

```auto
image(bathImg, 0, 0);
image(bathImg, 0, 1);
image(bathImg, 0, 2);
image(bathImg, 0, 3);
image(bathImg, 0, 4);

```

But you see that 1 pixel of difference in the y direction is very small compared to the definition of your screen (probably 1920x1080px).

Next, for your temperature simulation, do you plan to draw the arrow or do you have an image of it?

Few links you might want to check for the interaction :

- [keyPressed()](https://processing.org/reference/keyPressed_.html)
- [keyCode](https://processing.org/reference/keyCode.html)

---

<div class="post-metadata">

**Author:** ![abc123](https://avatars.discourse-cdn.com/v4/letter/a/b5e925/32.png) [@abc123](https://discourse.processing.org/u/abc123)\
**Post date:** [May 22, 2020, 10:52pm UTC](https://discourse.processing.org/t/creating-a-temperature-simulation/21183/3 "2020-05-22T22:52:21Z")

</div>

Thank you very much for your tips! I’m very new to this so all tips are very welcome.

As for the arrow, i’m planning to draw it out.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 22, 2020, 11:00pm UTC](https://discourse.processing.org/t/creating-a-temperature-simulation/21183/4 "2020-05-22T23:00:34Z")

</div>

You are welcome 😉

For the arrow, again useful links :

- [triangle](https://processing.org/reference/triangle_.html)
- [rectangle](https://processing.org/reference/rect_.html)
- [The map() function](https://processing.org/reference/map_.html) to convert the range of your temperature to the range of the y location of the arrow

Feel free to ask if you have any questions!

---

<div class="post-metadata">

**Author:** ![abc123](https://avatars.discourse-cdn.com/v4/letter/a/b5e925/32.png) [@abc123](https://discourse.processing.org/u/abc123)\
**Post date:** [May 23, 2020, 5:48pm UTC](https://discourse.processing.org/t/creating-a-temperature-simulation/21183/5 "2020-05-23T17:48:53Z")

</div>

For now my code is looking like this. It’s creating two circular figures that move along with the mouse. Any suggestions on how I create the arrow?

```auto
PImage bathImg;

void setup() {
  size(800,600);
  
  noStroke();
  
  bathImg = loadImage("URL picture");
  
}

void draw() {
image(bathImg, 0, 0);
image(bathImg, 0, 1);
image(bathImg, 0, 2);
image(bathImg, 0, 3);
image(bathImg, 0, 4);

float x1 = map(mouseX, 0, width, 50, 150);
  ellipse(x1, 75, 50, 50);  
  float x2 = map(mouseX, 0, width, 0, 200);
  ellipse(x2, 125, 50, 50); 
  }

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 23, 2020, 6:07pm UTC](https://discourse.processing.org/t/creating-a-temperature-simulation/21183/6 "2020-05-23T18:07:34Z")

</div>

Hi,

I think you are misleading here but it’s normal as a beginner 😉 so let’s recap :

- As I said, there’s is no reason to display your image 5 times at 1 pixel of difference in the y direction (0, 1, … 4). It’s going to overlap them and it’s useless. You just need to display your image once at every frame.  
Since the `image()` function take the location of the upper left corner of the image, you only need this instruction :

```auto
image(bathImg, 0, 0);

```

- I suppose that you want your image to fill entirely the window so put the resolution in `size()` equal to the resolution of your image

- Remember that the `draw()` function is executing roughly 60 times per second in order for your eyes to perceive animation. So at every frame you need to display your image (it’s going to clear the whole window considering the previous point) and then your arrow

- I see that you understood the usage of the `map()` function so you can use it to display your arrow

- Check my previous post, you can find functions to display your arrow (hint : an arrow is composed of a rectangle and a triangle for the tip)

Hope it helps!

---

<div class="post-metadata">

**Author:** ![abc123](https://avatars.discourse-cdn.com/v4/letter/a/b5e925/32.png) [@abc123](https://discourse.processing.org/u/abc123)\
**Post date:** [May 23, 2020, 6:56pm UTC](https://discourse.processing.org/t/creating-a-temperature-simulation/21183/7 "2020-05-23T18:56:23Z")

</div>

Thanks for your help, I somehow managed to create the arrow but the triangle is not connected to the actual rectangle. I don’t know why, and the Image is also covering the arrow. Any solution how to fix this?

```auto
PImage bathImg;

void setup() {
  size(1000,800);
  
  noStroke();
  
  bathImg = loadImage("...");
  
beginShape();
triangle(5,20,30,5,55,20);
stroke(0);
rect(5, 200, 50, 500);
stroke(0);
endShape();
}

void draw() {
image(bathImg, 0, 0);

float x1 = map(mouseX, 0, width, 50, 150);
ellipse(x1, 75, 50, 50);  
float x2 = map(mouseX, 0, width, 0, 200);
ellipse(x2, 125, 50, 50); 
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 23, 2020, 11:07pm UTC](https://discourse.processing.org/t/creating-a-temperature-simulation/21183/8 "2020-05-23T23:07:49Z")

</div>

> [@josephh](#):
>
> Remember that the `draw()` function is executing roughly 60 times per second in order for your eyes to perceive animation. So at every frame you need to display your image (it’s going to clear the whole window considering the previous point) and then your arrow

If you display your arrow in the setup function, then at the first frame in the `draw()` function, your are going to cover it by displaying your image.

Instead, you want your arrow to be on top of your image (remember that the computer reads instructions from top to bottom) so the steps are :

```auto
void draw(){
  // 1) Display your image
  image(bathImg, 0, 0);
  // 2) Display your arrow
  displayArrow();
}

```

You noticed here that I somehow used a function called `displayArrow()`. This function does not exists in the Processing core library but the goal is to create one.

A function is just a piece of code that you can reuse. For example :

```auto
void displayArrow(){
  // Code to display your arrow
}

```

Then in your code, you can “call” your function by doing so (just like `stroke` or `image`):

```auto
displayArrow();

```

Let’s imagine that this function is drawing an arrow at a certain location on the screen. If you want to change it’s location, you need to add parameters to your function :

```auto
void displayArrow(int x, int y){
  // Code to display your arrow at location [x, y]
  rect(...);
  triangle(...);
}

```

Then in your code, you call your function with the temperature value mapped :

```auto
int yArrowLocation = map(temperature, ..., ...);
displayArrow(x, yArrowLocation);

```

---

<div class="post-metadata">

**Author:** ![abc123](https://avatars.discourse-cdn.com/v4/letter/a/b5e925/32.png) [@abc123](https://discourse.processing.org/u/abc123)\
**Post date:** [May 24, 2020, 6:47am UTC](https://discourse.processing.org/t/creating-a-temperature-simulation/21183/9 "2020-05-24T06:47:47Z")

</div>

I did something different but I noticed that I need to put the arrow in draw. I can display my arrow but the temperature is always the same value. How does my code look like? How can I change the code so the value goes up and down?

Edit: it’s now working. But how does my code look like? anything looking crazy?

```auto
PImage bathImg;

void setup() {
  size(800,600);
  noStroke();
  bathImg = loadImage("..."); 
}

void draw() {
float value = 1;
float m = map(mouseX, 0, 100, 0, width);

image(bathImg, 0, 0);
float x1 = map(mouseX, 0, width, 50, 150); 
ellipse(x1, 75, 50, 50);  

beginShape();
triangle(5,20,30,5,55,20);
stroke(0);
rect(5, 20, 50, 500);
stroke(0);
endShape(CLOSE);

fill(30);
textAlign(CENTER);
text("Temperature: " + int(m * 100),width/2,60); 
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 24, 2020, 10:21am UTC](https://discourse.processing.org/t/creating-a-temperature-simulation/21183/10 "2020-05-24T10:21:47Z")

</div>

Hi,

Nice tip : you can press `Ctrl+T` in the Processing IDE to auto format your code (correcting indentation).

> [@abc123](#):
>
> How can I change the code so the value goes up and down?

Remember [keyPressed()](https://processing.org/reference/keyPressed_.html) and [keyCode](https://processing.org/reference/keyCode.html) if you want your value to go up and down when you press a certain key.

Concerning your code :

- try not do declare values that are useless (ex `float value = 1;`).

- Put relevant variable declaration next to the area where you use it :

```auto
float m = map(mouseX, 0, 100, 0, width);

fill(30);
textAlign(CENTER);
text("Temperature: " + int(m * 100),width/2,60);

```

- Make a separation with a space each time you have an argument in a function call ex : `call(arg1, arg2, arg3, arg4, ..., argN);`

- You should really put the code to display your arrow in a function so you can easily change the position of the arrow depending on the temperature.

---

<div class="post-metadata">

**Author:** ![abc123](https://avatars.discourse-cdn.com/v4/letter/a/b5e925/32.png) [@abc123](https://discourse.processing.org/u/abc123)\
**Post date:** [May 24, 2020, 2:42pm UTC](https://discourse.processing.org/t/creating-a-temperature-simulation/21183/11 "2020-05-24T14:42:47Z")

</div>

Sorry but i don’t understand this:  
Make a separation with a space each time you have an argument in a function call ex : `call(arg1, arg2, arg3, arg4, ..., argN);`

Could u please explain further?

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 24, 2020, 3:01pm UTC](https://discourse.processing.org/t/creating-a-temperature-simulation/21183/12 "2020-05-24T15:01:33Z")

</div>

This is just a coding convention, to improve readability of your code :

Here for example, `triangle` is a function and `triangle(arg1, arg2, ..., arg6);` is calling the function triangle with 6 arguments.

Use :

```auto
triangle(5, 20, 30, 5, 55, 20);

```

instead of

```auto
triangle(5,20,30,5,55,20);

```

---

<div class="post-metadata">

**Author:** ![abc123](https://avatars.discourse-cdn.com/v4/letter/a/b5e925/32.png) [@abc123](https://discourse.processing.org/u/abc123)\
**Post date:** [May 25, 2020, 7:38pm UTC](https://discourse.processing.org/t/creating-a-temperature-simulation/21183/13 "2020-05-25T19:38:53Z")

</div>

Is it possible to create a slider so that when I adjust the slider, temperature goes up/down?

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 25, 2020, 8:06pm UTC](https://discourse.processing.org/t/creating-a-temperature-simulation/21183/14 "2020-05-25T20:06:34Z")

</div>

I suggest you use the library [ControlP5](http://www.sojamo.de/libraries/controlp5) to create user interface elements : buttons, text fields, color picker, graphs…

Check the example with a slider : [http://www.sojamo.de/libraries/controlP5/examples/controllers/ControlP5slider/ControlP5slider.pde](http://www.sojamo.de/libraries/controlP5/examples/controllers/ControlP5slider/ControlP5slider.pde)

Otherwise you can code a slider yourself but it require a little bit more work if you want to do it wright. 🙂