jupyterlite-p5-kernel#

Github Actions Status JupyterLite

A p5.js kernel for JupyterLite.

image

Requirements#

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