\n", " Sketch #1:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "// Global variables: \n", "// defined here, used in setup() and draw()\n", "\n", "float x;\n", "float y;\n", "\n", "void setup() {\n", " size(200, 200);\n", " x = width/2;\n", " y = 50;\n", "}\n", "\n", "void drawBall(float x, float y, int w, int h) {\n", " fill(255, 0, 0);\n", " ellipse(x, y, w, h);\n", "}\n", "\n", "void draw() {\n", " drawBall(x, y, 10, 10);\n", "}" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Nothing too interesting there. I did use the special variables `width` and `height` that are automatically defined to be the size of the canvas. But other than that, it is just a picture of a red ball sitting quietly in space." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Brownian Motion" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Let's try a slight variation. Do you know the idea of [Brownian Motion](http://en.wikipedia.org/wiki/Brownian_motion) (sometimes called _particle theory_). This is basically just the idea that small objects will randomly move because they are hit will atoms or molecules. \n", "\n", "**Warning**: _I did not say \"Brownie in motion\"... that is a small chocolate treat that is on the move._\n", "\n", "We can simulate Brownian Motion by simply moving the ball a little left, right, or stay in the same place. We use the fact that `random(2) - 1` represents either a -1, 0, or 1." ] }, { "cell_type": "code", "execution_count": 10, "metadata": { "collapsed": false }, "outputs": [ { "data": { "text/html": [ "\n", "\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "name": "stdout", "output_type": "stream", "text": [ "1.8257991019485953\n", "0.6388284903246306\n", "1.8374085991016196\n", "1.4968469794203065\n", "1.202652726209918\n", "0.27141170253131275\n", "1.3101816043198309\n", "1.178512733650588\n", "1.769124800374796\n", "0.7704968113940065\n" ] } ], "source": [ "%%processing\n", " \n", " \n", "for (int i = 0; i < 10; i++) {\n", " println(random(2));\n", "}" ] }, { "cell_type": "code", "execution_count": 12, "metadata": { "collapsed": false, "format": "column" }, "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": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #10:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "// Global variables: \n", "// defined here, used in setup() and draw()\n", "\n", "float x;\n", "float y;\n", "\n", "void setup() {\n", " size(200, 200);\n", " x = width/2;\n", " y = width/2;\n", "}\n", "\n", "void drawBall(float x, float y, int w, int h) {\n", " fill(255, 0, 0);\n", " ellipse(x, y, 10, 10);\n", "}\n", "\n", "void draw() {\n", " drawBall(x, y, 10, 10);\n", " x += random(2) - 1;\n", " y += random(2) - 1;\n", "}" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "It looks like the ball is moving randomly about, doesn't it. You can make the effect even stronger by clearing the background before you redraw the ball:" ] }, { "cell_type": "code", "execution_count": 13, "metadata": { "collapsed": false }, "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": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #11:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", " Sketch #18:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "float vx;\n", "float vy;\n", "\n", "float x;\n", "float y;\n", "\n", "float dt; \n", "float t;\n", "\n", "void setup() {\n", " size(200, 200);\n", " x = width/2;\n", " y = 50;\n", " dt = 0.1; \n", " t = 0;\n", " vx = 10.0;\n", " vy = 0.0;\n", "}\n", "\n", "void drawBall(float x, float y, int w, int h) {\n", " fill(255, 0, 0);\n", " ellipse(x, y, 10, 10);\n", "}\n", "\n", "void draw() {\n", " background(0, 255, 0);\n", " float dx = vx * dt; \n", " if (((x + dx) > width/2) || ((x + dx) < 0)) {\n", " vx = vx * -1;\n", " } else {\n", " x = x + dx;\n", " }\n", " \n", " float dy = vy * dt;\n", " if (((y + dy) > height/2) || ((y + dy) < 0)) {\n", " vy = vy * -1;\n", " } else {\n", " y = y + dy;\n", " }\n", "\n", " drawBall(x, y, 10, 10);\n", " \n", " t = t + dt;\n", "}" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Gravity" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Now, the final step: let's add gravity. At each timestep, we'll add a gravity component to vy. Over time, that will get bigger and bigger." ] }, { "cell_type": "code", "execution_count": 26, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", " var component = document.getElementById(\"sketch_23\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"state_23\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"controls_div_23\");\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_23\");\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": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #23:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "float g = 9.8; \n", "\n", "float vx;\n", "float vy;\n", "\n", "float x;\n", "float y;\n", "\n", "float dt; \n", "float t;\n", "\n", "void setup() {\n", " size(200, 500);\n", " x = width/2;\n", " y = 50;\n", " dt = 0.1; \n", " t = 0;\n", " vx = 5.0;\n", " vy = 0.0;\n", "}\n", "\n", "void drawBall(float x, float y, int w, int h) {\n", " fill(255, 255, 255);\n", " ellipse(x, y, w, h);\n", "}\n", "\n", "void draw() {\n", " background(0, 0, 128);\n", " // gravity\n", " vy = vy + g * dt;\n", " \n", " float dx = vx * dt; \n", " if (((x + dx) > width) || ((x + dx) < 0)) {\n", " vx = vx * -1;\n", " } else {\n", " x = x + dx;\n", " }\n", " \n", " float dy = vy * dt;\n", " if (((y + dy) > height) || ((y + dy) < 0)) {\n", " vy = vy * -1;\n", " } else {\n", " y = y + dy;\n", " }\n", "\n", " drawBall(x, y, 100, 100);\n", " \n", " t = t + dt;\n", "}" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Dampening" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "That is weird... it keeps bouncing! We probably want to lose a little bit of energy each time it \"hits something.\" We merely don't give the full amount when we change directions." ] }, { "cell_type": "code", "execution_count": 27, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", " var component = document.getElementById(\"sketch_24\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"state_24\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"controls_div_24\");\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_24\");\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": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #24:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "float g = 9.8; \n", "\n", "float vx;\n", "float vy;\n", "\n", "float x;\n", "float y;\n", "\n", "float dt; \n", "float t;\n", "\n", "void setup() {\n", " size(200, 500);\n", " x = width/2;\n", " y = 50;\n", " dt = 0.1; \n", " t = 0;\n", " vx = 50.0;\n", " vy = 0.0;\n", "}\n", "\n", "void drawBall(float x, float y, int w, int h) {\n", " fill(255, 0, 0);\n", " ellipse(x, y, 10, 10);\n", "}\n", "\n", "void draw() {\n", " // gravity\n", " background(255);\n", " vy = vy + g * dt;\n", " \n", " float dx = vx * dt; \n", " if (((x + dx) > width) || ((x + dx) < 0)) {\n", " vx = vx * -0.8;\n", " } else {\n", " x = x + dx;\n", " }\n", " \n", " float dy = vy * dt;\n", " if (((y + dy) > height) || ((y + dy) < 0)) {\n", " vy = vy * -0.8;\n", " } else {\n", " y = y + dy;\n", " }\n", "\n", " drawBall(x, y, 10, 10);\n", " \n", " t = t + dt;\n", "}" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Interactivity" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Nice! Now let's drop the ball with the mouse:" ] }, { "cell_type": "code", "execution_count": 28, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", " var component = document.getElementById(\"sketch_25\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"state_25\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"controls_div_25\");\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_25\");\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": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #25:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "