In-class slides from Tuesday, August 2.

1. THE TEAL EDITION
LIZ RUTLEDGE
rutle173@newschool.edu
esrutledge@gmail.com
cell phone: 415.828.4865

2. about me.
in 60 seconds or less.
where I’m from: most recently = San Francisco
other places I’ve lived in my lifetime = Southern California,
Connecticut, Western Massachusetts, New Jersey, Hawaii
my academic boarding school + Princeton for undergrad—majored in
background: Economics + Finance (barf) but kept developing my visarts on
the side
the meandering path burned out, turned down a Finance gig, studied random fields
after graduation: in the visual realm for a while (no joke, I even got a Certificate
in Interior Design) and eventually ended up working for my
dad doing econ research + web design.
the aggressive lateral finally found code, applied to some programs blending visual
career shift: design with tech, and landed here at Parsons. (double yay)
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011

3. what i do.
a few quick examples of what I do
here at Parsons
a few snippets of my NYTimes Data Visualization (Processing Sketch +
code-related work: JSON + PHP + NYTimes API)
Box Office Economics
(Processing JS/Javascript+HTML/CSS+PHP/MySQL)
Time Visualization (Processing)
VisualMUSE (Processing, PHP/MySQL, HTML/CSS,
Flickr API)
a peek at some totally Iris+Olivia—tech accessory accessories
unrelated work: for the fashionable she-geek
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011

4. the reading.
Charles Petzold CODE
Casey Reas, Chandler McWilliams FORM + CODE
CODE: FORM + CODE:
thinking about code as just another algorithms are simply a set of instructions
method of communication based on certain assumptions
BINARY—the root of all computer when speaking to a person, can assume
code (hugely important!) the other person’s ability to interpret
ambiguous communication through
NOT JUST ONES AND ZEROS— context and experience.
anything in life can be binary! ‘yes or
no’, on or off, light or dark, raised or COMPUTERS ARE STUPID. when
lowered...all examples of everyday “speaking to” a computer, these
experiences with binary situations assumptions are limited.
BRAILLE, MORSE CODE—an EXAMPLE: an everday algorithm
extension of binary relationship, just translated into computer speak (PB&J,
adding complexity brushing your teeth)
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011

5. what is code?
and what can you do with it?
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011

6. javascript.
make super sweet interactive web projects.
CHROME EXPERIMENTS + OK Go All Is Not Lost
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011

7. HTML5+CSS3+Javascript.
= awesome.
REVEREND DANGER (Featuring MFA D+T alum Chris Driscoll!)
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011

8. OpenFrameworks.
a framework built on top of
C++ that helps you create some
ridiculous interactive projects
AUTO SMILEY
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011

9. OpenFrameworks.
a framework so nice
you have to see it twice.
NIKE+ PAINT WITH YOUR FEET
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011

10. OF + ComputerVision.
one step closer to
machines taking
over the world.
REFACE
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011

11. Processing!
an open source visual coding language, IDE
and community, created by Ben Fry
BEN FRY
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011

12. Processing!
examples of sweet interactive projects by
Jer Thorp...created in Processing!
JER THORP
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011

13. resources.
some good places to look for inspiration
and/or help for your coding exploits
OPEN PROCESSING http://www.openprocessing.org/
CREATIVE APPS http://www.creativeapplications.net/
FORM + CODE http://formandcode.com/
PROCESSING EXHIBITIONS http://processing.org/exhibition/
PROCESSING JS http://processingjs.org/
GOOGLE (is your friend) http://lmgtfy.com/?q=sweet+processing+sketches
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011

14. so like...what is
what does it look like? and how
the hell do I use it?
Processing?
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011

15. the IDE.
Processing has its own native lightweight IDE
(Integrated Development Environment)
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011

16. buttons!
the buttons they give you and what they do.
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011

17. the basics.
how to set up your Processing sketch.
the sketch
the setup() and draw() loops
the flow of code
the cartesian grid
in-class example: let’s change the background color and
draw a square!
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011

18. a complex [yet simple] example.
http://www.openprocessing.org/visuals/?visualID=30258
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011

19. making it do something.
the console
print() and println()
good commenting practices!
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011

20. homework! (hoorayyyy!)
post your code to our OpenProcessing Classroom (http://openprocessing.org/
classrooms/?classroomID=768)
post a link to your OpenProcessing submission as a comment on the blog
(I’ll make a post for each assignment to reiterate the requirements and keep things
grouped together)
email or IM with questions—I’ll do my best to get back to you quickly!
you CAN work with other students, but you must make it clear who you
worked with and EACH person must submit the work
due at 8:55 AM (7:00 AM if you want your work shown off in class)
BE CREATIVE! Seriously, this is an MFA program. Use sophisticated color
palettes and create pleasing designs whenever possible.
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011

21. the assignment.
due tomorrow bright and early!
find your favorite poem (or write your own if you’re
feeling festive)
print the poem to the console (with proper line breaks
and formatting) using the print() and println() functions
we learned in class
extra credit: research how to print the entire poem out in one
function call using escape characters to create line breaks and tabs
DAY 2
Tuesday, 2 Aug 2011
CODE
bootcamp 2011