Trinket: run code anywhere

Web VPython

Web VPython is an easy-to-use, powerful environment for creating 3D animations. You can also use VPython with installed Python: see vpython.org.

Helpful Web VPython resources:

Here is a quick example to help get you started.

Web VPython 3.2

canvas(caption="""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

This is a Monte Carlo simulation of radioactive decay

by Valentina Erastova, University of Edinburgh, Nov 2021

adapted from Rhett Allain's Trinket

A 2D material slab made of element X is composed from stable blue particles and radioactive red particles. Radioactive red decay into a new element Y, made of stable cyan particles.

The total amount of particles forming element X is 2000, N=2000 and 22.4% are radioactive nuclei, N2=0.224*N

The decay rate for the X -> Y is 1/5, r=1/5 i.e. a particle has 20% chance to decay over a given timeunit (=arbitrary unit of time).

We will simulate what happens over the 50 time units. t=0 tmax=50

For this we will run the calculation with a step of 2 timeunits,dt=2 to find out how many particles have undergone the decay after each step.

The results are then plotted on a graph, showing how a population of each element, X and Y, changes with time.

You can zoom in/out and rotate the material: Middle button or Alt-drag to drag up or down to zoom in or out. On a two-button mouse 'middle' is left + right. Mac touchpad: two-finger press and drag. Touch screen: pinch/extend to zoom, swipe or two-finger rotate.

<html>
      <head>
        <style>
        html, body {
          margin: 0;
          padding: 0;
        }
        div#glowscript {
          width: 100%;
          margin: 0 auto;
          text-align: center;
        }
        textarea#print {
          display: {{glowscriptTextarea}};
          margin-top: 16px;
          margin-left: auto;
          margin-right: auto;
        }
        div#print-output {
          display: none;
          flex-direction: column;
          margin: 16px;
          padding: 8px;
          background-color: white;
          border: 1px solid #008aff;
        }
        </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 Web VPython program</div>
        <div id="glowscript"></div>
        <div id="print-output"></div>

// need to distinguish between 2.9 and <
          var floatVersion = parseFloat('{{version}}');

if ('{{runMode}}' === 'calculator' && ('{{version}}' === '3.2.2' || floatVersion > 3.2)) {
            $('#print-output').css('display', 'flex');
            window.addEventListener('message', function(e) {
              var data;

try {
                data = JSON.parse(e.data);
              } catch(e) {}

if (data && data['glowscript.print']) {
                var s = data['glowscript.print'];
                $('#print-output').append(s + "<br>");
              }
            });
          }

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')
          };

if (floatVersion >= 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

Web VPython Settings

Indentation Amount

(Doesn't update existing code!)