COMP1010_Week3_Exercise_v3.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...)**\n",
    "\n",
    "Objectives:\n",
    "\n",
    "- Coding Practice!\n",
    "- Convert a static Processing script to an active one\n",
    "- Create a function\n",
    "- Respond to mouse cursor movement\n",
    "- Change colour over time\n",
    "- Change position of one object in relation to another\n",
    "- Have fun!"
   ]
  },
  {
   "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 (but using variables, not constants, because we need these to be variables later). 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": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_7\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_7\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_7\");\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_7\");\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_7\">\n",
       "  <b>Sketch #7:</b><br/>\n",
       "  <canvas id=\"canvas_7\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_7\">\n",
       "  <button id=\"run_button_7\" onclick=\"startSketch('7');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_7\" onclick=\"pauseSketch('7');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_7\" onclick=\"setupSketch('7');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_7\" onclick=\"drawSketch('7');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #7 state:</b> <span id=\"state_7\">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(300,300);\\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_7\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_7\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_7\", 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_7\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_7\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_7\", 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_7\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_7\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_7\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_7\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_7\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_7\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_7\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_7\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_7\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_7\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_7\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_7\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_7\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_7\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_7\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_7\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_7\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_7\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_7\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_7\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_7\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_7\"), 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(300,300);\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. \n",
    "\n",
    "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": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_8\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_8\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_8\");\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_8\");\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_8\">\n",
       "  <b>Sketch #8:</b><br/>\n",
       "  <canvas id=\"canvas_8\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_8\">\n",
       "  <button id=\"run_button_8\" onclick=\"startSketch('8');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_8\" onclick=\"pauseSketch('8');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_8\" onclick=\"setupSketch('8');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_8\" onclick=\"drawSketch('8');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #8 state:</b> <span id=\"state_8\">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(300,300);\\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_8\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_8\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_8\", 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_8\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_8\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_8\", 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_8\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_8\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_8\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_8\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_8\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_8\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_8\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_8\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_8\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_8\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_8\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_8\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_8\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_8\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_8\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_8\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_8\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_8\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_8\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_8\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_8\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_8\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "// global vars\n",
    "size(300,300);\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": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 3 - Add a randomly buzzing fly**\n",
    "\n",
    "Make your script better by adding a fly that randomly buzzes around in front of the robot. To get started, copy your code from above into the cell below. \n",
    "\n",
    "**3a** Add two global int variables, flyWidth and flyHeight, both intialized to 20. In setup() initialize these both to 0. Also add global int variables flyX and flyY. In the setup() code initialize these to be at the center of the canvas (use width and height).\n",
    "\n",
    "**3b** In the draw() funtion, after the commands that draw the robot face, add the following code to draw the buzzing fly that moves randomly around the screen (yes - you can copy and paste*. Note that 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": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_9\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_9\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_9\");\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_9\");\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_9\">\n",
       "  <b>Sketch #9:</b><br/>\n",
       "  <canvas id=\"canvas_9\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_9\">\n",
       "  <button id=\"run_button_9\" onclick=\"startSketch('9');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_9\" onclick=\"pauseSketch('9');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_9\" onclick=\"setupSketch('9');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_9\" onclick=\"drawSketch('9');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #9 state:</b> <span id=\"state_9\">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_9\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_9\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_9\", 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_9\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_9\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_9\", 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_9\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_9\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_9\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_9\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_9\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_9\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_9\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_9\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_9\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_9\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_9\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_9\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_9\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_9\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_9\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_9\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_9\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_9\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_9\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_9\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_9\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_9\"), 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 code in functions!**\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. \n",
    "\n",
    "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. \n",
    "\n",
    "Then create a function called drawFly() and move the code that draws the fly into that function. \n",
    "\n",
    "Finally, call the drawRobot and drawFly function from inside draw().\n",
    "\n",
    "Run your code to make sure it still works. The fly should still buzz around in front of the robot face."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_10\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_10\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_10\");\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_10\");\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_10\">\n",
       "  <b>Sketch #10:</b><br/>\n",
       "  <canvas id=\"canvas_10\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_10\">\n",
       "  <button id=\"run_button_10\" onclick=\"startSketch('10');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_10\" onclick=\"pauseSketch('10');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_10\" onclick=\"setupSketch('10');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_10\" onclick=\"drawSketch('10');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #10 state:</b> <span id=\"state_10\">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_10\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_10\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_10\", 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_10\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_10\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_10\", 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_10\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_10\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_10\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_10\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_10\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_10\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_10\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_10\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_10\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_10\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_10\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_10\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_10\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_10\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_10\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_10\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_10\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_10\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_10\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_10\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_10\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_10\"), 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 - 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": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_11\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_11\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_11\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_11\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\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_11\">\n",
       "  <b>Sketch #11:</b><br/>\n",
       "  <canvas id=\"canvas_11\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_11\">\n",
       "  <button id=\"run_button_11\" onclick=\"startSketch('11');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_11\" onclick=\"pauseSketch('11');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_11\" onclick=\"setupSketch('11');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_11\" onclick=\"drawSketch('11');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #11 state:</b> <span id=\"state_11\">Loading...</span><br/>\n",
       "<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 = '\\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\\nint blueVal;\\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    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    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_11\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_11\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_11\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_11\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_11\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_11\", cc);\n",
       "            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_11\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_11\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_11\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_11\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_11\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_11\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_11\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_11\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_11\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_11\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_11\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_11\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_11\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_11\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_11\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_11\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_11\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_11\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_11\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_11\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_11\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_11\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "\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",
    "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",
    "\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",
    "    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",
    "    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 6 - ADD USER INTERACTION**\n",
    "\n",
    "**SWITCH WHO IS CONTROLLING THE KEYBOARD - GIVE THE COMPUTER TO YOUR PARTNER**\n",
    "\n",
    "**6a** Let's move the whole robot head towards the user's cursors. To do this, at the top of the drawRobot function, assign headLeft and headTop new values. What should you assign them? Well, you want the robot head to be centered over the cursors, which are at mouseX and mouseY. In the current script, headLeft and headTop are assigned to be at the center of the canvas (look at how they are assigned in the setup() function). You need to change these to change in the draw function, but instead of being relative to the center of the canvas, they need to be in relation to the cursor. Recall that in the rect function, headLeft and headTop are serving as the first two parameters, and they are specifying the top-left corner of the rectangle. When you have this working, run the script. The rectangle of the robot's head should move around with the cursor (but the eyes and mouth aren't moving yet).\n",
    "\n",
    "**6b** To get the eyes and mouth to move with the robot head, you need to move the code that assigns all the variables for the eyes and mouth out of the setup() function and into the draw() function. These variables need to be updated *after* you set the headLeft and headTop variables, since they depend on those values. Once you have moved that code, run the script to make sure the robot head, eyes and mouth are following your cursor. (The fly should also still be buzzing around in front of the robot's face.) \n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_12\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_12\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_12\");\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_12\");\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_12\">\n",
       "  <b>Sketch #12:</b><br/>\n",
       "  <canvas id=\"canvas_12\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_12\">\n",
       "  <button id=\"run_button_12\" onclick=\"startSketch('12');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_12\" onclick=\"pauseSketch('12');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_12\" onclick=\"setupSketch('12');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_12\" onclick=\"drawSketch('12');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #12 state:</b> <span id=\"state_12\">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 = '\\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\\nint blueVal;\\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    blueVal = (blueVal + 1)%256;\\n    background(100, 100, blueVal);\\n    drawRobot();\\n    drawFly();\\n}\\n\\nvoid drawRobot() {\\n    \\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    //update eye locations\\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    // update mouth location\\n    mouthLeft = leftEyeX;\\n    mouthRight = rightEyeX;\\n    mouthY = headTop + headHeight*3/4;\\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_12\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_12\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_12\", 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_12\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_12\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_12\", 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_12\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_12\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_12\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_12\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_12\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_12\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_12\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_12\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_12\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_12\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_12\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_12\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_12\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_12\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_12\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_12\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_12\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_12\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_12\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_12\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_12\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_12\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "\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",
    "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",
    "\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",
    "    blueVal = (blueVal + 1)%256;\n",
    "    background(100, 100, blueVal);\n",
    "    drawRobot();\n",
    "    drawFly();\n",
    "}\n",
    "\n",
    "void drawRobot() {\n",
    "    \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",
    "    //update eye locations\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",
    "    // update mouth location\n",
    "    mouthLeft = leftEyeX;\n",
    "    mouthRight = rightEyeX;\n",
    "    mouthY = headTop + headHeight*3/4;\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 7 - Make the eyes follow the fly!**\n",
    "\n",
    "We want to have the robot's eyeballs move towards wherever the fly is. This is the most challenging part of this notebook. Follow the steps carefully.\n",
    "\n",
    "**7a** For each eyeball, we need to separate out the x and y (right now the location of the eyes and the eyeballs are both controlled by the three variables: leftEyeX, rightEyeX and eyeY.) Create four more global variables to separately control the *eyeball* locations, 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",
    "**7b** In the ellipse commands that draw the eyeballs, use 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",
    "**7c** Create four local variables inside the drawRobot function, just above the lines of code that draw the eyes and eyeballs. Call these local int variables diffLX, diffLY, diffRX, diffRY. These will be used to calculate the distance between the fly and the center of the eyes during each call to draw. Each of these should be intialized as the difference between the fly's location and the location of the center of the eye, for example: \n",
    "\n",
    "    diffLX = flyX - leftEyeX;\n",
    "    \n",
    "**7d** Now, after creating these diff variables and assigning them correctly, the last step to get the eyeballs to look like they are watching the fly is to use a bit of the distance between the eye center and the fly to the specify the location of the eyeballs. So, to do this, set leftEBX (the x-coordinate of the left eyeball) to leftEyeX (the left coordinate of the left eye socket) + diffLX/10 (a portion of the distance to the fly). Do the same for the other three eyeball location variables. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_13\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_13\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_13\");\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_13\");\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_13\">\n",
       "  <b>Sketch #13:</b><br/>\n",
       "  <canvas id=\"canvas_13\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_13\">\n",
       "  <button id=\"run_button_13\" onclick=\"startSketch('13');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_13\" onclick=\"pauseSketch('13');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_13\" onclick=\"setupSketch('13');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_13\" onclick=\"drawSketch('13');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #13 state:</b> <span id=\"state_13\">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 = '\\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\\nint blueVal;\\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    blueVal = (blueVal + 1)%256;\\n    background(100, 100, blueVal);\\n    drawRobot();\\n    drawFly();\\n}\\n\\nvoid drawRobot() {\\n    \\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\\n    //update eye locations\\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    // update mouth location\\n    mouthLeft = leftEyeX;\\n    mouthRight = rightEyeX;\\n    mouthY = headTop + headHeight*3/4;\\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    \\n    int diffLX = flyX - leftEyeX; \\n    int diffLY = flyY - eyeY;\\n    int diffRX = flyX - rightEyeX;\\n    int diffRY = flyY - eyeY;\\n    leftEBX = leftEyeX + diffLX/10;\\n    leftEBY = eyeY + diffLY/10;\\n    rightEBX = rightEyeX + diffRX/10;\\n    rightEBY = eyeY + diffRY/10;\\n    // draw eyeballs\\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_13\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_13\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_13\", 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_13\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_13\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_13\", 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_13\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_13\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_13\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_13\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_13\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_13\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_13\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_13\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_13\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_13\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_13\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_13\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_13\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_13\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_13\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_13\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_13\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_13\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_13\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_13\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_13\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_13\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "\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",
    "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",
    "\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",
    "    blueVal = (blueVal + 1)%256;\n",
    "    background(100, 100, blueVal);\n",
    "    drawRobot();\n",
    "    drawFly();\n",
    "}\n",
    "\n",
    "void drawRobot() {\n",
    "    \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",
    "\n",
    "    //update eye locations\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",
    "    // update mouth location\n",
    "    mouthLeft = leftEyeX;\n",
    "    mouthRight = rightEyeX;\n",
    "    mouthY = headTop + headHeight*3/4;\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",
    "    \n",
    "    int diffLX = flyX - leftEyeX; \n",
    "    int diffLY = flyY - eyeY;\n",
    "    int diffRX = flyX - rightEyeX;\n",
    "    int diffRY = flyY - eyeY;\n",
    "    leftEBX = leftEyeX + diffLX/10;\n",
    "    leftEBY = eyeY + diffLY/10;\n",
    "    rightEBX = rightEyeX + diffRX/10;\n",
    "    rightEBY = eyeY + diffRY/10;\n",
    "    // draw eyeballs\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 - COPY YOUR WORK TO YOUR TEAM LOCKER**\n",
    "\n",
    "Save this out to HTML and copy it to your team locker, which you should be able to find under the Communication tab. You can also upload screenshots of the scripts, since images aren't saved with the HTML."
   ]
  },
  {
   "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
}