If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

## Computer programming - JavaScript and the web

### Course: Computer programming - JavaScript and the web>Unit 4

Lesson 6: Transformations

# Scaling

The final coordinate system transformation is scaling, which changes the size of the grid. Take a look at this program, which draws a square, then scales the grid to twice its normal size, and draws it again.
First, you can see that the square appears to have moved. It hasn’t, of course. Its upper left corner is still at (20, 20) on the scaled-up grid, but that point is now twice as far away from the origin as it was in the original coordinate system.
If you wanted the large square to start at the same corner as the small square, you could translate first, and then scale:
You might also notice from both of those programs that the lines are thicker on the large squares. That’s no optical illusion—the lines really are twice as thick, because the coordinate system has been scaled to double its size. You could explicitly change the `strokeWeight()` to account for that, or avoid using `scale()` all together.
The `scale()` command optionally accepts two parameters instead of just one, so you can scale the x and y dimensions separately. Try using `scale(3.0, 0.5)` in the above program to make the x dimension three times its normal size and the y dimension only half its normal size.

## Want to join the conversation?

• I'm having trouble on step 2 out of 2 on optical illusion can someone help me?
• I had the exact same issue, but here is my code and it works now.

while (scaleF > 0) {
pushMatrix();
translate(200,200);
scale(scaleF);
drawBlackCircle(diameter);
scaleF -= decreaseAmt;
popMatrix();

pushMatrix();
translate(200,200);
scale(scaleF);
drawWhiteCircle(diameter);
scaleF -= decreaseAmt;
popMatrix();
• The translation, the rotation, and the reflection are the three isometric transformations. (Isometric simply means that an object's size and shape is preserved.) Translations and rotations have both been covered. But, is there a reflection function in Java? If so, what command utilizes it?
• What is the keyboard shortcut for making a block of code into comment?
What is the keyboard shortcut for making a block of code moving left?
Thanks!
• To comment or uncomment the current line, press `Ctrl+/`.

To decrease the indentation level of the currently highlighted lines, press `Shift+Tab`.
• i m not getting the step 2 of optical illusion challenge.....please help...i have tried everything,but its not showing any type of error.
• I am stuck on
challenge : optical illusion.It keeps on saying the while loop is taking to long to run.What should I do to fix it?
• how do I make the screen move with scaling? (Ex: I want to see X: 500!)
Thanks a ton!
• Is it true that if I wanted to make a program usable in any canvas size I could put this at the top of my program:
``scale(width / 400, height / 400);``
• That is correct. Be sure to consistently use `pushMatrix()` and `popMatrix()` instead of `resetMatrix()` when making other transformations so that the initial scale is not reset.
• how do you scale things down?
• I just saw your fill() function had 4 numbers, how that you get that?
(1 vote)
• You type it.
The fourth number is the color's alpha component, which means opacity here.
0 is fully transparent, 255 is fully opaque.
• This technique reminds me of vector graphics. Do built-in functions of ProcessingJS library (such as `rect()`, `line()`...) draw vectors or just some calculated pixels?