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.
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);
}
}
}
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
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 :
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)
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?
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);
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?
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);
