Logo Programming Goes 3D

OpenJSCAD

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!

Logo art 0

// 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! 🙂

Logo art 1

// 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.

Logo art 2

// 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.

Minecraft Logo piece

 

 

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

 

Top Stories on InspiredToEducate.NET

Learning To Code

Science Education

 

Join the Spark Macon Maker Space Community on Facebook

 

 

 

 

This entry was posted in 3d printing, creativity, open source, programming, stem, technology. Bookmark the permalink.

Comments are closed.