Repository navigation
Expand file tree
/
Copy pathCh1_Karel.html
More file actions
872 lines (868 loc) · 36.3 KB
/
Copy pathCh1_Karel.html
File metadata and controls
872 lines (868 loc) · 36.3 KB
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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript: Ch1 Karel</title>
<meta name="title" content="Variations on a Theme: JavaScript: Ch1 Karel">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="UTF-8">
<meta name="description" content="An object-oriented Introduction">
<meta name="keywords" content="JavaScript,object orientation,introduction">
<meta name="author" content="Ralph P. Lano">
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="book.css">
</head>
<body>
<center>
<div id="wrap">
<ul class="sidenav">
<p><a href="../index.html">Variations on a Theme</a><a href="index.html">JavaScript</a></p>
<li><a href="Ch1_Karel.html">Karel</a></li>
<li><a href="Ch2_Graphics.html">Graphics</a></li>
<li><a href="Ch3_Console.html">Console</a></li>
<li><a href="Ch4_Agrar.html">Agrar</a></li>
<li><a href="Ch5_MindReader.html">MindReader</a></li>
<li><a href="Ch6_Swing.html">Swing</a></li>
<li><a href="Ch7_Asteroids.html">Asteroids</a></li>
<li><a href="Ch8_Stocks.html">Stocks</a></li>
<li><a href="index.html"> </a></li>
<li><a href="AppA_Primer.html">Primer</a></li>
<li><a href="AppB_Libraries.html">Libraries</a></li>
<li><a href="AppC_Ideas.html">Ideas</a></li>
</ul>
<div class="content">
<p>
<img alt="" src="img/370d2c62-31d7-47b3-8bd0-31d0e60fafb0.png"
style="display: block; margin-left: auto; margin-right: auto; width: 310px; height: 212px;" />
</p>
<h1>
Karel</h1>
<p>
Karel is a little robot that looks a bit like an old iMac. On the following pages we will learn a
lot from Karel. Although it seems trivial, in this chapter we probably learn the most important
lesson of the whole book, namely to break down complex problems into simpler ones with the top-down
approach.</p>
<p>
A little note for people who already know how to program a bit: don't skip this chapter! In
principle, this chapter is about learning and practicing the top-down approach with simple examples,
getting used to a good coding style, and learn how to code without using variables.</p>
<p>
.</p>
<h2>
Karel's World</h2>
<p>
Karel's world consists of streets and avenues. Streets run from west to east and avenues from
south to north. Besides, there are walls Karel can't go through, and there are beepers. Karel
always carries a bag with an infinite number of beepers, but beepers can also lie around anywhere in
his world.</p>
<p>
Karel knows only four commands:</p>
<ul>
<li>
<strong>move():</strong> he can move one step forward,
</li>
<li>
<strong>turnLeft():</strong> he can turn to the left,
</li>
<li>
<strong>pickBeeper():</strong> he can pick up a beeper, and
</li>
<li>
<strong>putBeeper():</strong> he can put a beeper down.
</li>
</ul>
<p>
Although it doesn't look like much, it turns out that Karel can calculate anything there is to
calculate, we say Karel is a 'universal computing machine'.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/Ch1_Karel/tryItKarel.html?name=firstKarel"
style="display: block; text-align: center;" target="_blank"><img alt=""
src="img/firstKarel2.png" style="width: 200px; height: 121px; display: block;" />Try it</a>
</div>
<h2>
Karel learns to walk</h2>
<p>
If we want Karel to pick up the beeper at location (3,2) and carry it to location (5,2), we would
tell him:</p>
<p>
"Karel, take two steps forward, then pick up the beeper, turn left, move one step forward, turn
three times to the left, move two more steps forward and put down the beeper."</p>
<p>
Why should Karel turn three times to the left? Because he doesn't know how to 'turn to the
right', nobody has ever shown him that.</p>
<p>
Since Karel doesn't understand English, we have to talk to him in his language. which sounds
like this:</p>
<pre style="margin-left: 40px;">
move();
move();
pickBeeper();
turnLeft();
move();
turnLeft();
turnLeft();
turnLeft();
move();
move();
putBeeper();</pre>
<p>
Like nobody really understands why you need these funny punctuation marks in English (like commas,
periods etc.), nobody knows why Karel needs these round brackets (called parentheses) and
semicolons. But we can't do without them. Karel also pays meticulous attention to upper and
lower case, if we make a typo he does nothing at all.</p>
<p>
.</p>
<h2>
Karel Program</h2>
<p>
So for Karel to start his chores we need something called a 'program'. This is
actually JavaScript, but we don't need to know that. A Karel program looks like this:</p>
<pre style="margin-left: 40px;">
function run() {
<span style="color:#0000ff;"> move();
move();
pickBeeper();
turnLeft();
move();
turnLeft();
turnLeft();
turnLeft();
move();
putBeeper();</span>
}</pre>
<p>
The part that is important for us is marked in blue. In all that follows we will simply insert
our Karel commands (also called code) replacing the blue lines above. We don't care about the
rest of the program.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/Ch1_Karel/tryItKarel.html?name=goodMorningKarel"
style="display: block; text-align: center;" target="_blank"><img alt=""
src="img/goodMorningKarel2.png" style="width: 200px; height: 200px; display: block;" />Try
it</a>
</div>
<h2>
Exercise: GoodMorningKarel</h2>
<p>
We want to solve our next Karel problem: Karel has just woken up and wants to drink his morning
milk. However, the milk is still at the doorstep where the milkman left it. So Karel has to get up,
go to the door, get the milk and then sit down at his breakfast table to drink his milk. How would
that look in Karel's language?</p>
<p>
.</p>
<h2>
Karel learns new Tricks</h2>
<p>
Karel is a bit like a pet and we can teach him new tricks. First, let's teach him to turn
to the right. We tell him that every time he sees the turnRight() command, he should turn left
three times. For Karel to understand us, we have to use his language:</p>
<pre style="margin-left: 40px;">
function turnRight() {
turnLeft();
turnLeft();
turnLeft();
}</pre>
<p>
Now we can just use this new command and Karel understands what to do. Commands we sometimes
also call <em>functions</em>, e.g. turnRight() is a function, but also move(). In general,
functions are always indicated by parentheses.</p>
<p>
Question: What should be the syntax for a turnAround() command that causes Karel to turn around and
look in the opposite direction?</p>
<p>
.</p>
<h2>
Exercise: GoodMorningKarel</h2>
<p>
To see that this really works, we want to modify our GoodMorningKarel so that it uses a turnRight()
instead of three turnLeft()'s.</p>
<p>
.</p>
<h2>
Karel repeats himself</h2>
<p>
It is very common that Karel should do something over and over again. For example, he should
turn three times to the left or he should walk two steps. For this we have something called a
loop, more precisely a 'for loop'. In Karel's language this looks like:</p>
<pre style="margin-left: 40px;">
function turnRight() {
for (let i = 0; i < <span style="color:#0000ff;">3</span>; i++) {
turnLeft();
}
}</pre>
<p>
What is important here is the '3', which tells Karel that he should do whatever is inside
the curly brackets, three times. We do not need to understand the rest for the time being.
(Very few people understand it, they just copy the lines and change the '3'.)</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/Ch1_Karel/tryItKarel.html?name=fillRowKarel"
style="display: block; text-align: center;" target="_blank"><img alt=""
src="img/fillRowKarel2.png" style="width: 200px; height: 121px; display: block;" />Try
it</a>
</div>
<h2>
Exercise: FillRowKarel</h2>
<p>
Another application for our loop is FillRowKarel. We want Karel to put five beepers in a
row. This actually seems to be a very simple problem, and one would think that the following
lines</p>
<pre style="margin-left: 40px;">
function run() {
for (let i = 0; i < 5; i++) {
putBeeper();
move();
}
}</pre>
<p>
should solve the problem.</p>
<p>
<img alt="" src="img/deadKarel2.png"
style="margin-left: 10px; margin-right: 10px; width: 200px; height: 99px; float: right;" />However,
we realize that Karel runs into the wall at the end and hurts himself. In the program we see
that when the red window pops up in which Karel is stung by a wasp. To avoid this, we could
only go through the loop four times. But then Karel would only put down four beepers and not
five. This problem occurs so often that it has a name: it is called the O-Bob problem.
</p>
<p>
.</p>
<h2>
OBOB</h2>
<p>
O-Bob was a Jedi master who first noticed this problem when he tried to program his droid.
Seriously, OBOB actually stands for 'off by one bug', usually one to few. In our
FillRowKarel problem this means that Karel simply has to put an extra beeper in the end:</p>
<pre style="margin-left: 40px;">
function run() {
for (let i = 0; i < 4; i++) {
putBeeper();
move();
}
putBeeper();
}</pre>
<p>
Right now, we have to live with that. In the next chapter we will see how the
'Loop-and-a-half' can be used to avoid the O-Bob problem elegantly.</p>
<p>
.</p>
<h2>
Karel has Sensors</h2>
<p>
There's one little thing I haven't told you yet: Karel has sensors. For example, he
can sense if there is a beeper at the location he is at the moment. So if we wanted Karel to
pick up a beeper, if there is one, we could use the following Karel commands:</p>
<pre style="margin-left: 40px;">
if ( beepersPresent() ) {
pickBeeper();
}
</pre>
<p>
So Karel has another command, the <em>if</em> command.</p>
<p>
Karel has a lot of sensors, the most important ones are:</p>
<ul>
<li>
<strong>beepersPresent():</strong> there is a beeper at the current location,
</li>
<li>
<strong>noBeepersPresent():</strong> there is no beeper at the current location,
</li>
<li>
<strong>frontIsClear():</strong> there is no wall in front of Karel, and
</li>
<li>
<strong>frontIsBlocked():</strong> there is a wall in front of Karel, so Karel should not
try to move forward or he will hit his head.
</li>
</ul>
<p>
Additionally, there are also sensors for rightIsClear() and leftIsClear(), together with their
respective blocked variants. Right actually means down, and left actually means up, always
relative to the direction in which Karel is looking.</p>
<p>
.</p>
<h2>
Karel, go ahead</h2>
<p>
Very often we want Karel to do something until something happens. For example, as long as
there is no wall in front of him, Karel should move straight. This is where Karel's while
command comes in handy:</p>
<pre style="margin-left: 40px;">
while ( frontIsClear() ) {
move();
}
</pre>
<p>
i.e., as long as there is no wall in front of him, Karel should move straight. This construct
is called the 'while loop'.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/Ch1_Karel/tryItKarel.html?name=wallKarel" style="display: block; text-align: center;"
target="_blank"><img alt="" src="img/wallKarel2.png"
style="width: 200px; height: 121px; display: block;" />Try it</a>
</div>
<h2>
Exercise: WallKarel</h2>
<p>
How would a new command <em>moveToWall()</em> look like, which causes Karel to move to the next
wall? In WallKarel we want to get Karel to walk straight until a wall comes up. We want
to use our new command moveToWall(), because then the code becomes very simple and elegant.</p>
<p>
This example leads us to our first Software Engineering Principles (SEP):</p>
<p>
<strong>SEP: Programs should be readable by people and should look like relatively normal
English.</strong>
</p>
<p>
.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/Ch1_Karel/tryItKarel.html?name=infiniteLoopKarel"
style="display: block; text-align: center;" target="_blank"><img alt=""
src="img/infiniteLoopKarel2.png" style="width: 200px; height: 121px; display: block;" />Try
it</a>
</div>
<h2>
Exercise: InfiniteLoopKarel</h2>
<p>
The while loop is not entirely unproblematic: because Karel does something until something special
happens. In our InfiniteLoopKarel example, Karel should turn to the left until there is no
more wall in front of him:</p>
<pre style="margin-left: 40px;">
while ( frontIsClear() ) {
turnLeft();
}
</pre>
<p>
This works well as long as Karel is somewhere next to a wall. But if Karel is in the middle of
his world, he does not stop turning. This is then called an infinite loop or Merry-Go-Round
Karel.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/Ch1_Karel/tryItKarel.html?name=robinHoodKarel"
style="display: block; text-align: center;" target="_blank"><img alt=""
src="img/robinHoodKarel2.png" style="width: 200px; height: 121px; display: block;" />Try
it</a>
</div>
<h2>
Exercise: RobinHoodKarel</h2>
<p>
Karel loves the movies. The other day he saw the movie 'Robin Hood'. According
to his motto 'take from the rich and give to the poor', Karel walks through his world and
every time there is a beeper in the streets he picks it up, and whenever there is no beeper, he puts
one down.<br />
To do this, we can use Karel's sensors:</p>
<pre style="margin-left: 40px;">
if ( beepersPresent() ) {
pickBeeper();
}
if ( noBeepersPresent() ) {
putBeeper();
}
</pre>
<p>
If we put these lines inside our while loop above, then we almost solved our problem. It works
fine if there is no beeper. However, if there is one, Karel first removes it. But
then he sees that there is no beeper, and hence puts a beeper where he shouldn't. To solve
this problem we need the else command:</p>
<pre style="margin-left: 40px;">
if ( beepersPresent() ) {
pickBeeper();
} else {
putBeeper();
}
</pre>
<p>
It reads like this: if there's a beeper pick it up, otherwise put one down.</p>
<p>
.</p>
<h2>
Top-Down Approach</h2>
<p>
In principle, there are two ways to solve any problem. One is the bottom-up approach: starting
from the things you know, you try to solve the problem. So far we have used this approach to
solve our Karel problems: with the few commands Karel knows and his sensors, we have solved simple
problem step by step. For simple problems this works quite well.<br />
For more complex problems, however, this no longer works very well. The top-down method
becomes extremely helpful here. In the top-down approach we usually have a problem, which
seems impossible to solve at first. However, one very often succeeds in breaking down the
complex problem into smaller sub-problems. Sometimes those can be solved directly, sometimes
those have to be broken down into even smaller sub-problems. This process is called
'stepwise refinement'. Let's take a look at the WindowCleaningKarel example, and
see how it works.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/Ch1_Karel/tryItKarel.html?name=windowCleaningKarel"
style="display: block; text-align: center;" target="_blank"><img alt=""
src="img/windowCleaningKarel2.png"
style="width: 200px; height: 200px; display: block;" />Try it</a>
</div>
<h2>
Exercise: WindowCleaningKarel</h2>
<p>
Karel lives in Chicago. And he makes a living by cleaning windows. The job is not
entirely harmless, since he is cleaning skyscrapers. Karel has to clean five skyscrapers a
week. They are not all the same, some are higher some are less high. Actually, Karel
likes the higher ones better, but they're more work.<br />
We want to solve this problem using the top-down approach. It is therefore a question of
breaking down the big problem into smaller ones. Suppose we knew how Karel cleans one
skyscraper, so assume we had a function called <em>cleanOneSkyScraper()</em>. Then the
solution to our problem would be very simple, we would just use cleanOneSkyScraper() five times:</p>
<pre style="margin-left: 40px;">
for (let i = 0; i < 5; i++) {
cleanOneSkyScraper();
}
</pre>
<p>
So we've solved our big problem.<br />
Now we have to solve the slightly smaller problem cleanOneSkyScraper(). How does Karel clean
one skyscraper? Still the problem is to complicated to solve it with move's and
turnLeft's. Hence, we need to break it down one more time. If we knew how Karel
moves up the skyscraper, moveUpAndClean(), moves over the skyscraper, moveOver(), and on the other
side then moves down the skyscraper again, moveDownAndClean(), then we would have solved the problem
cleanOneSkyScraper():</p>
<pre style="margin-left: 40px;">
function cleanOneSkyscraper() {
moveUpAndClean();
moveOver();
moveDownAndClean();
}
</pre>
<p>
Although we are not quite finished yet, we can see that we are basically done. We can easily
solve the last three commands. For moveUpAndClean(), we let Karel turn to the left, and then
let him move as long as his right side is blocked. For moveOver(), we let Karel turn right,
move two steps forward and then turn right again. moveDownAndClean() is actually like moveToWall(),
but at the end he has to turn left once more.</p>
<p>
.</p>
<h2>
Recommendations for the Top-Down Approach</h2>
<p>
Sometimes it is not quite clear when the top-down approach is finished. Here are a few
recommendations to help you:</p>
<ul>
<li>
one function should solve exactly one problem,</li>
<li>
a function should not have more than 15 lines of code, around five lines is ideal, and</li>
<li>
function names should describe what the function does.</li>
</ul>
<p>
.</p>
<h2>
Comments</h2>
<p>
Every good program has comments. The more important it is, the more comments it has.
What are comments? Comments are descriptions of what the program, what the code does.
They are intended for people who are trying to understand the program. The computer ignores
the comments.<br />
The syntax is actually quite simple: a comment starts with the characters '/**' and ends
with the characters '*/'. Usually a comment is located at the very beginning of a
program and explains what the program as a whole does. In addition, you should briefly
describe what each function does. If you want to do it really well, then you also describe
briefly which assumptions you make when the function is called (pre-conditions) and in what state
you leave the world after the function is finished (post-conditions).</p>
<pre style="margin-left: 40px;">
/**
* Karel has to clean five skyscrapers, one at a time.
*
* PreCondition: Karel is standing in front of the first skyscraper, facing
* east <br/>
* PostCondition: Karel is standing behind the last skyscraper, facing east
*/
function run() {
for (let i = 0; i < 5; i++) {
cleanOneSkyscraper();
}
}
/**
* Karel has to clean one skyscraper
*
* PreCondition: Karel is standing in front of the one skyscraper, facing
* east <br/>
* PostCondition: Karel is standing behind this one skyscraper, facing east
*/
function cleanOneSkyscraper() {
moveUpAndClean();
moveOver();
moveDownAndClean();
}
...
</pre>
<p>
If the functions are kept short, comments within functions are not necessary. Again, the point
is that programs should read like good English.</p>
<p>
.</p>
<h2>
Exercise: Comments</h2>
<p>
As a little exercise, we want to add detailed comments to the WindowCleaningKarel program. For
all future programs we write, we should get used to adding a little comment to each program and
function. This makes the programs easier to understand (for people).</p>
<p>
.</p>
<hr />
<h1>
Review</h1>
<p>
In this chapter we have taken our first programming steps by helping Karel to solve his
problems. In addition,</p>
<ul>
<li>
we have taught Karel new commands, also called functions, e.g. moveToWall(),</li>
<li>
we let Karel repeat things with the for loop, e.g. make three steps forward,</li>
<li>
we have seen that Karel has sensors and we got to know the if statement,</li>
<li>
we learned about the while loop,</li>
<li>
we acquainted ourselves with our first software engineering principles,</li>
<li>
we made our first programming errors, e.g. the OBOB and the infinite loop, </li>
<li>
and we learned about comments.</li>
</ul>
<p>
But the most important thing we learned in this chapter was the top-down approach. Its goal is
to break down a big problem into smaller ones, and to repeat this until each sub-problem is easy to
solve. This approach can be applied not only to programming problems, but also to solve
problems in all possible other fields.</p>
<p>
.</p>
<hr />
<h1>
Projects</h1>
<p>
We know enough about Karel now to help him solve any problems he may have. In the book by
Pavel Solin [4] there are many more Karel examples.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/Pr1_Karel/tryItKarel.html?name=writingKarel"
style="display: block; text-align: center;" target="_blank"><img alt=""
src="img/writingKarel2.png" style="width: 200px; height: 164px; display: block;" />Try
it</a>
</div>
<h2>
WritingKarel</h2>
<p>
Karel learned to write in school. His favorite letter is the 'K'. So we want to help Karel
write his favorite letter using the top-down approach.</p>
<p>
.</p>
<p>
</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/Pr1_Karel/tryItKarel.html?name=adventureKarel"
style="display: block; text-align: center;" target="_blank"><img alt=""
src="img/adventureKarel2.png" style="width: 200px; height: 164px; display: block;" />Try
it</a>
</div>
<h2>
AdventureKarel</h2>
<p>
Karel is not a coward, on the contrary, he loves adventures. But that can be quite dangerous
sometimes. The other day he was at the White Cliffs of Dover. Of course he wants to get
as close as possible, but he doesn't want to fall over either (Karel can't swim). What
makes this problem hard is that we don't know how far the cliffs are.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/Pr1_Karel/tryItKarel.html?name=partyKarel"
style="display: block; text-align: center;" target="_blank"><img alt=""
src="img/partyKarel2.png" style="width: 200px; height: 164px; display: block;" />Try it</a>
</div>
<h2>
PartyKarel</h2>
<p>
Karel lives in a flat, which he shares with his brother SuperKarel. Both love parties and
after the last one it looks like cabbage and turnips in their apartment. Tonight Karel's
parents are coming to visit, so he has to clean up. Let's help Karel fix his apartment by
cleaning up all the beepers lying around.<br />
The part that makes this program a bit complicated is that Karel should stop after cleaning
everything up.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/Pr1_Karel/tryItKarel.html?name=easterEggKarel"
style="display: block; text-align: center;" target="_blank"><img alt=""
src="img/easterEggKarel2.png" style="width: 200px; height: 164px; display: block;" />Try
it</a>
</div>
<h2>
EasterEggKarel</h2>
<p>
Karel loves Easter and searching for Easter eggs. His parents were hiding them all over the
garden, so we'll help Karel collect all the Easter eggs. Since he will visits his
grandparents later, and their garden is much larger, the program must also work for gardens of
different sizes.<br />
Again, we want to make sure Karel stops when he is finished.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/Pr1_Karel/tryItKarel.html?name=tulipKarel"
style="display: block; text-align: center;" target="_blank"><img alt=""
src="img/tulipKarel2.png" style="width: 200px; height: 164px; display: block;" />Try it</a>
</div>
<h2>
TulipKarel</h2>
<p>
Karel has Dutch ancestors, that's why he loves tulips. And every winter he plants tulip
bulbs, so that his garden is full of tulips again in spring. Let's help Karel with
planting the tulips, but using the top-down approach. Since Karel also plants tulips for his
parents and grandparents, our program has to work for differently sized gardens.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/Pr1_Karel/tryItKarel.html?name=builderKarel"
style="display: block; text-align: center;" target="_blank"><img alt=""
src="img/builderKarel2.png" style="width: 200px; height: 128px; display: block;" />Try
it</a>
</div>
<h2>
BuilderKarel</h2>
<p>
From time to time there are tornadoes in Chicago. The last one got Karel's house. It
is still standing but the pillars have gotten some damage and have to be repaired. In
Karel's house there are three pillars, which are of course made of beepers. The three
pillars are three steps apart, but could be of different heights. Let's help Karel repair
his house, of course with the top-down approach.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/Pr1_Karel/tryItKarel.html?name=pyramidKarel"
style="display: block; text-align: center;" target="_blank"><img alt=""
src="img/pyramidKarel2.png" style="width: 200px; height: 200px; display: block;" />Try
it</a>
</div>
<h2>
PyramidKarel</h2>
<p>
We have already heard that Karel is a little adventurer. The other day he saw a report on TV
about the pyramids, and of course he has to build one in his garden immediately. Since he
wants to build several, of different sizes, our program should work in worlds with different sizes
as well, so it makes sense to use the top-down approach again.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/Pr1_Karel/tryItKarel.html?name=yardstickKarel"
style="display: block; text-align: center;" target="_blank"><img alt=""
src="img/yardstickKarel2.png" style="width: 200px; height: 164px; display: block;" />Try
it</a>
</div>
<h2>
YardstickKarel</h2>
<p>
Karel is not quite as stupid as he looks. He can actually count even though he has no fingers
(or variables). Karel counts with beepers. In this example he is supposed to measure how
long the yardstick in front of him is. So we want him to put as many beepers as the yardstick
is long, at the end of the street he is standing on.<br />
We can assume that Karel is standing just before the yardstick.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/Pr1_Karel/tryItKarel.html?name=doubleBeeperKarel"
style="display: block; text-align: center;" target="_blank"><img alt=""
src="img/doubleBeeperKarel2.png" style="width: 200px; height: 121px; display: block;" />Try
it</a>
</div>
<h2>
DoubleBeeperKarel</h2>
<p>
Karel can also do math. In this example he should double the number of beepers lying on the
pile in front of him. After being finished, we want Karel to stand in front of the pile
again. Very important: Karel does not know about variables, and although he can count (see
last example) this does not really help. Furthermore, the program should work for any number
of beepers.</p>
<p>
The easiest way to solve this problem is the top-down approach. How about turning one beeper
into two? And you do that until there are no more beepers.</p>
<p>
Question: What would the code look like if Karel is to triple or halve the number of beepers?</p>
<p>
So Karel can do any of the basic arithmetic operations, and with those he can actually calculate
anything there is to be calculated, one also says Karel is a <em>Universal Computing Machine</em>.
</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/Pr1_Karel/tryItKarel.html?name=donkeyKongKarel"
style="display: block; text-align: center;" target="_blank"><img alt=""
src="img/donkeyKongKarel2.png" style="width: 200px; height: 164px; display: block;" />Try
it</a>
</div>
<h2>
DonkeyKongKarel</h2>
<p>
Karel likes to play computer games when not cleaning windows. Preferably the classic arcade games of
the 80's. His favorite game is Donkey Kong. This game is about collecting as many beepers as
possible and moving from one level to the next. The exit is at the top right and we can assume that
one level consists of nine floors.</p>
<p>
Of course we use the top-down approach again.</p>
<p>
</p>
<p>
.</p>
<p>
.</p>
<div style="display:block; float: right; margin: 10px;">
<a href="./src/Pr1_Karel/tryItKarel.html?name=breadcrumbKarel"
style="display: block; text-align: center;" target="_blank"><img alt=""
src="img/breadcrumbKarel2.png" style="width: 200px; height: 200px; display: block;" />Try
it</a>
</div>
<h2>
BreadcrumbKarel</h2>
<p>
Karel read about the Cretan princess Ariadne and how she helped Theseus to escape the labyrinth of
the Minotaur. So he thought he could do the same thing using breadcrumbs.</p>
<p>
.</p>
<p>
.</p>
<p>
.</p>
<hr />
<h1>
Questions</h1>
<ol>
<li>
Name the four most important commands of Karel.<br />
</li>
<li>
Give an example of an Off By One Bug (OBOB).<br />
</li>
<li>
In the exercise "PartyKarel" you taught Karel how to clean up. Explain briefly how
Karel will clean up the beeper chaos. (No code required, just outline your procedure in
words)<br />
</li>
<li>
Like 3) only with PyramidKarel, DoubleBeepersKarel, WindowCleaningKarel,...<br />
</li>
<li>
In the lecture we got to know recommendations for the top-down approach. These are rules
regarding the names of functions, how many lines of code a function should have, etc. Name two
of these guidelines.<br />
</li>
<li>
What are comments good for?<br />
</li>
<li>
What is the difference between bottom-up design and top-down design? Which is
preferable?<br />
</li>
<li>
Karel watched the film 'Robin Hood' and was totally impressed by the hero. That is why
he wants to follow his example "take from the rich and give to the poor". So you
should write a Karel program in which Karel picks up a beeper when he finds one and puts one
down when there is none. To solve the problem, you may make the following assumptions
about the world:<br />
• The world is at least 3x3.<br />
• At the start, Karel stands at the corner of 1st Street and 1st Avenue, looking east and
has an infinite number of beepers in his beeper bag.<br />
Make sure that you only use Karel commands.</li>
</ol>
<p>
.</p>
<hr />
<h1>
References</h1>
<p>
The idea behind Karel comes from Rich Pattis, a former student of Stanford University [1]. The
name 'Karel' is inspired by the first name of the Czech writer Karel Capek in whose play
R.U.R. (Rossum's Universal Robots) the word 'robot' appears for the first time
[2]. More details about Karel with many examples can be found in the Karel Reader [3].
Many of the examples used here are from the Karel Reader [3] and the Stanford Lecture
'Programming Methodologies' [4]. Even more Karel examples can be found in the book by
Pavel Solin [5].</p>
<p>
[1] Karel the Robot: A Gentle Introduction to the Art of Programming by R.E. Pattis</p>
<p>
[2] Seite „Karel Čapek“. In: Wikipedia, Die freie Enzyklopädie. URL: <a
href="https://de.wikipedia.org/w/index.php?title=Karel_%C4%8Capek&oldid=148374315">https://de.wikipedia.org/w/index.php?title=Karel_%C4%8Capek&oldid=148374315</a>
</p>
<p>
[3] KAREL THE ROBOT LEARNS JAVA, von Eric Roberts</p>
<p>
[4] CS106A - Programming Methodology - Stanford University, <a
href="https://see.stanford.edu/Course/CS106A">https://see.stanford.edu/Course/CS106A</a></p>
<p>
[5] Learn How to Think with Karel the Robot, von Pavel Solin, <a
href="http://femhub.com/pavel/work/textbook-1.pdf">http://femhub.com/pavel/work/textbook-1.pdf</a>
</p>
<p>
.</p>
<p class="footer">
Copyright © 2016-2023 <a href="http://www.lano.de">Ralph P. Lano</a>. All rights reserved.
</p>
</div>
</div>
</center>
</body>
</html>