{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# p5 notebook\n",
    "\n",
    "A minimal Jupyter notebook UI for [p5.js](https://p5js.org) kernels."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "First let's define a couple of variables:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "var n = 4;\n",
    "var speed = 1;"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## The `setup` function\n",
    "\n",
    "The usual p5 setup function, which creates the canvas."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "function setup () {\n",
    "  createCanvas(innerWidth, innerHeight);\n",
    "  rectMode(CENTER);\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## The `draw` function\n",
    "\n",
    "From the [p5.js documentation](https://p5js.org/reference/#/p5/draw):\n",
    "\n",
    "> The `draw()` function continuously executes the lines of code contained inside its\n",
    "> block until the program is stopped or `noLoop()` is called."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "function draw() {\n",
    "  background('#ddd');\n",
    "  translate(innerWidth / 2, innerHeight / 2);\n",
    "  for (let i = 0; i < n; i++) {\n",
    "    push();\n",
    "    rotate(frameCount * speed / 1000 * (i + 1));\n",
    "    fill(i * 5, i * 100, i * 150);\n",
    "    const s = 200 - i * 10;\n",
    "    rect(0, 0, s, s);\n",
    "    pop();\n",
    "  }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Show the sketch\n",
    "\n",
    "Now let's show the sketch by using the `%show` magic:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%show"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Tweak the values\n",
    "\n",
    "We can also tweak some values in real time:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "speed = 3"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "n = 20"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We can also show the sketch a second time taking into account the new values:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%show"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "p5.js",
   "language": "javascript",
   "name": "p5js"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "javascript"
   },
   "file_extension": ".js",
   "mimetype": "text/javascript",
   "name": "p5js",
   "nbconvert_exporter": "javascript",
   "pygments_lexer": "javascript",
   "version": "es2017"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}