p5.js Sketch in a Jupyter Notebook

README.md

p5.js Sketch in a Jupyter Notebook

environment.yml

name: ipyp5
channels:
- conda-forge
dependencies:
- jupyterlab=1.0
- ipywidgets=7.5
- python=3
- pip
- voila=0.1.20
- pip:
  - ipyp5==0.1.1
  

sketch.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# p5.js in Jupyter"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipyp5 import Sketch"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "w = Sketch()\n",
    "w.value = \"\"\"\n",
    "const BG = '#88ddee';\n",
    "const COLORS = [\n",
    "  '#d00d33', // red\n",
    "  '#24a2f7', // blue\n",
    "  '#7e7e7e', // grey\n",
    "  '#b14ffa', // purple\n",
    "];\n",
    "const N_COLORS = COLORS.length;\n",
    "const BLACK = '#000';\n",
    "const WHITE = '#fff';\n",
    "const RADIUS = 100;\n",
    "const TWEEN_DURATION = 2000;\n",
    "const SCALE = (16 / 9) / 1000;\n",
    "const [W, H] = [512, 512];\n",
    "\n",
    "let fps = 0;\n",
    "let cx, cy, ratio;\n",
    "\n",
    "// from: https://gist.github.com/gre/1650294\n",
    "const easeInOutQuad = t => t<.5 ? 2*t*t : -1+(4-2*t)*t;\n",
    "\n",
    "p.setup = function() {\n",
    "  p.createCanvas(W, H);\n",
    "  p.windowResized();\n",
    "}\n",
    "\n",
    "p.windowResized = function () {\n",
    "  ratio = SCALE * p.min(W, H);\n",
    "  p.resizeCanvas(W, H);\n",
    "}\n",
    "\n",
    "p.draw = function() { \n",
    "  p.background(BG);\n",
    " \n",
    "  // calculate values based on the current time and tween duration\n",
    "  const current = p.millis();\n",
    "  const n = p.int(current / TWEEN_DURATION);\n",
    "  const t = (current % TWEEN_DURATION) / TWEEN_DURATION;\n",
    "  const v = easeInOutQuad(t);\n",
    "  \n",
    "  const angle = p.TWO_PI + p.HALF_PI;\n",
    "  const angleOffset = p.QUARTER_PI;\n",
    "  \n",
    "  // move origin to the center\n",
    "  p.translate(W / 2, H / 2);\n",
    "  p.rotate(angleOffset + (n + v) * angle);\n",
    "  p.scale(ratio);\n",
    "  \n",
    "  // grey background\n",
    "  p.fill('rgba(192, 192, 192, 0.5)');\n",
    "  p.noStroke();\n",
    "  p.circle(0, 0, RADIUS * 2.25);\n",
    "  \n",
    "  // calculate postion and offset\n",
    "  const x = v > 0.5 ? (1 - v) : v;\n",
    "  const colorId = p.constrain((n - 1 + p.round(v)) % N_COLORS, 0, N_COLORS - 1);\n",
    "  const color = COLORS[colorId];\n",
    "  const offset = p.PI - p.PI * (x * 2);\n",
    "  \n",
    "  // colored half\n",
    "  p.fill(color);\n",
    "  p.noStroke();\n",
    "  p.arc(0, 0, RADIUS * 2, RADIUS * 2, -offset, 0);\n",
    "  \n",
    "  // white half\n",
    "  p.fill(WHITE);\n",
    "  p.noStroke();\n",
    "  p.arc(0, 0, RADIUS * 2, RADIUS * 2, -offset + p.PI, p.PI);\n",
    "  \n",
    "  // junctions\n",
    "  p.strokeCap(p.SQUARE);\n",
    "  p.strokeWeight(18);\n",
    "  p.stroke(0);\n",
    "  p.fill('#fff');\n",
    "  p.line(-RADIUS, 0, RADIUS, 0);\n",
    "  p.circle(0, 0, RADIUS / 1.25);\n",
    "}\n",
    "\"\"\"\n",
    "w"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.6"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {},
    "version_major": 2,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}