Creating a temperature simulation

Processing Coding Questions
#1

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);
  }
 }
}
1 Like
#2

Hi,

Welcome to the community! :slight_smile:

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 :

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 :

1 Like
#3

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.

#4

You are welcome :wink:

For the arrow, again useful links :

Feel free to ask if you have any questions!

#5

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?

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

Hi,

I think you are misleading here but it’s normal as a beginner :wink: 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)

Hope it helps!

#7

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?

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

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

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?

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

Hi,

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

Remember keyPressed() and keyCode 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 :

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.

#11

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?

#12

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 :

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

instead of

triangle(5,20,30,5,55,20);
#13

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

#14

I suggest you use the library 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

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