1. Prfm Programming
Language #2
@yllan
……with English notes in blue!
1Tuesday, July 2, 13

2. Recaphttp://youtu.be/_pjoep6U3tg
Episode #1
2Tuesday, July 2, 13

3. •Spatially → Patterns
•Temporally → Animations
We can control our drawings with Prfm
Programming Language both:
, which creates
, which creates
3Tuesday, July 2, 13

4. • Position → [translate 500 100]
• Size → [scale 0.5]
• Orientation → [rotate 3.14159]
• Brush → [brush 3]
Spatially
This is what we’ve learnt in Episode 1:
Make spatial changes to our drawings.
4Tuesday, July 2, 13

5. 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)
5Tuesday, July 2, 13

6. How the language really
works
Before we introduce how to make temporal changes,
you have to understand:
6Tuesday, July 2, 13

7. Stack
The idea is simple. It’s called
7Tuesday, July 2, 13

8. 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:
8Tuesday, July 2, 13

9. Example 1
Let’s see how stack works in
Prfm Programming Language.
9Tuesday, July 2, 13

10. [4]
[2]
[3]
[add]
Consider the following code:
Remember? Prfm Programming Language
commands are enclosed in brackets.We
have four commands here.
10Tuesday, July 2, 13

11. [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.
11Tuesday, July 2, 13

12. [4]
[2]
[3]
[add]
4
2
Then we push a “2” on
the stack.
12Tuesday, July 2, 13

13. [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.
13Tuesday, July 2, 13

14. [4]
[2]
[3]
[add]
4
2
3
Now here is the interesting part.
We want to add things.“But adding
what?” you may wonder.
14Tuesday, July 2, 13

15. [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.”
15Tuesday, July 2, 13

16. [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.
16Tuesday, July 2, 13

17. [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.
17Tuesday, July 2, 13

18. Example 2
18Tuesday, July 2, 13

19. [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.
19Tuesday, July 2, 13

20. [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.
20Tuesday, July 2, 13

21. [100]
[200]
[translate ]100 200
…continually take number from stack
and fill it in placeholder.
21Tuesday, July 2, 13

22. [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?
22Tuesday, July 2, 13

23. [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.
23Tuesday, July 2, 13

24. Example 3
OK. Now let’s see how repetition actually work.
24Tuesday, July 2, 13

25. [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.
25Tuesday, July 2, 13

26. [3]
[repeat ]
[brush 0]
[draw 0]
[end]
3
>0 ?
The repeat command will take a
number from stack, compare it to
zero.
26Tuesday, July 2, 13

27. [3]
[repeat]
[brush 0]
[draw 0]
[end]
2
If it’s greater than zero, then minus
one and push it back to stack.
27Tuesday, July 2, 13

28. [3]
[repeat]
[brush 0]
[draw 0]
[end]
2
Use brush #0
28Tuesday, July 2, 13

29. [3]
[repeat]
[brush 0]
[draw 0]
[end]
2
Draw drawing #0
29Tuesday, July 2, 13

30. [3]
[repeat]
[brush 0]
[draw 0]
[end]
2Jump to the matching [repeat].
30Tuesday, July 2, 13

31. [3]
[repeat]
[brush 0]
[draw 0]
[end]
2
The repeat command will take a
number from stack, compare it to
zero.
31Tuesday, July 2, 13

32. [3]
[repeat ]
[brush 0]
[draw 0]
[end]
2
>0 ?
If it’s greater than zero, then minus
one and push it back to stack.
32Tuesday, July 2, 13

33. [3]
[repeat]
[brush 0]
[draw 0]
[end]
1
……and so on and so forth.
33Tuesday, July 2, 13

34. [3]
[repeat]
[brush 0]
[draw 0]
[end]
1
34Tuesday, July 2, 13

35. [3]
[repeat]
[brush 0]
[draw 0]
[end]
1
35Tuesday, July 2, 13

36. [3]
[repeat]
[brush 0]
[draw 0]
[end]
1
36Tuesday, July 2, 13

37. [3]
[repeat]
[brush 0]
[draw 0]
[end]
1
37Tuesday, July 2, 13

38. [3]
[repeat ]
[brush 0]
[draw 0]
[end]
1
>0 ?
38Tuesday, July 2, 13

39. [3]
[repeat]
[brush 0]
[draw 0]
[end]
0
39Tuesday, July 2, 13

40. [3]
[repeat]
[brush 0]
[draw 0]
[end]
0
40Tuesday, July 2, 13

41. [3]
[repeat]
[brush 0]
[draw 0]
[end]
0
41Tuesday, July 2, 13

42. [3]
[repeat]
[brush 0]
[draw 0]
[end]
0
42Tuesday, July 2, 13

43. [3]
[repeat]
[brush 0]
[draw 0]
[end]
0
43Tuesday, July 2, 13

44. [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.
44Tuesday, July 2, 13

45. [3]
[repeat ]
[brush 0]
[draw 0]
[end]
0
>0 ?
Just jump to the next command of
the matching [end].
45Tuesday, July 2, 13

46. [3]
[repeat]
[brush 0]
[draw 0]
[end]
Finished.
46Tuesday, July 2, 13

47. Example 4
Now you know how the repetition work.
47Tuesday, July 2, 13

48. [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?
48Tuesday, July 2, 13

49. [3]
[repeat ]
[brush]
[draw 0]
[end]
3
>0 ?
Compare to zero, greater,
minus one, put it back.
49Tuesday, July 2, 13

50. [3]
[repeat]
[brush]
[draw 0]
[end]
2
50Tuesday, July 2, 13

51. [3]
[repeat]
[brush]
[draw 0]
[end]
2
Pop the number from stack,
filled into the last placeholder.
51Tuesday, July 2, 13

52. [3]
[repeat]
[brush ]
[draw 0]
[end]
2 Ok. Use brush #2.
52Tuesday, July 2, 13

53. [3]
[repeat]
[brush]
[draw 0]
[end]
Draw #0
53Tuesday, July 2, 13

54. [3]
[repeat]
[brush]
[draw 0]
[end] Jump back to the matching
[repeat].
54Tuesday, July 2, 13

55. [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].
55Tuesday, July 2, 13

56. 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.
56Tuesday, July 2, 13

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]
[ref] copies the element at given position. If the
position is positive, it counts from bottom. vice
versa.
copy this to the top
57Tuesday, July 2, 13

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
58Tuesday, July 2, 13

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
copy this to the top
59Tuesday, July 2, 13

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
60Tuesday, July 2, 13

61. 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
61Tuesday, July 2, 13

62. 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
62Tuesday, July 2, 13

63. [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!
63Tuesday, July 2, 13