Setting up Processing

1. Download Processing. Place Processing in the Applications folder on your computer (or Program Files for Windows). When you double click Processing, it should install and launch the application with a new empty sketch. A sketch is where you will write your code.
2. Once you’re in Processing, select the “Java” drop down in the upper right corner and select “Add Mode”. Select “Python Mode for Processing 3” and click “Install”. Once it has installed, close the window and change the “Java” drop down to “Python”. Now you’re in Python Mode, and ready to write Processing sketches using Python.

Make a version of your neighborhood!

Make a version of your plan from the in class exercise as a Processing Sketch. You can do this by drawing individual rectangles or circles, or you can create a sort of grid. Don’t over think it and just have fun making some shapes to start! If its too difficult to build a Processing Sketch that looks just like your image, don’t worry! Just build your own version. The point is to play and become more familiar with the computational logic.

Requirements

Your sketch should include:

1. Roads
2. Buildings
3. Parks

Your code needs to use:

• Comment — example only: #this is a comment
• Variables — example only: houseWidth = 100
• Fill — example only: fill(204, 102, 0) see color tutorial to find out more
• stroke — example only: stroke(204, 102, 0)
• strokeWeight — example only: strokeWeight(10)
• operator — example only: 50 * 5
• function — example only:

#make the function
def drawHouse(houseX, houseY, houseWidth):
   rect(houseX,houseY,houseWidth,houseWidth)       
#calling the function
drawHouse(5,5,40) 
drawHouse(55,15,40)

Bonus

• Add text to your neighborhood — this will require you to use a string — "Main St"
• Make something move!

Getting Started

def setup():
    #this is your canvas size
    size(500,500)
    background(0)
def draw():
    houseWidth = 100
    rect(5,5,houseWidth,houseWidth)

Cheat Sheets and References

• Find many shapes for Python Processing here!
• Python Basics cheat sheet
• The Processing Python Tutorials are helpful to give you a boosted start!

When you’re stuck

• Read the console log for errors
• Ask yourself, “do my variables need to be global?”
• Ask a friend

Here’s a more complicated example:

def setup():
    size(500, 500)
    fill(0)#this is black
    
    global road, blocksPerNeighborhood, blocksPerRow, blockLength, houseSetbacks, houseSize, houseQuantity
    
    road = 25 
    blocksPerNeighborhood = 9
    blocksPerRow = int(sqrt(blocksPerNeighborhood))
    blockLength = int((width/blocksPerRow)-road)
houseSetbacks = 9
    houseQuantity = 5
    houseSize = (blockLength/houseQuantity) - houseSetbacks
    
def draw():
    background(255)
    #make blocks
    for b in range(blocksPerNeighborhood):
        fill(0, 150, 50)
        stroke(50, 50, 50)
        strokeWeight(3)
        col = b % blocksPerRow
        row = b / blocksPerRow
        xCol = col*(blockLength+road)
        yCol = row*(blockLength+road)
        rect(xCol,yCol,blockLength,blockLength)
        
        #make houses
        fill(0)
        noStroke()
        h = -1
        
        while h < houseQuantity-1:
            h += 1
            rect(xCol+houseSetbacks+0,yCol + (h*(houseSize+houseSetbacks)),houseSize,houseSize)
            print(houseSize)

Posting to Medium

1. Sign up for a Medium account (its free).
   Click your profile image at the top right of the page and select “New Story”.
2. When you’re ready to publish, click the green “Publish” dropdown at the top of the page.
3. Next you will need to find your Medium username under settings>account. Add your username to this list so that I can add you as a writer on our publication.

What to Post

• title — Name your neighborhood
• image — of original sketch
• text — what were the “rules” in your plan
• image or gif — your Processing canvas showing your neighborhood
• code — post your code in a code block like this (use 3 back tics `` ` ):

#this is where your code should go

Bonus: Recording a Gif

There’s a number of ways to record a gif from your screen.
If you have a Mac:

• use Giphy Capture OR
• use Quicktime screencapture (keep it shorter than 10 seconds and a small portion of your screen)
• Trim the video in Quicktime to make it a smaller file
• turn the video into a gif using ezgif (you can also use Photoshop, but I feel this usually take too much time)

If you have Windows:

• Download a Screen Recorder of your choice.
• To install on school computers change the file type from .exe to .txt and move the file out of the downloads folder. Once your file is out of the downloads folder, change the file back to .exe and hit install. Sometime a firewall will prevent this, sometimes it seems ok.
• turn the video into a gif using ezgif (you can also use Photoshop, but I feel this usually take too much time)