prfm programming 2
TRANSCRIPT
Prfm Programming Language #2
@yllan
……with English notes in blue!
1
Recaphttp://youtu.be/_pjoep6U3tg
Episode #1
2
•Spatially → Patterns
•Temporally → Animations
We can control our drawings with Prfm Programming Language both:
, which creates
, which creates
3
• Position → [translate 500 100]
• Size → [scale 0.5]
• Orientation → [rotate 3.14159]
• Brush → [brush 3]
SpatiallyThis is what we’ve learnt in Episode 1: Make spatial changes to our drawings.
4
Repetition
[repeat 5] [draw 0] [scale 0.5 0.5][end]
Pattern!
By making repeated spatial changes, we can make visual patterns!
(This is what we’ve learnt in Episode 1)
5
How the language really works
Before we introduce how to make temporal changes,you have to understand:
6
Stack
The idea is simple. It’s called
7
What is a stack?
• First In, Last Out.
Imagine a pile of boxes. We can 1) put a new box, or 2) take out a box on top of the pile.
Since we always operate on the top, the box at the bottom can only be taken out until all of the boxes above it were taken out.
That’s an important property of a stack:
8
Example 1
Let’s see how stack works inPrfm Programming Language.
9
[4][2][3][add]
Consider the following code:
Remember? Prfm Programming Language commands are enclosed in brackets. We have four commands here.
10
[4][2][3][add]
4
Let’s look at the first command. Number enclosed in brackets is called “numeric literal.”
It will push the number to an invisible stack.
Let me plot the stack out: there we have a “4” on the stack.
11
[4][2][3][add]
4
2
Then we push a “2” on the stack.
12
[4][2][3][add]
4
2
3
“3”, so on and so forth.
Notice the stack is in the reverse order of the code execution.
13
[4][2][3][add]
4
2
3
Now here is the interesting part. We want to add things. “But adding what?” you may wonder.
14
[4][2][3][add ]
4
2
3
It will add things on the stack. (Does that surprise you?)
Addition requires two numbers. We first pop the top element, a.k.a. “3”, out of the stack.
Then fill it into the last “placeholder.”
15
[4][2][3][add ]
4
2 3
Similarly, we pop out the second number from the stack, fill it into the first “placeholder.”
* Keep in mind that the fill-in order is reverse to the pop-out order. It doesn’t matter in this case because 2 + 3 = 3 + 2. But in non-commutative operations (e.g. subtraction, division), the order matters.
16
[4][2][3][add]
4
5
Once we have enough numbers to add, it calculates 2 + 3 = 5.
Where does our result go? You’re right.We push it back to stack.
17
Example 2
18
[100][200][translate]
100
200
Suppose we’ve already push 100 and 200 into stack. Let’s start with the 3rd line.
In episode 1, we’ve learnt the translate command. It takes two numbers, x and y respectively.
19
[100][200][translate ]
100
200
As we demonstrate in Example 1, we take the top number from stack and fill it in the last placeholder.
20
[100][200][translate ]100 200
…continually take number from stack and fill it in placeholder.
21
[100][200][translate ]100 200
[translate 100 200]
It is identical to the following code––what we’ve learnt in episode 1.
Since this ☝ work fine, why bother manipulating stack?
22
[brush 3][draw 0]
[brush][draw]
Well, if you write down the number explicitly, the command will always execute the same. But if you leave the number on stack, the translation amount will no longer a constant––it depends on the result of previous calculation. That’s more flexible.
Always use brush #3 to draw drawing #0
Depends on what’s on stack. Use brush #X to draw drawing #Y.
You can control that.
23
Example 3
OK. Now let’s see how repetition actually work.
24
[3][repeat] [brush 0] [draw 0][end]
3
We’ve seen this code in episode 1.
It will draw the same drawing at the same location three times. Since they all coincide, the result looks exactly as drawing only one time.
OK. We’ve push 3 into stack.
25
[3][repeat ] [brush 0] [draw 0][end]
3
>0 ?
The repeat command will take a number from stack, compare it to zero.
26
[3][repeat] [brush 0] [draw 0][end]
2
If it’s greater than zero, then minus one and push it back to stack.
27
[3][repeat] [brush 0] [draw 0][end]
2
Use brush #0
28
[3][repeat] [brush 0] [draw 0][end]
2
Draw drawing #0
29
[3][repeat] [brush 0] [draw 0][end]
2Jump to the matching [repeat].
30
[3][repeat] [brush 0] [draw 0][end]
2
The repeat command will take a number from stack, compare it to zero.
31
[3][repeat ] [brush 0] [draw 0][end]
2
>0 ?
If it’s greater than zero, then minus one and push it back to stack.
32
[3][repeat] [brush 0] [draw 0][end]
1
……and so on and so forth.
33
[3][repeat] [brush 0] [draw 0][end]
1
34
[3][repeat] [brush 0] [draw 0][end]
1
35
[3][repeat] [brush 0] [draw 0][end]
1
36
[3][repeat] [brush 0] [draw 0][end]
1
37
[3][repeat ] [brush 0] [draw 0][end]
1
>0 ?
38
[3][repeat] [brush 0] [draw 0][end]
0
39
[3][repeat] [brush 0] [draw 0][end]
0
40
[3][repeat] [brush 0] [draw 0][end]
0
41
[3][repeat] [brush 0] [draw 0][end]
0
42
[3][repeat] [brush 0] [draw 0][end]
0
43
[3][repeat ] [brush 0] [draw 0][end]
0
>0 ?
The repeat command will take a number from stack, compare it to zero.
If it’s greater than zero, then…
Oh no! It’s no longer greater than zero.
44
[3][repeat ] [brush 0] [draw 0][end]
0
>0 ?
Just jump to the next command of the matching [end].
45
[3][repeat] [brush 0] [draw 0][end]
Finished.
46
Example 4
Now you know how the repetition work.
47
[3][repeat] [brush] [draw 0][end]
3
The previous example is boring. We want to use different brushes each times.
Let’s change the [brush 0] to [brush]. It will use what’s on stack as the brush number. We’ve observed that the value of the top element decrease each time in the loop.
This should work, right?
Spoiler: no. Why not?
48
[3][repeat ] [brush] [draw 0][end]
3
>0 ?
Compare to zero, greater, minus one, put it back.
49
[3][repeat] [brush] [draw 0][end]
2
50
[3][repeat] [brush] [draw 0][end]
2
Pop the number from stack, filled into the last placeholder.
51
[3][repeat] [brush ] [draw 0][end]
2 Ok. Use brush #2.
52
[3][repeat] [brush] [draw 0][end]
Draw #0
53
[3][repeat] [brush] [draw 0][end] Jump back to the matching
[repeat].
54
[3][repeat] [brush] [draw 0][end]
Compare to zero……Wait, there is nothing left on stack!
Nothing to compare. Jump to the next command of the matching [end].
Program finished.
Do you see the problem? [brush] “ate” the number that is used by [repeat].
55
ref / remove
So here comes the principle:
Don’t eat others lunch unless you’re sure no one will starve.
We introduce two commands to manipulate the stack. You can copy/delete one element on stack.
56
ref / remove
12
3
9
5
17
0
1
2
3
4 -1
-2
-3
-4
-5
[12][3][9][5][17][ref 2][ref -1][remove]
[ref] copies the element at given position. If the position is positive, it counts from bottom. vice versa.
copy this to the top
57
ref / remove
12
3
9
5
17
0
1
2
3
4
-1
-2
-3
-4
-5
[12][3][9][5][17][ref 2][ref -1][remove]
95
-6
58
ref / remove
12
3
9
5
17
0
1
2
3
4
-1
-2
-3
-4
-5
[12][3][9][5][17][ref 2][ref -1][remove]
95
-6
copy this to the top
59
ref / remove
12
3
9
5
17
0
1
2
3
4
-1
-2
-3
-4
-5
[12][3][9][5][17][ref 2][ref -1][remove]
95
-6
96
-7
60
ref / remove
12
3
9
5
17
0
1
2
3
4
-1
-2
-3
-4
-5
[12][3][9][5][17][ref 2][ref -1][remove]
95
-6
96
-7
remove the top
61
ref / remove
[12][3][9][5][17][ref 2][ref -1][remove]
12
3
9
5
17
0
1
2
3
4
-1
-2
-3
-4
-5
95
-6
62
[3][repeat] [ref -1] [brush] [draw 0][end]
This is how to fix the program.
Insert a [ref -1] to make a copy of the top element of the stack before [brush].
How this program work is left as exercise. You can try yourself at the Perfume Global Website.
In the next episode, we will talk about animations. See you!
63