This post is authored by guest blogger, Sam Patterson. You can find him on Twitter at @SamPatue. I love the Sphero and have one in my classroom. We’ll be giving away one of them in the comments on this post. Just reply how you’re teaching computer science or STEM and how you’d use a sphero and Sam and I will pick one of you!Sphero did not sponsor this post. They did, however, give me one last year and I fell in love with it. They gave me one to give away to a lucky reader (see below.) Happy Hour of Code week!While I have a class set of Lego NXT robots, it is challenging to put together a good lesson I can do with several classes with these robots due to their complexity. Both Sphero Robots and Bee Bots are very simple robots and make content integration accessible to all teachers. As a tech integration specialist for grade K-5 I want a robot that a math teacher is comfortable using. Sphero has several programming interfaces that make meaningful content area application easy without a steep learning curve.
While Sphero is a connected toy, the Orbotix company has free curriculum that models meaningful content use. The lesson published as part of their SPRK education program are excellent models for meaningful in class use. My favorite lesson is the Rate Time and Distance lesson.I appreciate the lessons Orbotix has written because they clearly illustrate how these robots can be used in lessons that support common core standards in math and science. These lessons can provide any teacher with a great starting point for designing their own robot augmented lessons.There are so many great ideas about how to use a Sphero robot on Youtube. This video inspired me to give my students a design challenge to build and race Sphero chariots.The Sphero programming interface MacroLab enables a teacher to email a program to a student. this means as I assemble my lesson I can create scaffolding for my diverse learners by writing starter programs for my students.Want to win your own sphero?Martin Angelov September 25th, 2013
By now you have probably heard about Three.js – a library which makes working with 3D in the browser easy. With it, you can create the building blocks of 3D modeling – cameras, meshes, lights and more, and apply animations on them. Three.js can draw a scene using a Canvas element, SVG, CSS3D or WebGL. In this article, you will find a collection of demos, tutorials and resources that will inspire you to learn more about the library. The impressive demos that you see below are made with the Three.js library and WebGL as a renderer. It is possible to use WebGL directly, but choosing Three.js makes development easier and results in only a fraction of the code. Here are some of the things that are possible with the library: Nucleal is a WebGL experiment, powered by the Three.js. It breaks photos down into thousands of particles that are transformed by physics. You can choose any combination of photo, speed and effects. The animations run smoothly which is even more impressive.
Lights is an amazing visual experience, powered by Three.js, which syncrhonizes colors and shapes to music. You fly through a scene filled with colorful shapes, which you can interact with by clicking. “Just A Reflektor” is an interactive film that lets you cast a virtual projection on your computer screen by holding up your mobile device in front of your computer’s webcam. That way, you control all of the visual effects in the experience by moving your phone or tablet through the physical space around you. See some of the amazing effects on the tech page, and the behind the scenes video. Arms Globe is a visualization experiment which overlays the world trade of small arms and ammunition on top of a model of the earth which you can rotate in 3D space. You can filter the data set by years and types of ammunition. The visualization is very impressive and runs smoothly. This experiment downloads Google Streetview data between two destinations, and turns it into an animation of the trip.
You can pause and take a look around, or you can drag a target on the map on the top-right which the camera will follow. Give it a few minutes to load or watch this video to see it in action. This is a promotional website for the Oz the Great and Powerful movie. It combines beautiful artwork with HTML5 and WebGL into immersive experience. It takes place in the circus from the beginning of the movie. You can interact with the environment and use your web cam. Google’s Zeitgeist for 2012 included a WebGL powered world map which presented the search trends and important events from the past year. Click the “Watch the year in review” button to see it. Ironbane is a massively multiplayer online game powered by WebGL and Three.js. You can collect items, interact with other players and explore the open world. The game follows a retro style inspired by Minecraft and runs smoothly. The game is open source and both the client and server side are written in JavaScript. You can play without opening an account, so you can quickly try it for yourself.
Cube Slam is my favorite Three.js powered game from this list. It is a spin of the classic pong game, but moves it into 3D space. You can play against your friends or computer-controlled bear. The game uses WebRTC so you see a video of your friend’s webcam. For a behind the scenes, read through this blog post by one of the creators. HexGL is a futuristic, fast-paced racing game built using HTML5, JavaScript and WebGL, with the help of Three.js. It is a tribute to the original Wipeout and F-Zero series. It is a graphically heavy game, approaching the level of desktop games from a few years ago. Luckily, you can lower the level of detail before playing. Here is a video from the game author explaining how he made the game. This is a Chrome Experiment by Google that lets you turn any web page into a 3 dimensional maze through which you move a ball. What is even cooler, is that the ball is controlled from your smartphone. HelloRun is a WebGL game powered by Three.js that puts you in the hull of a spaceship and forces you to find your way by jumping through hurdles.
The game has great visuals and progressively speeds up and becomes more difficult. Hello Racer is an impressive visualization of a Formula 1 racing car, powered by WebGL and Three.js. It features life-like reflections and shadows. You can even drive it around with the WASD keys. This is another experiment that features detailed car visualizations. This time you can choose the car model and color. The colors are applied dynamically and all the textures are updated to match. Google Maps Cube is a game that presents you with a 3D maps cube. Your job is to navigate a ball through the city and reach checkpoints. This is an impressive demo of Three.js. Instead of WebGL, this experiment uses CSS3D to render the chemical elements boxes. You can choose between four layouts: table, sphere, helix and grid. The WebGL Globe is a visualization experiment that, similar to the arms globe, presents data overlayed on a globe floating in 3d space. This example is centered around population by city, but you can see versions with different data sets here.
Obsidian is a WebGL demo that synchronizes floating shapes and colors to music. Although there is a slider at the bottom, this is not a video – the effects are generated in real time. This demo presents a multidimensional web of raindrops that reflect each other and the world around them. Even though a very large number of objects is involved, the rendering is still quite fast. Planet Maker is a web app powered by WebGL and Three.js that lets you create real or imaginary planets. You can choose from several surface texture options, tweak the lighting and atmosphere, add or remove clouds, upload your own imagery, or wrap a ring around them. Frankly, no collection of WebGL resources is complete without a nyan cat. Find even more impressive WebGL demos here: Now that you are sold on Three.js, where do you start? Here is a collection of tutorials, examples, presentations and videos to get you started. Basic Three.js Examples – These are beginner-friendly examples, that are easy to follow and well-documented.