GlowScript: 3D animations in a browser

You are invited to try out GlowScript (“Graphics Library on Web”), an easy to use 3D programming environment inspired by VPython, but which runs in a browser window. The programming language is JavaScript, and it drives the new WebGL 3D graphics library to display in a “canvas” element on a web page. GlowScript has been developed by David Scherer (the originator of VPython) and me. (Note added September 2012: You can also write your programs in CoffeeScript, a cleaner language that is automatically compiled to JavaScript when you run your program. Just add “CoffeeScript” to the header line of the program.)

* At glowscript.org, click Help in the upper right corner of the window and see up-to-date information on which browsers and hardware currently support GlowScript, which requires WebGL. There are also links there for learning JavaScript.

* GlowScript uses the WebGL 3D graphics library that is included in current versions of major web browsers. You must have a modern graphics card with Graphics Processing Units (GPUs). Browser details follow.

Chrome: Current version supports WebGL.

Firefox: Current version supports WebGL.

Opera: Current version supports WebGL.

Internet Explorer: The new version (IE 11) supports WebGL, but there is a bug of unknown origin that prevents GlowScript from running.

Safari: To activate WebGL in Safari 5.1 (included with OSX Lion), go to the Advanced section of Safari preferences and check “Show Develop menu in menu bar”, then on the Develop menu check “Enable WebGL”. Prior to Safari 5.1, to get WebGL required downloading and installing WebKit from Apple (nightly.webkit.org).

Tablets and smart phones: Many tablets and smart phones do not yet support WebGL, though this is likely to change. On at least some Android devices (tested on the Samsung Galaxy S3 smartphone and an Asus tablet), the Firefox, Chrome, and Opera browsers do run GlowScript programs, though transparency is buggy, and currently there is no way to zoom and rotate. Animations are slow on some versions of the browsers. There are reports that GlowScript also works on the Sony Experia smartphone.

* At glowscript.org, run the example programs.

* Log in (you’ll be asked for a Google login, such as a gmail account), and try writing some programs yourself.

* Click “Run this program” or press Ctrl-1 to execute your program in the same window, then click “Edit this program” to return to editing.

* Alternatively, while editing press Ctrl-2 to execute your program in a separate window, so that you can view the execution and the program code simultaneously. After making edits, press Ctrl-2 in the editor to run the new program.

* While running a program, click Screenshot to capture a thumbnail image for your program page.

* In the editor, click Share this program to learn how to let other people run your program.

You will see in the Help that some parts of the language are particularly likely to change, so be prepared for that. On the other hand, there is a version system in place that will allow old programs to continue running in the future. The first line of a program you write is automatically created to be “GlowScript X.Y” (where X.Y is the current version number). When a new version comes out, the software for running the older version is retained for use whenever a program with an old version number is encountered. For example, programs written for either GlowScript 0.3 or 0.4 or 0.5 can all run today (the version system was created after GlowScript 0.2).

There is now a user forum connected to glowscript.org, where you can describe your experiences or ask for assistance.

I am committed to maintaining and hopefully extending VPython, as it is obviously much more mature than GlowScript and benefits from the existence of lots of useful modules, especially for scientific programming.

While the graphics in GlowScript today are pretty basic, it is already clear that WebGL with its emphasis on the use of Graphics Processing Units (GPUs) available on modern graphics cards, will make it possible for GlowScript to do very high-quality graphics. VPython was created at a time when that was not an option, but it is possible that the graphics developments for GlowScript will provide a foundation for improving the graphics in VPython.

For users of VPython, note that on the first page of the GlowScript Help there is a document summarizing the main differences between VPython and GlowScript, much of which is just differences between Python and JavaScript. Also available there is a Python program for converting VPython programs to GlowScript programs. It doesn’t do a perfect job, but it does deal with most of the basic changes that are needed and should save quite a bit of time in the conversion.

If you are new to programming, or just new to JavaScript, you’ll find the JavaScript tutorials at www.codecademy.com very helpful.

There are also helpful interactive tutorials on JavaScript available at www.w3schools.com/js. However, these tutorials assume quite a lot of prior knowledge about html and related web design issues.

An excellent textbook is JavaScript: The Definitive Guide by David Flanagan (6th edition, 2011). This book assumes some prior programming experience but has the advantage of being quite complete, including extensive information on how to use JavaScript and jQuery to make dynamic web pages.

JavaScript reference materials are found at developer.mozilla.org/en/JavaScript.

You can also write GlowScript programs in CoffeeScript, whose syntax is somewhat simpler. In the GlowScript collection of example programs are some pairs — the same program written in JavaScript and in CoffeeScript, so you can compare. See the first page of the Help to learn more about the CoffeeScript option.

This entry was posted in Uncategorized. Bookmark the permalink.

6 Responses to GlowScript: 3D animations in a browser

  1. Hi there colleagues, its great paragraph on the topic
    of teachingand fully explained, keep it up all the time.

  2. Pingback: OSMOCES 2013: Computational Modeling with VPython | Pedagogue Padawan

  3. Ethan says:

    Thanks!!! Your article is very helpful!!! By the way, I read your paper “Work and heat transfer in the presence of sliding friction” recently. It’s awesome!! Most of physics teacher in Taiwan don’t know and perhaps don’t want to resolve the paradox you mentioned in that paper. It really help me so much!!

  4. Ethan says:

    oh…Do you know how to post the javascript of Glowscript in wordpress post?…

    • Glad you liked the friction paper! I’m not sure what you mean by your JavaScript question, since a JavaScript program is just text and can certainly be posted to a WordPress blog. Maybe you mean, “How can one place a working GlowScript program into a web page?” On the first page of the Help at glowscript.org you’ll find this statement:

      “On the GlowScript edit page, click Share this program to see how to let other people run your program.”

      The information given when you click “Share this program” includes how to place the GlowScript program into your own web page. A different issue is how to place such a program into a WordPress blog, and I don’t know how to do that. However, see my blog article about neutron decay to see an example of a direct link to a GlowScript visualization.

      • Ethan says:

        WOW!!! I’m so exciting to talk to you!!! Yes, my question is how to place GlowScript program into my own WordPress Post. I want to create powerful physics animations to illustrate those abstract concepts such as the gravitational potential energy in gravitational field. That’s why I want to post GlowScript animation on my wordpress post. I’ll go to see your article about neutron!! Hmm…. I’m not good at discussing physics in English…. LOL

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s