Lab 21 - Interactively yours, JavaScript

By now you have successfully built the interactive Smooth Motion program and tested it. Using the decomposition principle you were able to separate the program into its simpler component parts, and a PERT chart helped you decide which tasks needed to be completed before others. Next we'll take a look at some other interactive JavaScript programs on the Web.

To consider:

JavaScript - bringing beautiful visualizations to the Web

In this twenty-first lab, you'll look at a variety of interactive JavaScript applications and their source files, demonstrating a small part of the scope of what's possible. As you explore, review your answers from the To consider: section above. Have you changed your mind about any of them?

Learning more

  1. Let's start with an JavaScript application designed to display interactive charts on the Web. Highcharts is a product free for personal use that leverages the jQuery library to beautiful visual effect. Take some time to check out and interact with the Highchart demo pages.

    Why do you think Highsoft Solutions AS, the makers of Highcharts, offer it free for personal use? List at least three benefits you think the company might receive from that offer.

  2. Wanting to wow them at your next presentation? Consider trying out programmer Hakim El Hattab's reveal.js, a 3d slide presentation framework using CSS and HTML5. You can download the source from GitHub where it is licensed under an "MIT license". The code is free for you to use and change, as long as the original copyright and permission notices remain. Read more about the MIT License.

    Download the source code from GitHub, and look at the JavaScript part of the code. Can you understand what the code is doing? Look specifically at the reveal.js file. Is there anything in there that makes you think you could run one of these slideshows from a phone or a tablet? What is it? Be specific.

  3. For a little fun, a trip to Google's Chrome Experiments is in order. You'll need a webkit browser (Firefox, Safari, or Chrome). With nearly 500 JavaScript-powered experiments to explore, including some built specifically for mobile devices, you can lose track of time pretty quickly.

    One experiment called Canopy is sure to keep your attention. Even though its commercial application may not be readily evident, it's a stunning display of interactive JavaScript. Make your selections from the dashboard and press play to watch the program animate - it will keep going as long as you let it. Once it's animated, you can use your mouse to change the viewport by moving the on-screen crosshairs.

    Did you know that everything on Chrome Experiments, including Canopy, has been submitted by the site's users? And if you made something you wanted to share, you could submit your own JavaScript project.

  4. The now-defunct Effect Games still has some of their JavaScript game engine game demos online. Crystal Galaxy is one of them, a mouse driven space side-scrolling space shooter with just the right sci-fi sound effects. You can see (and download) the game engine files from Effect Games' GitHub site - the Javascript files are found in the src folder. Effect Games' game engine is another MIT licensed project.

    Let's take a quick look at one of the .js files from the game engine, plane.js, and see if we can get a sense of what's happening:

    // Effect Games Engine v1.0 // Copyright (c) 2005 - 2011 Joseph Huckaby // Source Code released under the MIT License: // http://www.opensource.org/licenses/mit-license.php //// // _Plane.js // Abstract base class for planes (layers) in a portal //// function _Plane() { // class constructor }; _Plane.prototype._isPlane = true; _Plane.prototype.scrollX = 0; _Plane.prototype.scrollY = 0; _Plane.prototype.scrollSpeed = 1.0; _Plane.prototype.zIndex = 1; _Plane.prototype.visible = true; _Plane.prototype.setZIndex = function(_idx) { // set zIndex level this.zIndex = parseInt(_idx, 10); }; _Plane.prototype.setScrollSpeed = function(_speed) { // set zIndex level this.scrollSpeed = parseFloat(_speed); }; _Plane.prototype.init = function() { // init graphical elements }; _Plane.prototype.reset = function() { // destroy graphical elements }; _Plane.prototype.logic = function() { // called for each logic loop iteration }; _Plane.prototype.draw = function() { // called for each draw loop iteration }; _Plane.prototype.hide = function() { // hide graphical elements }; _Plane.prototype.show = function() { // show graphical elements }; _Plane.prototype.getMouseCoords = function() { // get current mouse coords adjusted for plane // i.e. scrollSpeed may be different, so our scrollX/Y may differ from port's version var _pt = this.port.getMouseCoords(); if (_pt) return _pt.offset( 0 - this.port.scrollX, 0 - this.port.scrollY ).offset( this.scrollX, this.scrollY ); else return null; }; _Plane.prototype.zoom = function(_value) { // apply portal zoom level to specified value return Math.floor( _value * this.port._zoomLevel, 10 ); }; _Plane.prototype.unzoom = function(_value) { // remove portal zoom level from specified value return Math.floor( _value / this.port._zoomLevel, 10 ); }; _Plane.prototype.tween = function(_args) { // tween object properties _args.target = this; gTween.addTween(_args); };

    We definitely see some things we've seen before, like the Math.floor function, and functions being called with and without parameters. While we may not be know exactly what's happening here, we can still identify familiar parts, like the (very helpful) comments, the function declarations, and variable definitions. Without knowing anything about the overall game engine program, we can look at this code and understand more about the program's structure now that we've built a complex program of our own.

Moving on

Now that you've seen them, consider testing out a JavaScript photo gallery on your iDiary page, or incorporating interactive JavaScript charts.

You can also take another look at the Smooth Motion code. While you probably won't be adding a photo gallery to that program, what are some things you could change in the code to make the program's output successful but different? For example, is it possible to end the animation after a pyramid shape is created (stairs up followed immediately by stairs down) instead of the original staircase? Do you think that change would be easy or difficult to make? How much of the code would have to change: not very much of the code, or a great deal of the code?

Finally, think about what you might like to tackle next. More JavaScript? A different programming language? A more complex website? Building a robot? If your ears perked up at the mention of robots, you may want to go see what Lab 22 has in store for you.