hi this is a new set of videos all about
you can't wait to hear what this is
about loading images in processing
looking at the pixels of those images
what if those images are video images
coming from a live camera coming from
movie file what are the kinds of things
we can do to load display manipulate
process analyze images and pixel data in
processing so that's what this set of
videos will be about there's maybe going
to be somewhere between five and nine of
them and what we're going to do here and
this first one is just start with the
total and complete basics the very first
thing we need to do in processing to
display an image on the screen is have
some sort of variable that can store a
reference to all the information
associated with that image the variable
that we're going to need we're going to
need is going to be of type P image P
image P image is a new data type I mean
you've probably seen it before maybe you
haven't it doesn't really matter the
point is there is a P image class just
like at one point another we wrote a
bubble class or a ball class or a fraud
class who are at all we're writing
classes to encapsulate information and
data to store stuff that we want to move
around the screen this is a case where
we don't need to write a class to store
all the information about an image this
is a class that's built into processing
for us and we can just make objects we
can make instances of P image objects so
we have a variable let's just call it I
and G it's a type P image now how are we
going to fill that variable we need an
image there are lots of possibilities
here we could make a blank image and set
all the pixels of that image according
to some algorithm we could pull an image
from the web from an API from google
image search Flickr from any sort of
service that you could imagine we could
or what I think we'll do right now which
is the simplest thing is just load an
image from the hard drive let's just get
an image that we have on our computer we
want to load that image up and put it
into our processing sketch so how do we
do that
this is something a point that I want to
make is this is a case where the code
we're about to write to load this image
should really happen in setup pulling
the image off of a hard drive loading it
into memory so that the computer can
draw it into the screen this is a slow
process sure we might want to draw it
continuously that will happen in the
draw function but that process of
getting it in the first place
is something we want to do at the
beginning of the program obviously
there's lots of other circumstances
where as the programs running we want to
retrieve some images and will at some
point hopefully look at some other
scenarios but for right now for our
purpose we simply want to say load image
then we need can you see all this I
think you can we need the file name to
go in here the file name is going to be
a string which means the characters that
make up the name of that file inside
quotes now where's this file coming from
processing sketches if you've probably
seen this before but just in case you
haven't processing sketches are this
this sketch that I have called image 1
it lives somewhere on my computer in
fact I can go up to here to sketch show
sketch folder and now I have in the
finder I have my sketch folder right
here and there's the file that has all
the code for my stuff so I want to make
a folder that goes in here called data
this data folder this is where I'm going
to put images I want to put things
assets things that I want to load it
could later we're going to see data
files sound files movie files all sorts
of things font files can go in there
anything that I want to load and use in
my processing sketch date the data
folder is a good place to put it once we
have an image in that data folder we can
load that image and we've got a
reference to it in the variable now an
image is an object what is an object
it's a thing that encapsulates that
brings together data and functionality
so let's try to think what is the data
of an image what are the things that
make up an image well one thing are the
pixels this
you know really if you're watching this
right now you can really just turn this
video off and skip to the next one
because the next one are a couple from
now we're going to look at how to
manipulate the pixels of an image or
make up the pixels of an image from
scratch that's going to be a very
powerful technique for coming up with
new ways of drawing and making stuff
happen on the screen the other pieces of
information that an image might have it
does have in fact is the width and
height this these are crucial pieces of
information the the width and height
comes from the source image itself
what are is the pixel resolution of that
image that some low resolution image we
downloaded off the web did it come from
some fancy high resolution camera the
pixel width and the pixel height this is
the sort of key factor one thing you
want to remember is we've got a little
processing window you know even if it
was fullscreen maybe it's at the most
like 1920 by 1080
we don't need massive high resolution
images to display on the screen in fact
those might bog our program down and
make it run slow so something you might
think about if you're loading a ton of
images in your program is sampling them
down in advance so that you have lower
resolution images to work with so that
your programmer it's faster and smoother
okay what is some functionality that
might come with an image well a piece of
functionality that we really want is to
draw that image to the screen processing
if you think about the way it works
doesn't have too many objects that draw
themselves to the screen this is
something we've been doing ourselves as
we've been making examples we make a
bubble object that has a display
function but the processing draw
functions are just commands really that
we're executing rectangle ellipse line
the function for drawing an image to the
screen is actually basically identical
to rectangle rectangle if you remember
needs an x and a y which references the
which indicates the top left corner hope
I'm recording this on the top left
corner of that rectangle and then it
needs a width and a height and that
rectangle will appear somewhere in our
window once we call the rectangle
function the image function which would
happen in the draw loop is exactly the
same as rectangle in that we can give it
and x coli and width and height this is
where that image that rectangle will go
with what width and what height the big
difference here is we we now have the
opportunity to reference an image that
we've loaded from the hard drive and
that image itself will appear inside the
rectangle this means an image can be
moved around the screen just like
anything else is use like variables and
algorithms and all sorts of fancy things
it can be repeated in a loop and tile
anything you could do with shapes you
could do with images the other thing
that's interesting to note here is I
spent all this time saying oh the image
has a width and a height that comes from
the raw source file itself yes that's
true but somehow the image function I
can give it a width and height
processing will dynamically resize your
image stretch it skew it shrink it grow
it whatever you do whatever you want
however you specify that width and
height by the way these are optional
arguments if you just give the X Y
you'll get the image at it raw
resolution the other thing I should
point out which you would probably write
before you draw the imaging that I'm
drawing it down here is just as Rex mode
has a way of saying hey actually I want
the reference point for that rectangle
to be the center there's a function
called image mode where you can now
reference the image by you can now draw
the image relative to a different part
of it like it's Center center there we
go okay let's I don't know it's just
going on for way too long and I don't
know if you're still watching but let's
go and actually implement some of this
in a quick sketch we'll wrap this video
up and then we'll go to the next one now
I'm back over I'm a little out of
practice I've work ordered one of these
in a while okay all right so let's go
and find an image I really should have
done this in advance I can't believe I'm
doing this in video bear with me I don't
know let's think of a cute animal that
we like like a hedgehog I don't know is
that a cute animal I don't know why I
thought of Hedgehog Hedgehog not a hedge
fund that whoops no video cell ok so
yeah that's kind of a cute animal so
let's get this Hedgehog here view image
this is a little bit ridiculous I
I just have to keep going with this I'm
going to save this image and I need to
find my processing sketch which I have
in documents processing I really should
have done this advanced pixels image one
data all right and let's just call this
hog jpg there we go now I'm back into my
sketch and I'm going to say a pea image
image image equals load image hog jpg
and then image hog zero zero background
zero and let's make our image our SAR
sketch like actually be a little bit
bigger and let's run this okay ah so
what happened what happened first of all
I wrote image hog but I called my
variable name IMG now this actually
brings up a little point I don't know I
don't really love that variable name IMG
because then it's just gonna leave me to
say IG 119 to actually you know it is an
image I think it actually would be
useful to name it something about what
it's going to display so I'm going to
call it hog I'm gonna save this and I'm
going to run this and boom we have I can
close the browser now we have a
processing sketch that displays the
image yay
okay this is pretty exciting it's just
sort of the background of the sketch I
could start drawing things on top of it
you know like if I wanted to try to
figure out how to give it some green
eyes I could kind of like try to
guesstimate where its eyes are and kind
of put a certain a bow that was amazing
I got really really close towards I just
by looking all right that was I swear I
did not practice that in advance okay
let's put this back over here now let's
look at a few more slightly more
interesting features for example I
didn't actually include the width and
height as I mentioned you could do so
I'm going to actually give the with
mouse X and the height Mouse Y and we
can start to see now I'm able to
interactively skew the size of the image
another thing that I didn't mention a
rectangle right you could set the color
for a rectangle using fill fill right
here I made a lips that was green zero
comma
five comma zero the equivalent for an
image is actually the tint function so
the tint function will color that image
with a different tint so to speak so if
I say to 5500
we're going to see a red edge on right
now this Hedgehog now which was
important to realize here is we didn't
actually affect the colors of this image
we are just affecting which part which
parts of the images existing color are
we drawing every single pixel has an RGB
color I am now saying take for every
single pixel ramp the green all the way
down to zero ramp the blue all the way
down to zero so if the what I'm getting
is the kind of the red values of that
image and you can see here if I were to
do something like put mouse why it you
know as as I go down the image I start
to get the green parts of the color and
and if I put Mouse X into blue I can
start to get now I'm actually seeing the
actual image itself it doesn't mean it's
I'm adding blue or I'm adding green I'm
just bringing up the actual existing of
pixel values of this image itself this
is what happens when you don't like
practice it and then do the video just
rambling um so I want to wrap this one
up I I guess when I've done these in the
past they usually kind of give a little
thing that you might think about trying
to do before you want you going to the
next one what I would say to you right
now is set this up for yourself find
this image download it get in your data
folder see if you can load it see if you
can draw it and see if you can come up
with a more creative or inventive way of
affecting its position its size and its
color through tint so think about the
same thing you first did I had a
bouncing ball moving around the screen
or a bubble floating and moving back and
forth floating up you could do that with
an image now another tidbit that I'll
just mention if you load a PNG image
that has a transparent layer some in the
you can load JPEGs pngs and probably
some other formats that tends to be what
I use JPEGs and PNG is if that image has
transparency processing will retain that
transparency so your image doesn't
necessarily have to be it will always
draw as a rectangle
we might not see it as so rectangular if
there are trains there's a kind of
transparent edge to it we'll see how to
add our own transparency to it just
later okay thank you for bearing with me
this is a video that I've recorded and I
will hit stop and then record the next
one in about two seconds