{"id":1636,"date":"2014-09-20T11:51:40","date_gmt":"2014-09-20T11:51:40","guid":{"rendered":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1636"},"modified":"2014-09-20T12:09:20","modified_gmt":"2014-09-20T12:09:20","slug":"make-3d-printable-models-with-javascript","status":"publish","type":"post","link":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/make-3d-printable-models-with-javascript\/","title":{"rendered":"Make 3D Printable Models with JavaScript"},"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%2Fmake-3d-printable-models-with-javascript%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\/09\/screen06.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-1642\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen06.png\" alt=\"loop \/ rotate \/ translate\" width=\"500\" height=\"441\" srcset=\"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen06.png 500w, https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen06-300x264.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>My dad taught me the basics of computer programming using QuickBasic. \u00a0 Even in middle school, I can remember us learning how to draw pixels on the screen with code. \u00a0As a kid, it seemed like magic just making simple shapes! \u00a0I was taking steps to learn how to build my own video game!! \u00a0These moments fueled by passion for learning for years to come!<\/p>\n<p>Welcome to 2014&#8230; We now live in a world where modern browsers have amazing speed and 3D graphical capabilities. \u00a0 I came across a tool called <a href=\"OpenJSCAD.org\" target=\"_blank\">OpenJSCAD.org<\/a> that empowers programmers and tinkers to build 3D models using the popular JavaScript programming language. \u00a0I wanted to take you though a simple tutorial to show you how it works. \u00a0 It&#8217;s pretty fun! \u00a0 The tool enables you to export your creations to STL format for 3D printing or editing. \u00a0\u00a0\u00a0I was able to edit the STL models using <a title=\"3 Tutorials on 3D Modelling with TinkerCAD.COM\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1557\">TinkerCAD<\/a>\u00a0after exporting.<\/p>\n<p>Interested in learning JavaScript? \u00a0 Check out <a href=\"http:\/\/www.codeacademy.com\" target=\"_blank\">CodeAcademy <\/a>and our <a title=\"10 Free Resources for Learning JavaScript and HTML5\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1285\" target=\"_blank\">list of free JavaScript books<\/a>.<\/p>\n<p>You might use this tool to\u00a0engage students in learning to code. \u00a0Professional programmers can use this tool to sketch objects using the most popular programming language on the web!<\/p>\n<p><strong>How does OpenJSCAD work?<\/strong><\/p>\n<p>Visit <a href=\"http:\/\/openjscad.org\" target=\"_blank\">http:\/\/openjscad.org<\/a> using Google Chrome.<\/p>\n<p>As the screen loads, notice that the main menu appears on the left. \u00a0You have a JavaScript code window on the right. \u00a0 I would encourage you to explore the main menu since it contains examples and documentation for the tool.<\/p>\n<p><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen01.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-1637\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen01.png\" alt=\"opening screen\" width=\"600\" height=\"278\" srcset=\"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen01.png 600w, https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen01-300x139.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Using the code window on the right, clear the contents of the code and paste in the following code:<\/p>\n<p>function main()<br \/>\n{<br \/>\nvar list = new Array();<\/p>\n<p><span style=\"color: rgb(255, 0, 0);\">var obj = cube([20,20,2]);<\/span><br \/>\n<span style=\"color: rgb(255, 0, 0);\"> list.push(obj);<\/span><\/p>\n<p>return list;<br \/>\n}<\/p>\n<p>All OpenJSCAD programs must contain a function called &#8220;main.&#8221; \u00a0 This function will be called to draw your 3D model. \u00a0 \u00a0The &#8220;main&#8221; function must return a list of objects that need to be drawn. \u00a0 In this simple example, we create a list, create a square using the &#8220;cube&#8221; function, add the square to the list, and return the list. \u00a0 Make sure your cursor is placed in the code window. \u00a0 Press CTRL+ENTER. \u00a0 This will run your program and render the scene. \u00a0 It should look something like this.<\/p>\n<p><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen02.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-1638\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen02.png\" alt=\"a square\" width=\"500\" height=\"291\" srcset=\"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen02.png 500w, https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen02-300x174.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>By default, objects will be drawn at the origin of the scene. (i.e. coordinates 0,0,0 in terms of x,y,z ). \u00a0 Let&#8217;s say we want to draw another square slightly above the second. \u00a0 To accomplish this, we need to translate the second square up on the Z axis. \u00a0Let&#8217;s change the previous code to show you how to accomplish this. \u00a0Notice the function call to &#8220;translate&#8221;. \u00a0\u00a0Press CTRL+ENTER to render the code.<\/p>\n<p>function main()<br \/>\n{<br \/>\nvar list = new Array();<\/p>\n<p>var obj = cube([20,20,2]);<br \/>\nlist.push(obj);<\/p>\n<p>obj = cube([20,20,2])<span style=\"color: rgb(255, 0, 0);\">.translate([0,0,5]);<\/span><br \/>\nlist.push(obj);<\/p>\n<p>return list;<br \/>\n}<\/p>\n<p><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen03.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-1639\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen03.png\" alt=\"two squares\" width=\"500\" height=\"246\" srcset=\"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen03.png 500w, https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen03-300x147.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>The framework enables you to rotate objects by an axis. \u00a0In the next example, we will rotate a new square 20 degrees. \u00a0Copy the code below and run it in OpenJSCad. \u00a0In this example, you&#8217;ve learned how to create simple rectangular objects, translate them, and rotate them. \u00a0Cool!<\/p>\n<p>function main()<br \/>\n{<br \/>\nvar list = new Array();<\/p>\n<p>var obj = cube([20,20,2]);<br \/>\nlist.push(obj);<\/p>\n<p>obj = cube([20,20,2]).translate([0,0,5]);<br \/>\nlist.push(obj);<\/p>\n<p>obj = cube([20,20,2]).translate([0,0,10])<span style=\"color: rgb(255, 0, 0);\">.rotateZ(20);<\/span><br \/>\nlist.push(obj);<\/p>\n<p>return list;<br \/>\n}<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen04.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-1640\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen04.png\" alt=\"rotate example\" width=\"499\" height=\"276\" srcset=\"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen04.png 499w, https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen04-300x165.png 300w\" sizes=\"(max-width: 499px) 100vw, 499px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>In the next example, let&#8217;s create a small stack of these squares using a &#8220;for&#8221; loop. \u00a0Notice how we&#8217;re changing the &#8220;z&#8221; factor to position our squares in 3D space. \u00a0 \u00a0If you run this example, you should see something like this.<\/p>\n<p>function main()<br \/>\n{<br \/>\nvar list = new Array();<\/p>\n<p><span style=\"color: rgb(255, 0, 0);\">var z;<\/span><\/p>\n<p><span style=\"color: rgb(255, 0, 0);\">for(z=0; z&lt;50; z = z + 2)<\/span><br \/>\n<span style=\"color: rgb(255, 0, 0);\"> {<\/span><br \/>\nobj = cube([20,20,2]).translate([0,0,z]);<br \/>\nlist.push(obj);<br \/>\n<span style=\"color: rgb(255, 0, 0);\">}<\/span><\/p>\n<p>return list;<br \/>\n}<\/p>\n<p><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen05.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-1641\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen05.png\" alt=\"squares and loop\" width=\"500\" height=\"439\" srcset=\"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen05.png 500w, https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen05-300x263.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Let&#8217;s complete our 3D sculpture by adding a bit of rotation. \u00a0We&#8217;ll edit the previous program to add a rotation factor that will increase 10 degrees for every step. \u00a0The model should look like the following.<\/p>\n<p>function main()<br \/>\n{<br \/>\nvar list = new Array();<\/p>\n<p>var z;<br \/>\n<span style=\"color: rgb(255, 0, 0);\">var rotate;<\/span><\/p>\n<p>rotate = 0;<br \/>\nfor(z=0; z&lt;50; z = z + 2)<br \/>\n{<br \/>\nobj = cube([20,20,2]).translate([0,0,z])<span style=\"color: rgb(255, 0, 0);\">.rotateZ(rotate);<\/span><br \/>\nlist.push(obj);<br \/>\n<span style=\"color: rgb(255, 0, 0);\">rotate = rotate + 10;<\/span><br \/>\n}<\/p>\n<p>return list;<br \/>\n}<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen06.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-1642\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen06.png\" alt=\"loop \/ rotate \/ translate\" width=\"500\" height=\"441\" srcset=\"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen06.png 500w, https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen06-300x264.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>Here&#8217;s a few more artistic forms I&#8217;ve created while researching this blog post. \u00a0 This post only scratches the surface of the tool. \u00a0 You can learn more about OpenJSCAD using the <a href=\"https:\/\/github.com\/Spiritdude\/OpenJSCAD.org\/wiki\/User-Guide\" target=\"_blank\">user guide<\/a>\u00a0and examples. \u00a0 I could imagine math and computer science teachers using this tool to help their students learn the basic of 3D space and computer graphics primitives. \u00a0If you make something cool with this, drop me a line on Twitter or Google+. \u00a0 I would love to see your creations! \u00a0Happy coding!<\/p>\n<p><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen07.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-1643\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen07.png\" alt=\"screen07\" width=\"500\" height=\"406\" srcset=\"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen07.png 500w, https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen07-300x243.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen09.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-1644\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen09.png\" alt=\"screen09\" width=\"500\" height=\"379\" srcset=\"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen09.png 500w, https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen09-300x227.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2>Help us sustain SparkMacon: Our MakerSpace for Macon, GA by supporting our IndieGogo funding campaign. \u00a0 <a href=\"http:\/\/igg.me\/at\/sparkmacon\" target=\"_blank\">http:\/\/igg.me\/at\/sparkmacon<\/a> .<\/h2>\n<p>Even small contributions are helpful. \u00a0 We&#8217;re very thankful for the generosity of our readers.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Related Stories on InspiredToEducate.NET<\/strong>:<\/p>\n<ul>\n<li><a title=\"Simple Minecraft Programming Using ScriptCraftJS\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1079\" target=\"_blank\">Simple Minecraft Programming Using ScriptCraftJS<\/a><\/li>\n<li><a title=\"Makers rocking #JavaScript at JSConf 2014\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1499\" target=\"_blank\">Makers rocking #JavaScript at JSConf 2014<\/a><\/li>\n<li><a title=\"Create Puzzle-Based Code Experiences in Your Apps #javascript #html5\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1467\" target=\"_blank\">Create Puzzle-Based Code Experiences in Your Apps #javascript #html<\/a>5<\/li>\n<li><a title=\"Easy Data Visualization with Google Charts and JavaScript\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1319\" target=\"_blank\">Easy Data Visualization with Google Charts and JavaScript<\/a><\/li>\n<li><a title=\"10 Free Resources for Learning JavaScript and HTML5\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1285\" target=\"_blank\">10 Free Resources for Learning JavaScript and HTML5<\/a><\/li>\n<li><a title=\"3 Tutorials on 3D Modelling with TinkerCAD.COM\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1557\" target=\"_blank\">3 Tutorials on 3D Modelling with TinkerCAD.COM<\/a><\/li>\n<\/ul>\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%2Fmake-3d-printable-models-with-javascript%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>My dad taught me the basics of computer programming using QuickBasic. \u00a0 Even in middle school, I can remember us learning how to draw pixels on the screen with code. \u00a0As a kid, it seemed like magic just making simple shapes! \u00a0I was taking steps to learn how to build [&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\/1636"}],"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=1636"}],"version-history":[{"count":4,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/1636\/revisions"}],"predecessor-version":[{"id":1648,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/1636\/revisions\/1648"}],"wp:attachment":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/media?parent=1636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/categories?post=1636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/tags?post=1636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}