How do I resize a drawing in a processing applet? - resize

Question

I imported the processing language into Java and I drew a simple house.
Like:
rect (75, 175, 350, 175);
// door
rect (225, 275, 50, 75);
// roof
triangle (250, 100, 75, 175, 425, 175);
// windows
rect (125, 200, 50, 50);
rect (325, 200, 50, 50);
I want to be able to resize the image, or scale that image when I change the window size. Right now the window size is just 500 by 500, but if I expand the window it doesn't expand the drawing with it.
I tried using scale(), but for some reason it scaled the image for like a millisecond and then reverted back to the unscaled version. My java teacher told me the draw method in processing refreshes at something like 60 times per second, but I don't see why it would be different from the first time.

Answer 1

If you want your drawing to scale with the window, you're going to need to base all your coordinates off the width and height variables.
For example, let's say I'm drawing a 200x200 circle inside a 200x200 window:
size(200, 200);
ellipse(100, 100, 200, 200);
If I then change the size of the window to 400x400, then I have to change the parameters I'm passing into the ellipse() function:
size(400, 400);
ellipse(200, 200, 400, 400);
This can be annoying (as you're experiencing), so it's better to just base your parameters off the width and height variables. That way whenever your window size changes, Processing does the calculation for you and the drawing scaled with your window.
size(600, 600);
ellipse(width/2, height/2, width, height);
This is just an example, but the process for you would be the same: go through and change every value to be based off the width and height variables instead of hard-coded numbers.
More info can be found here: Using Variables - HappyCoding.io
(full disclosure: I wrote that tutorial, but I think it explains exactly what you're asking about)
Edit: You asked about the scale() method, so I'll explain that below. But if you're trying to base the size of your drawing off the size of your window, then you should use the above approach! But since this is a homework assignment, you're restricted to doing it the way the teacher says. Anyway...
Let's look at a simple program:
size(100, 100);
ellipse(50, 50, 10, 10);
This code simply creates a 100x100 sized window and then draws a small ellipse in the center:
If we wanted to make the circle bigger, we could use the scale() function. You can think of the scale() function as automatically multiplying every parameter you pass into a drawing function (like ellipse() or rect()) by whatever number(s) you pass into the scale() function.
For example, this code multiplies every number by 2:
size(100, 100);
scale(2);
ellipse(50, 50, 10, 10);
The circle is now twice as large, but it's also no longer in the center. That's because we're also multiplying 50,50 (the center of the window) by 2 to get 100,100 (the bottom-right corner of the window). To fix that, we either need to change the 50,50:
size(100, 100);
scale(2);
ellipse(25, 25, 10, 10);
Or we could use the translate() function to move the coordinates before we do the scale:
size(100, 100);
translate(50, 50);
scale(2);
ellipse(0, 0, 10, 10);
Either approach is fine, so it's really up to which one makes more sense to you. Now we have a big centered circle, even though we're still sizing it to 10,10.