{"id":1698,"date":"2014-12-08T13:27:57","date_gmt":"2014-12-08T13:27:57","guid":{"rendered":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1698"},"modified":"2014-12-08T13:37:14","modified_gmt":"2014-12-08T13:37:14","slug":"logo-programming-goes-3d","status":"publish","type":"post","link":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/logo-programming-goes-3d\/","title":{"rendered":"Logo Programming Goes 3D"},"content":{"rendered":"\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=https%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2Flogo-programming-goes-3d%2F&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n<p><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/openJSCad__12_8_2014.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-1703\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/openJSCad__12_8_2014.png\" alt=\"OpenJSCAD\" width=\"615\" height=\"403\" srcset=\"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/openJSCad__12_8_2014.png 615w, https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/openJSCad__12_8_2014-300x196.png 300w\" sizes=\"(max-width: 615px) 100vw, 615px\" \/><\/a><\/p>\n<p>As a kid, one of my first programming languages was the Logo. \u00a0It&#8217;s a really simple language that ran on Apple IIe&#8217;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. \u00a0Check out our <a title=\"Impact of Seymour Papert on Learning, Engagement, and Creativity\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1676\">blog post on Seymour Papert here<\/a>.<\/p>\n<p>To help celebrate the <a href=\"http:\/\/code.org\" target=\"_blank\">&#8220;Hour of Code&#8221; movement this week<\/a>, I wanted to share a simple program that implements the Logo turtle metaphor in <a title=\"Make 3D Printable Models with JavaScript\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1636\" target=\"_blank\">OpenJSCAD<\/a>. \u00a0 OpenJSCad is an open source tool enabling JavaScript programmers to create 3D models using JavaScript. \u00a0 To learn more about this tool, check <a title=\"Make 3D Printable Models with JavaScript\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1636\" target=\"_blank\">out our blog post here<\/a>. \u00a0 I hope this program can be used to engage young programmers in middle school and makers. \u00a0I think it&#8217;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.<\/p>\n<p>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 &#8220;draw&#8221; method and provide a distance factor, the turtle moves forward dropping a line behind it. The &#8220;move&#8221; method shifts the turtle forward by a distance factor. Using the &#8220;turn&#8221; method, the programmer can change the direction of movement by an angle. \u00a0The programmer can set the Z-axis of the turtle. \u00a0This enables the turtle to produce 3D objects.<\/p>\n<p>The main turtle class is shown below. \u00a0 It should be included at the top of all OpenJSCAD code samples in this blog post.<\/p>\n<p>var STARTX = 0;<br \/>\nvar STARTY = 0;<br \/>\nvar WIDTH = 600;<br \/>\nvar HEIGHT = 600;<\/p>\n<p>var Turtle = function()<br \/>\n{<br \/>\nthis.X = STARTX;<br \/>\nthis.Y = STARTY;<br \/>\nthis.Z = 0;<br \/>\nthis.Direction = 0;<br \/>\nthis.list = [];<\/p>\n<p>\/\/==============================<\/p>\n<p>this.DrawLine = function(x1,y1,x2,y2)<br \/>\n{<br \/>\nvar obj = cylinder({start: [x1,y1,this.Z], end: [x2,y2,this.Z], r1: 1, r2: 1, fn: 4});<br \/>\nthis.list.push(obj);<br \/>\n}<\/p>\n<p>\/\/==============================<\/p>\n<p>&nbsp;<\/p>\n<p>this.Clear = function()<br \/>\n{<br \/>\nthis.list = [];<br \/>\n}<\/p>\n<p>\/\/==============================<\/p>\n<p>this.Draw = function(fltDistance)<br \/>\n{<br \/>\n\/\/ store current location<br \/>\nvar currentX = this.X;<br \/>\nvar currentY = this.Y;<\/p>\n<p>\/\/ calculate new location<br \/>\nvar deltaX = fltDistance * Math.cos(this.Direction);<br \/>\nvar deltaY = fltDistance * Math.sin(this.Direction);<br \/>\nvar newX = currentX + deltaX;<br \/>\nvar newY = currentY + deltaY;<\/p>\n<p>\/\/ draw line between the two<br \/>\nthis.DrawLine(currentX,currentY,newX,newY);<\/p>\n<p>this.X = newX;<br \/>\nthis.Y = newY;<br \/>\n}<\/p>\n<p>\/\/==============================<\/p>\n<p>this.Move = function(fltDistance)<br \/>\n{<br \/>\n\/\/ store current location<br \/>\nvar currentX = this.X;<br \/>\nvar currentY = this.Y;<\/p>\n<p>\/\/ calculate new location<br \/>\nvar deltaX = fltDistance * Math.cos(this.Direction);<br \/>\nvar deltaY = fltDistance * Math.sin(this.Direction);<br \/>\nvar newX = currentX + deltaX;<br \/>\nvar newY = currentY + deltaY;<\/p>\n<p>this.X = newX;<br \/>\nthis.Y = newY;<br \/>\n}<\/p>\n<p>\/\/==============================<\/p>\n<p>this.Turn = function(angle)<br \/>\n{<br \/>\nvar delta = (Math.PI * 2.0 * angle) \/ 360.0;<br \/>\nthis.Direction += delta;<br \/>\n}<\/p>\n<p>\/\/==============================<\/p>\n<p>this.GetObjects = function()<br \/>\n{<br \/>\nreturn this.list;<br \/>\n}<\/p>\n<p>}<\/p>\n<p>So.. Let&#8217;s take you through some sample programs that you can write:<\/p>\n<p><strong>Hello Square!<\/strong><\/p>\n<p>For all code samples to follow, copy the &#8220;turtle&#8221; class\u00a0shown previously into the OpenJSCad editor.<br \/>\nIn the following code, we create a turtle instance. By calling &#8220;t.Draw(25)&#8221;, 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 &#8220;main&#8221; function so that OpenJSCAD can process them. \u00a0That&#8217;s it!<\/p>\n<p><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/pattern3.png\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-1702\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/pattern3-300x234.png\" alt=\"Logo art 0\" width=\"300\" height=\"234\" srcset=\"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/pattern3-300x234.png 300w, https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/pattern3.png 343w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>\/\/ Turtle class should be pasted below this line&#8230;..<\/p>\n<p>\/\/Sample 1 starts here&#8230;.<\/p>\n<p>function main()<\/p>\n<p>{<\/p>\n<p>var t = new Turtle();<\/p>\n<p>t.Draw(25);<br \/>\nt.Turn(90);<br \/>\nt.Draw(25);<br \/>\nt.Turn(90);<br \/>\nt.Draw(25);<br \/>\nt.Turn(90);<br \/>\nt.Draw(25);<br \/>\nt.Turn(90);<\/p>\n<p>return t.GetObjects();<\/p>\n<p>}<\/p>\n<p>In the following code, we adjust our program to include a loop. Logo systems make really interesting patterns when you don&#8217;t turn by 90 degrees and you do lots of looping. As you can see, the result is kind of artful. \u00a0You can probably print this and put it on your Christmas tree! \ud83d\ude42<\/p>\n<p><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/pattern1.png\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-1701\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/pattern1-300x262.png\" alt=\"Logo art 1\" width=\"300\" height=\"262\" srcset=\"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/pattern1-300x262.png 300w, https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/pattern1.png 379w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>\/\/ Turtle class should be pasted below this line&#8230;..<\/p>\n<p>\/\/Sample 2 starts here&#8230;.<\/p>\n<p>function main()<\/p>\n<p>{<br \/>\nvar t = new Turtle();<\/p>\n<p>for(i=0; i&lt;50; i++){<br \/>\nt.Draw(25);<br \/>\nt.Turn(100);<br \/>\n}<\/p>\n<p>return t.GetObjects();<br \/>\n}<\/p>\n<p>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&#8217;s the result.<\/p>\n<p><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/pattern2.png\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-1700\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/pattern2-281x300.png\" alt=\"Logo art 2\" width=\"281\" height=\"300\" srcset=\"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/pattern2-281x300.png 281w, https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/pattern2.png 429w\" sizes=\"(max-width: 281px) 100vw, 281px\" \/><\/a><\/p>\n<p>\/\/ Turtle class should be pasted below this line&#8230;..<\/p>\n<p>&nbsp;<\/p>\n<p>\/\/Sample 3 starts here&#8230;.<\/p>\n<p>function main() {<\/p>\n<p>var t = new Turtle();<\/p>\n<p>var k =30;<br \/>\nvar z;<\/p>\n<p>for(z=0; z&lt;20; z++)<br \/>\n{<br \/>\nfor(j=0; j&lt;30; j++)<br \/>\n{<br \/>\nt.Draw(k);<br \/>\nt.Turn(131);<br \/>\nt.Z = z*2;<br \/>\n}<br \/>\n}<\/p>\n<p>return t.GetObjects();<br \/>\n}<\/p>\n<p>As I was writing this blog post, one of my kids asked me to move one of my Logo sculptures\u00a0into Minecraft. Using TinkerCAD and MCEdit, we downloaded the model from OpenJSCAD and imported it into Minecraft. \u00a0In this Logo program, I enabled the turtle to randomly move around at right angles while moving upward.<\/p>\n<p><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/mineCraftSample__12_8_2014.jpg\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-1699\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/mineCraftSample__12_8_2014-300x178.jpg\" alt=\"Minecraft Logo piece\" width=\"300\" height=\"178\" srcset=\"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/mineCraftSample__12_8_2014-300x178.jpg 300w, https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/12\/mineCraftSample__12_8_2014.jpg 870w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>OpenJSCAD turns JavaScript programming into a way of making cool 3D art.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Top Stories on InspiredToEducate.NET<\/strong><\/p>\n<p><strong>Learning To Code<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1319\">Easy Data Visualization with Google Charts and JavaScript<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=795\">Learn to Build Your Own Conversational Bot using ChatScript<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1285\">10 Free Resources for Learning JavaScript and HTML5<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1238\">17 Fun Tools To Teach Kids To Code by @ChrisBetcher<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=623\">Benefits of Teaching Kids To Code That No One Is Talking About<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1349\">Easy Recipes for Building Android Apps using MIT App Inventor<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=738\">12 Steps To 3D Print Your Minecraft Creations<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=849\">How to Build Your Mobile App using HTML<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1079\" target=\"_blank\">Simple Minecraft Programming Using ScriptCraftJS<\/a><\/li>\n<\/ul>\n<p><strong>Science Education<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1093\">Why hate science?<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=374\">7 ideas for creating a student centered learning environment by Paul Andersen<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1022\">Using candy to teach DNA structure<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>Join the\u00a0<a href=\"https:\/\/www.facebook.com\/groups\/1529734900588516\/\" target=\"_blank\">Spark Macon Maker Space Community on Facebook<\/a><\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=https%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2Flogo-programming-goes-3d%2F&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n","protected":false},"excerpt":{"rendered":"<p>As a kid, one of my first programming languages was the Logo. \u00a0It&#8217;s a really simple language that ran on Apple IIe&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[22,4,16,23,11,8],"tags":[],"_links":{"self":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/1698"}],"collection":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/comments?post=1698"}],"version-history":[{"count":3,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/1698\/revisions"}],"predecessor-version":[{"id":1706,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/1698\/revisions\/1706"}],"wp:attachment":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/media?parent=1698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/categories?post=1698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/tags?post=1698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}