COMP1010_Week3_Exercise_v5.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 copy your code out to an external text file in case the notebook instance disappears**\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**. \n",
    "\n",
    "There will probably be a difference though: your robot head and mouth lines are probably the wrong color and too thick. Why did that happen? Can you figure out how to fix that so that the outlines are all think and black, and only the mouth is thick and pinkish-red?"
   ]
  },
  {
   "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": "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 (int), max() and random() next week, which is why I'm giving you this bit of code this week.\n",
    "\n",
    "    // draw fly\n",
    "    stroke(0);\n",
    "    strokeWeight(1);\n",
    "    fill(125);\n",
    "    flyX = (int)max(0,(flyX + random(20)-10)%width);\n",
    "    flyY = (int)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": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_2\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_2\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_2\");\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_2\");\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_2\">\n",
       "  <b>Sketch #2:</b><br/>\n",
       "  <canvas id=\"canvas_2\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_2\">\n",
       "  <button id=\"run_button_2\" onclick=\"startSketch('2');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_2\" onclick=\"pauseSketch('2');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_2\" onclick=\"setupSketch('2');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_2\" onclick=\"drawSketch('2');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #2 state:</b> <span id=\"state_2\">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\\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\\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\\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_2\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_2\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_2\", 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_2\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_2\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_2\", 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_2\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_2\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_2\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_2\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_2\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_2\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_2\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_2\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_2\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_2\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_2\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_2\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_2\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_2\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_2\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_2\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_2\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_2\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_2\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_2\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_2\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_2\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": []
  },
  {
   "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() functions 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": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 5 - CHANGE COLOURS OVER TIME**\n",
    "\n",
    "Let's make the blue background change colour, slowly.\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 range of colour value that makes 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": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 6 - ADD USER INTERACTION - ROBOT HEAD CONTROLLED BY CURSOR**\n",
    "\n",
    "**SWITCH WHO IS CONTROLLING THE KEYBOARD - GIVE THE COMPUTER TO YOUR PARTNER**\n",
    "\n",
    "**6a** Let's move the whole robot head with the user's cursor. Copy the code from above into the cell below. Then, 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 cursor, which is at mouseX and mouseY. In the current script, headLeft and headTop are assigned relative to the center of the canvas (look at how they are assigned in the setup() function). You need to change these so that they get set in the drawRobot() function, but instead of being set relative to the center of the canvas, they need to be set 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 at its center (but the eyes and mouth aren't moving yet). If you are having trouble with this draw a picture on paper, with your cursor somewhere, and the rectangle head centered around the cursor. Then figure out what the coordinates should be in relation to mouseX and mouseY.\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 locations. Move this code 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": []
  },
  {
   "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. Start by copying the code from above into the cell below.\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 left and right 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 the distance between the eye center and the fly to 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. When you are done test to make sure the eyeballs are moving appropriately to watch the fly, and test to make sure this works even as you move the robot head around."
   ]
  },
  {
   "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": []
  },
  {
   "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."
   ]
  }
 ],
 "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
}