{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_1\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_1\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_1\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_1\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_1\">\n",
       "  <b>Sketch #1:</b><br/>\n",
       "  <canvas id=\"canvas_1\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_1\">\n",
       "  <button id=\"run_button_1\" onclick=\"startSketch('1');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_1\" onclick=\"pauseSketch('1');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_1\" onclick=\"setupSketch('1');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_1\" onclick=\"drawSketch('1');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #1 state:</b> <span id=\"state_1\">Loading...</span><br/>\n",
       "<div id=\"output_1\"></div>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = 'println(\"Doug\");';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "    // Temp, just for the code that runs immediately:\n",
       "    Processing.logger.println = function (message) {\n",
       "        //IPython.notebook.get_selected_cell()\n",
       "        var output = document.getElementById(\"output_1\");\n",
       "        if (output.innerText.match(/\\n/g) != null && output.innerText.match(/\\n/g).length > 50) {\n",
       "            output.innerText = \"\";\n",
       "        }\n",
       "        output.innerText += message + \"\\n\";\n",
       "    };\n",
       "    Processing.logger.print = function (message) {\n",
       "        var output = document.getElementById(\"output_1\");\n",
       "        if (output.innerText.match(/\\n/g) != null && output.innerText.match(/\\n/g).length > 50) {\n",
       "            output.innerText = \"\";\n",
       "        }\n",
       "        output.innerText += message;\n",
       "    };\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_1\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_1\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_1\", cc);\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_1\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_1\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_1\", cc);\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        processingInstance.println = function (message) {\n",
       "            var output = document.getElementById(\"output_1\");\n",
       "            if (output.innerText.match(/\\n/g) != null && output.innerText.match(/\\n/g).length > 50) {\n",
       "                output.innerText = \"\";\n",
       "            }\n",
       "            output.innerText += message + \"\\n\";\n",
       "        };\n",
       "        processingInstance.print = function (message) {\n",
       "            var output = document.getElementById(\"output_1\");\n",
       "            if (output.innerText.match(/\\n/g) != null && output.innerText.match(/\\n/g).length > 50) {\n",
       "                output.innerText = \"\";\n",
       "            }\n",
       "            output.innerText += message;\n",
       "        };\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_1\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_1\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_1\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_1\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_1\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_1\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_1\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_1\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_1\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_1\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_1\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_1\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_1\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_1\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_1\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_1\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_1\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_1\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_1\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_1\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_1\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_1\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "println(\"Doug\");"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_11\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_11\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_11\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_11\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_11\">\n",
       "  <b>Sketch #11:</b><br/>\n",
       "  <canvas id=\"canvas_11\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_11\">\n",
       "  <button id=\"run_button_11\" onclick=\"startSketch('11');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_11\" onclick=\"pauseSketch('11');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_11\" onclick=\"setupSketch('11');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_11\" onclick=\"drawSketch('11');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #11 state:</b> <span id=\"state_11\">Loading...</span><br/>\n",
       "<div id=\"output_11\"></div>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = 'size(500, 300);\\nfill(color(150, 5, 150));\\ntriangle(250, 100, 100, 200, 400, 200);\\nrect(150, 200, 200, 50);\\nfill(color(255, 5, 0));\\nellipse(50, 50, 50, 60);\\n';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "    // Temp, just for the code that runs immediately:\n",
       "    Processing.logger.println = function (message) {\n",
       "        //IPython.notebook.get_selected_cell()\n",
       "        var output = document.getElementById(\"output_11\");\n",
       "        if (output.innerText.match(/\\n/g) != null && output.innerText.match(/\\n/g).length > 50) {\n",
       "            output.innerText = \"\";\n",
       "        }\n",
       "        output.innerText += message + \"\\n\";\n",
       "    };\n",
       "    Processing.logger.print = function (message) {\n",
       "        var output = document.getElementById(\"output_11\");\n",
       "        if (output.innerText.match(/\\n/g) != null && output.innerText.match(/\\n/g).length > 50) {\n",
       "            output.innerText = \"\";\n",
       "        }\n",
       "        output.innerText += message;\n",
       "    };\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_11\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_11\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_11\", cc);\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_11\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_11\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_11\", cc);\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        processingInstance.println = function (message) {\n",
       "            var output = document.getElementById(\"output_11\");\n",
       "            if (output.innerText.match(/\\n/g) != null && output.innerText.match(/\\n/g).length > 50) {\n",
       "                output.innerText = \"\";\n",
       "            }\n",
       "            output.innerText += message + \"\\n\";\n",
       "        };\n",
       "        processingInstance.print = function (message) {\n",
       "            var output = document.getElementById(\"output_11\");\n",
       "            if (output.innerText.match(/\\n/g) != null && output.innerText.match(/\\n/g).length > 50) {\n",
       "                output.innerText = \"\";\n",
       "            }\n",
       "            output.innerText += message;\n",
       "        };\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_11\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_11\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_11\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_11\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_11\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_11\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_11\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_11\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_11\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_11\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_11\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_11\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_11\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_11\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_11\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_11\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_11\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_11\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_11\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_11\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_11\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_11\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "size(500, 300);\n",
    "fill(color(150, 5, 150));\n",
    "triangle(250, 100, 100, 200, 400, 200);\n",
    "rect(150, 200, 200, 50);\n",
    "fill(color(255, 5, 0));\n",
    "ellipse(50, 50, 50, 60);\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {
    "collapsed": false,
    "format": "row",
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_17\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_17\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_17\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_17\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_17\">\n",
       "  <b>Sketch #17:</b><br/>\n",
       "  <canvas id=\"canvas_17\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_17\">\n",
       "  <button id=\"run_button_17\" onclick=\"startSketch('17');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_17\" onclick=\"pauseSketch('17');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_17\" onclick=\"setupSketch('17');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_17\" onclick=\"drawSketch('17');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #17 state:</b> <span id=\"state_17\">Loading...</span><br/>\n",
       "<div id=\"output_17\"></div>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = 'void setup() {\\n    size(500, 300);\\n    fill(color(150, 5, 150));\\n    triangle(250, 100, 100, 200, 400, 200);\\n    rect(150, 200, 200, 50);\\n    fill(color(255, 5, 0));\\n    ellipse(50, 50, 50, 60);\\n}\\n\\nvoid drawCat(int x, int y) {\\n    ellipse(x + 0, y + 0, 20, 20);\\n    // the rest of the shapes around the origin\\n    rect(x + -10, y + 10, 20, 40);\\n}\\n\\nvoid mousePressed() {\\n    drawCat(mouseX, mouseY);\\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "    // Temp, just for the code that runs immediately:\n",
       "    Processing.logger.println = function (message) {\n",
       "        //IPython.notebook.get_selected_cell()\n",
       "        var output = document.getElementById(\"output_17\");\n",
       "        if (output.innerText.match(/\\n/g) != null && output.innerText.match(/\\n/g).length > 50) {\n",
       "            output.innerText = \"\";\n",
       "        }\n",
       "        output.innerText += message + \"\\n\";\n",
       "    };\n",
       "    Processing.logger.print = function (message) {\n",
       "        var output = document.getElementById(\"output_17\");\n",
       "        if (output.innerText.match(/\\n/g) != null && output.innerText.match(/\\n/g).length > 50) {\n",
       "            output.innerText = \"\";\n",
       "        }\n",
       "        output.innerText += message;\n",
       "    };\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_17\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_17\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_17\", cc);\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_17\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_17\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_17\", cc);\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        processingInstance.println = function (message) {\n",
       "            var output = document.getElementById(\"output_17\");\n",
       "            if (output.innerText.match(/\\n/g) != null && output.innerText.match(/\\n/g).length > 50) {\n",
       "                output.innerText = \"\";\n",
       "            }\n",
       "            output.innerText += message + \"\\n\";\n",
       "        };\n",
       "        processingInstance.print = function (message) {\n",
       "            var output = document.getElementById(\"output_17\");\n",
       "            if (output.innerText.match(/\\n/g) != null && output.innerText.match(/\\n/g).length > 50) {\n",
       "                output.innerText = \"\";\n",
       "            }\n",
       "            output.innerText += message;\n",
       "        };\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_17\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_17\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_17\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_17\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_17\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_17\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_17\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_17\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_17\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_17\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_17\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_17\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_17\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_17\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_17\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_17\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_17\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_17\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_17\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_17\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_17\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_17\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "void setup() {\n",
    "    size(500, 300);\n",
    "    fill(color(150, 5, 150));\n",
    "    triangle(250, 100, \n",
    "             100, 200, \n",
    "             400, 200);\n",
    "    rect(150, 200, 200, 50);\n",
    "    fill(color(255, 5, 0));\n",
    "    ellipse(50, 50, 50, 60);\n",
    "}\n",
    "\n",
    "void drawCat(int x, int y) {\n",
    "    ellipse(x + 0, y + 0, 20, 20);\n",
    "    rect(x + -10, y + 10, 20, 40);\n",
    "}\n",
    "\n",
    "void mousePressed() {\n",
    "    drawCat(mouseX, mouseY);\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Calysto Processing",
   "language": "java",
   "name": "calysto_processing"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "text/x-java",
    "version": 2
   },
   "file_extension": ".java",
   "mimetype": "text/x-java",
   "name": "java"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}