As a kid, one of my first programming languages was the Logo.  It’s a really simple language that ran on Apple IIe’s that enables you to draw with code. Logo uses the metaphor of a turtle. The kid programmer can instruct the turtle to drop paint behind it, turn by an angle, and move forward. This simple programming environment was invented by Seymour Papert, a pioneer in helping kids to love math by learning programming.  Check out our blog post on Seymour Papert here.

To help celebrate the “Hour of Code” movement this week, I wanted to share a simple program that implements the Logo turtle metaphor in OpenJSCAD.   OpenJSCad is an open source tool enabling JavaScript programmers to create 3D models using JavaScript.   To learn more about this tool, check out our blog post here.   I hope this program can be used to engage young programmers in middle school and makers.  I think it’s also useful for artists and people who like to tinker. Since OpenJSCad can produce STL files, young programmers and makers can 3D print their creations or use the model files for Minecraft building.

The turtle class encapsulates the idea of the Logo turtle. The turtle exists in 3D space with an X,Y,Z coordinate. The turtle faces in a direction specified in degrees. When you call the “draw” method and provide a distance factor, the turtle moves forward dropping a line behind it. The “move” method shifts the turtle forward by a distance factor. Using the “turn” method, the programmer can change the direction of movement by an angle.  The programmer can set the Z-axis of the turtle.  This enables the turtle to produce 3D objects.

The main turtle class is shown below.   It should be included at the top of all OpenJSCAD code samples in this blog post.

var STARTX = 0;
var STARTY = 0;
var WIDTH = 600;
var HEIGHT = 600;

var Turtle = function()
{
this.X = STARTX;
this.Y = STARTY;
this.Z = 0;
this.Direction = 0;
this.list = [];

//==============================

this.DrawLine = function(x1,y1,x2,y2)
{
var obj = cylinder({start: [x1,y1,this.Z], end: [x2,y2,this.Z], r1: 1, r2: 1, fn: 4});
this.list.push(obj);
}

//==============================

this.Clear = function()
{
this.list = [];
}

//==============================

this.Draw = function(fltDistance)
{
// store current location
var currentX = this.X;
var currentY = this.Y;

// calculate new location
var deltaX = fltDistance * Math.cos(this.Direction);
var deltaY = fltDistance * Math.sin(this.Direction);
var newX = currentX + deltaX;
var newY = currentY + deltaY;

// draw line between the two
this.DrawLine(currentX,currentY,newX,newY);

this.X = newX;
this.Y = newY;
}

//==============================

this.Move = function(fltDistance)
{
// store current location
var currentX = this.X;
var currentY = this.Y;

// calculate new location
var deltaX = fltDistance * Math.cos(this.Direction);
var deltaY = fltDistance * Math.sin(this.Direction);
var newX = currentX + deltaX;
var newY = currentY + deltaY;

this.X = newX;
this.Y = newY;
}

//==============================

this.Turn = function(angle)
{
var delta = (Math.PI * 2.0 * angle) / 360.0;
this.Direction += delta;
}

//==============================

this.GetObjects = function()
{
return this.list;
}

}

So.. Let’s take you through some sample programs that you can write:

Hello Square!

For all code samples to follow, copy the “turtle” class shown previously into the OpenJSCad editor.
In the following code, we create a turtle instance. By calling “t.Draw(25)”, the turtle draws a line for 25 units. In the next line, we turn the turtle 90 degrees. We repeat the drawing and turning 3 more times to complete the drawing of a square. The turtle object stores all the drawing objects in a list. These drawing commands need to be returned at the end of the “main” function so that OpenJSCAD can process them.  That’s it!

// Turtle class should be pasted below this line…..

//Sample 1 starts here….

function main()

{

var t = new Turtle();

t.Draw(25);
t.Turn(90);
t.Draw(25);
t.Turn(90);
t.Draw(25);
t.Turn(90);
t.Draw(25);
t.Turn(90);

return t.GetObjects();

}

In the following code, we adjust our program to include a loop. Logo systems make really interesting patterns when you don’t turn by 90 degrees and you do lots of looping. As you can see, the result is kind of artful.  You can probably print this and put it on your Christmas tree! 🙂

// Turtle class should be pasted below this line…..

//Sample 2 starts here….

function main()

{
var t = new Turtle();

for(i=0; i<50; i++){
t.Draw(25);
t.Turn(100);
}

return t.GetObjects();
}

In our final sample, we set the Z factor of the turtle. The Z factor enables the turtle to move up and down in 3D space. Here’s the result.

// Turtle class should be pasted below this line…..

//Sample 3 starts here….

function main() {

var t = new Turtle();

var k =30;
var z;

for(z=0; z<20; z++)
{
for(j=0; j<30; j++)
{
t.Draw(k);
t.Turn(131);
t.Z = z*2;
}
}

return t.GetObjects();
}

As I was writing this blog post, one of my kids asked me to move one of my Logo sculptures into Minecraft. Using TinkerCAD and MCEdit, we downloaded the model from OpenJSCAD and imported it into Minecraft.  In this Logo program, I enabled the turtle to randomly move around at right angles while moving upward.

OpenJSCAD turns JavaScript programming into a way of making cool 3D art.

Top Stories on InspiredToEducate.NET

Learning To Code

• Easy Data Visualization with Google Charts and JavaScript
• Learn to Build Your Own Conversational Bot using ChatScript
• 10 Free Resources for Learning JavaScript and HTML5
• 17 Fun Tools To Teach Kids To Code by @ChrisBetcher
• Benefits of Teaching Kids To Code That No One Is Talking About
• Easy Recipes for Building Android Apps using MIT App Inventor
• 12 Steps To 3D Print Your Minecraft Creations
• How to Build Your Mobile App using HTML
• Simple Minecraft Programming Using ScriptCraftJS

Science Education

• Why hate science?
• 7 ideas for creating a student centered learning environment by Paul Andersen
• Using candy to teach DNA structure

Join the Spark Macon Maker Space Community on Facebook