COMP1010_Week5_Exercise_v5.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Week 5**\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",
    "- Fill in the correct boolean expressions to make the Processing sketches work\n",
    "- Use boolean variables and mouse input to control when things happen\n",
    "- Use if statements to change colors depending on key presses \n",
    "\n"
   ]
  },
  {
   "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 - Boolean Expressions 1**\n",
    "\n",
    "The script below is almost complete, but the boolean expression in the if statement is missing. Figure out (by reading through the code and comments) what the expression should be.\n",
    "\n",
    "Here is an output image that shows what the output will look like if you put in the correct expression. (Note that your black border will be at a different vertical location every time you run the code, since it is random)\n",
    "\n",
    "<img src=\"images/dot_border1.png\" width=300/>\n",
    "\n",
    "Test yours to make sure you did it right. "
   ]
  },
  {
   "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 = 'final int DOT_SIZE = 50;\\nfinal int BORDER_Y = (int)random(100,400);\\n\\nvoid setup() {\\n  size(500,500);\\n  background(230, 200, 50); //yellow\\n}\\n\\nvoid draw() {\\n  stroke(0); // black\\n  strokeWeight(8);\\n  noFill();\\n  line(0, BORDER_Y, width, BORDER_Y); // horizontal border\\n  drawDots();\\n}\\n\\nvoid drawDots() {\\n  noStroke();\\n  float dotX = random(width);\\n  float dotY = random(height);\\n  // the top of the random dot:\\n  float dotYTop = dotY - DOT_SIZE/2;\\n  // TODO: fill in a boolean expression in the if statement below\\n  // only draw blue dots below the black border\\n  // use the dotYTop variable above and the global borderY variable\\n  if ( ) {\\n    fill(50,50,random(100,200)); // random shade of blue\\n    ellipse(dotX, dotY, DOT_SIZE, DOT_SIZE);\\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": [
    "final int DOT_SIZE = 50;\n",
    "final int BORDER_Y = (int)random(100,400);\n",
    "\n",
    "void setup() {\n",
    "  size(500,500);\n",
    "  background(230, 200, 50); //yellow\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "  stroke(0); // black\n",
    "  strokeWeight(8);\n",
    "  noFill();\n",
    "  line(0, BORDER_Y, width, BORDER_Y); // horizontal border\n",
    "  drawDots();\n",
    "}\n",
    "\n",
    "void drawDots() {\n",
    "  noStroke();\n",
    "  float dotX = random(width);\n",
    "  float dotY = random(height);\n",
    "  // the top of the random dot:\n",
    "  float dotYTop = dotY - DOT_SIZE/2;\n",
    "  // TODO: fill in a boolean expression in the if statement below\n",
    "  // only draw blue dots below the black border\n",
    "  // use the dotYTop variable above and the global borderY variable\n",
    "  if ( ) {\n",
    "    fill(50,50,random(100,200)); // random shade of blue\n",
    "    ellipse(dotX, dotY, DOT_SIZE, DOT_SIZE);\n",
    "  } \n",
    "  \n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 2 - IF-ELSE**\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 and modify it so that if the random dot doesn't fit below the border, it still gets drawn, but now it is a random shade of red. If you do this the simple way, the reddish dots will sometimes overlap the border a bit, like this:\n",
    "\n",
    "<img src=\"images/dot_border2.png\" width=300/>\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "// copy the code from above and then make the appear above the border, but those dots should be reddish \n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 3 - IF-ELSE-IF**\n",
    "\n",
    "**SWITCH WHO IS CONTROLLING THE KEYBOARD - GIVE THE COMPUTER TO YOUR PARTNER**\n",
    "\n",
    "You can also use an if-else-if structure to add another test that ensures the reddish dots fully fit above the border, like this:\n",
    "\n",
    "<img src=\"images/dot_border3.png\" width=300/>\n",
    "\n",
    "For this step, look closely at how the previous code ensures that the blue dots only appear below the line if the whole dot will fit. You will want to create a local variable to help you.\n",
    "\n",
    "Side note: it turns out that this actually looks much more interesting if you don't draw the black border line at all. So if you want, comment out the line of code that draws the black border and see how it looks."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_1\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_1\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_1\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_1\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\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_1\">\n",
       "  <b>Sketch #1:</b><br/>\n",
       "  <canvas id=\"canvas_1\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_1\">\n",
       "  <button id=\"run_button_1\" onclick=\"startSketch('1');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_1\" onclick=\"pauseSketch('1');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_1\" onclick=\"setupSketch('1');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_1\" onclick=\"drawSketch('1');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #1 state:</b> <span id=\"state_1\">Loading...</span><br/>\n",
       "<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 = '/** \\nBasic Active Processing Script\\n**/\\nfinal int MIN_DOT_SIZE = 20;\\nfinal int MAX_DOT_SIZE = 40;\\nfinal int MIN_COLOUR = 100;\\nfinal int MAX_COLOUR = 256;\\nint dotX;\\nint dotY;\\nfinal int MAX_MOVE = 10;\\n\\nvoid setup() {\\n    size(500, 500);\\n    dotX = width/2;\\n    dotY = height/2;\\n    background(0);\\n}\\n\\nvoid draw() {\\n    fill(0, 10);\\n    rect(0,0, width, height);\\n    fill(random(MIN_COLOUR, MAX_COLOUR), random(MIN_COLOUR, MAX_COLOUR), random(MIN_COLOUR, MAX_COLOUR));\\n    float dotSize = random(MIN_DOT_SIZE, MAX_DOT_SIZE);\\n    noStroke();\\n    dotX = dotX + (int)random(MAX_MOVE*-1, MAX_MOVE);\\n    dotY = dotY + (int)random(MAX_MOVE*-1, MAX_MOVE);\\n    dotX = max(dotX, 0);\\n    dotX = min(dotX, width);\\n    dotY = max(dotY, 0);\\n    dotY = min(dotY, height);\\n    ellipse(dotX, dotY, dotSize, dotSize);\\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_1\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_1\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_1\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_1\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_1\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_1\", cc);\n",
       "            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_1\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_1\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_1\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_1\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_1\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_1\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_1\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_1\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_1\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_1\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_1\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_1\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_1\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_1\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_1\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_1\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_1\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_1\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_1\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_1\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_1\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_1\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "// copy the code from above and add code to make sure the red dots only appear \n",
    "// if they fit fully above the black border line\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 4 - DOTS IN A BOX**\n",
    "\n",
    "**SWITCH WHO IS CONTROLLING THE KEYBOARD - GIVE THE COMPUTER TO YOUR PARTNER**\n",
    "\n",
    "Now your job is to draw blue dots only inside a box. All you have to do below is fill in the correct expression in the if statement. When you have this working, your script should look like this: \n",
    "\n",
    "<img src=\"images/dots_box.png\" width=300/>\n",
    "\n",
    "And, as before, once you get it working, you can comment out the line of code that draws the black box, as this looks much more interesting:\n",
    "\n",
    "<img src=\"images/dots_square.png\" width=300/>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_5\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_5\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_5\");\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_5\");\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_5\">\n",
       "  <b>Sketch #5:</b><br/>\n",
       "  <canvas id=\"canvas_5\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_5\">\n",
       "  <button id=\"run_button_5\" onclick=\"startSketch('5');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_5\" onclick=\"pauseSketch('5');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_5\" onclick=\"setupSketch('5');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_5\" onclick=\"drawSketch('5');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #5 state:</b> <span id=\"state_5\">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 = 'final int DOT_SIZE = 50;\\nfinal int BOX_WIDTH = 300;\\nfinal int BOX_HEIGHT = 300;\\nfinal int BOX_LEFT = 100;\\nfinal int BOX_TOP = 100;\\nfinal int BOX_RIGHT = BOX_LEFT + BOX_WIDTH;\\nfinal int BOX_BOTTOM = BOX_TOP + BOX_HEIGHT;\\n\\nvoid setup() {\\n  size(500,500);\\n  background(230, 200, 50); // yellow\\n}\\n\\nvoid draw() {\\n  stroke(0); // black\\n  strokeWeight(8);\\n  noFill();\\n  //rect(BOX_LEFT,BOX_TOP,BOX_WIDTH,BOX_HEIGHT); // big square centered in canvas\\n  drawDots();\\n}\\n\\nvoid drawDots() {\\n  noStroke();\\n  float dotX = random(width);\\n  float dotY = random(height);\\n  \\n  float dotXLeft = dotX - DOT_SIZE/2;\\n  float dotXRight = dotX + DOT_SIZE/2;\\n  float dotYTop = dotY - DOT_SIZE/2;\\n  float dotYBottom = dotY + DOT_SIZE/2;\\n  // TODO: fill in a boolean expression in the if statement below\\n  // only draw blue dots that will fit completely inside the black box\\n  // use the four dot variables above and the global box constants to write the boolean expression\\n  if (dotXLeft > BOX_LEFT && dotXRight < BOX_RIGHT && dotYTop > BOX_TOP && dotYBottom < BOX_BOTTOM) {\\n    fill(50,50,random(100,200)); // blue\\n    ellipse(dotX, dotY, DOT_SIZE, DOT_SIZE);\\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_5\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_5\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_5\", 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_5\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_5\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_5\", 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_5\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_5\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_5\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_5\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_5\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_5\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_5\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_5\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_5\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_5\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_5\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_5\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_5\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_5\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_5\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_5\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_5\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_5\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_5\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_5\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_5\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_5\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "final int DOT_SIZE = 50;\n",
    "final int BOX_WIDTH = 300;\n",
    "final int BOX_HEIGHT = 300;\n",
    "final int BOX_LEFT = 100;\n",
    "final int BOX_TOP = 100;\n",
    "final int BOX_RIGHT = BOX_LEFT + BOX_WIDTH;\n",
    "final int BOX_BOTTOM = BOX_TOP + BOX_HEIGHT;\n",
    "\n",
    "void setup() {\n",
    "  size(500,500);\n",
    "  background(230, 200, 50); // yellow\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "  stroke(0); // black\n",
    "  strokeWeight(8);\n",
    "  noFill();\n",
    "  rect(BOX_LEFT,BOX_TOP,BOX_WIDTH,BOX_HEIGHT); // big square centered in canvas\n",
    "  drawDots();\n",
    "}\n",
    "\n",
    "void drawDots() {\n",
    "  noStroke();\n",
    "  float dotX = random(width);\n",
    "  float dotY = random(height);\n",
    "  \n",
    "  float dotXLeft = dotX - DOT_SIZE/2;\n",
    "  float dotXRight = dotX + DOT_SIZE/2;\n",
    "  float dotYTop = dotY - DOT_SIZE/2;\n",
    "  float dotYBottom = dotY + DOT_SIZE/2;\n",
    "  // TODO: fill in a compound boolean expression in the if statement below\n",
    "  // only draw blue dots that will fit completely inside the black box\n",
    "  // use the four dot variables above and the global box constants to write the boolean expression\n",
    "  // There are four sides to the box, so you will have four parts to this test\n",
    "  if () {\n",
    "    fill(50,50,random(100,200)); // blue\n",
    "    ellipse(dotX, dotY, DOT_SIZE, DOT_SIZE);\n",
    "  } \n",
    "  \n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 5 - Conditions with Mouse Input**\n",
    "\n",
    "**SWITCH WHO IS CONTROLLING THE KEYBOARD - GIVE THE COMPUTER TO YOUR PARTNER**\n",
    "\n",
    "Complete the active Processing script below. This script should draw a randomly coloured dot each time the mouse is clicked (we are using the built-in Processing function void mouseClicked(), which will automatically get called when a mouse click happens). So, when a mouse button is clicked, you need to store the mouse coordinates, and set a boolean flag to say that a mouse click happened. In the draw() function, if a mouse click happened, then you need to draw a randomly colored dot, and reset the flag.\n",
    "\n",
    "This image shows what the script looks like after the mouse button was clicked 8 times:\n",
    "\n",
    "<img src=\"images/click_dots.png\" width=300/>"
   ]
  },
  {
   "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 = 'final int DOT_SIZE = 30;\\nfloat dotX; // for storing the x-coordinate of where the mouse was clicked\\nfloat dotY; // for storing the y-coordinate of where the mouse was clicked\\nboolean clicked = false;\\n\\nvoid setup() {\\n  size(500,500);\\n  background(0); // black\\n}\\n\\nvoid draw() {\\n  // if there was a mouse click, draw a randomly colored dot where the mouse click happened.\\n  if (clicked){\\n    fill(random(256), random(256),random(256));\\n    ellipse(dotX, dotY, DOT_SIZE, DOT_SIZE)\\n    clicked = false;\\n  }\\n  // after drawing the dot, reset the boolean \\n  ;\\n}\\n\\nvoid mouseClicked() {\\n    // set the dotX and dotY coordinates, and set the clicked boolean\\n    dotX = mouseX;\\n    dotY = mouseY;\\n    clicked = true;\\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_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": [
    "final int DOT_SIZE = 30;\n",
    "float dotX; // for storing the x-coordinate of where the mouse was clicked\n",
    "float dotY; // for storing the y-coordinate of where the mouse was clicked\n",
    "boolean clicked = false;\n",
    "\n",
    "void setup() {\n",
    "  size(500,500);\n",
    "  background(0); // black\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "  // if there was a mouse click, draw a randomly colored dot where the mouse click happened.\n",
    "  // after drawing a dot, reset the clicked boolean\n",
    "  // HINT: 5 lines of code\n",
    "\n",
    "\n",
    "}\n",
    "\n",
    "void mouseClicked() {\n",
    "    // save the dotX and dotY coordinates, and set the clicked boolean\n",
    "    // HINT: 3 lines of code\n",
    "\n",
    "}\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 6 - Change Dot Colours with Keyboard Input**\n",
    "\n",
    "**SWITCH WHO IS CONTROLLING THE KEYBOARD - GIVE THE COMPUTER TO YOUR PARTNER**\n",
    "\n",
    "Copy the code from above, and add a global variable to the top like this:\n",
    "\n",
    "    color dotColour;\n",
    "\n",
    "In the setup() function, set dotColour to white using the hex version of white, like this:\n",
    "\n",
    "    dotColour = #FFFFFF;\n",
    "\n",
    "Now, add this function to the bottom of the script\n",
    "\n",
    "    void keyReleased() {\n",
    "        if (key == 'b' || key == 'B') {\n",
    "            dotColour = #588EEA; // bluish shade in hex format\n",
    "        }\n",
    "    }\n",
    "\n",
    "Change the fill command in draw() so that instead of using three random RGB ints, the dotColour variable is used:\n",
    "\n",
    "    fill(dotColour);\n",
    "    \n",
    "If you run the script now, you should be able to press b on the keyboard and change the dots from white to blue. \n",
    "\n",
    "TODO: Add 3 more if statements to the keyReleased() function that allow you to draw dots of other colours. You can use the Processing Color Selector tool under the Tools menu to get the colour values in hex format."
   ]
  },
  {
   "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": [
    "// copy code from above and then follow the instructios above."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 6 - 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
}