![Page 1: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/1.jpg)
hacker101/102
code4lib 2010 preconferenceAsheville, NC, USA 2010-02-21
![Page 2: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/2.jpg)
i. intro
why are we here?
![Page 3: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/3.jpg)
learn to hack?
![Page 4: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/4.jpg)
...not exactly
![Page 5: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/5.jpg)
we work in librariesso we can
help people
![Page 6: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/6.jpg)
we hack to help ourselves
help others
![Page 7: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/7.jpg)
what’s a good hacker?
![Page 8: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/8.jpg)
languages?standards?
jargon?math?logic?
frameworks?
![Page 9: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/9.jpg)
nope!
![Page 10: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/10.jpg)
a good hackerknows
when to ask for help
![Page 11: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/11.jpg)
a good hackerknows
how to ask for help
![Page 12: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/12.jpg)
a good hackerknows how
to help other hackers
![Page 13: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/13.jpg)
a good hackerknows other hackers
to ask for help
![Page 14: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/14.jpg)
when to askhow to ask
how to answerwhom to ask
![Page 15: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/15.jpg)
i’m herebecause i want
to be able to ask you
![Page 16: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/16.jpg)
when to ask?
![Page 17: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/17.jpg)
thirty minute rule
![Page 18: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/18.jpg)
for today:three minute rule
![Page 19: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/19.jpg)
how to ask?see “How to ask
questions the smart way”
![Page 20: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/20.jpg)
we’ll get startedtogether
![Page 21: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/21.jpg)
basics in Processingregexes in JavaScript
glue it together in Python
![Page 22: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/22.jpg)
explore on your own
![Page 23: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/23.jpg)
get comfortableasking for help
![Page 24: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/24.jpg)
ii. the basics
Processing
![Page 25: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/25.jpg)
canvas, grid, points
![Page 26: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/26.jpg)
200
400
300200
![Page 27: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/27.jpg)
lines, rects, ellipses
![Page 28: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/28.jpg)
start
end
![Page 29: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/29.jpg)
syntax, functions, errors
![Page 30: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/30.jpg)
don’t be afraidto break stuff
![Page 31: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/31.jpg)
variables, loops
![Page 32: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/32.jpg)
test
initial value
type “integer”
increment
repeatingactions
![Page 33: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/33.jpg)
every lang has loops
• for (a=blah, a<foo, a=a+bar) {...}
• for each (foo in blah) {...}
• for i in range(20): ...
• while (foo != bar) do {...}
• next, continue, break
![Page 34: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/34.jpg)
more variables, loops
![Page 35: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/35.jpg)
even more variables, loops
![Page 36: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/36.jpg)
explore on your own
![Page 37: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/37.jpg)
iii. functions, objects,the main loop
![Page 38: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/38.jpg)
why functions?
![Page 39: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/39.jpg)
setup, draw, void
![Page 40: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/40.jpg)
function structure
RETURN_TYPE FUNCTION_NAME ([var a, ...]) {...statements...}
![Page 41: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/41.jpg)
setup, draw
•void: returns nothing (into the void!)
•setup: prep stuff
•draw: the “animation loop” or “main”
![Page 42: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/42.jpg)
different kinds of “main”
• Processing: draw() is like an animation “cell”
• in a GUI: the user feedback loop
• command-line app: parse args, then main()
• web app: the user feedback loop
![Page 43: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/43.jpg)
setup, draw, void
![Page 44: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/44.jpg)
we canwrite this better
![Page 45: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/45.jpg)
setup, draw, void
![Page 46: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/46.jpg)
see the problem?
![Page 47: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/47.jpg)
setup, draw, void
![Page 48: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/48.jpg)
DRYDon’t Repeat Yourself
![Page 49: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/49.jpg)
a littlebetter
![Page 50: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/50.jpg)
moretask
specific
![Page 51: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/51.jpg)
adddelay(10);
![Page 52: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/52.jpg)
nowtry this
initialization
no loop!
if/elsei.e.
“conditional”
![Page 53: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/53.jpg)
•draw() is already a loop; why another?
•“i” becomes state
•tightens up draw()
![Page 54: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/54.jpg)
what about objects?
![Page 55: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/55.jpg)
objecti
fied
![Page 56: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/56.jpg)
• it says what it is
• it removes a lot of repeated noise
• it’s kinda overkill here
•we don’t use rp1 and rp2 again
![Page 57: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/57.jpg)
• design a matter of taste
• sometimes things should be called what they mean
• sometimes an “int i” is just an “int i”
• think about what you’ll understand later
no single answer
![Page 58: Hacker 101/102 - Introduction to Programming w/Processing](https://reader033.vdocuments.net/reader033/viewer/2022061210/54905f6cb47959302b8b4623/html5/thumbnails/58.jpg)
explore on your own