{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Processing\n",
    "\n",
    "[Processing](https://processing.org/) is a language for creating quick sketches, visualizations, and artwork. Because it is all scripted, it can be used for data-driven illustrations as well. While there are Processing kernels for Jupyter (see for instance [Calysto-Processing](https://github.com/Calysto/calysto_processing)) these require a series of dependencies that we cannot at present install in the Binder service (but if you discover a way, let us know).\n",
    "\n",
    "## Getting started\n",
    "\n",
    "First, we configure the notebook to allow us to display the _results_ of Processing as html in the notebook."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "import IPython.display\n",
    "from IPython.display import HTML"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "_This walk through is based on a blog post by [Jarrod McClean](https://jarrodmcclean.com/processing-js-in-an-ipython-notebook/)._ \n",
    "\n",
    "Because we are working in Python (rather than directly in Processing) we wrap the Processing code in a variable between `\"\"\"`. Incidentally, if you are exploring the Processing website and you download any of the demos, Processing code has the `.pde` file extension and can be examined in a text editor."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [],
   "source": [
    "### put the processing code between the block demarcated with \"\"\" \"\"\"\n",
    "\n",
    "processing_code = \"\"\" \n",
    "int i = 0;\n",
    "void setup() {\n",
    " size(400, 400);\n",
    " stroke(0,0,0,100);\n",
    " colorMode(HSB);\n",
    "}\n",
    "void draw() {\n",
    " i++;\n",
    " fill(255 * sin(i / 240.0) * sin(i / 240.0), 200, 175, 50);\n",
    " ellipse(mouseX, mouseY, 50, 50);\n",
    "}\n",
    "\"\"\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Next, we create the HTML that will wrap around the processing code, as if it were its own webpage:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [],
   "source": [
    "### then we create an html_template to wrap it all\n",
    "\n",
    "html_template = \"\"\"\n",
    "<script type=\"text/javascript\" src=\"processing.min.js\"></script> \n",
    "<script type=\"text/javascript\">\n",
    "  var processingCode = `{}`;\n",
    "  var myCanvas = document.getElementById(\"canvas1\");\n",
    "  var jsCode = Processing.compile(processingCode);\n",
    "  var processingInstance = new Processing(myCanvas, jsCode);\n",
    " </script>\n",
    "<canvas id=\"canvas1\"> </canvas>    \n",
    "\"\"\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "And now we tell the notebook to display the html! "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<script type=\"text/javascript\" src=\"processing.min.js\"></script> \n",
       "<script type=\"text/javascript\">\n",
       "  var processingCode = ` \n",
       "int i = 0;\n",
       "void setup() {\n",
       " size(400, 400);\n",
       " stroke(0,0,0,100);\n",
       " colorMode(HSB);\n",
       "}\n",
       "void draw() {\n",
       " i++;\n",
       " fill(255 * sin(i / 240.0) * sin(i / 240.0), 200, 175, 50);\n",
       " ellipse(mouseX, mouseY, 50, 50);\n",
       "}\n",
       "`;\n",
       "  var myCanvas = document.getElementById(\"canvas1\");\n",
       "  var jsCode = Processing.compile(processingCode);\n",
       "  var processingInstance = new Processing(myCanvas, jsCode);\n",
       " </script>\n",
       "<canvas id=\"canvas1\"> </canvas>    \n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 23,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "### when the output box appears, move your mouse pointer over it... \n",
    "\n",
    "html_code = html_template.format(processing_code)\n",
    "HTML(html_code)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To try other experiments with processing, go back up to the code block where we defined the processing code and experiment! Why not give some of the [processing tutorials](https://processing.org/tutorials/overview/) a try.\n",
    "\n",
    "\n",
    "The code below will write the generated html to file if you remove the # marks and run this block. You'll then be able to download the html from the notebook home screen (click the jupyter logo to get there)\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "f = open( 'processing.html', 'w' )\n",
    "f.write(html_code)\n",
    "f.close()"
   ]
  }
 ],
 "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.6.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}