jupyterlite-p5-kernel#
A p5.js kernel for JupyterLite.
Requirements#
JupyterLite
0.1.0b18+
Install#
This JupyterLite kernel can be installed as a federated server extension.
# Install the kernel
pip install jupyterlite-p5-kernel
# Build a new JupyterLite site
jupyter lite build
See the JupyterLite documentation for more information on how to build sites and include additional extensions: https://jupyterlite.readthedocs.io/en/latest/howto/index.html
Uninstall#
pip uninstall jupyterlite-p5-kernel
Contributing#
Development install#
# Clone the repo to your local environment
# Change directory to the fork directory
# create a new enviroment
mamba create --name jupyterlite-p5-kernel -c conda-forge python=3.9 yarn jupyterlab
mamba activate jupyterlite-p5-kernel
# Install package in development mode
python -m pip install -e .
# Link your development version of the extension with JupyterLab
jlpm run install:extension
# Rebuild the extension Typescript source after making changes
jlpm run build
The extension should be linked to PREFIX/share/jupyter/labextensions
and can be picked up by jupyterlite
:
# Install jupyterlite
python -m pip install jupyterlite
# Build a new JupyterLite site
jupyter lite build
# Serve the site
jupyter lite serve
# Launch a browser to the Jupyterlite server url
python -m webbrowser http://localhost:8000/
References#
p5.js#
Processing > ProcessingJS > p5.js https://en.wikipedia.org/wiki/Processing#p5.js
https://github.com/processing/p5.js
https://p5js.org/learn/
https://p5js.org/reference/ API docs
https://p5js.org/examples/
https://p5js.org/examples/math-additive-wave.html
https://p5js.org/examples/interaction-wavemaker.html
https://p5js.org/examples/objects-objects.html
https://github.com/processing/p5.js/wiki/Beyond-the-canvas#creating-html-images
https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#introducing-webgl-in-p5js
Summer of Code https://github.com/processing/p5.js/wiki#google-summer-of-code-and-processing-fellowships
Season of Docs https://github.com/processing/p5.js/wiki#season-of-docs
p5.js Learning Resources#
https://github.com/processing/p5.js/wiki/Educational-Resources
https://www.khanacademy.org/computing/computer-programming/pjs-documentation
https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations/advanced-development-tools/a/using-processingjs-outside-khan-academy
Khan Academy > Computer Programming > “Intro to JS: Drawing & Animation” https://www.khanacademy.org/computing/computer-programming/programming
https://github.com/processing/p5.js/wiki/Processing-transition#overview-of-differences
https://github.com/processing/p5.js/wiki/p5.js-overview#how-is-this-different-than-processingjs
Khan Academy > Computing > Pixar in a Box https://www.khanacademy.org/computing/pixar
https://www.khanacademy.org/computing/pixar/simulation#hair-simulation-code
https://www.khanacademy.org/computing/pixar/pixar-rigging#code-character
https://en.wikipedia.org/wiki/Lorentz_transformation Rotation about a point other than the origin
https://en.wikipedia.org/wiki/Quaternion