COMP1010_Week4_Exercise_v4.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Week 4**\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",
    "- Play with random\n",
    "- Use min and max\n",
    "- Work with floats"
   ]
  },
  {
   "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 - Random circles**\n",
    "\n",
    "Let's get started! The script below is a basic template for an active Processing script. The objective is to make a program that draws randomly colored dots of random diameters, on the screen and let those colored dots build up over time. There is no user interaction in this. However, we don't want the dots to be too small, and we don't want them to be too large, so we are going to set maximum and minimun sizes of the dots using global constants. We also want to make sure the colors are all bright, so we are doing to set maximum and minimum color ranges. Follow this sub-steps below to do this.\n",
    "\n",
    "**Step 1a**\n",
    "\n",
    "Declare four global constants for MAX_DOT_SIZE, MIN_DOT_SIZE, MIN_COLOR, MAX_COLOR. MAX_COLOR should be 255, MIN_COLOR should be 100. You can decide on the min and max dot size. \n",
    "\n",
    "**Step 1b**\n",
    "Add a fill command to draw() to set the fill colour. You want to call random() for each of the three colors. Use the two constants you created to give a range to random.\n",
    "\n",
    "**Step 1c**\n",
    "Add an ellipse command to draw a dot. Use random() for the x and y coordinates, so that the dots can go anywhere on the canvas. To make circular dots, you need the width and height of the ellipse to be the same. So, you will need to create a local variable above the ellipse command to randomly generate a size. Remember that random() returns a float, so your local variable will have to be a float. Use the two constants you created (MIN_DOT_SIZE and MAX_DOT_SIZE) as the range for generating a random size. \n",
    "\n",
    "**Step 1d**\n",
    "Put a background() call in the right spot so that the dots build up. Also, if you don't want your dots to have an outline, use the noStroke() function.\n",
    "\n",
    "\n",
    "Run your script, and after awhile, you should see something like this:\n",
    "\n",
    "<img src=\"images/dots.png\" width=300/>"
   ]
  },
  {
   "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 = '/** \\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;\\n\\nvoid setup() {\\n    size(500, 500);\\n    background(0);\\n}\\n\\nvoid draw() {\\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    ellipse(random(width), random(height), 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_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": [
    "/** \n",
    "Basic Active Processing Script\n",
    "**/\n",
    "\n",
    "void setup() {\n",
    "    size(500, 500);\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 2 - Make the dots slowly crawl across screen**\n",
    "\n",
    "**SWITCH WHO IS CONTROLLING THE KEYBOARD - GIVE THE COMPUTER TO YOUR PARTNER**\n",
    "\n",
    "In this step, we are going to change the dots so that they don't just appear randomly, but rather, they slowly walk randomly around the screen. In order to do this, we need to keep track of the the location of the dot we last drew. And we will need to use the min() and max() functions to keep their locations on the canvas.\n",
    "\n",
    "**Step 2a**\n",
    "Copy your code from above into the cell below. Create two global variables for the dot's x and y location (dotX, dotY). In setup(), initialize these variables so that the first dot is drawn in the center of the canvas. \n",
    "\n",
    "**Step 2b**\n",
    "Replace the location in the ellipse command with the two local variables. If you run the script now, you'll just see a flashing dot that stays in the center of the screen.\n",
    "\n",
    "**Step 2c - this is the challenging part** \n",
    "Add a global variable called MAX_MOVE, initialized to 10. In the draw() function, before the ellipse call, set your dotX and dotY location so that they are randomly increased or decreased by 10 pixels. So, if your dotX value was 35 before, after this call, if should be anywhere between 25 and 45. Use the MAX_MOVE global, and remember that you can pass two values to random(). Once you are done this, you should see dots moving around the screen, taking a random walk. But, there is a chance that the dots will wander right off the canvas.\n",
    "\n",
    "**Step 2d**\n",
    "Constrain the random walk so that it stays on the canvas. After adding a random amount to dotX and dotY, use min() and max() functions so that dotX is either 0, dotX or width. Then use min() and max() to set dotY, so that it is either 0, dotY, or height. These calls will ensure the dots are not going to walk off the canvas."
   ]
  },
  {
   "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 then make the dots do a random walk around the screen\n",
    "/** \n",
    "Basic Active Processing Script\n",
    "**/\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 3 - Make background fade**\n",
    "\n",
    "**SWITCH WHO IS CONTROLLING THE KEYBOARD - GIVE THE COMPUTER TO YOUR PARTNER**\n",
    "\n",
    "If you put the background(0) call in the draw() function instead of setup() you see just flashing dots. But if you put the background(0) call in the setup() function, you see all the dots that have been drawn, as they build up. What about something in between? If we draw a slightly transparent square over the canvas during every draw, that will have the effect of making older dots fade away.\n",
    "\n",
    "**3a**\n",
    "To do this, copy the code from above into the cell below and then add a global variable called ALPHA and initialize it to 10.\n",
    "\n",
    "**3b**\n",
    "Then, at the beginning of the draw() function, draw a rect that is the size of the canvas. Do a fill call before drawing the rect that fills the rectangle with black, but use the ALPHA constant as the second parameter to the fill command. \n",
    "\n",
    "You can play around with various settings of the ALPHA value to see what you like best. \n",
    "\n",
    "Here is what mine looks like:\n",
    "\n",
    "<img src=\"images/dots2.png\" width=300 />\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "// copy code from above and then use a semi-transparent rectangle to make the dots appear to fade\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 4 - Draw an enclosing square**\n",
    "\n",
    "**SWITCH WHO IS CONTROLLING THE KEYBOARD - GIVE THE COMPUTER TO YOUR PARTNER**\n",
    "\n",
    "Draw an enclosing square that is controlled by the cursor position.\n",
    "\n",
    "Copy the code from above into the cell below. In the draw() function, after the semi-transparent rectangle, but before the dots, draw an unfilled square that encloses the cursor on screen. So, calculate the distance of the cursor from the center of the screen and save this in local variable dist. Then draw a square on the canvas that is centered on the canvas, and has width and height twice the distance of your cursor from the center.  To do this you will need to calculate values for local variables squareLeft and squareTop (the left side and top side of the rectangle, which are the first two parameters to rect()). The last two parameters for the rect() call should be dist * 2. Make the square unfilled, with a white outline.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_6\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_6\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_6\");\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_6\");\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_6\">\n",
       "  <b>Sketch #6:</b><br/>\n",
       "  <canvas id=\"canvas_6\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_6\">\n",
       "  <button id=\"run_button_6\" onclick=\"startSketch('6');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_6\" onclick=\"pauseSketch('6');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_6\" onclick=\"setupSketch('6');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_6\" onclick=\"drawSketch('6');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #6 state:</b> <span id=\"state_6\">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 the code from above and then make the dots do a random walk around the screen\\n/** \\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    \\n    float dist = sqrt(sq(mouseX - width/2) + sq(mouseY - height/2));\\n    float left = width/2 - dist;\\n    float top = height/2 - dist;\\n    stroke(255);\\n    noFill();\\n    rect(left, top, dist*2, dist*2);\\n    \\n    \\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, left);\\n    dotX = min(dotX, left + dist*2);\\n    dotY = max(dotY, top);\\n    dotY = min(dotY, top + dist*2);\\n    ellipse(dotX, dotY, dotSize, dotSize);\\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_6\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_6\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_6\", 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_6\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_6\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_6\", 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_6\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_6\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_6\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_6\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_6\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_6\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_6\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_6\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_6\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_6\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_6\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_6\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_6\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_6\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_6\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_6\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_6\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_6\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_6\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_6\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_6\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_6\"), 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 then draw an empty square centered on canvas, enclosing the cursor\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Step 5 - Keep dots in enclosing square**\n",
    "\n",
    "**SWITCH WHO IS CONTROLLING THE KEYBOARD - GIVE THE COMPUTER TO YOUR PARTNER**\n",
    "\n",
    "Your final task is to edit the lines of code that use max() and min() functions to keep the dots on canvas. Edit these lines so that the dots stay within the user-controlled square. Copy the code from above and make those changes.\n"
   ]
  },
  {
   "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 change the max() and min() calls for the dot locations \n",
    "// so that instead of staying within the canvas, they stay within the enclosing square"
   ]
  },
  {
   "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
}