Monthly Archives: January 2015

How to use Blockly in Your App [Video]

Posted on by
Reply

Are you looking for a way to introduce young makers to computer programming?  Programming by puzzle piece has become very popular user interface to help empower novice users to code.   You can find this programming interface in products like Scratch, MIT app inventor, LearnToMod, and tools at Code.org .   Blockly is the JavaScript library created by Google enabling developers to include “programming by puzzle” interfaces in their web applications.   See our previous post on this JavaScript library.

In the next few weeks, I will be teaching a coding class for middle school students.   While I will be using resources from Code.org for this experience, I wanted to create some special tools to engage these students using metaphors from 3D model building.   This work was inspired by seeing LearnToMod or similar tools.   In my work, I connected Blockly to OpenJSCad to enable kids to build 3D models using code.   Using the strengths of OpenJSCad, makers can 3D print their models using STL format.     You can learn more about OpenJSCAD on this post.

Block Builder

Check out my demo code here: http://inspiredtoeducate.net/blockly/demos/blockbuilder/

 

I found the following YouTube video and links helpful in constructing my tools.  If you’re going to include a puzzle programming interface in your web application, you have to enable the puzzle programming component to call JavaScript functions in your API.    The following video discusses how to create custom puzzle blocks and link those blocks to your API.

Make sure to check out https://developers.google.com/blockly/ to learn more about this awesome JavaScript library.

It would be fun to see someone connect blockly to robot control systems, voxel.js,  business work flows, or applications empowering young makers.   Let us know if you build anything cool with Blockly!

 

 

Top Stories on InspiredToEducate.NET

Learning To Code

Science Education

 

Join the Spark Macon Maker Space Community on Facebook

 

5 DIY Projects Involving Lego, Arduino, and Motors

Posted on by

Some things just belong together like peanut butter and jelly.   As I have been building Lego toys with my kids, I started to wonder if you could connect Arduino stuff to Lego stuff. While  my kids really enjoy the Lego Wedo and Lego Mindstorm, those kits can be rather costly.   I started searching for DIY ideas for driving down the cost of tinkering with Lego and Arduino.   I hope that you find these ideas can help inspire your projects and young makers to explore the world of physical computing and robotics.

 

Arduino Lego Case

Lego Arduino Case: On Instructables, Mr_Oliveira created instructions for building a simple case for your Arduino.  The case can help you interface the Arduino in your next Lego/Arduino project.  Check out the article here.

 

DIY Lego Motors: Official lego motors and kits can be expensive.   In this video by Jaime Mantzel, learn how to steal motors from old electronics and toys and use them in your lego projects.   His procedure uses some filing, gluing, common lego’s, and rubber bands.

 

Connecting Servo’s to Lego:  From your local radio shack, you can obtain an inexpensive standard servo for  $12.00 .   A servo contains a motor that can be precisely positioned using an angle signal.   Using cleverly positioned rubber bands, you can interface servo’s Lego bricks and gears.   In the video above, the maker interfaces their Arduino to the servo to control a small Lego structure.

To learn more about programming servo’s using the Arduino platform, check out the following example: http://arduino.cc/en/Tutorial/sweep  .  You will find the sweep example under the “File > Examples” menu in the standard Arduino programming environment.

 

Lego Arduino bot platform

Lego/Arduino Robot platform: Searching around Thingiverse, I found an notable robot platform enabling you to combine Arduino and Lego together.   I have not personally tested this platform, but I thought the idea of 3D printing your own Lego pieces really fun.  Download and tinker with the files here: http://www.thingiverse.com/thing:311813

If you need to include additional servo’s in your lego build, you might consider 3D printing the following component: http://www.thingiverse.com/thing:7535

 

 

Lego RC Car

Lego/Arduino/XBee Remote controlled car:  I am amazed at the creativity that people have with combining Lego and Arduino.   NFrith provides an overview of his experience of building a remote controlled Lego car with his son at the following Instructables.      post: http://www.instructables.com/id/Lego-Technic-Car-with-Arduino-XBee-Wireless-Contro/?ALLSTEPS   It’s a pretty cool build.

 

Top Stories on InspiredToEducate.NET

Learning To Code

Science Education

 

Join the Spark Macon Maker Space Community on Facebook

 

 

 

 

 

 

 

 

Loading a 3D Model using Three.js

Posted on by

three js

If you’re looking for a way to program 3D experiences for Google Chrome and other modern web browsers, make sure to check out three.js .    For many professional programmers, JavaScript has become an essential language to making web applications.   It still amazes me that we can use JavaScript to create 3D experiences, games, or visualizations.   If you’re interested in learning JavaScript, check out CodeAcademy.com .

My wife, biology professor, asked me if there would be an easy way to share 3D models of cell structures for her classes.   We want to explore 3D printed objects too.  I, however, started to wonder if we could share the 3D model using a custom web page.  While glancing through the three.js examples, I noticed that the library includes an STL model loader and  an example for first person exploration.  An STL file is a standard file format for saving 3D structure.   You can create STL files using software like TinkerCAD.com , openjscad,  or 123D design.   You can also find STL content at thingiverse.com .

You can inspect these examples here:

http://threejs.org/examples/#misc_controls_pointerlock

http://threejs.org/examples/#webgl_loader_stl

In a few hours, I was able to combine the “pointer lock” control and the STL loader program into a single experience.   In this experience, I loaded the “Winter fall” castle.   This model can be found at http://www.thingiverse.com/thing:84866 .

http://inspiredtoeducate.net/blogPostDemos/threejsdemo1.html

Here’s the code for loading a binary STL.


var material = new THREE.MeshPhongMaterial( { color: 0x00AAFF, shininess: 30, specular: 0x111111 } );

var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {

var geometry = event.content;
geometry.computeTangents();
var mesh = new THREE.Mesh( geometry, material );

mesh.position.set( 0, -10, 0 );
mesh.rotation.set( - Math.PI / 2, 0, 0 );
mesh.scale.set( 15, 15, 15 );

mesh.castShadow = true;
mesh.receiveShadow = true;

objects.push(mesh);
scene.add( mesh );

} );

loader.load( './models/winterfell.stl' );

The following line describes the material properties of the STL and color.

var material = new THREE.MeshPhongMaterial( { color: 0x00AAFF, shininess: 30, specular: 0x111111  } );

In the next few lines, we define an event handler to load the STL content into memory.   The geometry data of the STL is combined with the material to create a mesh object.    You can set the position of the mesh, rotation, and scale factors.   In the final two statements, the mesh is added to an “objects” collection and the scene.   By adding the mesh to the “objects” collection, the player will be able to stand on objects defined in your STL file.  If there’s a chair defined in your scene, the player will be able to stand on top of that chair.

The following line executes the loader for the STL you specified.

loader.load( ‘./models/winterfell.stl’ );

If the STL has too much complexity, the STL loader seems to break down.  I would encourage you to tinker with it to see if it works for you.   I was impressed with the number of STL files I was able to load.

Make sure to check out the other great examples on the three.js website.

Here’s a few links to help you get started with three.js .

 

Top Stories on InspiredToEducate.NET

Learning To Code

Science Education

 

Join the Spark Macon Maker Space Community on Facebook