Activities/Turtle Art-0.86

From Sugar Labs
Jump to navigation Jump to search
english | español | HowTo [ID# 19848] 


Where to get Turtle Art

Activity-turtleart.png

Version 36 .xo | Source | FLOSS Manual | laptop.org Turtle Art page | Student Guide | Experimental fork | Turtle Art Gallery

Note: The first time you run Turtle Art, it takes about 60 seconds to load. You'll see a mostly blank screen after the initial flashing of the icon. Subsequently, the loading time is ~5 seconds (on an OLPC-XO-1 laptop).

Background

Turtle Art is an activity with a Logo-inspired graphical "turtle" that draws colorful art based on Scratch-like snap-together visual programming elements.

Turtle Art is intended to be a stepping stone to the Logo programming language, but there are many restrictions compared to Logo. (Only numeric global variables and stack items are available, no lists or other data-structures. The conditionals and some of the functions only take constants or variables, not expressions. Limited screen real-estate makes building large programs unfeasible.) However, you can export your Turtle Art creations to [#Exporting to Berkeley Logo|Berkeley Logo]]. The experimental version of Turtle Art also has a (limited) facility for sensor input, so, for example, you can move the Turtle based upon sound volume or pitch.

A portfolio feature lets you use Turtle Art to create multimedia slide shows from material retrieved from your Journal. The basic idea is to import images (and eventually movies, audio, and text files) into slide templates, not unlike Powerpoint, and then show a presentation by stepping through them. TA Portfolio includes the typical major functions of presentation software: an editor that allows text to be inserted and formatted (this is largely incomplete), a method for inserting images (from the Journal), and a slide-show system to display the content. What makes it a bit different than tools such as Powerpoint is that you can program your slides using Turtle Art blocks. Turtle Art also has an export-to-HTML function so that presentations can be viewed outside of the Sugar environment.

Turtle Art was written by Brian Silverman and is maintained by Walter Bender. Arjun Sarwal added the sensor features. Luis Michelena contributed to the "named" action and box blocks.

Learning with Turtle Art

Play with Turtle Art to draw colorful art patterns using a turtle that accepts instructions for movement.

With visual programming blocks, you can snap together programs by compiling (combining) them in ways to create anything you can imagine.

TA-sample1.png TA-sample2.png TA-sample3.png TA-sample4.png TA-sample5.png TA-sample6.png

maths

Calculating the hypotenuse and approximating the angle of a right triangle; Stepping through the program is a nice way to visualize the process of approximation; The final result of the approximation.

TAgeometry.png TAgeometry1.png TAgeometry2.png

And on-the-fly function definitions:

Ta-sin.png Sine.png

Tony Forster describes his "adventures" with on-the-fly definitions to create an analog clock in his blog.

Try any of the time or math library functions, e.g.,

localtime().tm_min 
sin(x) + sin(pi/2)

presentations

Portfolio14.png Portfolio10.png

games

Turtle Art can be used to write games, such as a simple falling block game:

WeGotGame.png WeGotGame2.png



Portfolios

In the era of high-stakes testing, we have the means to measure “which child knows more”; these data tell us about relative merit of the school in which a child is enrolled. The Turtle Art portfolio feature is an assessment tool that shows “what a child knows”; children become the curators of their own work. They advance their own learning and help their teachers, parents, and school administrators understand better the depth and breadth of what they have learned.

Turtle Art portfolios engage children in the process of reflecting on their work—what they have done, how they have done it, and how success these efforts have been—as they create a multimedia narrative to show their teachers, parents and peers what they have learned. Turtle Art Portfolio builds upon the journaling functionality of the Sugar learning platform, where every action or activity a child takes in the classroom is automatically recorded in a folder: (1) by enabling the child to select important learning achievements, be they in reading, writing, arithmetic, arts, music, physical education, history and social science, etc. Children answer questions such as “I chose this piece because...” (2) creating a multimedia narrative presentation from their selections (including audio voice-overs and video), reflective of the multiple ways in which children learn; and (3) sharing their presentation with classmates, both to celebrate what they have learned, but also to engage in a critical dialog about their work.

Turtle Art portfolio is innovative in three ways: (1) it builds upon a journal of *all* learning activities that is automatically collected; (2) it has unique programmability, fun and accessible to even the youngest elementary school children, but interesting and engaging to middle-school children as well; and (3) it has unique tools for both collaborating on the construction of the portfolio and its subsequent sharing with others.

Portfolios have been shown to be “a powerful means for children to assess their own work, set goals, and take responsibility for their future learning.” But portfolio assessment has seen limited applicability. It is a practical, engaging means to using portfolios. By building upon the automatic accumulation of work in journal (including a “screen capture” of their work) the portfolio process can readily be integrated into the classroom routine. Reflection becomes the norm: children are encouraged write in their journals (young children record audio notes) for a few minutes after *every* class. The numbing question, “what did you do in school today?” need no longer a necessary part of the parent-child dialog. Instead, the parent can talk to the child about actual artifacts.

Culling from the journal becomes part of the end-of-term assessment process. The process of telling one's story as a learning requires further reflection. At a “portfolio social”, parents are invited to view presentations and ask children about their learning; the child's voice is heard.

The classroom teacher can add addition assessment slides to the portfolio about themes such as work habits and personal growth, as part of an archive that travels with a child across grade levels. Through juxtaposition, the child and teacher can see what has changed over the course of the years, trends, and areas for improvement, Also, a classroom portfolio can be assembled as part of a teacher-assessment process.

(Here is a picture of me (Walter Bender) using Turtle Art Portfolio to give a presentation.)

Getting Started

TA-1.png

Start by clicking on (or dragging) blocks from the Turtle palette. Use multiple blocks to create drawings; as the turtle moves under your control, colorful lines are drawn.

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 Rabbit (fast) or Turtle (slow) buttons on the Project Toolbar.

Project Toolbar

TA-Projecttoolbar2.png

From left to right: show/hide palette; show/hide blocks; run project fast; run project slow; stop project; erase canvas; load sample project

Keyboard short cuts for the above: palette; blocks; run; walk; stop; erase

Notes: The run buttons are tied to the Start Block. If no Start Block is used, then all blocks are run when either run button is clicked. The "rabbit" button runs the blocks at maximum speed. The "turtle" button pauses and displays the turtle between each step.

Save/Load Toolbar

TA-savetoolbar.png

Save to HTML and Save to Logo

Activity Toolbar

TA-activitytoolbar.png

The standard Sugar Activity toolbar: activity name; share; keep; and stop

Palettes

There are seven palettes of program elements available for program construction: Turtle movements; Pen attributes; Numeric operators; Misc. functions; Logical operators; Logical blocks; and Presentation blocks

TA-turtle-palette.png TA-pen-palette.png TA-numbers-palette.png TA-sensors-palette.png TA-flow-palette.png TA-myblocks-palette.png TA-templates.png

The Turtle Palette (green)

examples (1)

TA-forward-example.png TA-back-example.png TA-forward-right-example.png TA-arc-example.png TA-seth-example.png TA-heading-example.png TA-text-example.png TA-image-example.png

descriptions (1)

TA-clean.png Clean clear the screen and reset the turtle to center, pointed up (pen down, bright red)
TA-forward.png Forward (number) move turtle forward
TA-back.png Back (number) move turtle backward
TA-left.png Left (angle in degrees) turn turtle counterclockwise
TA-right.png Right (angle in degrees) turn turtle clockwise
TA-arc.png Arc (angle in degrees,radius) move turtle along an arc
TA-setxy.png Setyx (xcor, ycor) move turtle to position (xcor, ycor) [(0, 0) is in the center of the screen.]
TA-seth.png Seth (heading) set the heading of the turtle [0 is towards the top of the screen.]
TA-text.png Text (size) draw text next to the turtle
TA-image.png Image draw image (click on the Journal icon to search for an image from the Journal
TA-xcoor.png X coordinate holds current x-coordinate value of the turtle (can be used in place of a number block)
TA-ycoor.png Y coordinate holds current y-coordinate value of the turtle (can be used in place of a number block)
TA-heading.png Heading holds current heading value of the turtle (can be used in place of a number block)

Turtle state values (can plug into a parameter):

  • X, Y – Zeros for each are at center screen. Negative values are left and down; positive values are right and up.
  • Heading – Zero is pointed up. Heading is in degrees clockwise.
  • Angles are degrees from 0 to 360 (for larger values and smaller values all multiples of 360 are subtracted or added to get the value into the range 0..360).
Examples: 90 means a right angle (90 degrees), clockwise; –30 means a 30-degree angle, counterclockwise

The Pen Palette (cyan)

examples (2)

TA-pensize-example.png TA-pencolor-example.png TA-penshade-example.png TA-fill-example.png

descriptions (2)

TA-penup.svg Pen Up turtle will not draw when moved
TA-pendn.svg Pen Down turtle will draw when moved
TA-setpensize.png Set Pen Size (number) set size of the line drawn by the turtle
TA-setpencolor.png Set Pen Color (number) set color of the line drawn by the turtle
TA-setpenshade.png Set Pen Shade (number) set shade of the line drawn by the turtle
TA-settextcolor.png Set Text Color (number) set color of text drawn by the turtle
TA-penfill.png Fill Screen(color,shade) fills the background with (color, shade)
TA-pensize.svg Pen size
TA-pencolor.svg Pen color
TA-penshade.svg Pen shade

Colors and shades are represented by a number from 0 through 99. Using a number outside of this range is allowed, and will cause the value to be "wrapped around" (via a modulo, or "clock arithmetic" operation) to the 0 – 99 range. Color specifies a hue and shade specifies an admixture of white or black to the color.

The Numbers Palette (purple)

examples (3)

TA-plus-example.png TA-mod-example.png TA-pythagoras-example.png

TA-minus-example.png TA-status.png

descriptions (3)

TA-number.svg number used as numeric input in mathematic operators
TAplus.svg addition adds two numeric inputs
TAminus.svg subtraction subtracts bottom numeric input from top numeric input
TAproduct.svg product multiplies two numeric inputs
TAdivision.svg division divides top numeric input (numerator) by bottom numeric input (denominator)
TA-mod.svg mod modular (remainder) operator
TA-left-bracket.svg TA-right-bracket.svg numeric extensions identity operators used for extending blocks (See example above)
TA-sqrt.svg square root calculate square root
TA-random.png random returns random number between minimum (left) and maximum (right) values
TA-equal.png equal? logical = operator (plugs into an If blocks on the Flow Palette)
TA-greater.png greater? logical > operator (plugs into an If blocks on the Flow Palette)
TA-less.png less? logical < operator (plugs into an If blocks on the Flow Palette)
TA-and.svg and logical ⋀ (and) operator (links conditional)
TA-or.svg or logical ⋁ (or) operator (links conditional)
TA-not.svg not logical ¬ (not) operator (links conditional)
TA-print.svg print Prints value in status block at bottom of the canvas (See example above)

The Sensors Palette (red)

examples (4)

TA-kbexample.png

TA-myfunc-example.png TA-status-zero.png

descriptions (4)

TA-querykb.svg query for keyboard input results stored in keyboard block
TA-keyboard.svg keyboard input holds results of query-keyboard block
TA-myfunc.png my function a programmable block: add your own math equation in the block, e.g., sin(x)
TA-hres.svg horizontal size the canvas width
TA-vres.svg vertical size the canvas height

These additional blocks are available in the experimental version of Turtle Art

TAMyblock.svg user-definable code This block runs code found in the tamyblock.py module found in the Journal and editable in Pippy. Use the load Pippy button on the Save/Load toolbar to load your custom module.
TA-volume.svg volume microphone input volume
TA-pitch.svg pitch microphone input pitch
TA-voltage.svg voltage (OLPC XO-1 only)
TA-resistance.svg resistance (OLPC XO-1 only)

More details on how to use the sensors can be found on the Measure Activity page.

The Flow Palette (orange)

examples (5)

TA-if-example.png

descriptions (5)

TA-wait.png Wait(number) wait specified number of seconds
TA-forever.svg Forever[stack] (no continuation)
TA-repeat.png Repeat(number)[stack] loop specified number of times
TA-if.png If(condition)[then] uses boolean operators from Numbers palette
TA-ifelse.png -If(condition)[then][else] uses boolean operators from Numbers palette
TA-stopstack.png Stop Stack No continuation of current action
TA-hor.png horizontal spacer jog stack right
TA-ver.png vertical spacer jog stack down

The My Blocks Palette (yellow)

examples (6)

TA-box-example.png

descriptions (6)

TA-start.svg start connects action to toolbar run buttons
TA-hat1.png action 1 "hat" top of action 1 stack
TA-stack1.svg action 1 invoke action 1 stack
TA-hat2.png action 2 "hat" top of action 2 stack
TA-stack2.svg action 2 invoke action 2 stack
TA-hat.png nameable action "hat" top of named action stack
TA-stack.png nameable action invoke named action stack
TA-storeinbox1.svg store in box 1 store numeric value in variable 1
TA-box1.svg box 1 variable 1 (numeric value)
TA-storeinbox2.svg store in box 2 store numeric value in variable 2
TA-box2.svg box 2 variable 2 (numeric value)
TA-storeinbox.png store in nameable box store numeric value in named variable
TA-box.png nameable box named variable (numeric value)
TA-push.svg push push value onto FILO (first-in last-out) heap
TA-pop.svg pop pop value off FILO
TA-showheap.svg show heap show FILO in status block at bottom of canvas
TA-emptyheap.svg empty heap empty FILO

The Templates Palette (yellow)

examples (7)

See the tutorial below.

descriptions (7)

TA-journal.png → journal entry TA-nopreview.png → no preview image found
TA-template1.png slide template 1: title, image, text
TA-template2.png slide template 2: title, image, text, image, text
TA-template3.png slide template 3: title, image, text, image, text
TA-template4.png slide template 4: title, image, image, image, image
TA-template5.png slide template 5: title, text list
TA-template6.png slide template 6: title, image
TA-sounce.png sound: sound or voice over
TA-audio-off.png → no sound loaded TA-audio-on.png → audio file selected
TA-hide-blocks.png hide blocks

Quick Tutorial on using the portfolio features of Turtle Art

Start by selecting a slide template from the palette.
Click on the Journal icon to initiate a search for slide content.
Select a journal object.
The Journal preview and description will be used.
A thumbnail will appear in the template.
Click on the slide template to view the slide.
Click on the Hide Blocks button on the toolbar to hide any blocks that are covering your slide.
Congratulations. You've made a slide.
Try using some of the other templates.
View them by clicking on them (you may want to use the Eraser button first).
You can program a simple slide show by making a stack: clear the screen; show Slide 1; wait; clear the screen; show Slide 2.
You can also program stacks for your slide decorations and slide transitions.
In this example, we draw a rule under the title of each slide and poll for keyboard input to transition between slides.
Run your slide show by clicking on the Run Button (rabbit) on the toolbar.
In this example, we use microphone input to transition between slides.
Using "lock blocks" to extend long stacks.

Sharing

Turtle Art supports a simple sharing model. Whomever joins a shared activity will get a copy of the current state of the project from the initiator of the share. Subsequent changes to the project are shared between all participants. It is not recommended to share among more than 2–3 people at a time.

TAsharing.png

Turtle Art can export its projects to Berkeley Logo (using the Save as Logo button on the Project Toolbar)

a Turtle Art project
the UCB Logo version

Note: The project is saved to the Journal as "logosession.lg". UCB Logo does not yet access the Journal directly, so it is necessary to copy the project out of the Journal using the "cppy-from-journal" command in the Terminal Activity and then accessing the project using the File menu within the UCB Logo Activity.

copy-from-journal logosession.lg

Internals

Some procedures for setting up the palette and the shade functionality:

to tasetpalette :i :r :g :b :myshade
make "s ((:myshade - 50) / 50)
ifelse lessp :s 0 [
make "s (1 + (:s *0.8))
make "r (:r * :s) 
make "g (:g * :s) 
make "b (:b * :s)
] [
make "s (:s * 0.9)
make "r (:r + ((100-:r) * :s)) 
make "g (:g + ((100-:g) * :s)) 
make "b (:b + ((100-:b) * :s))
]
setpalette :i (list :r :g :b)
end
to rgb :myi :mycolors :myshade
make "myr first :mycolors
make "mycolors butfirst :mycolors
make "myg first :mycolors
make "mycolors butfirst :mycolors
make "myb first :mycolors
make "mycolors butfirst :mycolors
tasetpalette :myi :myr :myg :myb :myshade
output :mycolors
end
to processcolor :mycolors :myshade
if emptyp :mycolors [stop]
make "i :i + 1
processcolor (rgb :i :mycolors :myshade) :myshade
end
to tasetshade :shade
make "myshade modulo :shade 200
if greaterp :myshade 99 [make "myshade (199-:myshade)]
make "i 7
make "mycolors :colors 
processcolor :mycolors :myshade
end
to tasetpencolor :c
make "color modulo round :c 100
setpencolor :color + 8
end
make "colors [
100 0 0 100 5 0 100 10 0 100 15 0 100 20 0 100 25 0 100 30 0 100 35 0 100 40 0 100 45 0 
100 50 0 100 55 0 100 60 0 100 65 0 100 70 0 100 75 0 100 80 0 100 85 0 100 90 0 100 95 0 
100 100 0 90 100 0 80 100 0 70 100 0 60 100 0 50 100 0 40 100 0 30 100 0 20 100 0 10 100 0 
0 100 0 0 100 5 0 100 10 0 100 15 0 100 20 0 100 25 0 100 30 0 100 35 0 100 40 0 100 45 
0 100 50 0 100 55 0 100 60 0 100 65 0 100 70 0 100 75 0 100 80 0 100 85 0 100 90 0 100 95 
0 100 100 0 95 100 0 90 100 0 85 100 0 80 100 0 75 100 0 70 100 0 65 100 0 60 100 0 55 100 
0 50 100 0 45 100 0 40 100 0 35 100 0 30 100 0 25 100 0 20 100 0 15 100 0 10 100 0 5 100 
0 0 100 5 0 100 10 0 100 15 0 100 20 0 100 25 0 100 30 0 100 35 0 100 40 0 100 45 0 100 
50 0 100 55 0 100 60 0 100 65 0 100 70 0 100 75 0 100 80 0 100 85 0 100 90 0 100 95 0 100 
100 0 100 100 0 90 100 0 80 100 0 70 100 0 60 100 0 50 100 0 40 100 0 30 100 0 20 100 0 10]
make "shade 50
tasetshade :shade
to tasetbackground :color :shade
tasetshade :shade
setbackground :color + 8
end

The project:

to ta
clearscreen tasetbackground 21 100 setpensize 25.0 make "box1 0.0 
repeat 300.0 [ tasetpencolor xcor / 6.0 tasetshade heading forward :box1 right 91.0 make "box1 :box1 + 1.0 ] 
end
ta

Looking under the hood

Turtle Art projects are stored as two files: (1) a .ta file contains a json-encoded serialization of the project; and (2) a .png file of the canvas.

The json encoding of a repeat 4 forward 100 right 90 project:

[[0,"repeat",331,158,[null,1,2,null]],[1,["number","4"],417,167,[0,null]],[2,"forward",426,207,[0,3,4]],[3,["number","100"],500,216,[2,null]],[4,"right",426,246,[2,5,null]],[5,["number","90"],500,255,[4,null]],[-1,"turtle",0,0,0,0,50,5]]

Programmable Brick

The following feature is only available in the experimental fork of Turtle Art.

myblock.py

And a block that can be programmed by the Pippy interface:

A copy of the tamyblock.py module is stored in the Journal when you first launch TurtleArt. You can edit the module in Pippy and then import your custom code into Turtle Art using the Pippy button.

TAPippyButton.svg

TA-pippy.png

To use the customized block, select the "view source" block from the Sensors palette.

TAMyblock.svg

Examples:

from taturtle import *
def myblock(lc,x):
# draw a dotted line of length x
   # make sure x is a number
   if type(x) != int and type(x) != float:
       return
   dist = 0
   # save current turtle pen state
   pen = lc.tw.turtle.pendown
   # repeat drawing dots
   while dist+lc.tw.turtle.pensize < x:
       setpen(lc.tw.turtle, True)
       forward(lc.tw.turtle, 1)
       setpen(lc.tw.turtle, False)
       forward(lc.tw.turtle, (lc.tw.turtle.pensize*2)-1)
       dist += (lc.tw.turtle.pensize*2)
   # make sure we have moved exactly x
   forward(lc.tw.turtle, x-dist)
   # restore pen state
   setpen(lc.tw.turtle, pen)
return

TA-dotted-line.png

from taturtle import *
def myblock(lc,x):
# push an uppercase version of a string onto the heap
   if type(x) != str:
       X = str(x).upper()
   else:
       X = x.upper()
   # push result onto heap (use the pop block to use the new string)
   lc.heap.append(X)
return
from taturtle import *
def myblock(lc,x):
# push hours, minutes, seconds onto the heap
# use three pop blocks to retrieve the values
# remember: the heap is a FILO (first in, last out)
# the first value you will pop will be seconds
   lc.heap.append(localtime().tm_hour)
   lc.heap.append(localtime().tm_min)
   lc.heap.append(localtime().tm_sec)
return
from taturtle import *
def myblock(lc,x):
# add a third dimension (gray) to the color model
   # calculate the value (brightness) of the current color
   val = 0.3 * lc.tw.rgb[0] + 0.6 * lc.tw.rgb[1] + 0.1 * lc.tw.rgb[2]
   # make sure gray is in range from 0 to 100
   if x != 100:
       x = int(x)%100
   # mix in gray
   r = int((val*(100-x) + lc.tw.rgb[0]*x)/100)
   g = int((val*(100-x) + lc.tw.rgb[1]*x)/100)
   b = int((val*(100-x) + lc.tw.rgb[2]*x)/100)
   # reallocate current color
   lc.tw.fgcolor = lc.tw.cm.alloc_color(r<<8,g<<8,b<<8)
return


From the field

Tony Forster has written a number of blog posts about his experiments with Turtle Art: Using Python blocks in TurtleArt Turtle Lander Reprogramming Sugar