Stories on leadership, maker education, and innovation 

formats

Ardublock: GRAPHICAL PROGRAMMING LANGUAGE FOR ARDUINO

Lego Crane

Thanks to projects like Code.org and MIT Scratch, students can encounter ideas from computer science using rich puzzle interfaces. Using these puzzle interfaces, students grow their skills of creativity and critical thinking while building something fun. Puzzle based programming interfaces put emphasis on the student learning sequencing, loops, and connecting appropriate pieces together. In this post, I wanted to share my experiences with Ardublock, a puzzle based programming interface for the Arduino platform. Using the most recent beta of Ardublock, I found that I could create an Arduino program to control motors quickly. I’m looking forward to seeing how students in our makerspace will enjoy the software.

The Arduino platform enables makers and students to program experiences involving electronics or sketches. You can learn more about this platform from the following blog post. In our previous blog post, we used Arduino, Lego’s, and a few servo motor’s to create a small toy crane. In this sketch, the user can move the crane by sending a character to the Arduino through the serial monitor.

  • w – moves the crane up.
  • s – stops the crane.
  • x – moves the crane down.
  • a – moves the crane left.
  • d – moves the crane right.

In the crane setup, pin 9 of the Arduino is connected to a standard servo. Pin 9 will be used to move the crane left and right. Pin 10 will be used to move the crane up and down. We initialize our variable for the direction or angle of the crane. We also send an angle of 90 degrees to both servo motors to ensure that the motors stop moving.

Ardublock setup

 

In the Arduino platform, the programmer needs to define a main loop of functionality.   In the crane control program, we start the process by accepting a character from the serial port and storing the character in a variable called “input.”   If we receive the character ‘d’ for move left, then the system changes the angle variable and writes the angle to the servo motor.  You can see the Ardublock code below.   The character ‘a’ for move right operates in a similar manner.    When we receive the characters x and w to move up and down, we write an appropriate value to the continuous rotation servo.   (0 = move up, 180 = move down)

Ardublock main loop

When using Ardublock, the student is not hidden from the C code generated by the tool.  The student can be encouraged to change the C code.  I see this as a nice learning advantage.   I want our students to make the connection between puzzle pieces and traditional code.

If you’re interested in learning more about this free and open source product, check out the following link:

http://blog.ardublock.com/engetting-started-ardublockzhardublock/

Top Stories on InspiredToEducate.NET

Learning To Code

Science Education

 

 

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

How to build a Lego Crane using Arduino [Tutorial]

Lego Crane

I’m always looking for new ways to play and build with my kids.  In the Rosario house hold, we enjoy building stuff with Lego’s.   My kids have also enjoyed playing with Lego Wedo and Lego Mindstorm kits at our makerspace.   For many families, getting access to a Lego Mindstorm EV3 kit that costs $350 to $400 can be a challenge.   Even the Lego Wedo kits are not inexpensive.   Our family already had a pretty nice collection of traditional Lego and Lego technic pieces.  I started wondering if I could build some pieces that would enable us to combine the world of Lego and Arduino.  In this blog post, I would like to share some of my experiences of building a fun Lego crane for my kids.   I hope to use some of these ideas to engage older students in coding and making at our local makerspace.    You can see a video of the crane in action here:

Here’s some of the materials that you’ll need to build your own!

  • Traditional Lego pieces
  • Lego technic pieces – These lego pieces are used with Lego Mindstorm/Wedo kits for constructing robots.   They include parts like beams, gears, and connectors to enable pieces to turn and spin.  You can learn more about Lego technic from this post.
  • 1 Continuous rotation servo.  You can purchase this servo for about $15.00 . Here’s a link:https://www.parallax.com/product/900-00008
  • 1 standard servo.  This costs about $14.00. You can find it here: https://www.parallax.com/product/900-00005
  • Bread board
  • Arduino
  • Wires
  • Computer to program and control the Arduino.
  • 2 Lego servo horns – I found the following design from Nenzilla from Thingiverse.  It works pretty well.

For this construction, you will need two Lego servo horns.   Connect Lego technic beams to the Lego servo horns.

 

3D printed servo horn for lego

 

In the following picture, you can see how we used Lego, rubber bands, the standard servo to enable the crane to turn left to right.

 

Left and right Lego servo

 

In the following picture, you can see how we used the continuous rotation servo so that the string of the crane can be extended and retracted.  We’re just using rubber bands to connect the servo’s to traditional Lego pieces.   We also used our second Lego servo horn.

 

Up down servo

 

Here’s how we connected the top beam with the support beam.

 

Constructing the top beam

 

What does the Arduino code look like?

In this section, we’ll give you an overview of the source code used to drive the servo’s. In the Arduino platform, the host PC can communicate with the Arduino at runtime using serial communication. In the code, you’ll see that we are using serial communication to send out servo commands in response to characters sent by the host PC.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
#include <Servo.h>


int incomingByte;      // a variable to read incoming serial data into
int angle = 0;
int delta = 3;

Servo servoLeftRight;
Servo servoUpDown;


void setup() {
  // initialize serial communication:
  Serial.begin(9600);
 
  angle = 90;  
 
  servoLeftRight.attach(9);
  servoUpDown.attach(10);  
  servoUpDown.write(90);  
}

void loop() {
  // see if there's incoming serial data:
  if (Serial.available() > 0) {
    // read the oldest byte in the serial buffer:
    incomingByte = Serial.read();
   
   
   
    if (incomingByte == 'd') {
     
      angle = angle - delta;
      if(angle <= 0)
        angle = 0;
       
      // move left  
      servoLeftRight.write(angle);
      delay(15);
    }

    if (incomingByte == 'a') {
      angle = angle + delta;
      if(angle >= 180)
        angle = 180;
     
      //move right  
      servoLeftRight.write(angle);
      delay(15);
    }
   
    if (incomingByte == 'w') {
      //raise the hook
      servoUpDown.write(180);
     
    }
   
    if (incomingByte == 's') {
      //lower the hook
      servoUpDown.write(0);
    }

    if (incomingByte == ' ') {
      //stop the continuous rotation servo
      servoUpDown.write(90);
    }



   
  }
}

In the following setup code, we declare variables for the character typed by the user and the angle of the crane. We also declare our servo’s. One servo is used to change the direction of the crane. (servoLeftRight) The other servo moves the hook of the crane up and down. We initialize the direction servo to 90 degrees. “ServoLeftRight” will be attached to Arduino pin 9. “ServoUpDown” is connected to Arduino pin 10.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#include <Servo.h>


int incomingByte;      // a variable to read incoming serial data into
int angle = 0;
int delta = 3;

Servo servoLeftRight;
Servo servoUpDown;


void setup() {
  // initialize serial communication:
  Serial.begin(9600);
 
  angle = 90;  
 
  servoLeftRight.attach(9);
  servoUpDown.attach(10);  
  servoUpDown.write(90);  
}

The “loop” function keeps repeating code forever. If the Arduino finds bytes incoming from the host computer, we read the byte and do something useful with it.

1
2
3
4
5
6
7
8
9
10
11
void loop() {
  // see if there's incoming serial data:
  if (Serial.available() > 0) {
    // read the oldest byte in the serial buffer:
    incomingByte = Serial.read();

    //Do something!!

  }

}

To send characters to your Arduino, you will need to open the serial monitor window by pressing CTRL+SHIFT+M . By entering ‘d’ or ‘a’, you will move the direction of the crane left and right.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    if (incomingByte == 'd') {
     
      angle = angle - delta;
      if(angle <= 0)
        angle = 0;
       
      // move left  
      servoLeftRight.write(angle);
      delay(15);
    }

    if (incomingByte == 'a') {
      angle = angle + delta;
      if(angle >= 180)
        angle = 180;
     
      //move right  
      servoLeftRight.write(angle);
      delay(15);
    }

In a similar fashion, entering ‘w’ and ‘s’ will raise and lower the hook. Sending a space character will stop the continuous rotation servo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    if (incomingByte == 'w') {
      //raise the hook
      servoUpDown.write(180);      
    }
   
    if (incomingByte == 's') {
      //lower the hook
      servoUpDown.write(0);
    }

    if (incomingByte == ' ') {
      //stop the continuous rotation servo
      servoUpDown.write(90);
    }

In a future blog post, I might try to recreate this program using ArduBlock to make the programming experience more accessible to kids.

Let us know if you need help building your own Lego robots using Arduino. I would enjoy hearing what you’re trying and building!

Wish you the best!

Top Stories on InspiredToEducate.NET

Learning To Code

Science Education

 

Join the Spark Macon Maker Space Community on Facebook

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

DroidScript: Building Simple Android apps using JavaScript

DroidScript

 

Let’s say you want to tinker with making simple Android applications, but you don’t have a lot of time.   Perhaps you just love JavaScript and want to write Android Apps.   Consider checking DroidScript on the Google Play Store.  DroidScript enables you to quickly build simple Android apps using JavaScript.

I greatly appreciate DroidScript enabling you to edit programs directly from a Wifi connected desktop computer.  All you need is a desktop web browser.   You don’t need to install Eclipse, Java, simulators, Netbeans or anything.   You press a button in DroidScript and the app fires up a web server on your Android device.   From your web browser, you can start making new apps, exploring and running sample programs, and checking out the documentation.

What features of Android can you access using DroidScript?

  • You can use the GPS, Compass, Camera, and Accelerometer.
  • DroidScript can do basic graphics functions.
  • According to the documentation, you can send and receive emails and SMS.
  • You can control Arduino and Lego NXT.
  • On a personal project, I used DroidScript to send commands to an Arduino through serial communication.
  • You can also fire up a custom web server so that your phone can respond to HTTP requests.

I think users will appreciate the effective samples and documentation.

Docs screen

For the young programmer, hobby programmer or someone who needs some quick code duck tape on Android, DroidScript is worth checking out.  If you need help, they have an active forum community at https://groups.google.com/forum/#!forum/androidscript

 

Top Stories on InspiredToEducate.NET

Learning To Code

Science Education

 

Join the Spark Macon Maker Space Community on Facebook

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

Sonic-PI: Sound synth application for learning coding and music

Sonic PI

I love it when I find a tool that combines my two favorite hobbies: music and computers. A gifted programmer named Sam Aaron has created an engaging tool for teaching music and code to makers young and old entitled Sonic-Pi. The tool delightfully blends an introduction to Ruby programming and concepts of music through written tutorials and a real time coding area. The tool can be used on a Raspberry-PI, Windows, or Mac.

Make sure to check out the introduction video on the front page of the Sonic-Pi website.

I liked how the Sonic-Pi tutorials decomposed the concepts of sound, loops, pitches, and music. I like that the tutorials progress from simple to complex ideas. Since music, R&B, and techno have loops and repetitions, students encounter natural introductions to the coding concepts of sequencing commands and repeating them.

During high school, my mother and I were looking for “mother/son” activities. We decided to take a course in cocktail piano together at a local college. It was great fun! In the course, we learned how to improvise piano pieces based on a melody line a chords.   The secret of most jazz musicians is that much of their creative thinking combines heart, physical execution and a kind of mathematical theory we call music theory. I’m not an expert in this subject, but it’s very fun.   It has enabled me to learn how to arrange music, basic scores, and improvise with groups.   You can think of it as the “math” or patterns that exists behind music. I think the Sonic-Pi tutorials do a good job of introducing the music theory concepts and code for ideas like scales, chords, rests, and the various timing ideas of music.

So, what does Sonic-PI code look like? Here’s my first program:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
in_thread do
  loop do
    play_chord chord(:a, :minor)
    sleep 2
    play_chord chord(:g)
    sleep 2
    play_chord chord(:f)
    sleep 2
    play_chord chord(:e)
    sleep 2
  end
end
in_thread do
  loop do
    sample :drum_bass_hard
    sleep 1
    sample :drum_snare_hard
    sleep 1
  end
end

in_thread do
  loop do
    sample :drum_tom_hi_soft
    sleep 0.5
    sample :drum_cymbal_closed
    sleep 0.5
  end
end
loop do
  play choose(scale(:a, :minor_pentatonic, num_octaves: 1))
  sleep choose([1,0.25])  
end

Here’s the break down; In the following code, we play the following chord progression: AM, G, F, E. The chord changes every two beats.

1
2
3
4
5
6
7
8
    play_chord chord(:a, :minor)
    sleep 2
    play_chord chord(:g)
    sleep 2
    play_chord chord(:f)
    sleep 2
    play_chord chord(:e)
    sleep 2

Since we want our chord progression to repeat itself, we wrap the chord progression in a loop. We also wrap it in an “in_thread” code block so that this progression can be executed in parallel with other musical ideas.

1
2
3
4
5
6
7
8
9
10
11
12
in_thread do
  loop do
    play_chord chord(:a, :minor)
    sleep 2
    play_chord chord(:g)
    sleep 2
    play_chord chord(:f)
    sleep 2
    play_chord chord(:e)
    sleep 2
  end
end

This small musical piece has a drum track executing in the loop. The following code executes a bass drum on beat 1 and a snare drum on beat 3. We put this musical idea in a loop and a thread so this idea can run in parallel with other ideas.

1
2
3
4
5
6
7
8
in_thread do
  loop do
    sample :drum_bass_hard
    sleep 1
    sample :drum_snare_hard
    sleep 1
  end
end

In the final element of code, I wrote a few lines to randomly generate a melody based on an A minor pentatonic scale. The “scale” function generates a set of notes included in the pentatonic scale. The “choose” function selects one of those notes at random. The program will hold the note from 1 beat or an eight note.

1
2
3
4
loop do
  play choose(scale(:a, :minor_pentatonic, num_octaves: 1))
  sleep choose([1,0.25])  
end

I’m looking forward to trying this out with older middle school students or high school students. I know some “big kids” who will enjoy this as well. Hope you enjoy Sonic-Pi! Send us links to your songs if you make anything cool!

 

 

Top Stories on InspiredToEducate.NET

Learning To Code

Science Education

 

Join the Spark Macon Maker Space Community on Facebook

Photo credit : https://www.flickr.com/photos/dougbelshaw/

 

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

Loving Laser Cutting and Engraving

Laser cutting samples

When most people talk about makerspaces and their tools, you usually hear about the 3D printer first.   Lately, I have enjoyed getting to know the laser cutting and engraving technology at our makerspace.   For makers and DIY crafters, the laser cutting and engraving technology enables you to leverage inexpensive materials like wood, acrylic, and cardboard to produce beautiful art, crafts and components.   It’s amazing to see what people do with it.

I always enjoy finding things that my wife and I will mutually enjoy.  As I started bringing home laser cut stuff from our makerspace, I found that Sarah got very interested in it.  There’s just something warm and “crafty” about it.   I started seeing her regularly surfing around Pinterest for project ideas.  She even started asking questions about the complexities of opening our own Etsy store.  In short… my mind was blown!

Sarah at the laser cutter

So, I got an idea.   In addition to giving Sarah various gifts for valentines day, I took my wife over to SparkMacon makerspace with wood and acrylic materials in hand.   I run the laser cutter certification class for our makerspace.   I had the opportunity to do the training class for Sarah so that she could tinker with the technology.   She really had a lot of fun.  Here’s some of stuff she built in her first session.

Go Noles!

 

“Go Noles!” on wood!

Trial with drawing on cardboard

Using the free and open source product Inkscape, Sarah created this quick sketch and cut it into cardboard.

Laser cut dino

To close out the day, we tinkered with cutting wood to create this small dinosaur toy.

I’m excited to see what Sarah will continue to make to help decorate our home.

How can you get started with laser cutting?

To help you get started, check out the following links for project ideas and tutorials.   Even if you don’t have a laser cutter available to you through a makerspace, you can leverage online services like Ponoko to design your jobs, select materials, and have the finished products delivered to your door.

We enjoy hearing from our readers!  Let us know if you find any cool project ideas.

 

Top Stories on InspiredToEducate.NET

Learning To Code

Science Education

 

Join the Spark Macon Maker Space Community on Facebook

 

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

8 Essential Resources for Marketing Your Venture with WordPress

blogOn

Building a platform of service is critical to growing your brand, growing your influence, or getting noticed. In this post, we’ll cover all the basic concepts you need to get started with blogging in WordPress: How can blogging help your business or cause? How can blogging help you build a relationship with customers?

I work as a computer programmer.   My wife works as a college professor.   We started this blog years ago as a way to learn more about educational technology and key trends in teaching and learning.   We wanted to find a way to serve our community together.    This platform has been a wonderful resource to bring clarity to my thinking while serving my readers.   Many relationships that started through a blog post or social media interactions have turned into meaningful relationships.   It has been a key discipline for growing my mind, heart, and moving forward my professional goals.

When starting a WordPress blog for your organization, you can either host the blog at WordPress.com or self host the site.   When you host your blog at WordPress.com, your blog URL will have the following format: YourBlogTitle.WordPress.com .   If you want to make a stronger brand impression by having the blog on your own domain name (i.e. YourBrand.com, YourBrand.NET or YourBrand.org ), you should consider self hosting the blog with a paid service.  I would like to introduce you to Michael Hyatt, a thought leader in building social media platforms.   In the following 20 minute video, he carefully teaches you how to setup a self hosted WordPress blog with http://www.bluehost.com/ at a cost of $4.00 per month.   It’s a great way to get started.

You also might find the following links helpful in setting up your blog:

I hope you find these resources helpful.   Feel free to drop me a line over email if you have additional questions: michael.p.rosario at gmail.com .

 

Related content on InspiredToEducate.NET

Join the Spark Macon Maker Space Community on Facebook

 

 Photo by Alexander Baxevanis

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

Inspiring Stories of Makers Building Autonomous Robots

DARPA grand challenge

As my kids get older, I have enjoyed finding ways that we can learn together, get inspired, and be entertained as a family.   To my surprise my little boys have really enjoyed Nova documentaries.   As a “big kid,”  I find these stories very motivating and insightful.   I wanted to share two of our favorite Nova programs.  You might find them useful for your family or class room.

It’s still amazing to me that we have robots on Mars helping us understand that nature of this planet and it’s history.   The Mars Curiosity Nova program really captures the creativity, passion, energy, and dedication of the leaders of the Mars curiosity program.   I think we can be very proud of our teams at NASA JPL.  They are amazing makers!

Similarly, the Nova program on the DARPA grand challenge tells the stories of various teams who attempted to create autonomous cars that can drive across a desert course.   My kids really enjoy this program.  I think the writers do a good job talking about the role of machine learning and computer vision in creating an autonomous car.   At the same time, the program captures the emotions, leadership styles and team dynamics of the various players in the contest.   Both programs are great case studies in creative teams, computer science, and autonomous technology.   Makers of all ages will find these stories inspiring.

Hope you enjoy it!

NOVA | Ultimate Mars Challenge

Abstract: Why go back to Mars? Far from dead, Mars holds untold potential. Nearly half a century of Mars exploration has yielded tantalizing clues that Mars may once have harbored life—and may harbor it still. The extraordinary landing of a revolutionary rover named Curiosity—which successfully touched down inside the Gale Crater—means we have wheels down on the planet once again, in the form of the most sophisticated robot ever to rove the Mars surface. Will NASA’s bold mission and this marvel of technology answer some of our biggest questions and usher in a new golden age of exploration? NOVA goes behind the scenes on NASA’s quest to solve the riddles of the red planet.

 

Great Robot Race

Abstract: Twenty-three bizarre looking vehicles line up at the gate of the DARPA Grand Challenge with one thing in common: thereÕs nobody behind the wheel.

 

Top Stories on InspiredToEducate.NET

Learning To Code

Science Education

 

Join the Spark Macon Maker Space Community on Facebook

 

 

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

How to use Blockly in Your App [Video]

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

 

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

5 DIY Projects Involving Lego, Arduino, and Motors

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

 

 

 

 

 

 

 

 

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
Comments Off  comments 
formats

Loading a 3D Model using Three.js

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
Comments Off  comments 

No tweets to display

© Inspired To Educate
credit