test

mytest

{
 "metadata": {
  "name": "",
  "signature": "sha256:0dbb5712511c9547220ca653041ee2e91b156b32c0ee2bef942f71509181d646"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "A short Besides Blocks <i>Snap!</i> to Python Module"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Previously in <i>Snap!</i> we have been used to programming with sprites. We will do something similar to help bridge your understanding of how computational thinking can be realized either in <i>Snap!</i> or python.\n",
      "\n",
      "Now let's start with some basics of python using something we are already familiar with turtle graphics. Remember in <i>Snap!</i>, we had our sprite, and the sprite could move around the stage. We can do the same thing with python. To do this, lets start by importing the turtle package. But before we do that, we need to make sure that we are using the right version of python. For this class, the good folks at Beauty and Joy of Computing have decided that we should stick with python3.\n"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "import turtle\n",
      "wn = turtle.Screen()        # creates a graphics window"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 14
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "The python code brings in the turtle graphics package by using the keyword \"import.\" The turtle package is made up of a series of functions that allows the user to move a cybernetic turtle around in space. Very similar to alonzo in our <i>Snap!</i> environment."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "alonzo = turtle.Turtle()      # create a turtle named alonzo\n",
      "alonzo.forward(150)           # tell alex to move forward by 150 units\n",
      "alonzo.left(90)               # turn by 90 degrees\n",
      "alonzo.forward(75)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 15
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "You should see something like this in your window. <img src=\"images/image1.png\"> \n",
      "Now lets see if you can make a square ....\n"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "alonzo.forward(150)           # tell alonzo to move forward by 150 units\n",
      "alonzo.left(90)               # turn by 90 degrees\n",
      "alonzo.forward(150) \n",
      "alonzo.left(90)\n",
      "alonzo.forward(90)\n",
      "alonzo.shape(\"turtle\") # throwing this piece of code in there, changes the shape of the sprite"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 16
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<img src=\"images/image2.png\">\n",
      "Oops, I realize I need to clear my screen, but I don't know how to do it. Not to worry, we can learn all about all the functions that are associated with the python turtle package by typing \"Python Turtle Graphics.\" It should lead us to the python documentation found here https://docs.python.org/2/library/turtle.html. You should see something like the following below."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import HTML\n",
      "HTML('<iframe src=https://docs.python.org/3.2/library/turtle.html width=800 height=500></iframe>')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<iframe src=https://docs.python.org/3.2/library/turtle.html width=800 height=500></iframe>"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 17,
       "text": [
        "<IPython.core.display.HTML at 0x10b6ba190>"
       ]
      }
     ],
     "prompt_number": 17
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Ah, once I scroll down the page, I see there is a clear() command. Now I can clear my screen, and start all over again with making the square.\n"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "alonzo.clear()                # clear my screen\n",
      "alonzo.shape(\"turtle\")        # make the shape of a turtle\n",
      "alonzo.forward(150)           # tell alonzo to move forward by 150 units\n",
      "alonzo.left(90)               # turn by 90 degrees\n",
      "alonzo.forward(150) \n",
      "alonzo.left(90)\n",
      "alonzo.forward(150)\n",
      "alonzo.left(90)\n",
      "alonzo.forward(150)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 18
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "alonzo.clear()                # clear my screen\n",
      "alonzo.shape(\"turtle\")        # make the shape of a turtle\n",
      "for x in range (0, 4):\n",
      "    alonzo.forward(150)           # tell alonzo to move forward by 150 units\n",
      "    alonzo.left(90)               # turn by 90 degrees"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 19
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<img src=\"images/image3.png\">\n",
      "There we go. Now lets optimize the code by putting it into a for loop. If you have forgotten what that statement is, just google \"python for loops\" and you should be ready to go.\n"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Now that we have done that, lets make a more interesting visualization before we move on to more complex stuff. Lets make a fun starburst using turtle graphics. The code is included below. You should get an image like the one below. <img src=\"images/image4.png\">\n"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "#clear()\n",
      "#penup()\n",
      "from turtle import *\n",
      "shape(\"turtle\")\n",
      "color('blue', 'yellow')\n",
      "begin_fill()\n",
      "while True:\n",
      "    forward(200)\n",
      "    left(170)\n",
      "    if abs(position()) < 1:\n",
      "        break\n",
      "end_fill()\n",
      "\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 21
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Challenge time!"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "1) A more advanced block we made in Snap! was this block. Can you write the same block in Python?\n",
      "<img src=\"images/SnapLeaf.png\"  height=\"60\" width=\"200\"> \n",
      "\n",
      "\n",
      "2) Ready for an even greater challenge? Surprise - you can do recursion in Python too! Use the same ideas we used to make fractals in <i>Snap!</i> to build one in Python!"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "By the way, did you know that the guy who help invent the field of Artificial Intelligence created Turtle Graphics? His name is Seymour Papert and he has the most delighful book on computational thinking called <i>Mindstorms, Children, Computers and Powerful Ideas</i>. You can read it free on the web.\n"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.core.display import HTML\n",
      "import urllib2\n",
      "HTML(urllib2.urlopen('http://bit.ly/1Bf5Hft').read())"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<style>\n",
        "\n",
        "html {\n",
        "  font-size: 62.5% !important; }\n",
        "body {\n",
        "  font-size: 1.5em !important; /* currently ems cause chrome bug misinterpreting rems on body element */\n",
        "  line-height: 1.6 !important;\n",
        "  font-weight: 400 !important;\n",
        "  font-family: \"Raleway\", \"HelveticaNeue\", \"Helvetica Neue\", Helvetica, Arial, sans-serif !important;\n",
        "  color: #222 !important; }\n",
        "\n",
        "div{ border-radius: 0px !important;  }\n",
        "div.CodeMirror-sizer{ background: rgb(244, 244, 248) !important; }\n",
        "div.input_area{ background: rgb(244, 244, 248) !important; }\n",
        "\n",
        "div.out_prompt_overlay:hover{ background: rgb(244, 244, 248) !important; }\n",
        "div.input_prompt:hover{ background: rgb(244, 244, 248) !important; }\n",
        "\n",
        "h1, h2, h3, h4, h5, h6 {\n",
        "  color: #333 !important;\n",
        "  margin-top: 0 !important;\n",
        "  margin-bottom: 2rem !important;\n",
        "  font-weight: 300 !important; }\n",
        "h1 { font-size: 4.0rem !important; line-height: 1.2 !important;  letter-spacing: -.1rem !important;}\n",
        "h2 { font-size: 3.6rem !important; line-height: 1.25 !important; letter-spacing: -.1rem !important; }\n",
        "h3 { font-size: 3.0rem !important; line-height: 1.3 !important;  letter-spacing: -.1rem !important; }\n",
        "h4 { font-size: 2.4rem !important; line-height: 1.35 !important; letter-spacing: -.08rem !important; }\n",
        "h5 { font-size: 1.8rem !important; line-height: 1.5 !important;  letter-spacing: -.05rem !important; }\n",
        "h6 { font-size: 1.5rem !important; line-height: 1.6 !important;  letter-spacing: 0 !important; }\n",
        "\n",
        "@media (min-width: 550px) {\n",
        "  h1 { font-size: 5.0rem !important; }\n",
        "  h2 { font-size: 4.2rem !important; }\n",
        "  h3 { font-size: 3.6rem !important; }\n",
        "  h4 { font-size: 3.0rem !important; }\n",
        "  h5 { font-size: 2.4rem !important; }\n",
        "  h6 { font-size: 1.5rem !important; }\n",
        "}\n",
        "\n",
        "p {\n",
        "  margin-top: 0 !important; }\n",
        "  \n",
        "a {\n",
        "  color: #1EAEDB !important; }\n",
        "a:hover {\n",
        "  color: #0FA0CE !important; }\n",
        "  \n",
        "code {\n",
        "  padding: .2rem .5rem !important;\n",
        "  margin: 0 .2rem !important;\n",
        "  font-size: 90% !important;\n",
        "  white-space: nowrap !important;\n",
        "  background: #F1F1F1 !important;\n",
        "  border: 1px solid #E1E1E1 !important;\n",
        "  border-radius: 4px !important; }\n",
        "pre > code {\n",
        "  display: block !important;\n",
        "  padding: 1rem 1.5rem !important;\n",
        "  white-space: pre !important; }\n",
        "  \n",
        "button{ border-radius: 0px !important; }\n",
        ".navbar-inner{ background-image: none !important;  }\n",
        "select, textarea{ border-radius: 0px !important; }\n",
        "\n",
        "</style>"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 8,
       "text": [
        "<IPython.core.display.HTML at 0x10b6ba410>"
       ]
      }
     ],
     "prompt_number": 8
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}