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 :
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 :
void displayArrow(){
// Code to display your arrow
}
Then in your code, you can “call” your function by doing so (just like stroke
or image
):
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 :
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 :
int yArrowLocation = map(temperature, ..., ...);
displayArrow(x, yArrowLocation);