forked from bjpop/js-turtle
-
Notifications
You must be signed in to change notification settings - Fork 7
/
overview.html
127 lines (127 loc) · 5.52 KB
/
overview.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
<!doctype html>
<html>
<head>
<title>JavaScript Turtle Graphics</title>
<link rel="stylesheet" href="turtleweb.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Poppins|Roboto" rel="stylesheet">
</head>
<body>
<header>
<h1>JavaScript Turtle Graphics</h1>
<div class="navigation">
<ul>
<li><a class="active" href="overview.html" title="Overview of Turtle Graphics">Intro</a></li>
<li><a href="guide.html" title="User Guide for Turtle Graphics Integrated Development Environment">Guide</a></li>
<li><a href="turtle.html" title="Integrated Development Environment for Turtle Graphics">IDE</a></li>
<li><a href="javascript.html" title="Tutorial for Simple JavaScript">JavaScript</a></li>
<li><a href="tutorial.html" title="Tutorial for Basic Turtle Graphics">Tutorial</a></li>
<li><a href="animation.html" title="Tutorial for Animation with Turtle Graphics">Animation</a></li>
<li><a href="examples.html" title="Examples of Things Created with Turtle Graphics">Examples</a></li>
<li><a href="reference.html" title="Language Reference">Reference</a></li>
<li><a href="nerd.html" title="Nerd Links">Nerd</a></li>
<li><a href="about.html" title="About Turtle Graphics">About</a></li>
</div>
</header>
<article>
<h2>Introduction</h2>
<p>
Turtle Graphics are an easy way to learn computer programming
and to do computer graphics.
You give simple commands to a turtle and it moves accordingly.
The turtle has a pen in its belly, so that as it moves it can
mark the screen.
These commands are things like:
</p>
<ul>
<li>move forward some distance,</li>
<li>move backward some distance,</li>
<li>turn right so many degrees,</li>
<li>turn left so many degrees,</li>
<li>lift the pen up,</li>
<li>put the pen down,</li>
<li>change the color of the pen, and</li>
<li>change the width of the pen.</li>
</ul>
<p>
The commands are interpreted by the turtle from its perspective,
so a right turn command is the turtle's right, not your right or the
computer screen's right.
</p>
<p>
The intent of this implementation is to help students make the
bridge between Blocky drag and drop code and real programming
with text that has to be typed. This implementation is based on
JavaScript, the language that provides action to internet browsers.
JavaScript is an easy to learn language, but it is also has the power
to do complex things and is used on some
network computers that serve web content, or in other words,
network servers.
</p>
<p>
Students will have to learn to debug dreaded syntax errors. Syntax is
a fancy way to say grammar. Words and symbols must be used in a fairly
precise way to communicate program intent to a very picky computer.
This is similar to how how English must be used a precise way to
communicate effectively, although we sometimes get lazy and allow
some incorrect or grammar. Computers are not very tolerant.
Debugging is part of a programmer's skill. You will find that
enbugging, the art of putting bugs into your code, takes very little
skill at all, but debugging sometimes takes the skills of a detective.
</p>
<p>
When you use JavaScript Turtle Graphics you will use a set of functions
that command the turtle to do things. These functions extend JavaScript
and are collectively known as a library.
The functions are expressed in JavaScript and are implemented in JavaScript.
You may be aware of other implementations of Turtle Graphics, like
Scratch, CodeWarrior, BitsBox. The functions here share some commonality
with those, but there are some differences from those.
</p>
<p>
This implementation extends the traditional Turtle Graphics to provide
functions to fill in shapes, control animations,
provide the rich web coloring options
while incorporating features of other implementations.
The details of the Turtle Graphics functions are contained in the
Language Reference.
</p>
<p>
This implementation also includes an <a href="turtle.html">Integrated Development Environment</a> (IDE).
The IDE allows you to write code and then run it to immediately see its
effects. You can save your code or drawings to your computer.
You can load the saved code when you want to return to your work.
</p>
<p>
Turtle Graphics and the IDE are written in JavaScript and runs on common
modern browsers. It has been tested extensively on Chrome and Firefox.
No other code is required. If desired, Turtle Graphics can run on your
computer without an internet connection. Just clone or download the files
found at <a href="https://github.com/kirkcarlson/js-turtle">
https://github.com/kirkcarlson/js-turtle</a> into a directory
on your computer. This gives you all of
the source files, documentation and Linux development tools.
Use it by accessing one of the .html files with your browser.
</p>
<p>
If you are new to programming you may want to take a look at a tutorial on
<a href="javascript.html">JavaScript</a> or a <a href="tutorial.html">
tutorial</a> for JavaScript Turtle Graphics.
There is an <a href="turtle.html">Integrated Development Environment</a>
that allows you to write code and
immediately see the results of that code. If you want, there is a
<a href="guide">guide</a> for using the IDE.
</p>
<h2>History</h2>
<p>
Turtle Graphics were originally introduced by MIT in the 1960s as
part of the Logo language.
Since then Turtle Graphics have been implemented in many ways and in
many languages.
Turtle Graphics have been used to explore topics in computer science as well
as to help beginners learn how to program.
The commands allow someone to program drawings without having to
know much about how graphics are done by the underlying computer.
</p>
</article>
</body>
</html>