My dad taught me the basics of computer programming using QuickBasic. Even in middle school, I can remember us learning how to draw pixels on the screen with code. As a kid, it seemed like magic just making simple shapes! I was taking steps to learn how to build my own video game!! These moments fueled by passion for learning for years to come!
Welcome to 2014… We now live in a world where modern browsers have amazing speed and 3D graphical capabilities. I came across a tool called OpenJSCAD.org that empowers programmers and tinkers to build 3D models using the popular JavaScript programming language. I wanted to take you though a simple tutorial to show you how it works. It’s pretty fun! The tool enables you to export your creations to STL format for 3D printing or editing. I was able to edit the STL models using TinkerCAD after exporting.
Interested in learning JavaScript? Check out CodeAcademy and our list of free JavaScript books.
You might use this tool to engage students in learning to code. Professional programmers can use this tool to sketch objects using the most popular programming language on the web!
How does OpenJSCAD work?
Visit http://openjscad.org using Google Chrome.
As the screen loads, notice that the main menu appears on the left. You have a JavaScript code window on the right. I would encourage you to explore the main menu since it contains examples and documentation for the tool.
Using the code window on the right, clear the contents of the code and paste in the following code:
function main()
{
var list = new Array();
var obj = cube([20,20,2]);
list.push(obj);
return list;
}
All OpenJSCAD programs must contain a function called “main.” This function will be called to draw your 3D model. The “main” function must return a list of objects that need to be drawn. In this simple example, we create a list, create a square using the “cube” function, add the square to the list, and return the list. Make sure your cursor is placed in the code window. Press CTRL+ENTER. This will run your program and render the scene. It should look something like this.
By default, objects will be drawn at the origin of the scene. (i.e. coordinates 0,0,0 in terms of x,y,z ). Let’s say we want to draw another square slightly above the second. To accomplish this, we need to translate the second square up on the Z axis. Let’s change the previous code to show you how to accomplish this. Notice the function call to “translate”. Press CTRL+ENTER to render the code.
function main()
{
var list = new Array();
var obj = cube([20,20,2]);
list.push(obj);
obj = cube([20,20,2]).translate([0,0,5]);
list.push(obj);
return list;
}
The framework enables you to rotate objects by an axis. In the next example, we will rotate a new square 20 degrees. Copy the code below and run it in OpenJSCad. In this example, you’ve learned how to create simple rectangular objects, translate them, and rotate them. Cool!
function main()
{
var list = new Array();
var obj = cube([20,20,2]);
list.push(obj);
obj = cube([20,20,2]).translate([0,0,5]);
list.push(obj);
obj = cube([20,20,2]).translate([0,0,10]).rotateZ(20);
list.push(obj);
return list;
}
In the next example, let’s create a small stack of these squares using a “for” loop. Notice how we’re changing the “z” factor to position our squares in 3D space. If you run this example, you should see something like this.
function main()
{
var list = new Array();
var z;
for(z=0; z<50; z = z + 2)
{
obj = cube([20,20,2]).translate([0,0,z]);
list.push(obj);
}
return list;
}
Let’s complete our 3D sculpture by adding a bit of rotation. We’ll edit the previous program to add a rotation factor that will increase 10 degrees for every step. The model should look like the following.
function main()
{
var list = new Array();
var z;
var rotate;
rotate = 0;
for(z=0; z<50; z = z + 2)
{
obj = cube([20,20,2]).translate([0,0,z]).rotateZ(rotate);
list.push(obj);
rotate = rotate + 10;
}
return list;
}
Here’s a few more artistic forms I’ve created while researching this blog post. This post only scratches the surface of the tool. You can learn more about OpenJSCAD using the user guide and examples. 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. If you make something cool with this, drop me a line on Twitter or Google+. I would love to see your creations! Happy coding!
Help us sustain SparkMacon: Our MakerSpace for Macon, GA by supporting our IndieGogo funding campaign. http://igg.me/at/sparkmacon .
Even small contributions are helpful. We’re very thankful for the generosity of our readers.
Related Stories on InspiredToEducate.NET:
