Interactive Grids

Create an interactive grid!

1. Create a grid of a city, a floorplan or an elevation.
2. Make sure one row or column of your grid changes to a different size.
3. Nest a grid inside of your grid to add more complexity!
4. Find a way to make your grid interactive!

Requirements

• Use a while loop

i = 1
while i < 6:
    print(i)
    i += 1

• Use a for loop
• Use a logical operator

and #Returns True if both statements are true  
or #Returns True if one of the statements is true
not #Reverse the result, returns False if the result is true

• Use interactivity with mouseX mouseX and mouseY mouseY
For more help, use this post on Interactivity or this post.

Posting to Medium

1. Click the 3 dots at the top of the page. In the drop down menu, select “Add to Publication”. Select “Data Mining the City”.
2. Click the green “Publish” dropdown at the top of the page. In this drop down you will need to add a tag “Research”. Then click “Publish”.
3. After your publication is posted, Quentin and I will need to accept the draft. Once its accepted in will appear on the “Research” page of the Publication.

What to Post

• title — Name your grid and what it is: i.e. city, floor plan, elevation, etc
• image —sketch of what you are trying to make
• text — short description of the rules you are making
• image or gif — your Processing canvas
• code — post your code in a code block like this (use 3 back tics `` ` ):

#this is where your code should go

Simple Grid Example

size(900,1000)
x = 80
y = 60
squareSize = 60
spacing = 10
for column in xrange(0, 10):
    for row in xrange(0, 10):
        if column == 2 and row == 7:
            fill(0, 255, 0)
        else:
            fill(255)
        rect(x + column * (squareSize + spacing), 
             y + row * (squareSize + spacing), 
             squareSize,
             squareSize)

Bonus

• Use an image!
• Use a Sprite (from the Interactivity Tutorial)

Inspirational Examples

Python Processing Video Tutorials to Help

Interactive Mouse — Fill in Grid Cells

Minesweeper

Former Student Project Using Images in a Grid

Former Student Project with Hidden Grid

Color Grid Animation Change

3d cubes