Skip to content
p5.js in the Jupyter Notebook for custom interactive visualizations using Jupyter Widgets
Branch: master
Clone or download
jtpio Merge pull request #2 from EWouters/master
Use latest ipywidgets from conda-forge instead of ipywidgets==7 from pip
Latest commit edd41b5 Dec 2, 2018



Jupyter Notebook to demonstrate how to use p5.js for custom interactive animations.

The Bermuda Triangle puzzle is used in the notebook as a concrete example to solve. But the idea and the tools can be applied to other cases.

The Bermuda Triangle Puzzle is a wooden puzzle consisting of 1 big triangle and 16 smaller triangles of equal size. The goal of the puzzle is to arrange the triangles in a way so that each adjacent color is the same: red next to red, blue next to blue, and so on....

Here is a short animation of what the animation looks like. Refer to the notebook for more details!

Bermuda Triangle Example

Run on Binder

You can run the notebook directly on Binder.

Binder creates a reproducible environment from the environment.yml file to ensure all dependencies are installed at startup.

Run locally

git clone
cd p5-jupyter-notebook/

Create a conda environment and install the dependencies:

conda env create
source activate p5-notebook

Launch the notebook:

jupyter notebook


This notebook is more for the sake of experimenting with p5.js and creating a Jupyter Widget directly in the Jupyter Notebook.

There is however an initiative to create a proper ipyp5 Jupyter Widgets (still early stages though!):

You can’t perform that action at this time.