VPython inside Jupyter notebook

61 views
Skip to first unread message

liza

unread,
May 19, 2024, 5:48:09 PMMay 19
to VPython-users
I'm new to vpython and have been trying to open vpython canvas inside a jupyter notebook under some cell.
And for some reason, although it seems like an easy problem, I have already spent a few hours and got nothing. I found many videos and forums in the internet where people discuss same problem.

There are many solutions such as:
1. write 
               %load_ext glowscriptmagic
               %%GlowScript 1.1 VPython
       in the beginning of the .ipynb file
2. write
     "conda install -c vpython vpython" in Anaconda prompt
     then open Jupyter and there will appear an option to create a new notebook with               VPython Kernel
3. works right away for some people i found in the internet

I suppose all these methods don't work for me because they are outdated. How can I do this now?
Here is a photo of what i want to achieve
Screenshot.png

John

unread,
May 19, 2024, 7:16:22 PMMay 19
to VPython-users
There are two flavors of vpython, namely 1) webvpython or (glowscript) and 2) vpython that works with other python packages.

You can see examples of webvpython here which you can click on and run in your browser.


The first line of code in these programs starts with 

Web VPython 3.2

indicating it is webvpython.

These same example programs can run in a jupyter notebook as can be demonstrated by going to this link which will run them in the cloud.


just open one of the jupyter notebook files on the left and run the vpython code in the cell. Note that the first line in this program starts with

from vpython import *

The instructions to install vpython that works with jupyter notebook can be found here.

John

unread,
May 19, 2024, 7:39:13 PMMay 19
to VPython-users
Another thing you can try if you want to run a webvpython program inside a jupyter notebook is to use the "%%html" magic command with the -- isolated option in a jupyter notebook cell

%%html --isolated
 
as the first line in a notebook cell. Then you can run one of the example webvpython programs in this notebook cell by doing the following.

1. Choose a webvpython example programs from among those listed here.


2. Click on the  View link to view the source code.

3. Click on the Share or export this program link to see the share options.

4. Copy and Paste the code in the box in the webpage for this link into the notebook cell containing the first line %%html --isolated . The jupyter notebook should contain the copied code from webvpython. Run the code in the cell and you should see the vpython program running in the output of the cell in the jupyter notebook.

%%html --isolated
<div id="glowscript" class="glowscript">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" href="https://www.glowscript.org/css/redmond/2.1/jquery-ui.custom.css" rel="stylesheet" />
<link type="text/css" href="https://www.glowscript.org/css/ide.css" rel="stylesheet" />
<script type="text/javascript" src="https://www.glowscript.org/lib/jquery/2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.glowscript.org/lib/jquery/2.1/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="https://www.glowscript.org/package/glow.3.2.min.js"></script>
<script type="text/javascript" src="https://www.glowscript.org/package/RSrun.3.2.min.js"></script>
<script type="text/javascript"><!--//--><![CDATA[//><!--

// START JAVASCRIPT
;(function() {;
var ρσ_modules = {};
ρσ_modules.pythonize = {};

(function(){
    function strings() {
        var string_funcs, exclude, name;
        string_funcs = set("capitalize strip lstrip rstrip islower isupper isspace lower upper swapcase center count endswith startswith find rfind index rindex format join ljust rjust partition rpartition replace split rsplit splitlines zfill".split(" "));
        if (!arguments.length) {
            exclude = (function(){
                var s = ρσ_set();
                s.jsset.add("split");
                s.jsset.add("replace");
                return s;
            })();
        } else if (arguments[0]) {
            exclude = Array.prototype.slice.call(arguments);
        } else {
            exclude = null;
        }
        if (exclude) {
            string_funcs = string_funcs.difference(set(exclude));
        }
        var ρσ_Iter0 = string_funcs;
        ρσ_Iter0 = ((typeof ρσ_Iter0[Symbol.iterator] === "function") ? (ρσ_Iter0 instanceof Map ? ρσ_Iter0.keys() : ρσ_Iter0) : Object.keys(ρσ_Iter0));
        for (var ρσ_Index0 of ρσ_Iter0) {
            name = ρσ_Index0;
            (ρσ_expr_temp = String.prototype)[(typeof name === "number" && name < 0) ? ρσ_expr_temp.length + name : name] = (ρσ_expr_temp = ρσ_str.prototype)[(typeof name === "number" && name < 0) ? ρσ_expr_temp.length + name : name];
        }
    };
    if (!strings.__module__) Object.defineProperties(strings, {
        __module__ : {value: "pythonize"}
    });

    ρσ_modules.pythonize.strings = strings;
})();
async function __main__() {
"use strict";
    var display = canvas;
    var scene = canvas();

    var version, print, arange, __name__, type, ρσ_ls, G, giant, dwarf, dt, r, F;
    version = ρσ_list_decorate([ "3.2", "glowscript" ]);
    Array.prototype['+'] = function(r) {return this.concat(r)}
    Array.prototype['*'] = function(r) {return __array_times_number(this, r)}
    window.__GSlang = "vpython";
    print = GSprint;
    arange = range;
    __name__ = "__main__";
    type = pytype;
    var strings = ρσ_modules.pythonize.strings;

    strings();
    "6";
    scene.caption = "To rotate \"camera\", drag with right button or Ctrl-drag.\nTo zoom, drag with middle button or Alt/Option depressed, or use scroll wheel.\n  On a two-button mouse, middle is left + right.\nTo pan left/right and up/down, Shift-drag.\nTouch screen: pinch/extend to zoom, swipe or two-finger rotate.";
    "7";
    scene.forward = vector(0, 1["-u"]()["*"](.3), 1["-u"]()["*"](1));
    "9";
    G = 6.7e-11;
    "11";
    giant = ρσ_interpolate_kwargs.call(this, sphere, [ρσ_desugar_kwargs({pos: vector(1["-u"]()["*"](1e11), 0, 0), radius: 2e10, color: color.red, make_trail: true, trail_type: "points", interval: 10, retain: 50})]);
    "13";
    giant.mass = 2e30;
    "14";
    giant.p = vector(0, 0, 1["-u"]()["*"](1e4))["*"](giant.mass);
    "16";
    dwarf = ρσ_interpolate_kwargs.call(this, sphere, [ρσ_desugar_kwargs({pos: vector(15e10, 0, 0), radius: 1e10, color: color.yellow, make_trail: true, interval: 10, retain: 50})]);
    "18";
    dwarf.mass = 1e30;
    "19";
    dwarf.p = 1["-u"]()["*"](giant.p);
    "21";
    dt = 1e5;
    "22";
    while (true) {
        "23";
        (await rate(200));
        "24";
        r = dwarf.pos["-"](1["*"](giant.pos));
        "25";
        F = G["*"](giant.mass)["*"](dwarf.mass)["*"](r.hat)["/"](Math.pow(mag(r), 2));
        "26";
        giant.p = giant.p["+"](F["*"](dt));
        "27";
        dwarf.p = dwarf.p["-"](1["*"](F)["*"](dt));
        "28";
        giant.pos = giant.pos["+"](giant.p["/"](giant.mass)["*"](dt));
        "29";
        dwarf.pos = dwarf.pos["+"](dwarf.p["/"](dwarf.mass)["*"](dt));
    }
};
if (!__main__.__module__) Object.defineProperties(__main__, {
    __module__ : {value: null}
});

;$(function(){ window.__context = { glowscript_container: $("#glowscript").removeAttr("id") }; __main__() })})()
// END JAVASCRIPT

//--><!]]></script>
</div>


John

liza

unread,
May 20, 2024, 2:41:04 AMMay 20
to VPython-users
Thank you very much for the answer
I tried to copy projects from mybinder to my local jupyter in browser and they finally worked.
Earlier I tried to do this in IDEs, where i usually open jupyter notebooks. Then found out vpython doesn't work anymore with VScode, I also tried PyCharm, but for me it doesn't work either.
Maybe IDEs stopped supporting vpython somehow.

понедельник, 20 мая 2024 г. в 02:16:22 UTC+3, john...@shaw.ca:

liza

unread,
May 20, 2024, 2:47:01 AMMay 20
to VPython-users
Interesting idea to run webvpython inside jupyter. Haven't been able to make it work yet. But it shows sighns of life: displays white screen, but not a model inside it
понедельник, 20 мая 2024 г. в 09:41:04 UTC+3, liza:

John

unread,
May 20, 2024, 8:28:50 AMMay 20
to VPython-users
You can try running webvpython inside jupyter notebook on mybinder using the same link.


Then open a new notebook. Make sure the cell with the webvpython html code has the 1st line containing the "%%html --isolated" magic command and follow the procedure I outlined previously. It works for me on mybinder and it should work for you also if you follow the steps I outlined. The code in the notebook cell should start and end with something like the following.

%%html --isolated
<div id="glowscript" class="glowscript">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
...
...
// END JAVASCRIPT

//--><!]]></script>
</div>

Here is some documentation on the magic command.


%%html
%html [--isolated]

Render the cell as a block of HTML

options:--isolated

Annotate the cell as ‘isolated’. Isolated cells are rendered inside their own <iframe> tag



John

John

unread,
May 20, 2024, 8:40:08 AMMay 20
to VPython-users
The latest version of vpython which is version 7.6.5 works in VScode and PyCharm in "no_notebook" mode. If you are trying to use Jupyter Notebook inside of VScode or PyCharm then it might not work if they are using a version of Jupyter Notebook prior to Notebook version 7.x. The first 15 minutes of of tvideo tutorial shows how to get vpython up and running in VScode in "no_notebook" mode which means that it just uses a regular python file in these IDS  rather than a notebook file.

liza

unread,
May 26, 2024, 12:34:51 PMMay 26
to VPython-users
I was doing an animation project for uni. It all worked out. Thank you for your advices

понедельник, 20 мая 2024 г. в 15:40:08 UTC+3, john...@shaw.ca:
Reply all
Reply to author
Forward
0 new messages