davidbau.com Turtle Bits

August 18, 2013

Turtle Bits

I have posted a new learning-to-program sandbox at turtlebits.net. It is designed as a modernized "LOGO" friendly for beginning programmers. For example, as a first program you can write simply "fd 100".

As with LOGO in 1967, the goal of TurtleBits in 2013 is No Threshold, No Limit, which means that it is easy enough for kindergarten kids, and yet it scales all the way to professional-level software experimentation and development. The language is Coffeescript plus jQuery plus jquery-turtle, and it runs in any modern browser (Chrome, Firefox, IE10)....

The jquery-turtle library makes it easy to experiment with geometry, animation, music, and game construction. Naturally, jQuery itself simplifies webpage development (and on turtlebits, you are free to use HTML, CSS, and Javascript in addition to Coffeescript-with-turtle-bits.) Documentation is needed (although some help is available online if you type "help" in the console prompt after running a program). I will follow with some more information on this blog.

Making Coffeescript Useful for Educators

Here is the background. Coffeescript is almost the ideal learning language. It enjoys:

The same universal distribution as Javascript. Run in any browser.
A beginner-friendly syntax like Python, Ruby, or LOGO: punctuation-light.
Fewer language oddities and traps than Javascript.
And best of all, a thriving community of developers on the web.

However, a few additional things are needed for teachers...

Turtle bits. We need a library that lets students use it like LOGO or Scratch.
Software. We need a way to write, run, and and share programs.
Curriculum. We need a textbook for first-time programmers and teachers.
Educational community. We need other students and teachers to share with.

I think these gaps can be filled, and so I have been working on several of these pieces.

An Open-Source Library

For the turtle bits, here is an open-source library jquery-turtle (it is a jquery extension). jQuery itself solves most of the difficult usability issues with the standard HTML DOM API, but it does not simplify some of the newer web standards that are relevant to beginners. jQuery-turtle provides turtle access to the canvas API and CSS 2d transforms, as well as simplified access to Web Audio. Turtle animation helps illustrate the progress of programs over time, and the animation integrates nicely with the jQuery fx queue.

An Public Website For Sharing

For the software, the website turtlebits.net lets students set up free accounts and save their own programs. Each user gets their own subdomain, which means that the sandbox can be pretty unrestricted (you can use the DOM and Javascript freely). Cross-domain isolation helps isolate users from accidental interference from each other. If the turtlebits sandbox becomes popular, I will need a way to pay for capacity, but for now I am just hosting it with my personal blog.

A Textbook (Being Written)

For the curriculum, I am working on a textbook (ah yes, big promises, but I'm really writing one). The draft goes all the way from the first turtle line to advanced computer science topics like sorting and basic AI, so certainly other books that don't move so quickly will also be needed. That's still work in progress.

For community - well, I'm not sure where to start. Any suggestions?

Anybody interested in helping?

Posted by David at August 18, 2013 07:29 AM

Comments

Love it.
Is there any way to delete a button from the test panel? I've created one with a runtime error :-/

Posted by: RichB at August 19, 2013 04:04 AM

If you're still in the test "first" area, just refresh the page. Your (error) version may have been backed up in your local browser. If so, click "Load network copy" and then you will get the original test program from the network instead.

Backups are overwritten whenever you run a program, so if you run this original test version, your (error) backup will be overwritten.

If you want to delete a file within your account, then just delete its contents and save it. Saving an empty file will delete it.

Posted by: David at August 19, 2013 05:57 AM

Observations of a 7yo:

1. He expected the editor just to create new blank space at the end for him. So every few minutes I had to come back to the computer and hold the return key to generate some blank lines.
2. Sound plays immediately, not at the point in the code. I guess we should have instead used 'play'. Not that obvious.
3. When asked what pen color he wanted, he said multicolor.
4. Why is bearing() a getter only, and not a setter?

At bedtime, he wanted to continue playing with it.

Posted by: RichB at August 19, 2013 03:25 PM

1. Really interesting observation about the blank lines at the end! I have the same problem with my 6yo, but didn't think about how counterintuitive it is to have to press Enter to open up space. I have hooked the ace editor now so that it always tries to make sure there is one empty line at the end. Let me know if it helps for you.
2. How did you discover the "sound" function? I have added a note in the help text pointing to "play". Also the help listing has been re-sorted to list the shorter method names first.
3. Your son might enjoy random color. As in "pen random color".
4. The method to change direction is "turnto". Is "bearing" a confusing name? I have wondered whether it would be better to call the getter "direction".

Posted by: David at August 20, 2013 01:35 AM

Did you take a look at Kojo: http://www.kogics.net/sf:kojo ? They seem to have some similar goals.

Posted by: Cezar at November 1, 2013 12:32 AM

the play method (music) of jquery-turtle only seems to work on chrome, and only the chrome on my Windows OS. All other browsers won't play any sounds for some reason. Is there a particular plugin that a browser needs to have to enable playing sounds?

Posted by: Earl at December 6, 2013 08:47 PM

Chrome on both Mac and Windows should work, but "play" depends on WebAudio support, which is an evolving standard. Until the standard stabilizes, there may be uneven support. The compatibility chart here will fill in over time:

http://caniuse.com/audio-api

Actually, CanIUse is wrong about FF 25. The Mozilla site says it's still in nighlies only:

https://developer.mozilla.org/en-US/docs/Web/API/AudioContext

Also, Safari has webAudio, but they are on an old version of the API that isn't compatible. When Safari updates to the latest WebKit, they will work with Pencil Code audio.

Posted by: David at December 9, 2013 07:37 AM