# 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:** 1\
**Showing post:** 8

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

```

---

_[View the full topic](https://discourse.processing.org/t/creating-a-temperature-simulation/21183)._