GlowScript

Examples in this document may not work with Internet Explorer!

Short TIM instructions:

To edit or comment this document, move cursor to the left side of the paragraphs and click the turquoise bar.
On the right side of the text, there is a red bar telling you have not read the paragraph. Click it away. If the bar is yellow, it says you have read it, but it has changed afterwards.

GlowScript is a project by Bruce Sherwood.

See:

GlowScript makes it easy to write programs in JavaScript, RapydScript (a Python look-alike that compiles Python to JavaScript), or VPython (which uses the RapydScript compiler) that generate navigable real-time 3D animations, using the WebGL 3D graphics library available in modern browsers (with modern GPU-based graphics cards). For example, the following complete program creates a 3D canvas in the browser, displays a white 3D cube, creates default lighting, places the camera so that the cube fills the scene, and enables mouse controls to rotate and zoom the camera:

# vpython1

In PC you can rotate the image by mouse right button and zoom by the scroll.

That's it. That's the whole program (except for the GlowScript version header line that is supplied automatically). The key point is that lots of sensible defaults are built into the GlowScript library. You can of course specify the canvas size, the color and other attributes of the objects, the direction of the camera view, etc.

1. Examples

Most of following examples are copied from:

http://www.glowscript.org/#/user/GlowScriptDemos/folder/Examples/

You can copy any of those examples to box below using the View link right of the example image. Then copy the text from edit window to area below and experiment with the example.

# vpython10

1.1 Colors, position and size

You can chage the object color by color parameter and position by pos parameter. For postion and sizes use vector-object. See the example below and VPython introduction.

# vpython2

In TIM-examples you can freely change the code. You can look the code either in normal text view or in syntax highlighted view by pressing link Highlight (that uses ACE-editor). The Highlight mode may not work in every mobile.

If you experiment the examples and want to return back to original code, you can always press link Reset. Or you can choose whatever of the experiment from the version combobox above the example. The examples are "lazy", so they fully open when you bring your mouse over them.

1.2 GlowScript 3D objects

The next example shows most of the 3D-objects in GlowScript. See also GlowScript Examples. In this example only the object creation is visible, to see the whole code, click the link Show all code.

# vpython3

1.3 Moving objects

Objects can be moved by making an infinite loop. Let's first look few examples. After you experiment those, please do not leave the running programs open, because they consume very much of your processor power. One easy way to close all of them is refresh your browser (F5). To close one runing example, click the [x] on the right upper corner of the example.

1.3.1 A "hard-sphere" gas

# vpython4

1.3.2 Bounce

# vpython5

Right button drag or Ctrl-drag to rotate "camera" to view scene. To zoom, drag with middle button or Alt/Option depressed, or use scroll wheel. On a two-button mouse, middle is left + right. Touch screen: pinch/extend to zoom, swipe or two-finger rotate.

1.3.3 Binary star

# vpython6

1.3.4 Atomic Solid

Try to change number of atoms below (N). Do not blame me if put more than 4 :-)

# vpython9

1.3.5 A simplified example

# vpython7

1.4 Textures

# vpython8

1.5 User interactions

1.5.1 Sliders

# vpython11

# vpythonslider

1.6 Text

# vpython13

# vpython12

1.7 3D-surface

# vpython14

2. Instructions to use GlowScript in your own TIM document

Copy the following templete as a new paragraph in your document:

``` {plugin="csPlugin" #vpythonExample}
type: vpython
stem: Change the stem you want to show above the example
#height: 680   # uncomment and cahnge if needed
#width: 300
#autorun: true
#autoupdate: 200
program: |!!
# put here your code before part user can edit
# REPLACE
# put here the part of code after user edit
!!
replace: REPLACE
byCode: |!!
# put here the code users starts to edit
!!
```

Remeber to change also the name for the plugin in #vpythonExample. The name must be unique over the document and it is used as a key when saving students answers. So try to pick a good name for every plugin.

The most simpliest form would be:

``` {plugin="csPlugin" #vpythonBox}
type: vpython
byCode: |!!
box()
!!
```

that is used for the first example in this document.

To see more about the options, take a look to csPlugin-options.

Even the type is vpython, the code can be any of those GlowScript recognizes if the language and version is told in the first line of code. For example:

 GlowScript 2.1 VPython

If there is no language row, then vpython is a default. If the type is glowscript, then GlowScript 2.1 JavaScript is a default. So the type mostly affects to the language options chosen for syntax highlight.