content/p5.ipynb

{
   "metadata":{
      "kernelspec":{
         "name":"p5js",
         "display_name":"p5.js",
         "language":"javascript"
      },
      "language_info":{
         "codemirror_mode":{
            "name":"javascript"
         },
         "file_extension":".js",
         "mimetype":"text/javascript",
         "name":"p5js",
         "nbconvert_exporter":"javascript",
         "pygments_lexer":"javascript",
         "version":"es2017"
      }
   },
   "nbformat_minor":4,
   "nbformat":4,
   "cells":[
      {
         "cell_type":"markdown",
         "source":"# p5 notebook\n\nA minimal Jupyter notebook UI for [p5.js](https://p5js.org) kernels.",
         "metadata":{

         }
      },
      {
         "cell_type":"markdown",
         "source":"First let's define a couple of variables:",
         "metadata":{

         }
      },
      {
         "cell_type":"code",
         "source":"var n = 4;\nvar speed = 1;",
         "metadata":{
            "trusted":true
         },
         "execution_count":null,
         "outputs":[

         ]
      },
      {
         "cell_type":"markdown",
         "source":"## The `setup` function\n\nThe usual p5 setup function, which creates the canvas.",
         "metadata":{

         }
      },
      {
         "cell_type":"code",
         "source":"function setup () {\n  createCanvas(innerWidth, innerHeight);\n  rectMode(CENTER);\n}",
         "metadata":{
            "trusted":true
         },
         "execution_count":null,
         "outputs":[

         ]
      },
      {
         "cell_type":"markdown",
         "source":"## The `draw` function\n\nFrom the [p5.js documentation](https://p5js.org/reference/#/p5/draw):\n\n> The `draw()` function continuously executes the lines of code contained inside its block until the program is stopped or `noLoop()` is called.",
         "metadata":{

         }
      },
      {
         "cell_type":"code",
         "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}",
         "metadata":{
            "trusted":true
         },
         "execution_count":null,
         "outputs":[

         ]
      },
      {
         "cell_type":"markdown",
         "source":"## Show the sketch\n\nNow let's show the sketch by using the `%show` magic:",
         "metadata":{

         }
      },
      {
         "cell_type":"code",
         "source":"%show",
         "metadata":{
            "trusted":true
         },
         "execution_count":null,
         "outputs":[

         ]
      },
      {
         "cell_type":"markdown",
         "source":"## Tweak the values\n\nWe can also tweak some values in real time:",
         "metadata":{

         }
      },
      {
         "cell_type":"code",
         "source":"speed = 3",
         "metadata":{
            "trusted":true
         },
         "execution_count":null,
         "outputs":[

         ]
      },
      {
         "cell_type":"code",
         "source":"n = 20",
         "metadata":{
            "trusted":true
         },
         "execution_count":null,
         "outputs":[

         ]
      },
      {
         "cell_type":"markdown",
         "source":"We can also show the sketch a second time taking into account the new values:",
         "metadata":{

         }
      },
      {
         "cell_type":"code",
         "source":"%show",
         "metadata":{
            "trusted":true
         },
         "execution_count":null,
         "outputs":[

         ]
      }
   ]
}