-
Notifications
You must be signed in to change notification settings - Fork 58
/
assignment.html
196 lines (177 loc) · 9.75 KB
/
assignment.html
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Turtle graphics</title>
<style>
pre, code { font-weight: bold }
.body { padding: 0cm 1cm 1cm 1cm; margin: 1cm; border-style: solid; border-width: 1pt }
</style>
</head>
<body>
<div class="body">
<h1>AFP assignment: turtle graphics.</h1>
<p>You are going to implement an <i>embedded domain specific language</i> to
describe <i>turtle graphics</i>. The goal of this assignment is to give you a
feel for the design issues involved with an embedded language and experience
with first-class IO values and graphical user interfaces.</p>
<p>The idea is that there is a turtle that carries a pencil that can draw on a
canvas. The turtle is knows just two primitive commands:</p>
<pre>right d
forward n</pre>
<p>That is, it can go <code>forward</code> for <code>n</code> units, or it can
turn <code>right</code> over <code>d</code> degrees. For example, we can draw a
square using the following commands: </p>
<pre>forward 50
right 90
forward 50
right 90
forward 50
right 90
forward 50</pre>
<p>You can find more examples and information at the following webpage: <a href="http://el.www.media.mit.edu/groups/logo-foundation/logo/turtle.html">http://el.www.media.mit.edu/groups/logo-foundation/logo/turtle.html</a>
</p>
<h2>Prerequisites </h2>
<p>It is encouraged to do this assignment with the <b>wxHaskell 0.2</b> library
at <a href="http://wxhaskell.sourceforge.net">http://wxhaskell.sourceforge.net</a>.
Unfortunately, this means that you need ghc 6.01 and administrator rights.
This implies that only people with access to a computer that they own, can do
this assignment with <b>wxHaskell</b>. I can probably provide a few people (up
to 4) with a dedicated computer in the ST-lab in the CGN building.
</p>
<p>If you really need to work on a standard lab machine, you can also do the
assignment using the <b>SOE</b> graphics library for Hugs: <a href="http://cvs.haskell.org/Hugs/pages/downloading.htm">http://cvs.haskell.org/Hugs/pages/downloading.htm</a>.
See their documentation about how to open windows and do drawing.
</p>
<h2>Assignments </h2>
<h3>Assignment 1</h3>
<p>Implement the turtle language as an embedded language in Haskell. The
language is embedded in Haskell as a single module that exports abstract data
types and associated operations. You should consider carefully what operations
you want to expose to the user so that programming with turtles becomes
convenient. For example, you could start with an interface like this:</p>
<pre>data Drawing </pre>
<pre>forward :: Double -> Drawing
right :: Double -> Drawing
...</pre>
<p>Of course, this is just an example and you can define another kind of
interface, as long as it has the same basic functionality. In both cases, you
need to be able to defend why you have chosen for a particular approach. Other
turtle commands you should implement are <code>penup</code> and <code>pendown</code>,
to either hide or show the trail of the turtle, <code>color</code> that changes
the color of the pen, and <font face="d"><code>stop</code></font> to end a
program.</p>
<p>Other commands are somewhat easier to add: <code>backward</code>, <code>left</code>,
and <code>repeat</code>. Why are these easier to add?</p>
<p>You should also provide an <code>execute</code> function that takes a turtle
program and runs it. Think about how general your function should be: should it
open its own window and take of everything itself, or should it be parameterised
by a window or drawing functions? Explain why you have chosen a particular
approach. Think also about a coordinate system: do you use pixels as units? what
happens on a resize of the window? Note that your turtle should start in
the center, going upwards.</p>
<p>You implementation doesn't have to show a turtle: it just has to show how the
final result looks like. Check your implementation by implementing the spiral
example from the <a href="http://el.www.media.mit.edu/groups/logo-foundation/logo/turtle.html">http://el.www.media.mit.edu/groups/logo-foundation/logo/turtle.html</a>
webpage.</p>
<pre><img border="1" src="images/turtle-spiral.gif" align="right" hspace="10" vspace="10" width="120" height="120">to spiral :size :angle
if :size > 100 [stop]
forward :size
right :angle
spiral :size + 2 :angle
end</pre>
<p>Of course, you would implement your examples in a separate module than the <code>Turtle</code>
module.</p>
<h3>Assignment 1a (optional)</h3>
<p>Instead of drawing the result of a turtle drawing, show how the drawing is
drawn. You don't have to show a turtle itself, just showing the effect of the
turtle moving around is good enough. You could use a <code>timer</code> together
with a mutable variable and <code>repaint</code> to animate the drawing. Look at
the wxHaskell <i>bouncing balls</i> example for an illustration of their usage.
If you use SOE graphics, you can probably use <code>sleep</code> (or <code>Win32.sleep</code>)
to achieve the same effect.</p>
<p>Once this works, you can also try to implement the <code>forever</code>
operator.</p>
<h3>Assignment 2</h3>
<p>Implement parallel composition to your interface. One possible interface
could be:</p>
<pre>(<|>) :: Drawing -> Drawing -> Drawing</pre>
<p>When you execute the drawing <code>p <|> q</code> there will be two
turtles, one drawing p, the other drawing q in parallel. </p>
<p>Think about what happens after a parallel composition finishes? Is the
operator commutative? and associative? Why would these laws be important to a
programmer? </p>
<h3>Assignment 3 </h3>
Several other extensions to the simple turtle language can be made. Implement at
least one extension from this list:<p><b>1.</b> You could add a <b>save</b> construct to the language.
<pre><b> save :: Program -> Program
</b></pre>
The meaning of the program <b>save p</b> is to recall the current position of
the turtle and to continue with the program as if nothing happened. But as soon
as we are done, we return to the saved state and execute the program <b>p</b>
from that point. When you have several <b>save</b> statements in your program,
all of them should be saved and later executed, but you may decide yourself in
what order.
<p><b>2.</b> You could add a <b>pause</b> construct to your language. In this
case, you will add a button with the text "Continue" to the graphical
interface. This button is normally inactive, but when the turtle program
executes the <b>pause</b> command, it halts, and the "Continue" button
becomes active. When the user clicks on the "Continue" button, the
program continues and the continue button becomes inactive again.
<p><b>3.</b> Similar to <b>2</b>., but instead of an explicit pause, you have a
combinator called <b>stepping</b>.
<pre><b> stepping :: Program -> Program
</b></pre>
The meaning of the program <b>stepping p</b> is: execute <b>p</b> as normal, but
the user is required to click the "Continue" button at every step
during the execution of <b>p</b>.
<p><b>4.</b> Add the commands <b>showturtle</b> and <b>hideturtle</b> to your
language, which toggle between having a turtle picture shown when drawing the
pictures or not. A variant of this allows different turtle bitmaps and maybe
even a background image. One can then describe simple animations. Also see the
section "Up and Away" from the above mentioned turtle web page.
<p><b>5.</b> Add a way to your language of finding out information about for
example, where the turtle currently is, or if the user clicks or drags the mouse. It
should of course be possible to then use this information in your turtle
programs.
<p><b>6.</b> Invent your own extension to the turtle language. By extension I
mean something that cannot be implemented in terms of the existing language
constructs. </p>
<h3>Assignment 4 </h3>
<p>Create a cool picture that uses some or all the extensions that you have
made. To keep up a long standing tradition, the team with the best demo,
subjectively chosen by me :-), wins a bag of M&M's. </p>
<h3>Assignment 5 </h3>
<p>Answer and motivate the following questions:</p>
<ol>
<li>Compare the usability of your embedding against a custom-made
implementation of a turtle language with dedicated syntax and interpreters.
How easy is it to write programs in your embedded language compared to a
dedicated language? What are the advantages and disadvantages of an
embedding?</li>
<li>Compare the ease of implementation of your embedding against a custom-made
implementation. How easy was it to implement the language and extensions in
your embedded language compared to a dedicated language? What are the
advantages/disadvantages of an embedding?</li>
<li>In what way have you used the following programming language features:
higher-order functions, laziness, and polymorphism?</li>
</ol>
<h2>Submission</h2>
<p>You should send your submission before <b>Sunday, 28 September, 23:59h</b> to
<a href="mailto:daan@cs.uu.nl">daan@cs.uu.nl</a> with the subject <b>afp submission</b>. In the body, you should put the names of your team and
the student numbers. You should attach the following (zipped/tarred) files:</p>
<ol>
<li>A module <code>Turtle.hs</code> that contains your embedding of the turtle
language.</li>
<li>A module <code>Main.hs</code> that contains your examples. If I run <code>main</code>,
I should see the coolest example you have made.</li>
<li>A text file named <code>report</code> that contains the answers to the
questions and comments and motivations about your implementation.</li>
</ol>
Your code will also be judged on elegance!
<p>Success!
</div>
</body>
</html>