COMP1010_Week3_Exercise_v2.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Week 3**\n",
    "\n",
    "**Beware that this notebook will expire after 10 minutes of inactivity**\n",
    "\n",
    "**If it seems like the notebook isn't responding, try Kernel->Restart or Kernel->Reconnect**\n",
    "\n",
    "**Keep working and frequently save using the save button at the top (don't use Save as...)**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Work with **1** partner (not in threes and not by yourself!).\n",
    "\n",
    "Type your names here: (double-click in this cell to make it editable). This cell uses Markdown so you can make things **bold** or *italic*. When you are done editing this cell, click Run to see your formatting.\n",
    "\n",
    "    Student 1: \n",
    "    Student 2:\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 1 - Robot resizable!**\n",
    "\n",
    "Let's get started! In the block below is Dr. Celine's robot head from Week 2. Run this to see what the robot looks like. Change the canvas size() and run it again to make sure the robot resizes appropriately.  "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_19\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_19\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_19\");\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_19\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_19\">\n",
       "  <b>Sketch #19:</b><br/>\n",
       "  <canvas id=\"canvas_19\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_19\">\n",
       "  <button id=\"run_button_19\" onclick=\"startSketch('19');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_19\" onclick=\"pauseSketch('19');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_19\" onclick=\"setupSketch('19');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_19\" onclick=\"drawSketch('19');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #19 state:</b> <span id=\"state_19\">Loading...</span><br/>\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 = \"/** \\nDr. Celine's Robot Head\\n**/\\n// global vars\\nsize(500,500);\\nint headWidth = width*2/3;\\nint headHeight = height/3;\\nint headTop = (height - headHeight)/3;\\nint headLeft = (width - headWidth)/2;\\n\\nint leftEyeX = headLeft + headWidth/4;\\nint rightEyeX = headLeft + headWidth*3/4;\\nint eyeY = headTop + headHeight/3;\\nint eyeDiam = headWidth/5;\\nint eyeBallDiam = eyeDiam/2;\\n\\nint mouthLeft = leftEyeX;\\nint mouthRight = rightEyeX;\\nint mouthY = headTop + headHeight*3/4;\\n\\n\\nbackground(100, 100, 250);\\n\\n// draw head\\nfill(200, 200, 50);\\nrect(headLeft, headTop, headWidth, headHeight);\\n\\n// draw eyes\\nfill(255);\\nellipse(leftEyeX, eyeY, eyeDiam, eyeDiam); // left eye\\nellipse(rightEyeX, eyeY, eyeDiam, eyeDiam); // right eye\\n\\n// draw eyeballs\\nfill(0);\\nellipse(leftEyeX, eyeY, eyeBallDiam, eyeBallDiam); // left eye\\nellipse(rightEyeX, eyeY, eyeBallDiam, eyeBallDiam); // right eye\\n\\n\\n// draw mouth\\nstroke(200, 100, 100);\\nstrokeWeight(8);\\nline(mouthLeft, mouthY, mouthRight, mouthY);\";\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\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_19\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_19\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_19\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_19\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_19\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_19\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_19\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_19\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_19\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_19\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_19\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_19\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_19\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_19\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_19\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_19\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_19\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_19\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_19\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_19\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_19\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_19\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_19\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_19\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_19\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_19\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_19\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_19\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "/** \n",
    "Dr. Celine's Robot Head\n",
    "**/\n",
    "// global vars\n",
    "size(500,500);\n",
    "int headWidth = width*2/3;\n",
    "int headHeight = height/3;\n",
    "int headTop = (height - headHeight)/3;\n",
    "int headLeft = (width - headWidth)/2;\n",
    "\n",
    "int leftEyeX = headLeft + headWidth/4;\n",
    "int rightEyeX = headLeft + headWidth*3/4;\n",
    "int eyeY = headTop + headHeight/3;\n",
    "int eyeDiam = headWidth/5;\n",
    "int eyeBallDiam = eyeDiam/2;\n",
    "\n",
    "int mouthLeft = leftEyeX;\n",
    "int mouthRight = rightEyeX;\n",
    "int mouthY = headTop + headHeight*3/4;\n",
    "\n",
    "\n",
    "background(100, 100, 250);\n",
    "\n",
    "// draw head\n",
    "fill(200, 200, 50);\n",
    "rect(headLeft, headTop, headWidth, headHeight);\n",
    "\n",
    "// draw eyes\n",
    "fill(255);\n",
    "ellipse(leftEyeX, eyeY, eyeDiam, eyeDiam); // left eye\n",
    "ellipse(rightEyeX, eyeY, eyeDiam, eyeDiam); // right eye\n",
    "\n",
    "// draw eyeballs\n",
    "fill(0);\n",
    "ellipse(leftEyeX, eyeY, eyeBallDiam, eyeBallDiam); // left eye\n",
    "ellipse(rightEyeX, eyeY, eyeBallDiam, eyeBallDiam); // right eye\n",
    "\n",
    "\n",
    "// draw mouth\n",
    "stroke(200, 100, 100);\n",
    "strokeWeight(8);\n",
    "line(mouthLeft, mouthY, mouthRight, mouthY);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 2 - Turn this into an active Processing script**\n",
    "\n",
    "Turn this into an Active processing script by putting the size() command in a setup() function and the drawing functions in a draw() function. Note that you are going to have to put variable declarations as globals at the top, and then initialize all the variable values inside setup(). Once you have done this, run the program to make sure you still see the same robot. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_18\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_18\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_18\");\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_18\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_18\">\n",
       "  <b>Sketch #18:</b><br/>\n",
       "  <canvas id=\"canvas_18\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_18\">\n",
       "  <button id=\"run_button_18\" onclick=\"startSketch('18');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_18\" onclick=\"pauseSketch('18');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_18\" onclick=\"setupSketch('18');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_18\" onclick=\"drawSketch('18');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #18 state:</b> <span id=\"state_18\">Loading...</span><br/>\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 = '// global vars\\nsize(500,500);\\nint headWidth = width*2/3;\\nint headHeight = height/3;\\nint headTop = (height - headHeight)/3;\\nint headLeft = (width - headWidth)/2;\\n\\nint leftEyeX = headLeft + headWidth/4;\\nint rightEyeX = headLeft + headWidth*3/4;\\nint eyeY = headTop + headHeight/3;\\nint eyeDiam = headWidth/5;\\nint eyeBallDiam = eyeDiam/2;\\n\\nint mouthLeft = leftEyeX;\\nint mouthRight = rightEyeX;\\nint mouthY = headTop + headHeight*3/4;\\n\\n\\nbackground(100, 100, 250);\\n\\n// draw head\\nfill(200, 200, 50);\\nrect(headLeft, headTop, headWidth, headHeight);\\n\\n// draw eyes\\nfill(255);\\nellipse(leftEyeX, eyeY, eyeDiam, eyeDiam); // left eye\\nellipse(rightEyeX, eyeY, eyeDiam, eyeDiam); // right eye\\n\\n// draw eyeballs\\nfill(0);\\nellipse(leftEyeX, eyeY, eyeBallDiam, eyeBallDiam); // left eye\\nellipse(rightEyeX, eyeY, eyeBallDiam, eyeBallDiam); // right eye\\n\\n\\n// draw mouth\\nstroke(200, 100, 100);\\nstrokeWeight(8);\\nline(mouthLeft, mouthY, mouthRight, mouthY);';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\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_18\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_18\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_18\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_18\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_18\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_18\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_18\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_18\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_18\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_18\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_18\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_18\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_18\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_18\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_18\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_18\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_18\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_18\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_18\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_18\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_18\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_18\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_18\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_18\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_18\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_18\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_18\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_18\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "// global vars\n",
    "size(500,500);\n",
    "int headWidth = width*2/3;\n",
    "int headHeight = height/3;\n",
    "int headTop = (height - headHeight)/3;\n",
    "int headLeft = (width - headWidth)/2;\n",
    "\n",
    "int leftEyeX = headLeft + headWidth/4;\n",
    "int rightEyeX = headLeft + headWidth*3/4;\n",
    "int eyeY = headTop + headHeight/3;\n",
    "int eyeDiam = headWidth/5;\n",
    "int eyeBallDiam = eyeDiam/2;\n",
    "\n",
    "int mouthLeft = leftEyeX;\n",
    "int mouthRight = rightEyeX;\n",
    "int mouthY = headTop + headHeight*3/4;\n",
    "\n",
    "\n",
    "background(100, 100, 250);\n",
    "\n",
    "// draw head\n",
    "fill(200, 200, 50);\n",
    "rect(headLeft, headTop, headWidth, headHeight);\n",
    "\n",
    "// draw eyes\n",
    "fill(255);\n",
    "ellipse(leftEyeX, eyeY, eyeDiam, eyeDiam); // left eye\n",
    "ellipse(rightEyeX, eyeY, eyeDiam, eyeDiam); // right eye\n",
    "\n",
    "// draw eyeballs\n",
    "fill(0);\n",
    "ellipse(leftEyeX, eyeY, eyeBallDiam, eyeBallDiam); // left eye\n",
    "ellipse(rightEyeX, eyeY, eyeBallDiam, eyeBallDiam); // right eye\n",
    "\n",
    "\n",
    "// draw mouth\n",
    "stroke(200, 100, 100);\n",
    "strokeWeight(8);\n",
    "line(mouthLeft, mouthY, mouthRight, mouthY);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 3 - Add interaction**\n",
    "\n",
    "Make your script better by adding a moving circle that follows the mouse cursor, in front of the robot. Copy your code from above, and add the following two global int variables, flyWidth and flyHeight, both intialized to 20. In setup() initialize these both to 0. Also add flyX and flyY. In the setup() code initialize these to be at the center of the canvas (use width and height).\n",
    "\n",
    "In the draw() funtion, after the commands that draw the robot face, add the following code to draw a buzzing fly that moves randomly around the screen (we'll learn about max() and random() next week, which is why I'm giving you the code this week).\n",
    "\n",
    "    // draw fly\n",
    "    stroke(0);\n",
    "    strokeWeight(1);\n",
    "    fill(125);\n",
    "    flyX = max(0,(flyX + random(20)-10)%width);\n",
    "    flyY = max(0,(flyY + random(20)-10)%height);\n",
    "    ellipse(flyX, flyY, flyWidth, flyHeight);\n",
    "    \n",
    "    // fly eyes\n",
    "    fill(0);\n",
    "    stroke(255);\n",
    "    ellipse(flyX-flyWidth/3, flyY - flyHeight/2, 5, 5);\n",
    "    ellipse(flyX+flyWidth/3, flyY - flyHeight/2, 5, 5);\n",
    "    \n",
    "    // fly wings\n",
    "    fill(200);\n",
    "    noStroke();\n",
    "    ellipse(flyX-flyWidth/2, flyY, 10, 5);\n",
    "    ellipse(flyX+flyWidth/2, flyY, 10, 5);\n",
    "    \n",
    "Note that everything in this code is relative to the flyX and flyY variables.\n",
    "Run the code to see the fly buzzing around. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_20\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_20\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_20\");\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_20\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_20\">\n",
       "  <b>Sketch #20:</b><br/>\n",
       "  <canvas id=\"canvas_20\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_20\">\n",
       "  <button id=\"run_button_20\" onclick=\"startSketch('20');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_20\" onclick=\"pauseSketch('20');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_20\" onclick=\"setupSketch('20');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_20\" onclick=\"drawSketch('20');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #20 state:</b> <span id=\"state_20\">Loading...</span><br/>\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 = '// global vars\\n\\n\\nint headWidth;\\nint headHeight;\\nint headTop;\\nint headLeft;\\n\\nint leftEyeX;\\nint rightEyeX;\\nint eyeY;\\nint eyeDiam;\\nint eyeBallDiam;\\n\\nint mouthLeft;\\nint mouthRight;\\nint mouthY;\\n\\nint flyWidth;\\nint flyHeight;\\nint flyX;\\nint flyY;\\n\\nvoid setup() {\\nsize(500,500);\\n    headWidth = width*2/3;\\n    headHeight = height/3;\\n    headTop = (height - headHeight)/3;\\n    headLeft = (width - headWidth)/2;\\n\\n    leftEyeX = headLeft + headWidth/4;\\n    rightEyeX = headLeft + headWidth*3/4;\\n    eyeY = headTop + headHeight/3;\\n    eyeDiam = headWidth/5;\\n    eyeBallDiam = eyeDiam/2;\\n\\n    mouthLeft = leftEyeX;\\n    mouthRight = rightEyeX;\\n    mouthY = headTop + headHeight*3/4;\\n    \\n    flyWidth = 20;\\n    flyHeight = 10;\\n    flyX = width/2;\\n    flyY = height/2;\\n}\\n\\nvoid draw() {\\n    background(100, 100, 250);\\n\\n    // draw head\\n    fill(200, 200, 50);\\n    rect(headLeft, headTop, headWidth, headHeight);\\n\\n    // draw eyes\\n    fill(255);\\n    ellipse(leftEyeX, eyeY, eyeDiam, eyeDiam); // left eye\\n    ellipse(rightEyeX, eyeY, eyeDiam, eyeDiam); // right eye\\n\\n    // draw eyeballs\\n    fill(0);\\n    ellipse(leftEyeX, eyeY, eyeBallDiam, eyeBallDiam); // left eye\\n    ellipse(rightEyeX, eyeY, eyeBallDiam, eyeBallDiam); // right eye\\n\\n\\n    // draw mouth\\n    stroke(200, 100, 100);\\n    strokeWeight(8);\\n    line(mouthLeft, mouthY, mouthRight, mouthY);\\n\\n    // draw fly\\n    stroke(0);\\n    strokeWeight(1);\\n    fill(125);\\n    flyX = max(0,(flyX + random(20)-10)%width);\\n    flyY = max(0,(flyY + random(20)-10)%height);\\n    ellipse(flyX, flyY, flyWidth, flyHeight);\\n    // fly eyes\\n    fill(0);\\n    stroke(255);\\n    ellipse(flyX-flyWidth/3, flyY - flyHeight/2, 5, 5);\\n    ellipse(flyX+flyWidth/3, flyY - flyHeight/2, 5, 5);\\n    // fly wings\\n    fill(200);\\n    noStroke();\\n    ellipse(flyX-flyWidth/2, flyY, 10, 5);\\n    ellipse(flyX+flyWidth/2, flyY, 10, 5);\\n    \\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\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_20\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_20\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_20\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_20\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_20\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_20\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_20\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_20\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_20\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_20\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_20\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_20\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_20\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_20\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_20\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_20\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_20\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_20\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_20\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_20\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_20\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_20\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_20\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_20\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_20\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_20\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_20\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_20\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "// global vars\n",
    "\n",
    "\n",
    "int headWidth;\n",
    "int headHeight;\n",
    "int headTop;\n",
    "int headLeft;\n",
    "\n",
    "int leftEyeX;\n",
    "int rightEyeX;\n",
    "int eyeY;\n",
    "int eyeDiam;\n",
    "int eyeBallDiam;\n",
    "\n",
    "int mouthLeft;\n",
    "int mouthRight;\n",
    "int mouthY;\n",
    "\n",
    "int flyWidth;\n",
    "int flyHeight;\n",
    "int flyX;\n",
    "int flyY;\n",
    "\n",
    "void setup() {\n",
    "size(500,500);\n",
    "    headWidth = width*2/3;\n",
    "    headHeight = height/3;\n",
    "    headTop = (height - headHeight)/3;\n",
    "    headLeft = (width - headWidth)/2;\n",
    "\n",
    "    leftEyeX = headLeft + headWidth/4;\n",
    "    rightEyeX = headLeft + headWidth*3/4;\n",
    "    eyeY = headTop + headHeight/3;\n",
    "    eyeDiam = headWidth/5;\n",
    "    eyeBallDiam = eyeDiam/2;\n",
    "\n",
    "    mouthLeft = leftEyeX;\n",
    "    mouthRight = rightEyeX;\n",
    "    mouthY = headTop + headHeight*3/4;\n",
    "    \n",
    "    flyWidth = 20;\n",
    "    flyHeight = 10;\n",
    "    flyX = width/2;\n",
    "    flyY = height/2;\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    background(100, 100, 250);\n",
    "\n",
    "    // draw head\n",
    "    fill(200, 200, 50);\n",
    "    rect(headLeft, headTop, headWidth, headHeight);\n",
    "\n",
    "    // draw eyes\n",
    "    fill(255);\n",
    "    ellipse(leftEyeX, eyeY, eyeDiam, eyeDiam); // left eye\n",
    "    ellipse(rightEyeX, eyeY, eyeDiam, eyeDiam); // right eye\n",
    "\n",
    "    // draw eyeballs\n",
    "    fill(0);\n",
    "    ellipse(leftEyeX, eyeY, eyeBallDiam, eyeBallDiam); // left eye\n",
    "    ellipse(rightEyeX, eyeY, eyeBallDiam, eyeBallDiam); // right eye\n",
    "\n",
    "\n",
    "    // draw mouth\n",
    "    stroke(200, 100, 100);\n",
    "    strokeWeight(8);\n",
    "    line(mouthLeft, mouthY, mouthRight, mouthY);\n",
    "\n",
    "    // draw fly\n",
    "    stroke(0);\n",
    "    strokeWeight(1);\n",
    "    fill(125);\n",
    "    flyX = max(0,(flyX + random(20)-10)%width);\n",
    "    flyY = max(0,(flyY + random(20)-10)%height);\n",
    "    ellipse(flyX, flyY, flyWidth, flyHeight);\n",
    "    // fly eyes\n",
    "    fill(0);\n",
    "    stroke(255);\n",
    "    ellipse(flyX-flyWidth/3, flyY - flyHeight/2, 5, 5);\n",
    "    ellipse(flyX+flyWidth/3, flyY - flyHeight/2, 5, 5);\n",
    "    // fly wings\n",
    "    fill(200);\n",
    "    noStroke();\n",
    "    ellipse(flyX-flyWidth/2, flyY, 10, 5);\n",
    "    ellipse(flyX+flyWidth/2, flyY, 10, 5);\n",
    "    \n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 4 - Put fly in a function!**\n",
    "\n",
    "**SWITCH WHO IS CONTROLLING THE KEYBOARD - GIVE THE COMPUTER TO YOUR PARTNER**\n",
    "\n",
    "Copy the code from above into the cell below. Create a function called robotFace(). This function returns nothing and takes no parameters. Put it below the draw function,  and move the code that draws the robot into this function. Then create a function called drawFly() and move the code that draws the fly into that function. Finally, call the drawRobot and drawFly function from inside draw().\n",
    "\n",
    "Run your code to make sure it still works."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_21\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_21\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_21\");\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_21\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_21\">\n",
       "  <b>Sketch #21:</b><br/>\n",
       "  <canvas id=\"canvas_21\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_21\">\n",
       "  <button id=\"run_button_21\" onclick=\"startSketch('21');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_21\" onclick=\"pauseSketch('21');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_21\" onclick=\"setupSketch('21');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_21\" onclick=\"drawSketch('21');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #21 state:</b> <span id=\"state_21\">Loading...</span><br/>\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 = '// copy code from above to this cell.\\n// Then put the fly drawing code in a function called drawFly()\\n// and the robot drawing stuff into a function called drawRobot()\\n// global vars\\n\\n\\nint headWidth;\\nint headHeight;\\nint headTop;\\nint headLeft;\\n\\nint leftEyeX;\\nint rightEyeX;\\nint eyeY;\\nint eyeDiam;\\nint eyeBallDiam;\\n\\nint mouthLeft;\\nint mouthRight;\\nint mouthY;\\n\\nint flyWidth;\\nint flyHeight;\\nint flyX;\\nint flyY;\\n\\nvoid setup() {\\nsize(500,500);\\n    headWidth = width*2/3;\\n    headHeight = height/3;\\n    headTop = (height - headHeight)/3;\\n    headLeft = (width - headWidth)/2;\\n\\n    leftEyeX = headLeft + headWidth/4;\\n    rightEyeX = headLeft + headWidth*3/4;\\n    eyeY = headTop + headHeight/3;\\n    eyeDiam = headWidth/5;\\n    eyeBallDiam = eyeDiam/2;\\n\\n    mouthLeft = leftEyeX;\\n    mouthRight = rightEyeX;\\n    mouthY = headTop + headHeight*3/4;\\n    \\n    flyWidth = 20;\\n    flyHeight = 10;\\n    flyX = width/2;\\n    flyY = height/2;\\n}\\n\\nvoid draw() {\\n    background(100, 100, 250);\\n    drawRobot();\\n    drawFly();\\n}\\n\\nvoid drawRobot() {\\n    // draw head\\n    fill(200, 200, 50);\\n    rect(headLeft, headTop, headWidth, headHeight);\\n\\n    // draw eyes\\n    fill(255);\\n    ellipse(leftEyeX, eyeY, eyeDiam, eyeDiam); // left eye\\n    ellipse(rightEyeX, eyeY, eyeDiam, eyeDiam); // right eye\\n\\n    // draw eyeballs\\n    fill(0);\\n    ellipse(leftEyeX, eyeY, eyeBallDiam, eyeBallDiam); // left eye\\n    ellipse(rightEyeX, eyeY, eyeBallDiam, eyeBallDiam); // right eye\\n\\n\\n    // draw mouth\\n    stroke(200, 100, 100);\\n    strokeWeight(8);\\n    line(mouthLeft, mouthY, mouthRight, mouthY);\\n}\\n\\nvoid drawFly() {\\n    // draw fly\\n    stroke(0);\\n    strokeWeight(1);\\n    fill(125);\\n    flyX = max(0,(flyX + random(20)-10)%width);\\n    flyY = max(0,(flyY + random(20)-10)%height);\\n    ellipse(flyX, flyY, flyWidth, flyHeight);\\n    // fly eyes\\n    fill(0);\\n    stroke(255);\\n    ellipse(flyX-flyWidth/3, flyY - flyHeight/2, 5, 5);\\n    ellipse(flyX+flyWidth/3, flyY - flyHeight/2, 5, 5);\\n    // fly wings\\n    fill(200);\\n    noStroke();\\n    ellipse(flyX-flyWidth/2, flyY, 10, 5);\\n    ellipse(flyX+flyWidth/2, flyY, 10, 5);\\n    \\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\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_21\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_21\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_21\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_21\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_21\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_21\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_21\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_21\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_21\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_21\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_21\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_21\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_21\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_21\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_21\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_21\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_21\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_21\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_21\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_21\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_21\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_21\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_21\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_21\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_21\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_21\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_21\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_21\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "// copy code from above to this cell.\n",
    "// Then put the fly drawing code in a function called drawFly()\n",
    "// and the robot drawing stuff into a function called drawRobot()\n",
    "// global vars\n",
    "\n",
    "\n",
    "int headWidth;\n",
    "int headHeight;\n",
    "int headTop;\n",
    "int headLeft;\n",
    "\n",
    "int leftEyeX;\n",
    "int rightEyeX;\n",
    "int eyeY;\n",
    "int eyeDiam;\n",
    "int eyeBallDiam;\n",
    "\n",
    "int mouthLeft;\n",
    "int mouthRight;\n",
    "int mouthY;\n",
    "\n",
    "int flyWidth;\n",
    "int flyHeight;\n",
    "int flyX;\n",
    "int flyY;\n",
    "\n",
    "void setup() {\n",
    "size(500,500);\n",
    "    headWidth = width*2/3;\n",
    "    headHeight = height/3;\n",
    "    headTop = (height - headHeight)/3;\n",
    "    headLeft = (width - headWidth)/2;\n",
    "\n",
    "    leftEyeX = headLeft + headWidth/4;\n",
    "    rightEyeX = headLeft + headWidth*3/4;\n",
    "    eyeY = headTop + headHeight/3;\n",
    "    eyeDiam = headWidth/5;\n",
    "    eyeBallDiam = eyeDiam/2;\n",
    "\n",
    "    mouthLeft = leftEyeX;\n",
    "    mouthRight = rightEyeX;\n",
    "    mouthY = headTop + headHeight*3/4;\n",
    "    \n",
    "    flyWidth = 20;\n",
    "    flyHeight = 10;\n",
    "    flyX = width/2;\n",
    "    flyY = height/2;\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    background(100, 100, 250);\n",
    "    drawRobot();\n",
    "    drawFly();\n",
    "}\n",
    "\n",
    "void drawRobot() {\n",
    "    // draw head\n",
    "    fill(200, 200, 50);\n",
    "    rect(headLeft, headTop, headWidth, headHeight);\n",
    "\n",
    "    // draw eyes\n",
    "    fill(255);\n",
    "    ellipse(leftEyeX, eyeY, eyeDiam, eyeDiam); // left eye\n",
    "    ellipse(rightEyeX, eyeY, eyeDiam, eyeDiam); // right eye\n",
    "\n",
    "    // draw eyeballs\n",
    "    fill(0);\n",
    "    ellipse(leftEyeX, eyeY, eyeBallDiam, eyeBallDiam); // left eye\n",
    "    ellipse(rightEyeX, eyeY, eyeBallDiam, eyeBallDiam); // right eye\n",
    "\n",
    "\n",
    "    // draw mouth\n",
    "    stroke(200, 100, 100);\n",
    "    strokeWeight(8);\n",
    "    line(mouthLeft, mouthY, mouthRight, mouthY);\n",
    "}\n",
    "\n",
    "void drawFly() {\n",
    "    // draw fly\n",
    "    stroke(0);\n",
    "    strokeWeight(1);\n",
    "    fill(125);\n",
    "    flyX = max(0,(flyX + random(20)-10)%width);\n",
    "    flyY = max(0,(flyY + random(20)-10)%height);\n",
    "    ellipse(flyX, flyY, flyWidth, flyHeight);\n",
    "    // fly eyes\n",
    "    fill(0);\n",
    "    stroke(255);\n",
    "    ellipse(flyX-flyWidth/3, flyY - flyHeight/2, 5, 5);\n",
    "    ellipse(flyX+flyWidth/3, flyY - flyHeight/2, 5, 5);\n",
    "    // fly wings\n",
    "    fill(200);\n",
    "    noStroke();\n",
    "    ellipse(flyX-flyWidth/2, flyY, 10, 5);\n",
    "    ellipse(flyX+flyWidth/2, flyY, 10, 5);\n",
    "    \n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 5 - Make the eyes follow the fly!**\n",
    "\n",
    "We want to have the robot's eyeballs move towards wherever the fly is. \n",
    "\n",
    "**5a** For each eyeball, we need to separate out the x and y (right now the eyes and the eyeballs are both controlled by the three variables leftEyeX, rightEyeX and eyeY.) Create four more global variables called leftEBX, leftEBY, rightEBX, rightEBY. In the setup function, set these equal to the same values they were before (assigning from leftEyeX, rightEyeX and eyeY).\n",
    "\n",
    "**5b** In the ellipse commands that draw the eyeballs, make use of the four new variables for the eyeball positions. Run the robot code to make sure that the eyeballs are still centered (we make them move in the next step).\n",
    "\n",
    "**5c** "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "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",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\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",
       "<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 = '// copy code from above to this cell\\n// add new vars for the position of the eyeBalls\\n\\n// copy code from above to this cell.\\n// Then put the fly drawing code in a function called drawFly()\\n// and the robot drawing stuff into a function called drawRobot()\\n// global vars\\n\\n\\nint headWidth;\\nint headHeight;\\nint headTop;\\nint headLeft;\\n\\nint leftEyeX;\\nint rightEyeX;\\nint eyeY;\\nint eyeDiam;\\nint eyeBallDiam;\\nint leftEBX, leftEBY;\\nint rightEBX, rightEBY;\\n\\nint mouthLeft;\\nint mouthRight;\\nint mouthY;\\n\\nint flyWidth;\\nint flyHeight;\\nint flyX;\\nint flyY;\\n\\nvoid setup() {\\n    size(500,500);\\n    headWidth = width*2/3;\\n    headHeight = height/3;\\n    headTop = (height - headHeight)/3;\\n    headLeft = (width - headWidth)/2;\\n\\n    leftEyeX = headLeft + headWidth/4;\\n    rightEyeX = headLeft + headWidth*3/4;\\n    eyeY = headTop + headHeight/3;\\n    eyeDiam = headWidth/5;\\n    eyeBallDiam = eyeDiam/2;\\n    leftEBX = leftEyeX;\\n    rightEBX = rightEyeX;\\n    leftEBY = eyeY;\\n    rightEBY = eyeY;\\n\\n    mouthLeft = leftEyeX;\\n    mouthRight = rightEyeX;\\n    mouthY = headTop + headHeight*3/4;\\n    \\n    flyWidth = 20;\\n    flyHeight = 10;\\n    flyX = width/2;\\n    flyY = height/2;\\n}\\n\\nvoid draw() {\\n    background(100, 100, 250);\\n    drawRobot();\\n    drawFly();\\n}\\n\\nvoid drawRobot() {\\n    // draw head\\n    fill(200, 200, 50);\\n    rect(headLeft, headTop, headWidth, headHeight);\\n\\n    // draw eyes\\n    fill(255);\\n    ellipse(leftEyeX, eyeY, eyeDiam, eyeDiam); // left eye\\n    ellipse(rightEyeX, eyeY, eyeDiam, eyeDiam); // right eye\\n\\n    // draw eyeballs\\n    int lXdiff = flyX - leftEBX;\\n    int lYdiff = flyY - leftEBY;\\n    int rXdiff = flyX - rightEBX;\\n    int rYdiff = flyY - rightEBY;\\n    leftEBX = (leftEyeX + lXdiff/10);\\n    leftEBY = (eyeY + lYdiff/10);\\n    rightEBX = (rightEyeX + rXdiff/10);\\n    rightEBY = (eyeY + rYdiff/10);\\n    fill(0);\\n    ellipse(leftEBX, leftEBY, eyeBallDiam, eyeBallDiam); // left eye\\n    ellipse(rightEBX, rightEBY, eyeBallDiam, eyeBallDiam); // right eye\\n\\n\\n    // draw mouth\\n    stroke(200, 100, 100);\\n    strokeWeight(8);\\n    line(mouthLeft, mouthY, mouthRight, mouthY);\\n}\\n\\nvoid drawFly() {\\n    // draw fly\\n    stroke(0);\\n    strokeWeight(1);\\n    fill(125);\\n    flyX = max(0,(flyX + random(20)-10)%width);\\n    flyY = max(0,(flyY + random(20)-10)%height);\\n    ellipse(flyX, flyY, flyWidth, flyHeight);\\n    // fly eyes\\n    fill(0);\\n    stroke(255);\\n    ellipse(flyX-flyWidth/3, flyY - flyHeight/2, 5, 5);\\n    ellipse(flyX+flyWidth/3, flyY - flyHeight/2, 5, 5);\\n    // fly wings\\n    fill(200);\\n    noStroke();\\n    ellipse(flyX-flyWidth/2, flyY, 10, 5);\\n    ellipse(flyX+flyWidth/2, flyY, 10, 5);\\n    \\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\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",
       "            processingInstance.println = window.jyp_println\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",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\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": [
    "// copy code from above to this cell\n",
    "// add new vars for the position of the eyeBalls\n",
    "\n",
    "// copy code from above to this cell.\n",
    "// Then put the fly drawing code in a function called drawFly()\n",
    "// and the robot drawing stuff into a function called drawRobot()\n",
    "// global vars\n",
    "\n",
    "\n",
    "int headWidth;\n",
    "int headHeight;\n",
    "int headTop;\n",
    "int headLeft;\n",
    "\n",
    "int leftEyeX;\n",
    "int rightEyeX;\n",
    "int eyeY;\n",
    "int eyeDiam;\n",
    "int eyeBallDiam;\n",
    "int leftEBX, leftEBY;\n",
    "int rightEBX, rightEBY;\n",
    "\n",
    "int mouthLeft;\n",
    "int mouthRight;\n",
    "int mouthY;\n",
    "\n",
    "int flyWidth;\n",
    "int flyHeight;\n",
    "int flyX;\n",
    "int flyY;\n",
    "\n",
    "void setup() {\n",
    "    size(500,500);\n",
    "    headWidth = width*2/3;\n",
    "    headHeight = height/3;\n",
    "    headTop = (height - headHeight)/3;\n",
    "    headLeft = (width - headWidth)/2;\n",
    "\n",
    "    leftEyeX = headLeft + headWidth/4;\n",
    "    rightEyeX = headLeft + headWidth*3/4;\n",
    "    eyeY = headTop + headHeight/3;\n",
    "    eyeDiam = headWidth/5;\n",
    "    eyeBallDiam = eyeDiam/2;\n",
    "    leftEBX = leftEyeX;\n",
    "    rightEBX = rightEyeX;\n",
    "    leftEBY = eyeY;\n",
    "    rightEBY = eyeY;\n",
    "\n",
    "    mouthLeft = leftEyeX;\n",
    "    mouthRight = rightEyeX;\n",
    "    mouthY = headTop + headHeight*3/4;\n",
    "    \n",
    "    flyWidth = 20;\n",
    "    flyHeight = 10;\n",
    "    flyX = width/2;\n",
    "    flyY = height/2;\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    background(100, 100, 250);\n",
    "    drawRobot();\n",
    "    drawFly();\n",
    "}\n",
    "\n",
    "void drawRobot() {\n",
    "    // draw head\n",
    "    fill(200, 200, 50);\n",
    "    rect(headLeft, headTop, headWidth, headHeight);\n",
    "\n",
    "    // draw eyes\n",
    "    fill(255);\n",
    "    ellipse(leftEyeX, eyeY, eyeDiam, eyeDiam); // left eye\n",
    "    ellipse(rightEyeX, eyeY, eyeDiam, eyeDiam); // right eye\n",
    "\n",
    "    // draw eyeballs\n",
    "    int lXdiff = flyX - leftEBX;\n",
    "    int lYdiff = flyY - leftEBY;\n",
    "    int rXdiff = flyX - rightEBX;\n",
    "    int rYdiff = flyY - rightEBY;\n",
    "    leftEBX = (leftEyeX + lXdiff/10);\n",
    "    leftEBY = (eyeY + lYdiff/10);\n",
    "    rightEBX = (rightEyeX + rXdiff/10);\n",
    "    rightEBY = (eyeY + rYdiff/10);\n",
    "    fill(0);\n",
    "    ellipse(leftEBX, leftEBY, eyeBallDiam, eyeBallDiam); // left eye\n",
    "    ellipse(rightEBX, rightEBY, eyeBallDiam, eyeBallDiam); // right eye\n",
    "\n",
    "\n",
    "    // draw mouth\n",
    "    stroke(200, 100, 100);\n",
    "    strokeWeight(8);\n",
    "    line(mouthLeft, mouthY, mouthRight, mouthY);\n",
    "}\n",
    "\n",
    "void drawFly() {\n",
    "    // draw fly\n",
    "    stroke(0);\n",
    "    strokeWeight(1);\n",
    "    fill(125);\n",
    "    flyX = max(0,(flyX + random(20)-10)%width);\n",
    "    flyY = max(0,(flyY + random(20)-10)%height);\n",
    "    ellipse(flyX, flyY, flyWidth, flyHeight);\n",
    "    // fly eyes\n",
    "    fill(0);\n",
    "    stroke(255);\n",
    "    ellipse(flyX-flyWidth/3, flyY - flyHeight/2, 5, 5);\n",
    "    ellipse(flyX+flyWidth/3, flyY - flyHeight/2, 5, 5);\n",
    "    // fly wings\n",
    "    fill(200);\n",
    "    noStroke();\n",
    "    ellipse(flyX-flyWidth/2, flyY, 10, 5);\n",
    "    ellipse(flyX+flyWidth/2, flyY, 10, 5);\n",
    "    \n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 6 - CHANGE COLORS OVER TIME**\n",
    "\n",
    "Copy the code above into the cell below. \n",
    "Add a global variable for the amount of blue, called blueVal.\n",
    "In setup() initialize this to 0.\n",
    "In draw(), use blueVal in the background, instead of the 250 that is there now.\n",
    "\n",
    "Now, we want to add a tiny bit of blue, really slowly. We could add one to blueVal, everytime we run draw, by adding something like blueVal = blueVal + 1; above the background() command. Try this and see what happens. \n",
    "\n",
    "After awhile, the background doesn't get any more blue. Use the mod operator to cycle the blueVal continuously between 0 and 255 (the max value that makes any sense)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_16\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_16\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_16\");\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_16\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_16\">\n",
       "  <b>Sketch #16:</b><br/>\n",
       "  <canvas id=\"canvas_16\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_16\">\n",
       "  <button id=\"run_button_16\" onclick=\"startSketch('16');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_16\" onclick=\"pauseSketch('16');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_16\" onclick=\"setupSketch('16');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_16\" onclick=\"drawSketch('16');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #16 state:</b> <span id=\"state_16\">Loading...</span><br/>\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 = '//copy code from above and then add and then play with a slowly changing background color\\nint headWidth;\\nint headHeight;\\nint headTop;\\nint headLeft;\\n\\nint leftEyeX;\\nint rightEyeX;\\nint eyeY;\\nint eyeDiam;\\nint eyeBallDiam;\\nint leftEBX, leftEBY;\\nint rightEBX, rightEBY;\\n\\nint mouthLeft;\\nint mouthRight;\\nint mouthY;\\n\\nint flyWidth;\\nint flyHeight;\\nint flyX;\\nint flyY;\\n\\nint blueVal;\\n\\nvoid setup() {\\n    size(500,500);\\n    headWidth = width*2/3;\\n    headHeight = height/3;\\n    headTop = (height - headHeight)/3;\\n    headLeft = (width - headWidth)/2;\\n\\n    leftEyeX = headLeft + headWidth/4;\\n    rightEyeX = headLeft + headWidth*3/4;\\n    eyeY = headTop + headHeight/3;\\n    eyeDiam = headWidth/5;\\n    eyeBallDiam = eyeDiam/2;\\n    leftEBX = leftEyeX;\\n    rightEBX = rightEyeX;\\n    leftEBY = eyeY;\\n    rightEBY = eyeY;\\n\\n    mouthLeft = leftEyeX;\\n    mouthRight = rightEyeX;\\n    mouthY = headTop + headHeight*3/4;\\n    \\n    flyWidth = 20;\\n    flyHeight = 10;\\n    flyX = width/2;\\n    flyY = height/2;\\n    \\n    blueVal = 0;\\n}\\n\\nvoid draw() {\\n    blueVal = (blueVal + 1)%256;\\n    background(100, 100, blueVal);\\n    drawRobot();\\n    drawFly();\\n}\\n\\nvoid drawRobot() {\\n    // draw head\\n    fill(200, 200, 50);\\n    rect(headLeft, headTop, headWidth, headHeight);\\n\\n    // draw eyes\\n    fill(255);\\n    ellipse(leftEyeX, eyeY, eyeDiam, eyeDiam); // left eye\\n    ellipse(rightEyeX, eyeY, eyeDiam, eyeDiam); // right eye\\n\\n    // draw eyeballs\\n    int lXdiff = flyX - leftEBX;\\n    int lYdiff = flyY - leftEBY;\\n    int rXdiff = flyX - rightEBX;\\n    int rYdiff = flyY - rightEBY;\\n    leftEBX = (leftEyeX + lXdiff/10);\\n    leftEBY = (eyeY + lYdiff/10);\\n    rightEBX = (rightEyeX + rXdiff/10);\\n    rightEBY = (eyeY + rYdiff/10);\\n    fill(0);\\n    ellipse(leftEBX, leftEBY, eyeBallDiam, eyeBallDiam); // left eye\\n    ellipse(rightEBX, rightEBY, eyeBallDiam, eyeBallDiam); // right eye\\n\\n\\n    // draw mouth\\n    stroke(200, 100, 100);\\n    strokeWeight(8);\\n    line(mouthLeft, mouthY, mouthRight, mouthY);\\n}\\n\\nvoid drawFly() {\\n    // draw fly\\n    stroke(0);\\n    strokeWeight(1);\\n    fill(125);\\n    flyX = max(0,(flyX + random(20)-10)%width);\\n    flyY = max(0,(flyY + random(20)-10)%height);\\n    ellipse(flyX, flyY, flyWidth, flyHeight);\\n    // fly eyes\\n    fill(0);\\n    stroke(255);\\n    ellipse(flyX-flyWidth/3, flyY - flyHeight/2, 5, 5);\\n    ellipse(flyX+flyWidth/3, flyY - flyHeight/2, 5, 5);\\n    // fly wings\\n    fill(200);\\n    noStroke();\\n    ellipse(flyX-flyWidth/2, flyY, 10, 5);\\n    ellipse(flyX+flyWidth/2, flyY, 10, 5);\\n    \\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\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_16\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_16\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_16\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_16\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_16\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_16\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_16\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_16\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_16\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_16\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_16\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_16\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_16\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_16\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_16\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_16\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_16\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_16\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_16\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_16\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_16\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_16\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_16\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_16\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_16\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_16\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_16\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_16\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "//copy code from above and then add and then play with a slowly changing background color\n",
    "int headWidth;\n",
    "int headHeight;\n",
    "int headTop;\n",
    "int headLeft;\n",
    "\n",
    "int leftEyeX;\n",
    "int rightEyeX;\n",
    "int eyeY;\n",
    "int eyeDiam;\n",
    "int eyeBallDiam;\n",
    "int leftEBX, leftEBY;\n",
    "int rightEBX, rightEBY;\n",
    "\n",
    "int mouthLeft;\n",
    "int mouthRight;\n",
    "int mouthY;\n",
    "\n",
    "int flyWidth;\n",
    "int flyHeight;\n",
    "int flyX;\n",
    "int flyY;\n",
    "\n",
    "int blueVal;\n",
    "\n",
    "void setup() {\n",
    "    size(500,500);\n",
    "    headWidth = width*2/3;\n",
    "    headHeight = height/3;\n",
    "    headTop = (height - headHeight)/3;\n",
    "    headLeft = (width - headWidth)/2;\n",
    "\n",
    "    leftEyeX = headLeft + headWidth/4;\n",
    "    rightEyeX = headLeft + headWidth*3/4;\n",
    "    eyeY = headTop + headHeight/3;\n",
    "    eyeDiam = headWidth/5;\n",
    "    eyeBallDiam = eyeDiam/2;\n",
    "    leftEBX = leftEyeX;\n",
    "    rightEBX = rightEyeX;\n",
    "    leftEBY = eyeY;\n",
    "    rightEBY = eyeY;\n",
    "\n",
    "    mouthLeft = leftEyeX;\n",
    "    mouthRight = rightEyeX;\n",
    "    mouthY = headTop + headHeight*3/4;\n",
    "    \n",
    "    flyWidth = 20;\n",
    "    flyHeight = 10;\n",
    "    flyX = width/2;\n",
    "    flyY = height/2;\n",
    "    \n",
    "    blueVal = 0;\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    blueVal = (blueVal + 1)%256;\n",
    "    background(100, 100, blueVal);\n",
    "    drawRobot();\n",
    "    drawFly();\n",
    "}\n",
    "\n",
    "void drawRobot() {\n",
    "    // draw head\n",
    "    fill(200, 200, 50);\n",
    "    rect(headLeft, headTop, headWidth, headHeight);\n",
    "\n",
    "    // draw eyes\n",
    "    fill(255);\n",
    "    ellipse(leftEyeX, eyeY, eyeDiam, eyeDiam); // left eye\n",
    "    ellipse(rightEyeX, eyeY, eyeDiam, eyeDiam); // right eye\n",
    "\n",
    "    // draw eyeballs\n",
    "    int lXdiff = flyX - leftEBX;\n",
    "    int lYdiff = flyY - leftEBY;\n",
    "    int rXdiff = flyX - rightEBX;\n",
    "    int rYdiff = flyY - rightEBY;\n",
    "    leftEBX = (leftEyeX + lXdiff/10);\n",
    "    leftEBY = (eyeY + lYdiff/10);\n",
    "    rightEBX = (rightEyeX + rXdiff/10);\n",
    "    rightEBY = (eyeY + rYdiff/10);\n",
    "    fill(0);\n",
    "    ellipse(leftEBX, leftEBY, eyeBallDiam, eyeBallDiam); // left eye\n",
    "    ellipse(rightEBX, rightEBY, eyeBallDiam, eyeBallDiam); // right eye\n",
    "\n",
    "\n",
    "    // draw mouth\n",
    "    stroke(200, 100, 100);\n",
    "    strokeWeight(8);\n",
    "    line(mouthLeft, mouthY, mouthRight, mouthY);\n",
    "}\n",
    "\n",
    "void drawFly() {\n",
    "    // draw fly\n",
    "    stroke(0);\n",
    "    strokeWeight(1);\n",
    "    fill(125);\n",
    "    flyX = max(0,(flyX + random(20)-10)%width);\n",
    "    flyY = max(0,(flyY + random(20)-10)%height);\n",
    "    ellipse(flyX, flyY, flyWidth, flyHeight);\n",
    "    // fly eyes\n",
    "    fill(0);\n",
    "    stroke(255);\n",
    "    ellipse(flyX-flyWidth/3, flyY - flyHeight/2, 5, 5);\n",
    "    ellipse(flyX+flyWidth/3, flyY - flyHeight/2, 5, 5);\n",
    "    // fly wings\n",
    "    fill(200);\n",
    "    noStroke();\n",
    "    ellipse(flyX-flyWidth/2, flyY, 10, 5);\n",
    "    ellipse(flyX+flyWidth/2, flyY, 10, 5);\n",
    "    \n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 7 - ADD USER INTERAXCTION**\n",
    "\n",
    "**SWITCH WHO IS CONTROLLING THE KEYBOARD - GIVE THE COMPUTER TO YOUR PARTNER**\n",
    "\n",
    "Let's move the whole robot head towards the user's cursors. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 32,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_32\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_32\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_32\");\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_32\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_32\">\n",
       "  <b>Sketch #32:</b><br/>\n",
       "  <canvas id=\"canvas_32\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_32\">\n",
       "  <button id=\"run_button_32\" onclick=\"startSketch('32');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_32\" onclick=\"pauseSketch('32');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_32\" onclick=\"setupSketch('32');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_32\" onclick=\"drawSketch('32');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #32 state:</b> <span id=\"state_32\">Loading...</span><br/>\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 = '//copy code from above and then edit it so the robot head moves to follow your cursor, \\n// while the eyes keep following the fly\\n\\n//copy code from above and then add and then play with a slowly changing background color\\nint headWidth;\\nint headHeight;\\nint headTop;\\nint headLeft;\\n\\nint leftEyeX;\\nint rightEyeX;\\nint eyeY;\\nint eyeDiam;\\nint eyeBallDiam;\\nint leftEBX, leftEBY;\\nint rightEBX, rightEBY;\\n\\nint mouthLeft;\\nint mouthRight;\\nint mouthY;\\n\\nint flyWidth;\\nint flyHeight;\\nint flyX;\\nint flyY;\\n\\nint blueVal;\\n\\nvoid setup() {\\n    size(500,500);\\n    headWidth = width*2/3;\\n    headHeight = height/3;\\n    headTop = (height - headHeight)/3;\\n    headLeft = (width - headWidth)/2;\\n\\n\\n    \\n    flyWidth = 20;\\n    flyHeight = 10;\\n    flyX = width/2;\\n    flyY = height/2;\\n    \\n    blueVal = 0;\\n}\\n\\nvoid draw() {\\n    blueVal = (blueVal + 1)%256;\\n    background(100, 100, blueVal);\\n    drawRobot();\\n    drawFly();\\n}\\n\\nvoid drawRobot() {\\n    //int hXdiff = headLeft - mouseX;\\n    //int hYdiff = headTop - mouseY;\\n    headLeft = (mouseX - headWidth/2);\\n    headTop  = (mouseY - headHeight/2);\\n    // draw head\\n    fill(200, 200, 50);\\n    rect(headLeft, headTop, headWidth, headHeight);\\n\\n    leftEyeX = headLeft + headWidth/4;\\n    rightEyeX = headLeft + headWidth*3/4;\\n    eyeY = headTop + headHeight/3;\\n    eyeDiam = headWidth/5;\\n    eyeBallDiam = eyeDiam/2;\\n    leftEBX = leftEyeX;\\n    rightEBX = rightEyeX;\\n    leftEBY = eyeY;\\n    rightEBY = eyeY;\\n\\n    mouthLeft = leftEyeX;\\n    mouthRight = rightEyeX;\\n    mouthY = headTop + headHeight*3/4;\\n    // draw eyes\\n    fill(255);\\n    ellipse(leftEyeX, eyeY, eyeDiam, eyeDiam); // left eye\\n    ellipse(rightEyeX, eyeY, eyeDiam, eyeDiam); // right eye\\n\\n    // draw eyeballs\\n    int lXdiff = flyX - leftEBX;\\n    int lYdiff = flyY - leftEBY;\\n    int rXdiff = flyX - rightEBX;\\n    int rYdiff = flyY - rightEBY;\\n    leftEBX = (leftEyeX + lXdiff/10);\\n    leftEBY = (eyeY + lYdiff/10);\\n    rightEBX = (rightEyeX + rXdiff/10);\\n    rightEBY = (eyeY + rYdiff/10);\\n    fill(0);\\n    ellipse(leftEBX, leftEBY, eyeBallDiam, eyeBallDiam); // left eye\\n    ellipse(rightEBX, rightEBY, eyeBallDiam, eyeBallDiam); // right eye\\n\\n\\n    // draw mouth\\n    stroke(200, 100, 100);\\n    strokeWeight(8);\\n    line(mouthLeft, mouthY, mouthRight, mouthY);\\n}\\n\\nvoid drawFly() {\\n    // draw fly\\n    stroke(0);\\n    strokeWeight(1);\\n    fill(125);\\n    flyX = max(0,(flyX + random(20)-10)%width);\\n    flyY = max(0,(flyY + random(20)-10)%height);\\n    ellipse(flyX, flyY, flyWidth, flyHeight);\\n    // fly eyes\\n    fill(0);\\n    stroke(255);\\n    ellipse(flyX-flyWidth/3, flyY - flyHeight/2, 5, 5);\\n    ellipse(flyX+flyWidth/3, flyY - flyHeight/2, 5, 5);\\n    // fly wings\\n    fill(200);\\n    noStroke();\\n    ellipse(flyX-flyWidth/2, flyY, 10, 5);\\n    ellipse(flyX+flyWidth/2, flyY, 10, 5);\\n    \\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\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_32\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_32\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_32\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_32\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_32\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_32\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_32\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_32\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_32\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_32\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_32\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_32\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_32\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_32\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_32\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_32\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_32\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_32\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_32\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_32\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_32\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_32\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_32\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_32\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_32\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_32\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_32\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_32\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "//copy code from above and then edit it so the robot head moves to follow your cursor, \n",
    "// while the eyes keep following the fly\n",
    "\n",
    "//copy code from above and then add and then play with a slowly changing background color\n",
    "int headWidth;\n",
    "int headHeight;\n",
    "int headTop;\n",
    "int headLeft;\n",
    "\n",
    "int leftEyeX;\n",
    "int rightEyeX;\n",
    "int eyeY;\n",
    "int eyeDiam;\n",
    "int eyeBallDiam;\n",
    "int leftEBX, leftEBY;\n",
    "int rightEBX, rightEBY;\n",
    "\n",
    "int mouthLeft;\n",
    "int mouthRight;\n",
    "int mouthY;\n",
    "\n",
    "int flyWidth;\n",
    "int flyHeight;\n",
    "int flyX;\n",
    "int flyY;\n",
    "\n",
    "int blueVal;\n",
    "\n",
    "void setup() {\n",
    "    size(500,500);\n",
    "    headWidth = width*2/3;\n",
    "    headHeight = height/3;\n",
    "    headTop = (height - headHeight)/3;\n",
    "    headLeft = (width - headWidth)/2;\n",
    "\n",
    "\n",
    "    \n",
    "    flyWidth = 20;\n",
    "    flyHeight = 10;\n",
    "    flyX = width/2;\n",
    "    flyY = height/2;\n",
    "    \n",
    "    blueVal = 0;\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    blueVal = (blueVal + 1)%256;\n",
    "    background(100, 100, blueVal);\n",
    "    drawRobot();\n",
    "    drawFly();\n",
    "}\n",
    "\n",
    "void drawRobot() {\n",
    "    //int hXdiff = headLeft - mouseX;\n",
    "    //int hYdiff = headTop - mouseY;\n",
    "    headLeft = (mouseX - headWidth/2);\n",
    "    headTop  = (mouseY - headHeight/2);\n",
    "    // draw head\n",
    "    fill(200, 200, 50);\n",
    "    rect(headLeft, headTop, headWidth, headHeight);\n",
    "\n",
    "    leftEyeX = headLeft + headWidth/4;\n",
    "    rightEyeX = headLeft + headWidth*3/4;\n",
    "    eyeY = headTop + headHeight/3;\n",
    "    eyeDiam = headWidth/5;\n",
    "    eyeBallDiam = eyeDiam/2;\n",
    "    leftEBX = leftEyeX;\n",
    "    rightEBX = rightEyeX;\n",
    "    leftEBY = eyeY;\n",
    "    rightEBY = eyeY;\n",
    "\n",
    "    mouthLeft = leftEyeX;\n",
    "    mouthRight = rightEyeX;\n",
    "    mouthY = headTop + headHeight*3/4;\n",
    "    // draw eyes\n",
    "    fill(255);\n",
    "    ellipse(leftEyeX, eyeY, eyeDiam, eyeDiam); // left eye\n",
    "    ellipse(rightEyeX, eyeY, eyeDiam, eyeDiam); // right eye\n",
    "\n",
    "    // draw eyeballs\n",
    "    int lXdiff = flyX - leftEBX;\n",
    "    int lYdiff = flyY - leftEBY;\n",
    "    int rXdiff = flyX - rightEBX;\n",
    "    int rYdiff = flyY - rightEBY;\n",
    "    leftEBX = (leftEyeX + lXdiff/10);\n",
    "    leftEBY = (eyeY + lYdiff/10);\n",
    "    rightEBX = (rightEyeX + rXdiff/10);\n",
    "    rightEBY = (eyeY + rYdiff/10);\n",
    "    fill(0);\n",
    "    ellipse(leftEBX, leftEBY, eyeBallDiam, eyeBallDiam); // left eye\n",
    "    ellipse(rightEBX, rightEBY, eyeBallDiam, eyeBallDiam); // right eye\n",
    "\n",
    "\n",
    "    // draw mouth\n",
    "    stroke(200, 100, 100);\n",
    "    strokeWeight(8);\n",
    "    line(mouthLeft, mouthY, mouthRight, mouthY);\n",
    "}\n",
    "\n",
    "void drawFly() {\n",
    "    // draw fly\n",
    "    stroke(0);\n",
    "    strokeWeight(1);\n",
    "    fill(125);\n",
    "    flyX = max(0,(flyX + random(20)-10)%width);\n",
    "    flyY = max(0,(flyY + random(20)-10)%height);\n",
    "    ellipse(flyX, flyY, flyWidth, flyHeight);\n",
    "    // fly eyes\n",
    "    fill(0);\n",
    "    stroke(255);\n",
    "    ellipse(flyX-flyWidth/3, flyY - flyHeight/2, 5, 5);\n",
    "    ellipse(flyX+flyWidth/3, flyY - flyHeight/2, 5, 5);\n",
    "    // fly wings\n",
    "    fill(200);\n",
    "    noStroke();\n",
    "    ellipse(flyX-flyWidth/2, flyY, 10, 5);\n",
    "    ellipse(flyX+flyWidth/2, flyY, 10, 5);\n",
    "    \n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 8 - CONSTANTS!**\n",
    "\n",
    "Okay, so in actual fact, all of the things we have created so far are CONSTANTS, not variables. How do you know? Well, because each of them gets assigned only once during the program and the values don't change while the program is running. \n",
    "\n",
    "So, I hate to do this to you, but I want you to copy your program above, and add the keyword final in front of all your declarations, and change the code to be the correct style (ALL_CAPS). As an example, these:\n",
    "\n",
    "    int headHeight = height/3;\n",
    "\n",
    "    int headWidth = width\\*2/3;\n",
    "\n",
    "    int headTop = (height - headHeight)/3;\n",
    "\n",
    "    int headLeft = (width - headWidth)/2;\n",
    "\n",
    "should be replaced by these:\n",
    "\n",
    "    final int HEAD_HEIGHT = height/3;\n",
    "\n",
    "    final int HEAD_WIDTH = width\\*2/3;\n",
    "\n",
    "    final int HEAD_TOP = (height - HEAD_HEIGHT)/3;\n",
    "\n",
    "    final int HEAD_LEFT = (width - HEAD_WIDTH)/2;\n",
    "\n",
    "Once you are done making all the changes, run your code to make sure it is still working."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "// copy above and change all your variables to CONSTANTS. Use appropriate capitalization. \n",
    "// You will have to change the variables throughout your code"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "**Step 9 - COPY YOUR FINAL ROBOT IMAGE AND CODE TO YOUR TEAM WORKSPACE**\n",
    "\n",
    "Well, you are basically done. What do you do now? Save this notebook. I suggest downloading it as HTML. Your images will not show up, but all the code you wrote will be there and you will be able to see the progression of what you did. \n",
    "\n",
    "Once you have downloaded the HTML, upload the file to your team workspace on UMLearn. Alternatively, you can take screenshots and upload those to document your work. Make sure you add your names to the filename before uploading, so that when multiple people in your group add their's, you can differentiate.\n",
    "\n",
    "*You can also save it out as a Jupyter Notebook file (.ipynb), and if you install Jupyter notebooks, you can open that locally. (Note that installing Jupyter Notebooks is NOT easy at all - it's something for experienced sys admin type people, and may be well beyond your skill level - it took Dr. Celine awhile to get it working on her Mac). "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "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": 2
}