Trinket: run code anywhere

GlowScript and VPython

From glowscript.org, "GlowScript is an easy-to-use, powerful environment for creating 3D animations and publishing them on the web. 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."

Just like with GlowScript, you don't need to import any extra modules to get started. Visit the GlowScript Help pages for information on what types of objects, events, and other graphing functionality is available.

Here is a quick example to help get you started.

GlowScript 1.1 VPython
scene.caption.text("""Right button drag or Ctrl-drag to rotate "camera" to view scene.
Middle button or Alt-drag to drag up or down to zoom in or out.
  On a two-button mouse, middle is left + right.
Touch screen: pinch/extend to zoom, swipe or two-finger rotate.""")

side = 4.0
thk = 0.3
s2 = 2*side - thk
s3 = 2*side + thk

wallR = box (pos=vector( side, 0, 0), size=vector(thk, s2, s3),  color = color.red)
wallL = box (pos=vector(-side, 0, 0), size=vector(thk, s2, s3),  color = color.red)
wallB = box (pos=vector(0, -side, 0), size=vector(s3, thk, s3),  color = color.blue)
wallT = box (pos=vector(0,  side, 0), size=vector(s3, thk, s3),  color = color.blue)
wallBK = box(pos=vector(0, 0, -side), size=vector(s2, s2, thk), color = vector(0.7,0.7,0.7))

ball = sphere (color = color.green, radius = 0.4, make_trail=True, retain=200)
ball.mass = 1.0
ball.p = vector (-0.15, -0.23, +0.27)

side = side - thk*0.5 - ball.radius

dt = 0.3
while True:
  rate(200)
  ball.pos = ball.pos + (ball.p/ball.mass)*dt
  if not (side > ball.pos.x > -side):
    ball.p.x = -ball.p.x
  if not (side > ball.pos.y > -side):
    ball.p.y = -ball.p.y
  if not (side > ball.pos.z > -side):
    ball.p.z = -ball.p.z

<html>
      <head>
        <style>
        html, body {
          margin: 0;
          padding: 0;
        }
        div#glowscript {
          width: 100%;
          margin: 0 auto;
          text-align: center;
        }
        textarea#print {
          display: block;
          margin-top: 16px;
          margin-left: auto;
          margin-right: auto;
        }
        </style>
        <link type="text/css" href="{{url}}/{{prefix}}components/{{path}}/css/redmond/IDE/jquery-ui.custom.css" rel="stylesheet" />
        <link type="text/css" href="{{url}}/{{prefix}}components/{{path}}/css/ide.css" rel="stylesheet" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.3/MathJax.js?config=TeX-AMS_HTML"></script>
        {{jqueryList}}
        <script type="text/javascript" src="{{url}}/{{prefix}}components/{{path}}/package/glow.{{version}}.min.js"></script>
        <script type="text/javascript" src="{{url}}/{{prefix}}components/{{path}}/package/RSrun.{{version}}.min.js"></script>
        <script type="text/javascript" src="{{url}}/{{prefix}}components/{{path}}/package/RScompiler.{{version}}.min.js"></script>
      </head>
      <body>
        <div id="loading">Loading your GlowScript program</div>
        <div id="glowscript"></div>

async function runProgram(program) {
            try {
              eval(program);
              await __main__();
            } catch(err) {
              // todo: figure out why stack trace parsing doesn't work for newer version of GS
              var stack = reportScriptError(program, err, {{versionStringAdded}});
              if (stack) {
                window.parent.postMessage(JSON.stringify({ "glowscript.error" : err.message + ' ' + stack, type : "runtime" }), "*");
              }
              else {
                window.parent.postMessage(JSON.stringify({ "glowscript.error" : err.message, type : "runtime" }), "*");
              }
            }
          }

async function async_screenshot(scene) { // GlowScript 2.9 and later
            var img = await scene.__renderer.screenshot();
            var targetSize = 270;
            var aspect = img.width / img.height;
            var w = aspect >= 1 ? targetSize : targetSize * aspect;
            var h = aspect >= 1 ? targetSize / aspect : targetSize;
            var cvs = document.createElement("canvas");
            cvs.width = w;
            cvs.height = h;
            var cx = cvs.getContext('2d');
            cx.drawImage(img, 0, 0, w, h);
            var snapshot = cvs.toDataURL();
            window.parent.postMessage(JSON.stringify({ snapshot: snapshot }), "*");
          }

try {
            compiled = window.glowscript_compile(prog, { lang : '{{lang}}', version : '{{version}}' });
          } catch(e) {
            window.parent.postMessage(JSON.stringify({ "glowscript.error" : e.message, type : "compile" }), "*");
          }

$("#loading").remove()
          window.__context = {
            glowscript_container : $('#glowscript')
          };

// need to distinguish between 2.9 and <
          if (parseFloat('{{version}}') >= 2.9) {
            runProgram(compiled);
          }
          else {
            if (compiled) {
              try {
                main_func = eval(compiled);
                window.userMain = main_func;

if (window.userMain && typeof window.userMain === "function") {
                  window.userMain(function(err) {
                    if (err) {
                      var stack = reportScriptError(compiled, err)
                      if (stack) {
                        window.parent.postMessage(JSON.stringify({ "glowscript.error" : err.message + ' ' + stack, type : "runtime" }), "*");
                      }
                      else {
                        window.parent.postMessage(JSON.stringify({ "glowscript.error" : err.message, type : "runtime" }), "*");
                      }
                    }
                  });
                }
              } catch(err) {
                var stack = reportScriptError(compiled, err);
                if (stack) {
                  window.parent.postMessage(JSON.stringify({ "glowscript.error" : err.message + ' ' + stack, type : "runtime" }), "*");
                }
                else {
                  window.parent.postMessage(JSON.stringify({ "glowscript.error" : err.message, type : "runtime" }), "*");
                }
              }
            }
          }

var canvas = document.createElement("canvas");
                        canvas.width = w;
                        canvas.height = h;
                        var cx = canvas.getContext('2d');
                        cx.drawImage(img, 0, 0, w, h);
                        var snapshot = canvas.toDataURL("image/png");

Run your code first!

Are you sure?

Add to Group

Trinket Settings

Enable Editor Autofocus

Global Settings

Enable Line Wrapping

Glowscript Settings

Indentation Amount

(Doesn't update existing code!)