Home | Pictures of 3D objects

GlowScript 3D animations in a browser Version 2.1 |
Choose from the menus above for documentation of GlowScript. Read the material below to understand the GlowScript context. Also available is VPython Help. GlowScript ("Graphics Library on Web") makes it easy to write real-time navigable 3D animations that run in a browser. It is based on the JavaScript language plus the WebGL 3D graphics library, both of which are included in most modern browsers. Programs can be written in JavaScript or RapydScript, or they can use VPython syntax. The design of GlowScript is based on that of VPython. Development of GlowScript was initiated by David Scherer and Bruce Sherwood in the summer of 2011. Here is an overview of the project, and here is a log of developments. Here is the open source for this project. Some technical overviews are available. Descriptions of the options available at the top of the page: Pictures of 3D objects: What the objects look like Choose a 3D object (use the pull-down menu above): Details of cylinder, box, etc. Start with cylinder for an overview. Work with 3D objects (use the pull-down menu above): Issues that apply to all 3D objects: color, rotations, etc. Canvases/Events (use the pull-down menu above): Creating one or more canvases within which to show 3D animations; how to handle mouse events; etc. Be sure to explore the many example programs that are available. Using the GlowScript editor GlowScript uses the ACE text editor. Here is a list of keyboard shortcuts for find, replace, etc. While editing, press Ctrl-1 to run your program in the same window. Press Ctrl-2 to run your program in a separate window, which can be convenient for comparing the program with its behavior. If you change your program, press Ctrl-2 again in the editor display to re-run the program with the new changes. Because ACE doesn't work on mobile devices, a simpler editor is used there. A simple program: In the editor, after the GlowScript header, enter the statement "sphere()" and choose "Run this program". You should see a 3D sphere. Read the Help discussions on cylinder and box objects to learn how to customize 3D objects (position, color, size, etc.). Rotate and zoom: You can rotate and zoom the camera using the mouse; for instructions, see the Example program AtomicSolid. Errors and debugging: If you are using JavaScript, watch for little yellow triangles or red squares to the left of a program statement and move the mouse over the icon. You'll see a message describing an error with that line. (This capability is not yet active for VPython or RapydScript.) When you run the program you may see other error messages. Only with the Chrome browser is it usually possible for GlowScript to display the line number of the error, so when developing programs it is strongly advised to use Chrome. Some program errors are reported only to the "console". To enable the console, in Chrome, press shift-ctrl-j on Windows or Ubuntu, or option-cmd-j on Mac. In Firefox, on Windows choose Firefox > Web Developer > Web Console, and on Ubuntu choose Tools > Web Developer > Web Console. The output will be found at the end of the console output When developing a program it can be very useful to comment out a block of code temporarily. Here is how to do this in the three languages: # VPython or RapydScript (can also use '''): """ a = 5 b = 3 """ // JavaScript: /* var a = 5 var b = 3 */ Browsers that support GlowScript 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). Here are browser details: Chrome, Firefox, Safari, Internet Explorer, and Edge all support WebGL and GlowScript. Tablets and smart phones: Most tablets and smart phones support WebGL and GlowScript, both Android and iOS. Testing: If things don't work, it may be useful to visit get.webgl.org which checks whether WebGL is working properly on your computer. Also, here is a repository of WebGL demo programs, where it may be useful to see whether these programs will run on your computer. RapydScript, a Python look-alike Because the design of GlowScript is based on that of VPython, and to facilitate moving programs between GlowScript and VPython, GlowScript makes it possible to write GlowScript programs in RapydScript, a programming language that is very simiilar to Python but programs written in RapydScript can run in a browser. For many kinds of programs RapydScript is identical to Python, but there are some differences due to the desire of the RapydScript designers to maintain high performance in the browser environment, where RapydScript programs are compiled to JavaScript, the underlying browser language. Thanks to its careful design, RapydScript programs run as fast as JavaScript programs but with simpler, cleaner syntax. RapydScript gives you easy access to the growing capabilities of JavaScript and its many libraries. This GlowScript documentation emphasizes RapydScript syntax but also describes how to use JavaScript to create 3D animations. Excellent documentation on the differences between RapydScript and Python is available at RapydScript. VPython You can write programs using the syntax of VPython, or to run many existing VPython programs. The VPython Help documents this syntax for the GlowScript context. The VPython Help also includes a Python program that can convert an existing VPython program to a form that will run in the GlowScript browser environment. When you create a new program, a header line is inserted that looks like this: GlowScript 2.0 VPython You can change "VPython" to "RapydScript" if you want to use one of these other language options. After making such a change, replot the browser page. You don't need to capitalize these language names: you can also use "vpython", "rapydscript", "javascript". If you are new to programming or to RapydScript/Python, you'll find the Python tutorials at www.codecademy.com very helpful JavaScript You may choose to write GlowScript programs in JavaScript, the programming language that is built into browsers. Despite its name, JavaScript is not related to the Java programming language. 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. Reference materials are found at developer.mozilla.org/en/JavaScript. Use var: When using JavaScript in the GlowScript environment, it is obligatory to specify that you are introducing new JavaScript variables of your own before you start using them: var x, y x = 5 y = 3 You can initialize new variables at the same time that you introduce them: var x = 5, y = 3 To invoke JavaScript, change the GlowScript header line: GlowScript 2.0 JavaScript You need not use upper-case letters; "javascript" will also work. After making such a change, replot the browser page. If no language is specified following "GlowScript 1.1" the language is JavaScript. Post to the GlowScript Forum or write to if you don't find what you need, or to tell us how you are using GlowScript. To prevent spam, your first post will be reviewed before becoming public. Using the GlowScript libraries It is possible for knowledgeable programmers to use the GlowScript libraries in their own JavaScript programs. Here are details. Running locally It is possible to use GlowScript locally, without an internet connection, though you will need to copy and paste your programs to glowscript.org if you want them stored in the cloud. Here are the instructions. Versions The text editor automatically inserts a header of the form "GlowScript X.Y VPython" at the start of every new program, where X.Y is the current version number. If future development of GlowScript should cause incompatibilities with earlier versions, old programs will be run with old versions of GlowScript, thereby ensuring to the extent possible that all programs will continue to work as they did originally. The "version" variable provides information about the version number: version is ['X.Y', 'glowscript'] Technical issue with execution speed In order to make it possible to add and subtract 3D vectors, and to be able to multiple or divide a vector by a scalar, all add, subtract, multiply, and divide operations are converted into function calls. If you have a critical function that needs to run as fast as possible, use the following vector operations, where A and B are vectors and k is an ordinary number: A+B -> A.add(B) A-B -> A.sub(B) k*A -> A.multiply(k) A/k -> A.divide(k) The Example program SurfaceCharge uses this technique in the Efield function. Here is one of the expressions in that function (divided across two lines to fit into this web page): E.add(norm(r).divide(mag2(r)). multiply(qs[i])) This corresponds to the following expression: E+qs[i]*norm(r)/mag2(r) For users of VPython See this comparison of VPython and GlowScript. CoffeeScript You may choose to write GlowScript programs in CoffeeScript, which is an alternative to JavaScript. It has a simpler, cleaner syntax, yet it is in a sense just JavaScript, because it gets converted to standard JavaScript, while in the process avoiding various flaws in JavaScript. CoffeeScript has some similarities to RapydScript (and therefore to Python), but it is mainly suitable for those who already have significant JavaScript experience. To invoke CoffeeScript with GlowScript 1.0 or 1.1, just add CoffeeScript to the GlowScript header: GlowScript 2.0 CoffeeScript You need not use upper-case letters; "coffeescript" will also work. After making such a change, replot the browser page. CoffeeScript is not available in GlowScript 2.0 or later, due to there being very little use of it now that VPython is available. Conversion from JavaScript: There exists a JavaScript-to-CoffeeScript converter at js2coffee.org (don't include the initial "GlowScript" statement when using this converter). In the GlowScript example programs are some programs that have been converted using the js2coffee.org tool.

Top of page