\n", " Sketch #11:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "fill(0);\n", "text(\"This is a sketch\", 10, 15);\n", "text(\"You can write\", 10, 30);\n", "text(\"and draw:\", 10, 45);\n", "fill(255, 0, 0);\n", "ellipse(50, 75, 25, 25);" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Cells should be run sequentially, from top to bottom. You can get information on how to use the notebook for writing here: [Jupyter Notebook Users Manual](http://jupyter.cs.brynmawr.edu/hub/dblank/public/Jupyter%20Notebook%20Users%20Manual.ipynb).\n", "\n", "Tips:\n", "\n", "* You can press SHIFT+TAB after a name to get help on it\n", "* you can press TAB after a few letters to complete the variable or function \n", "\n", "You can create text with headings, styles, and even create equations, like:\n", "\n", "$$\\left(\\!\n", " \\begin{array}{c}\n", " n \\\\\n", " r\n", " \\end{array}\n", " \\!\\right) = \\frac{n!}{r!(n-r)!}$$\n" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## 2.2 Processing" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Processing is a programming language. You write programs as \"sketches.\" Each sketch goes into a Jupyter cell.\n", "\n", "The **syntax** of the Processing language is a subset of the Java programming language. After you write a sketch (a program) in Processing, there are a number of things that you can do with it:\n", "\n", "1. **compile it** and run it with Java\n", "2. **translate** it to JavaScript and run it\n", "\n", "We are doing number 2 here. Note that there are some differences between these two methods:\n", "\n", "* The Java version can use Java libraries (like robot control)\n", "* The Java version can create files, and do things on your computer\n", "* The JavaScript version runs in your web browser\n" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# 3. Sketch" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "There are two special functions: draw() and setup():\n", "\n", "* put code in setup() that is to be run once, at the start of your program. \n", "* put code in draw() that is to be run many times a second\n", "\n", "You don't have to use those two methods. For now, you can simply put code in the sketch outside of any function.\n", "\n", "Functions to explore:\n", "\n", "* size()\n", "* background()\n", "* point()\n", "* line()\n", "* triangle()\n", "* rectangle()\n", "* quad()\n", "* ellipse()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# 4. Draw by Numbers (DBN)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Here we will draw a circle in the draw() function by using the ellipse function.\n", "\n", "**What is a function?**" ] }, { "cell_type": "code", "execution_count": 1, "metadata": { "collapsed": false }, "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([\"http://cs.brynmawr.edu/~dblank/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", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #1:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "void draw() {\n", " ellipse(50, 50, 80, 80);\n", "}" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "We can make the canvas larger by using the size() function inside the setup() function. size **takes** a width and a hight as **arguments**." ] }, { "cell_type": "code", "execution_count": 2, "metadata": { "collapsed": false }, "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([\"http://cs.brynmawr.edu/~dblank/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", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #2:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "