Home 04: Advanced drawing - Scale
Content
Cancel

04: Advanced drawing - Scale

Another thing we can do with our drawing is to scale certain parts or everything of it.

To achieve that, we can start with our translated emoji code and add a new line after the translate command to scale it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
background(255, 255, 255);

push();
translate(150, 150);
scale(1.5);

strokeWeight(2);

// The background of the emoji
fill(255, 255, 0);
ellipse(0, 0, 200);

// The eyes of the emoji
fill(255, 255, 255);
ellipse(-30, -20, 40);
ellipse(20, -30, 60);

// The pupils of the emoji
fill(0, 0, 0);
ellipse(-20, -20, 10);
ellipse(0, -40, 10);

// The mouth and the teeth of the emoji
fill(255, 255, 255);
rect(-60, 20, 120, 40, 20);
line(-60, 40, 60, 40);
line(-40, 20, -40, 60);
line(-20, 20, -20, 60);
line(0, 20, 0, 60);
line(20, 20, 20, 60);
line(40, 20, 40, 60);

pop();

Example of a scaled emoji The emoji is scaled

You notice that it works quite similar to our rotation example.

If we only want to scale a certain part of our emoji, for example the mouth, we can add another push() command in front of the drawing code for the mouth that we would like to scale and use the scale command right afterwards. Don’t forget to use the pop() command after you draw your scaled mouth. As you can see, you can use the push() and pop() commands in a nested style.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
background(255, 255, 255);

push();
translate(150, 150);
scale(1.5);

strokeWeight(2);

// The background of the emoji
fill(255, 255, 0);
ellipse(0, 0, 200);

// The eyes of the emoji
fill(255, 255, 255);
ellipse(-30, -20, 40);
ellipse(20, -30, 60);

// The pupils of the emoji
fill(0, 0, 0);
ellipse(-20, -20, 10);
ellipse(0, -40, 10);

push();
scale(0.5);

// The mouth and the teeth of the emoji
fill(255, 255, 255);
rect(-60, 20, 120, 40, 20);
line(-60, 40, 60, 40);
line(-40, 20, -40, 60);
line(-20, 20, -20, 60);
line(0, 20, 0, 60);
line(20, 20, 20, 60);
line(40, 20, 40, 60);

pop();

pop();

Example of a partly scaled emoji The mouth of the emoji is scaled

You should play around and get used to these commands now. For example, attempt to combine scale and rotate for one eye and maybe only rotate for the other eye of your emoji.

This post is licensed under CC BY 4.0 by the author.