ok so where where where is your head at
I'm not really sure but maybe now you have a sense of
okay I kinda get what programming is
I've gotta write instructions with a specific syntax
and I could choose all these different languages and all these different
environments for different kinds of applications and
for different operating system and for different hardware but here
we're going to use Processing. what advantages does
processing give us what kinds of things can we make with processing what is the
lens that we're gonna look through
to learn the fundamental concepts a programming this is key
we're not I'm not it's not my intention here for you
to learn processing it's my intention for you to learn
the fundamental tools of computation we're going to use processing as the
environment to learn those tools
but those tools those concepts will go across
any programming language environment that you choose to use in the future
so why- as I said processing we- it's a thing we download
we can open it- one of the first things you might do yourself
and I'll kinda do this for you is take a look through the examples
so you can see here there's a little window that you can pop up
that has examples
and you can kinda look through look these basics and some of these basic things
will give you a sense of
what is processing doing. you can learn about color, you can learn about form,
you can learn about math
so if for example I just go here and lets say we wanna learn about hue
with processing I can run this particular example
and you can see that what it's doing here is as I move the mouse back and
forth across the screen
its changing the hue of the color that I'm drawing
so there's a range of examples and you'll notice these examples, generally speaking
have a visual design component so
if you're interested in design, animation,
images, creative applications of software,
processing is a good environment to explore ideas in that area
Umm another thing and I'm just gonna kinda give you a quick range
as you look through you might start to look through a lot the examples
under topics:
and one of the ones that's sure dear to my heart that you might look at is OK
simulate so there's a lot of nice examples we can look at
this idea on what- of simulating
physics elements through processing you can see there are some circles on the screen
as I click them and move them with the mouse
- my head is always- clearly this is very poorly
what I'm doing here. Umm they there they have this
spring-like motion so one of the nice things about processing is there's a-
when you downloaded it, there's a wide range examples and to get a sense of
what can I do, what are some ideas of things I might try to make: you could
you could spend a whole day just clicking through
and running all of the examples
Umm the other thing that I would just mention is that processing
has a in addition to the sort of 2d drawing engine which allows you to draw
simple and and kinda complex shapes and animations in 2d
you can do a lot of stuff in three dimensions as well
I guess I'll just open up this one called Planets
and we can see here's a nice- Whoo this is beautiful! I'm going to have to use this
for something,
but here we can see, err this err, nice
little demonstration of how you can do 3d rendering in processing as well
err
and you can see, you can do, all sorts of different kinds of camera stuff, lighting stuff, textures:
all things that you might find in a 3D computer graphics environment
that' what you can do
and you can do with the processing environment as well so
this is- I just closed everything
that is the examples- the other thing, it's just something else I really want to
mention about processing
so okay so here's something I kinda should have might have wanted to mention,
we have this
a show like crazy list of all these programming languages that I was kinda
saying aaah,
okay, so here we're using processing and one thing you might think it's like
oh is it just
processing, it like this toy environment that I can kind of just do a little like experimental
ideas in buit can't really make
a a large-scale projects with; so one of the things that I like about processing is
both its ability to allow you to
get started very quickly and learn the basics but also you can build fairly
large scale sophisticated projects in it
and one of the reasons for this is, is that you aren't learning the processing language-
yes you're using the oppressing environment
yes there is a a set of processing functions
that are that are that are needed for processing itself but really the language a
that you're writing
code in is Java, now Java is probably about right now, and I refer to the era that we live in,
2013, it's probably like the least cool thing you can learn like
it's much cooler to learn JavaScript or ruby and and there's lots of great stuff
you can do; i mean
javascript is especially on the web now and, erm canvas and webGL
all this amazing stuff that I also encourage you to learn but
there is an advantage to using Java or the fact that processing is built on top of
Java, er, you know Java is kinda
in many ways I i've heard this said about Java err
something silly, but, it's not the best
language for anything but it does
everything, so if there's anything you're thinking about doing,
if you are you wanna like read your email
into your processing program and then draw little bubbles on the screen
for every email you've received
or you want to connect to the Microsoft Kinect
or you want to use err this physical piece of this hardware
you want to use the sensor
erm, you can really do just about anything you'll find a java library out there
for just about anything so processing because it's built on Java
is incredibly extendable through libraries
now what are these libraries and you can see I'm into
if I go back to that examples window erm,
looking through those examples topics I could go down to start to look at
you want to use the libraries
one which i'll just demonstrate really briefly to you right now is video
so under capturei'm gonna look at er, one of these
examples; gonna run this mirror example
and I think this will work
err, its effect we should edit
it's taking a minute or so here we can see a look what's interesting is this is
a green screen so you can see the green wall in the actual camera
so the camera here is reading my image so processing can connect to pieces of
hardware through libraries, can connect to your camera
and what this example is doing is it's taking every single pixel from a regular
good old-fashioned image
and instead of drawing that pixel as a
a a- drawing that pixel as a rectangle on the screen rotated according to the
brightness or something
so you can see that we can create this abstract visualization of the data
the color data that's coming in from a camera this is, err, something we'll
explore in great detail
in a future video how to write these kinda examples how to capture images
how to read pixels, how to draw stuff based on those pixels; so
be- the video library is something that comes with processing when you download it
but processing itself has a huge, has a large community of people making
libraries and I downloaded one an arbitrary one
called the Yahoo weather library we can tell, just open up this example
erm, this library allows you to connect
to Yahoo- Yahoo weather data
and you can see here that this processing sketch
has grabbed the weather information from the city of berlin, it's fair, the wind
direction is three
10 which must maybe is a err, angle!
and, erm, and the wind speed is a eight kilometers kilo-
kilometers- I became French, so kilometers per hour
so you can see then this others these particles these dots that are drawn on the screen
that are moving according to that wind direction: so
connecting to data sources there if you have an idea for something and processing
doesn't do it
if you can write the Java code for that you can make it into a library and you
can do it in processing so
the processing is tremendously extendable through all sorts of libraries,
if you want to get a sense
up what the available libraries are for you, er,
if we go back to the processing website waa- and go to libraries
you can see there is a nice list of tons and tons
libraries and you can also get them, which I-I- this is err,
through, err, through this library manager that comes with
processing software itself so we can go through this list of
libraries and if I want this library which is
a lightweight library for creating animations and trans-
transitions I can click Install and it will install that library I can use it
in my code- okay! so this is kinda
at least a little bit of, erm, me getting started showing you-
okay! here's the process development environment. here are
some the examples, here some libraries, here's the kind of things that can do
and next thing I wanna kinda briefly look at
is just a quick range of some projects
that have been made with processing to get you thinking about
looking at erm, larger-scale installations and animations and and
things that people are doing
the first project I'm going to show you what's called Chronograph by Casey Reas, one of the
creators of processing and
Tal Rosner, I apologize if I've pronounced the name
here incorrectly, erm, this is a project
which I'll skip to the end here to just show you this
time-lapse. you can see this is a projection piece
that's projected onto the side of this building which is
New World Center in Miami Florida for the New World Symphony so
this is the time lapse of the piece running, this is showing it more quickly but
you can see this idea of
abstract visuals projected on the side of the building
this is all generative, procedural this is a piece of software
that generates this content
that's projected on the side of a building, this is something that's done a lot with
Processing, erm, I, a
I teach a class here at ITP where the students create work
for a large video wall
erm, here are a couple of examples of projects. there, this is a project called Beluga
I'm skipping the sound but this was a dance performance and
you can see that there are these dancers that are moving and jumping on tramp-
trampolines. this a hundred twenty foot wide video wall, it's about
twelve feet high and the visuals, regenerative. this
seascape and they responded to the movement's of these dancers who were
bouncing up and down
on trampolines. so this was actually, er, it's using processing but there are three
separate computers running three processing sketches
each controlling a section of the video wall so even these types of
large-scale 3d
performance graphics for performance are made with processing; another example
of this for the same space; this is a project called replica
which here
there was a dancer live in the space with the camera pointed at her
and her image was then a projected onto the wall
and manipulated with a bit- series of different kinds
of time-based effects and there's music, the dancer
and all happening in real time; all happening live
okay I'm realizing I'm forgetting to mention people's names but
I will- erm, there'll be links below where you can find out the- the wonderful people who
made some of these projects so
another thing that processing is used a lot for is for
motion graphics. this is a great project by Molly Schwartz where she did an animation
about eels; now err, called err, Bellyful of Eels; if you look at this a lot of this
is done with After Effects,
err, but here in in in this particular part of the
the err, animation, these eels that are actually swimming through this
underwater pipe sewer like space; those were actually made in processing
rendered out from processing
and incorporated into a larger animation project and
there are lots of wonderful examples music videos that have been made
with Processing
or different types of elements that you wouldn't want to
hand animate, that need an algorithmic, generative process to,
whether it's behaviors or repetition,
were done with code, with Processing
okay another, another co-
like popular use of processing is for data visualization
a I'll show you a well-known project by Jer Thorpe
This here is a visualization it's grabbing
data from Twitter and looking for people who said, you know
who are very excited about the fact that- just landed in Hawaii, for example
so anyone who posted 'just landed Hawaii' if it was me- I wish I would have gone to Hawaii,
I've never been there-
but erm, my home location on Twitter will be New York
Jere - the project parses out
the locations New York and Hawaii and the time that the tweet was posted
and draws a, this kinda arc path from
the original location to the landing location so its a visualization of people posting on Twitter
about their flight and you can see different views there's this kind of
like horizontal view now
it's spinning around, all this is done through code
through an algorithmic process to visualize this data
and you can see kinda
ah, well you can't really see that but ah,
up here at the top left um this timescale showing where we are and
this er, ah where we are in time. so this is a a great use of processing and it looks like oh
my goodness this very like complicated crazy 3d- how I could ever possibly
learn how to do this;
we're going to start with some very basic things like how to draw a circle how to
move a circle
this is really just doing that also is just lots of circles,
a little bit of 3d, the- what's happening with those circles is controlled by data
so all this stuff is possible through learning the
foundations of programming and a a little bit about how to draw- do stuff
with computer graphics as well.
ah, so I'll I'll- this is a great project by Mary Wong
if you're interested a lot of
wonderful work is being done with processing to create physical so if you
want to print design
I would a checking out the work of Rune Matthiesen and err,
course he teaches call Printing Code, there's a tremendous suite of examples of
using computation
to generate print designs, err, this is a project that Mary
Huang made to create a, err, fashion designed
through, through a generative process so you can see here, the mouse
- this is a Processing sketch running-
with the mouse able to draw over the figure of the human form
and that and that what the mouse is drawing is that
a mated to geometry, which is used to generate the,
the design for a dress and Mary actually created these dresses and
physically fabricated them and wore them as well and so
a lot of stuff can be is being done processing in terms of, erm
take a look at the work at nervous system,
I'll include a link to that as well
for making jewelry designs you can print stuff- you can generate stuff for a
maker bot with processing to do 3d printing
this is something that you could explore a as an application
that you might
an idea you might do throughout if you're following along
with all these videos
also doing- a creating a
a physical computing interfaces; this is a project
called the mud tub um which
kinda answers that question what's the thing that you might want to get
least near your computer- a big pile mud, this is by Tom Gerhard,
on and so this is also kind of interesting to say like
what you're learning here might not might not need
to make something that has this really obvious practical like-
I wanna make an app, and I wanna like sell billions of them become a
zillionaire which actually is
would be nice, but you know anyway there's more to life than
selling your apps, but err, this you can see here
there's a projection on this tub of mud which is
the graphics that's being output
is done through processing and processing is reading
the sensors that are coming back in um from the mud
err, there's actually sensors underneath the mud that's measuring the weight of the
mud at any
point which allows the the software to read the topology essentially of the mud
and you can see the mud becomes this controller where
you with your hands you can kind bounce this ball around if I
kinda skip to the end here you can see you can kinda play this
game here on a separate screen by pressing on the mud
so this idea of making your own physical computing device
your own interface a tub of mud; another great example of this
is err the scrollable project; I'll just show you err
this is by Filippo Vanucci and you can see here is his processing
ah, shoot!
which I think, here is his processing sketch which
if you look at it, makes this nice ink effect
so he's created this a sketch
and if I click around here you can see it draws a bunch of dots and it makes this
animation that has this ink like quality to it
so what did he use this process sketch for? he used it to project onto paper
and he built sensors to measure how
what that paper's doing. this will become much more obvious when I show you it in a
project called scrollables.
and you can see these are these devices that you can scroll the paper and I'll
just skip ahead here
by scrolling back and forth you can control and animation so of course we're
all familiar with touchscreens
a but here we had this physical device
which has real tactile tangible quality. because real paper that you're scrolling and you
can see as you scroll back and forth
you can play for example the game pong and this ink effect was created through
an algorithm in processing and/or a
and control through the physical interface so
you know this is very very, err, a really really quick and dirty kind of- I don't
know if I missed anything
key that I wanted to show you really kinda quick and dirty,
just quick range of projects that
were made in Processing. I would also encourage you to
on the processing website at
to go take a look at the exhibition so if you look at the exhibition link
there is a ton of projects that you can see historically you can actually go
it's
and you can actually go all the way back if on the bottom here
oh boy,
this is getting awkward - at the bottom here if you click on
number one you can actually see stuff that was posted for the process exhibition
from
over 10 years ago
so this is there's a if you want to kind of get a sense that the landscape of
what this processing do what are the kinds of things that I'm going to learn
you could walk yourself through the examples you can look at a bunch of projects that
are made with processing but
ultimately the rest of these videos are going to very
slowly by slowly piece by piece walk you through the fundamentals of programming
through a whole lot of graphic examples and processing and that will help you
generate ideas
and things that you want that you might wanna make and that
really well hopefully one more introductory video to make
and that is a video where I'm just going to talk through kind of the table of contents
everything we're gonna go through you could call it a syllabus if you want to
but I'm kind
of afraid to do that. so I'm gonna kind of just give you a quick overview I think this
I'm kinda having a problem with this is that in the last one to a bit too long
so
and give you a quick overview all the fundamentals are going to learn
and then we're just gonna dive right in and get started