Manu Raghavan

Programming Graphically: A Primer

View demo

Programming Graphically
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// In this tutorial, you will come to learn the basics of programming constructs, covering creating and manipulating numbers, text, and computer graphics using a custom programming language, "P-Lisp"

// By learning to write basic "functions" -- groups of programming instructions -- 
// you'll learn how different abstractions of instructions can be used for high 
// and low-level instructions to computers.

// Start by entering a simple number at the prompt, and observe that 
// the value is printed back to the console. This doesn't do much to the computer,
// it doesn't store "5" in anywhere permanent; it simply shows you the interactivity at
// your control today
> 5

// The other type of data commonly used is text, which you can enter
// within quotation marks to let the computer understand it as raw text, which is data, and not as "code" or instructions for it to try doing anything with:
> "The quick brown fox"

// Next, try printing some text using the 'print' command. 
// Commands are issued within parentheses, like so:
> (print "Hello world")

// Note that the word 'print' is separate from the words 'Hello World' in how the computer
// expects to treat them. print and () are code, while "Hello World" is data.

// Basic arithmetic can be applied in interesting ways on numbers as well as on text:
> (- 5 3)
> (+ "Hello" "World")

// Each of the operations from the preious step returns a value,
// that can be used to create compound expressions:
> (+ (- 3 5) 17)
> (+ "Manu" " " "was" " " "here.")

// You can create intermediate values and save it to memory for reference at a future point.
// Here's how you can get that value:
> (set name "Manu")

// Once saved to memory, it will last as long as your program does.
// Try retrieving the value you saved using the 'get' command:
> (get name)

// Likewise, you can find the coordinates of the dot on the map by
// retrieving the values 'x' and 'y': 
> (get x)
> (get y)

// To move the line of motion for the dot, try setting its 'x' value to 
// an arbitrary coordinate:
> (set x 200)

// Likewise, you can set the direction of movement by setting the variable 'direction'. 
// {0,1,2,3} map to {"Go north", "Go east", "Go south", "Go west"} for this program
> (set direction 2)

// Finally, we will try to define 'functions' or mini-programs to do this for us using the 'defun' method
> (defun north() (set direction 0))
> (defun east() (set direction 1))

// Try doing the same for west and south.
// Test your results by moving arrow keys after clicking on the map.

Comments