jrtechs
/
jrtechs-sugarizer-lite
mirror of https://github.com/jrtechs/sugarizer-lite.git

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">  </head>  <body>    <div class="container">      <div id="content">	<h1>Guide to Programming with Turtle Art</h1>	<p>Turtle Blocks expands upon what children can do with Logo and how it	  can be used as the underlying motivator for “improving” programming	  languages and programmable devices.</p>	<p>In this guide, we illustrate this point by both walking the reader	  through numerous examples, but also by discussing some of our favorite	  explorations of Turtle Blocks, including multi-media, the Internet	  (both as a forum for collaboration and data collection), and a broad	  collection of sensors.</p>	<h2>Getting Started</h2>	<p>Turtle Blocks Javascript is designed to run in a browser. Most of the	  development has been done in Chrome, but it should also work in	  Firefox. You can run it directly from index.html, from a <a href="http://turtle.sugarlabs.org">server	    maintained by Sugar Labs</a>, from the	  <a href="http://walterbender.github.io/turtleblocksjs">github	    repo</a>,	  or by setting up a <a href="https://github.com/walterbender/turtleblocksjs/blob/master/server.md">local	    server</a>.</p>	<p>Once you've launched it in your browser, start by clicking on (or	  dragging) blocks from the <em>Turtle</em> palette. Use multiple blocks to	  create drawings; as the turtle moves under your control, colorful	  lines are drawn.</p>	<p>You add blocks to your program by clicking on or dragging them from	  the palette to the main area. You can delete a block by dragging it	  back onto the palette. Click anywhere on a "stack" of blocks to start	  executing that stack or by clicking in the <em>Rabbit</em> (fast) or <em>Turtle</em>	  (slow) on the Main Toolbar. The <em>Snail</em> will step through your	  program, one block per click.</p>	<p>For more details on how to use Turtle Blocks JS, see <a href="http://github.com/walterbender/turtleblocksjs/tree/master/documentation">Using Turtle	    Blocks	    JS</a>	  for more details.</p>	<h2>ABOUT THIS GUIDE</h2>	<p>Many of the examples given in the guide have links to code you can	  run. Look for RUN LIVE links that will take you to	  http://turtle.sugarlabs.org.</p>	<h2>TO SQUARE</h2>	<p>The traditional introduction to Logo has been to draw a square. Often	  times when running a workshop, I have the learners form a circle	  around one volunteer, the "turtle", and invite them to instruct the	  turtle to draw a square. (I coach the volunteer beforehand to take	  every command literally, as does our graphical turtle.) Eventually the	  group converges on "go forward some number of steps", "turn right (or	  left) 90 degrees", "go forward some number of steps", "turn right (or	  left) 90 degrees", "go forward some number of steps", "turn right (or	  left) 90 degrees", "go forward some number of steps". It is only on	  rare occasions that the group includes a final "turn right (or left)	  90 degrees" in order to return the turtle to its original	  orientation. At this point I introduce the concept of "repeat" and	  then we start in with programming with Turtle Blocks.</p>	<h2>1. Turtle Basics</h2>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/basics1.svg'</img></p>		<p>A single line of length 100</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/basics2.svg'</img></p>		<p>Changing the line length to 200</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/basics3.svg'</img></p>		<p>Adding a right turn of 90 degrees. Running this stack four times		  produces a square.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/basics4.svg'</img></p>		<p>Forward, right, forward, right, ...</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/basics5.svg'</img></p>		<p>Using the <em>Repeat</em> block from the <em>Flow</em> palette</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/basics6.svg'</img></p>		<p>Using the <em>Arc</em> block to make rounded corners</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/basics7.svg'</img></p>		<p>Using the <em>Fill</em> blocks from the Pen palette to make a solid square		  (what ever is drawn inside the <em>Fill</em> clamp will be filled upon		  exiting the clamp.)</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/basics8.svg'</img></p>		<p>Changing the color to 70 (blue) using the <em>Set Color</em> block from the		  <em>Pen</em> palette</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/basics9.svg'</img></p>		<p>Using the <em>Random</em> block from the <em>Numbers</em> palette to select a random		  color (0 to 100)</p>		<h2>A SHOEBOX</h2>	<p>When explaining boxes in workshops, I often use a shoebox. I have	  someone write a number on a piece of paper and put it in the	  shoebox. I then ask repeatedly, "What is the number in the box?" Once	  it is clear that we can reference the number in the shoebox, I have	  someone put a different number in the shoebox. Again I ask, "What is	  the number in the box?" The power of the box is that you can refer to	  it multiple times from multiple places in your program.</p>	<h2>2. Boxes</h2>	<p>Boxes let you store an object, e.g., a number, and then refer to the	  object by using the name of the box. (Whenever you name a box, a new	  block is created on the Boxes palette that lets you access the content	  of the box.) This is used in a trivial way in the first example below:	  putting 100 in the box and then referencing the box from the Forward	  block. In the second example, we increase the value of the number	  stored in the box so each time the box is referenced by the Forward	  block, the value is larger.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/boxes1.svg'</img></p>		<p>Putting a value in a <em>Box</em> and then referring to the value in <em>Box</em></p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/boxes2.svg'</img></p>		<p>We can change the value in a <em>Box</em> as the program runs. Here we add 10		  to the value in the *Box( with each iteration. The result in this case		  is a spiral, since the turtle goes forward further with each step.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/boxes3.svg'</img></p>		<p>If we want to make a more complex change, we can store in the <em>Box</em> some		  computed value based on the current content of the <em>Box</em>. Here we		  multiply the content of the box by 1.2 and store the result in the		  <em>Box</em>. The result in this case is also a spiral, but one that grows		  geometrically instead of arithmetically.</p>	<p>In practice, the use of boxes is not unlike the use of keyword-value	  pairs in text-based programming languages. The keyword is the name of	  the <em>Box</em> and the value associated with the keyword is the value stored	  in the <em>Box</em>. You can have as many boxes as you'd like (until you run	  out of memory) and treat the boxes as if they were a dictionary. Note	  that the boxes are global, meaning all turtles and all action stacks	  share the same collection of boxes.</p>	<h2>3. Action Stacks</h2>	<p>With Turtle Blocks there is an opportunity for the learner to expand	  upon the language, taking the conversation in directions unanticipated	  by the Turtle Block developers.</p>	<p><em>Action</em> stacks let you extend the Turtle Blocks language by defining	  new blocks. For example, if you draw lots of squares, you may want a	  block to draw squares. In the examples below, we define an action	  that draws a square (repeat 4 forward 100 right 90), which in turn	  results in a new block on the <em>Actions</em> palette that we can use whenever	  we want to draw a square. Every new <em>Action</em> stack results in a new	  block.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/actions1.svg'</img></p>		<p>Defining an action to create a new block, "<em>Square</em>"</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/actions2.svg'</img></p>		<p>Using the "<em>Square</em>" block</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/actions3.svg'</img></p>		<p>The <em>Do</em> block lets you specify an action by name. In this example, we		  choose "one of" two names, "<em>Square</em>" and "<em>Triangle</em>" to determine which		  action to take.</p>		<h2>4. Parameters</h2>	<p>Parameter blocks hold a value that represents the state of some turtle	  attribute, e.g., the x or y position of the turtle, the heading of the	  turtle, the color of the pen, the size of the pen, etc. You can use	  parameter blocks interchangeably with number blocks. You can change	  their values with the <em>Add</em> block or with the corresponding set blocks.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/parameters1.svg'</img></p>		<p>Using the <em>Heading</em> parameter, which changes each time the turtle		  changes direction, to change the color of a spiral</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/parameters2.svg'</img></p>		<p>"Squiral" by Brian Silverman uses the <em>Heading</em> and <em>X</em> parameter		  blocks. <a href="https://turtle.sugarlabs.org/?file=Card-36.tb&amp;run=True">RUN		    LIVE</a></p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/parameters3.svg'</img></p>		<p>Often you want to just increment a parameter by 1. For this, use the		  <em>Add-1-to</em> block.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/parameters4.svg'</img></p>		<p>To increment (or decrement) a parameter by an arbitrary value, use the		  <em>Add-to</em> block.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/parameters5.svg'</img></p>		<p>To make other changes to a parameter based on the current value, use		  the parameter's <em>Set</em> block. In this example, the pen size is doubled		  with each step in the iteration.</p>		<h2>5. Conditionals</h2>	<p>Conditionals are a powerful tool in computing. They let your program	  behave differently under differing circumstances. The basic idea is	  that if a condition is true, then take some action. Variants include	  if-then-else, while, until, and forever. Turtle Blocks provides	  logical constructs such as equal, greater than, less than, and, or,	  and not.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/conditionals1.svg'</img></p>		<p>Using a conditonal to select a color: Once the heading &gt; 179, the		  color changes. <a href="http://turtle.sugarlabs.org/?file=Conditionals-1.tb&amp;run=true">RUN		    LIVE</a></p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/conditionals2.svg'</img></p>		<p>Conditionals along with the <em>Random</em> block can be used to simulate a		  coin toss.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/conditionals3.svg'</img></p>		<p>A coin toss is such a common operation that we added the <em>One-of</em> block		  as a convenience.</p>		<h2>6. Multimedia</h2>	<p>Turtle Blocks provides rich-media tools that enable the incorporation	  of sound, typography, images, and video.</p>	<p>At the heart of the multimedia extensions is the <em>Show</em> block. It can be	  used to show text, image data from the web or the local file system,	  or a web camera. Other extensions include blocks for synthetic speech,	  tone generation, and video playback.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/media1.svg'</img></p>		<p>Using the <em>Show</em> block to display text; the orientation of the text		  matches the orientation of the turtle. <a href="https://turtle.sugarlabs.org/?file=Media-1.tb&amp;run=True">RUN		    LIVE</a></p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/media2.svg'</img></p>		<p>You can also use the <em>Show</em> block to show images. Clicking on the Image		  block (left) will open a file browser. After selecting an image file		  (PNG, JPG, SVG, etc.) a thumbnail will appear on the <em>Image</em> block		  (right).</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/media3.svg'</img></p>		<p>The <em>Show</em> block in combination with the <em>Camera</em> block will capture and		  display an image from a webcam.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/media4.svg'</img></p>		<p>The <em>Show</em> block can also be used in conjunction with a URL that		  points to media.</p>		<h2>7. Sensors</h2>	<p>Seymour Papert’s idea of learning through making is well supported in	  Turtle Blocks. According to Papert, “learning happens especially	  felicitously in a context where the learner is consciously engaged in	  constructing a public entity, whether it’s a sand castle on the beach	  or a theory of the universe”. Research and development that supports	  and demonstrates the children’s learning benefits as they interact	  with the physical world continues to grow. In similar ways, children	  can communicate with the physical world using a variety of sensors in	  Turtle Blocks. Sensor blocks include keyboard input, sound, time,	  camera, mouse location, color that the turtle sees. For example,	  children may want to build a burglar alarm and save photos of the	  thief to a file. Turtle Blocks also makes it possible to save and	  restore sensor data from a file. Children may use a “URL” block to	  import data from a web page.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/sensors1.svg'</img></p>		<p>Using sensors. The <em>Loudness</em> block is used to determine if there is an		  intruder. A loud sound triggers the alarm action: the turtle shouts		  “intruder” and takes a picture of the intruder.</p>	<p>Teachers from the Sugar community have developed extensive collection	  of examples using Turtle Block sensors. Guzmán Trinidad, a physics	  teacher from Uruguay, wrote a book, <em>Physics of the XO</em>, which includes	  a wide variety of sensors and experiments. Tony Forster, an engineer	  from Australia, has also made remarkable contributions to the	  community by documenting examples using Turtle Blocks. In one example,	  Tony uses the series of switches to measure gravitational	  acceleration; a ball rolling down a ramp trips the switches in	  sequence. Examining the time between switch events can be used to	  determine the gravitational constant.</p>	<p>One of the typical challenges of using sensors is calibration. This is	  true as well in Turtle Blocks. The typical project life-cycle	  includes: (1) reading values; (2) plotting values as they change over	  time; (3) finding minimum and maximum values; and finally (4)	  incorporating the sensor block in a Turtle program.</p>	<h2>Example: Paint</h2>	<p>As described in the Sensors section, Turtle Blocks enables the	  programmer/artist to incorporate sensors into their work. Among the	  sensors available are the mouse button and mouse x and y	  position. These can be used to create a simple paint program, as	  illustrated below. Writing your own paint program is empowering: it	  demystifies a commonly used tool. At the same time, it places the	  burden of responsibility on the programmer: once we write it, it	  belongs to us, and we are responsible for making it cool. Some	  variations of paint are also shown below, including using microphone	  levels to vary the pen size as ambient sound-levels change. Once	  learners realize that they can make changes to the behavior of their	  paint program, they become deeply engaged. How will you modify paint?</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/paint1.svg'</img></p>		<p>In its simplest form, paint is just a matter of moving the turtle to		  whereever the mouse is positioned.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/paint2.svg'</img></p>		<p>Adding a test for the mouse button lets us move the turtle without		  leaving a trail of ink.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/paint3.svg'</img></p>		<p>In this example, we change the pen size based on the volume of		  microphone input.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/paint4.svg'</img></p>		<p>In another example, inspired by a student in a workshop in Colombia,		  we use time to change both the pen color and the pen size. <a href="http://turtle.sugarlabs.org/?file=Paint-4.tb&amp;run=true">RUN		    LIVE</a></p>		<h2>Example: Slide Show</h2>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/slideshow1.svg'</img></p>		<p>Why use Powerpoint when you can write Powerpoint? In this example, an		  Action stack is used to detect keyboard input: if the keyboard value		  is zero, then no key has been pressed, so we call the action again. If		  a key is pressed, the keyboard value is greater than zero, so we		  return from the action and show the next image.</p>		<h2>Example: Keyboard input</h2>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/keyboard.svg'</img></p>		<p>In order to grab keycodes from the keyboard, you need to use a *While*		  block. In the above example, we store the keyboard value in a box,		  test it, and if it is > 0, return the value.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/keyboard2.svg'</img></p>		<p>If you want to convert the keycode to a alphanumeric character, you		  need to use the *To ASCII* block. E.g., <em>toASCII(65) = A</em></p>		<h2>8. Turtles, Sprites, Buttons, and Events</h2>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/turtles1.svg'</img></p>		<p>A separate turtle is created for each <em>Start</em> block. The turtles run		  their code in parallel with each other whenever the <em>Run</em> button is		  clicked. Each turtle maintains its own set of parameters for position,		  color, pen size, pen state, etc. In this example, three different		  turtles draw three different shapes.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/turtles2.svg'</img></p>		<p>Custom graphics can be applied to the turtles, using the <em>Shell</em>block		  on the <em>Media</em> palette. Thus you can treat turtles as sprites that can		  be moved around the screen. In this example, the sprite changes back		  and forth between two states as it moves across the screen.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/turtles3.svg'</img></p>		<p>Turtles can be programmed to respond to a "click" event, so they can		  be used as buttons. In this example, each time the turtle is clicked,		  the action is run, which move the turtle to a random location on the		  screen.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/turtles4.svg'</img></p>		<p>Events can be broadcast as well. In this example, another variant on		  Paint, turtle "buttons", which listen for "click" events, are used to		  broadcast change-color events. The turtle used as the paintbrush is		  listening for these events.</p>		<h2>9. Advanced Actions</h2>	<p>Sometime you might want an action to not just run a stack of blocks	  but also to return a value. This is the role of the return block. If	  you put a return block into a stack, then the action stack becomes a	  calculate stack.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/actions4.svg'</img></p>		<p>In this example, a <em>Calculate</em> stack is used to return the current		  distance of the turtle from the center of the screen. Renaming an		  action stack that has a <em>Return</em> block will cause the creation of a new		  block in the <em>Actions</em> palette that can be used to reference the return		  value: in this case, a <em>Distance</em> block is created.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/actions6.svg'</img></p>		<p>You can also pass arguments to an <em>Action</em> stack. In this example, we		  calculate the distance between the turtle and an arbitrary point on		  the screen by passing x and y coordinates in the <em>Calculate</em>		  block. You add additional arguments by dragging them into the "clamp".</p>	<p>Note that args are local to <em>Action</em> stacks, but boxes are not. If you	  planned to use an action in a recursive function, you had best avoid	  boxes.</p>	<h2>Example: Fibonacci</h2>	<p>Calculating the Fibonacci sequence is often done using a resursive	  method. In the example below, we pass an argument to the <em>Fib</em> action,	  which returns a value if the argument is &lt; 2; otherwise it returns	  the sum of the result of calling the <em>Fib</em> action with argument - 1 and	  argument - 2.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/fibonacci1.svg'</img></p>		<p>Calculating Fibonacci <a href="http://turtle.sugarlabs.org/?file=Fibonacci-1.tb&amp;run=true">RUN		    LIVE</a></p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/fibonacci2.svg'</img></p>		<p>In the second example, we use a <em>Repeat</em> loop to generate the first six		  Fibonacci numbers and use them to draw a nautilus.</p>	<p>Draw a nautilus <a href="http://turtle.sugarlabs.org/?file=nautilus.tb&amp;run=true">RUN	    LIVE</a></p>	<h2>Example: Reflection Paint</h2>	<p>By combining multiple turtles and passing arguments to actions, we can	  have some more fun with paint. In the example below, the <em>Paint Action</em>	  uses <em>Arg 1</em> and <em>Arg 2</em> to reflect the mouse coordinates about the y and	  x axes. The result is that the painting is reflected into all four	  quadrants.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/turtles5.svg'</img></p>		<p>Reflection Paint <a href="http://turtle.sugarlabs.org/?file=Reflection-Paint.tb&amp;run=true">RUN LIVE</a></p>		<h2>10. Advanced Boxes</h2>	<p>Sometimes it is more convenient to compute the name of a <em>Box</em> than to	  specify it explicitly. (Note that the <em>Do</em> block affords a similar	  mechanism for computing the names of actions.)</p>	<p>In the following examples, we use this to accumulate the results of	  toss a pair of dice 100 times (example inspired by Tony Forster).</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/boxes4.svg'</img></p>		<p>Rather than specifying a box to hold each possible result (2 through		  12), we use a <em>Box</em> as a counter (index) and create a box with the name		  of the current value in the counter and store in that box a value of		  0.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/boxes5.svg'</img></p>		<p>Next we add an <em>Action</em> to toss the dice 100 times. To simulate tossing		  a pair of dice, we sum two random numbers between 1 and 6. We use the		  result as the name of the box we want to increment. So for example, if		  we throw a 7, we add one to the <em>Box</em> named 7. In this way we increment		  the value in the appropriate <em>Box</em>.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/boxes6.svg'</img></p>		<p>Finally, we plot the results. Again, we use a <em>Box</em> as a counter ("index")		  and call the <em>Plot Action</em> in a loop. In the <em>Bar Action</em>, we draw a		  rectangle of length value stored in the <em>Box</em> with the name of the		  current value of the index. E.g., when the value in the index <em>Box</em> equals		  2, the turtle goes forward by the value in <em>Box 2</em>, which is the		  accumulated number of times that the dice toss resulted in a 2; when		  the value in the <em>Index Box</em> is 3, the turtle goes forward by the value		  in <em>Box 3</em>, which is the accumulated number of times that the dice toss		  resulted in a 3; etc.</p>		<h2>11. The Heap</h2>	<p>Sometimes you need a place to temporarily store data. One way to do it	  is with boxes (as mentioned at the end of the Boxes section of this	  guide, they can be used as a dictionary or individual keyword-value	  pairs). However, sometimes it is nice to simply use a heap.</p>	<p>A heap is a essential a pile. The first thing you put on the heap is	  on the bottom. The last thing you put on the heap is on the top. You	  put things onto the heap using the <em>Push</em> block. You take things off of	  the heap using the <em>Pop</em> block. In Turtle Blocks, the heap is first-in	  last-out (FILO), so you pop things off of the heap in the reverse	  order in which you put them onto the heap.</p>	<p>There is also an <em>Index</em> block that lets you refer to an item in the	  heap by an index. This essentially lets you treat the heap as an	  array. Some other useful blocks include a block to empty the heap, a	  block that returns the length of the heap, a block that saves the heap	  to a file, and a block that loads the heap from a file.</p>	<p>In the examples below we use the heap to store a drawing made with a	  paint program similar to the previous examples and then to playback	  the drawing by popping points off of the heap.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/heap1.svg'</img></p>		<p>In the first example, we simply push the turtle position whenever we		  draw, along with the pen state. Note since we pop in the reverse order		  that we push, we push y, then x, then the mouse state.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/heap2.svg'</img></p>		<p>In the second example, we pop pen state, x, and y off of the heap and		  playback our drawing.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/heap3.svg'</img></p>		<p>Use the <em>Save Heap</em> block to save the state of the heap to a file. In		  this example, we save our drawing to a file for playback later.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/heap4.svg'</img></p>		<p>Use the <em>Load Heap</em> block to load the heap from data saved in a file. In		  this example, we playback the drawing from data stored in a file.</p>		<h2>12. Extras</h2>	<p>The <em>Extras</em> palette is full of utilities that help you use your	  project's output in different ways.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/extras1.svg'</img></p>		<p>The <em>Save as SVG</em> block will save your drawing as simple vector graphics		  (SVG), a format compatible with HTML5 and many image manipulation		  programs, e.g., Inkscape. In the example above, we use it to save a		  design in a from that can be converted to STL, a common file format		  used by 3D printers. A few things to take note of: (1) the <em>No		    Background</em> block is used to suppress the inclusion of the background		  fill in the SVG output; (2) <em>Hollow lines</em> are used to make graphic have		  dimension; and (3) the <em>Save as SVG</em> block writes to the Downloads		  directory on your computer. (Josh Burker introduced me to Tinkercad, a		  website that can be used to convert SVG to STL.)</p>		<h2>13. Debugging Aids</h2>	<p>Probably the most oft-used debugging aid in any language is the print	  statement. In Turtle Blocks, it is also quite useful. You can use it	  to examine the value of parameters and variables (boxes) and to	  monitor progress through a program.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/debugging1.svg'</img></p>		<p>In this example, we use the addition operator to concatinate strings		  in a print statement. The mouse x + ", " + mouse y are printed in the		  inner loop.</p>	<p>Parameter blocks, boxes, arithmetic and boolean operators, and many	  sensor blocks will print their current value as the program runs when	  running in "slow" or "step-by-step" mode, obviating the need to use	  the Print block in many situations.</p>	<p>The <em>Wait</em> block will pause program execution for some number (or	  fractions) of seconds.</p>	<p>The <em>Hide</em> and <em>Show</em> blocks can be used to set "break points". When a	  <em>Hide</em> block is encountered, the blocks are hidden and the program	  proceeds at full speed. When a <em>Show</em> block is encountered, the program	  proceeds at a slower pace an the block values are shown.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/debugging2.svg'</img></p>		<p>A <em>Show</em> block is used to slow down execution of the code in an <em>Action</em>		  stack in order to facilitate debugging. In this case, we slow down		  during playback in order to watch the values popped off the heap.</p>		<h2>14. Advanced Color</h2>	<p>The internal representation of color in Turtle Blocks is based on the	  <a href="http://en.wikipedia.org/wiki/Munsell_color_system">Munsell color	    system</a>. It is a	  three-dimensional system: (1) hue (red, yellow, green, blue, and	  purple), (2) value (black to white), and (3) chroma (gray to vivid).</p>	<p>There are parameters for each color dimension and corresponding	  "setters". All three dimensions have been normalized to run from 0 to	  100. For Hue, 0 maps to Munsell 0R. For Value, 0 maps to Munsell value	  0 (black) and 100 maps to Munsell value 10 (white). For chroma, 0 maps	  to Munsell chroma 0 (gray) and 100 maps to Munsell chroma 26 (spectral	  color).</p>	<p>A note about Chroma: In the Munsell system, the maximum chroma of	  each hue varies with value. To simplify the model, if the chroma	  specified is greated than the maximum chroma available for a hue/value	  pair, the maximum chroma available is used.</p>	<p>The <em>Set Color</em> block maps the three dimensions of the Munsell color	  space into one dimension. It always returns the maximum value/chroma	  pair for a given hue, ensuring vivid colors. If you want to more	  subtle colors, be sure to use the <em>Set Hue</em> block rather than the <em>Set	    Color</em> block.</p>	<p><img src='https://rawgithub.com/walterbender/turtleblocksjs/master/guide/color1.svg'</img></p>		<p>Color vs. hue example <a href="https://turtle.sugarlabs.org/?file=Color-vs-Hue.tb&amp;run=true">RUN LIVE</a></p>	<p>To set the background color, use the <em>Background</em> block. It will set the	  background to the current hue/value/chroma triplet.</p>	<h2>15. Plugins</h2>	<p>There are a growing number of extensions to Turtle Blocks in the from	  of plugins. See	  <a href="http://github.com/walterbender/turtleblocksjs/tree/master/plugins">Plugins</a>	  for more details.</p>      </div>    </div>  </body></html>