[SOUND]. This week, I'm going to talk about images
and how to display them in processing. in later weeks, I'm going to go into a
lot more detail about how images are represented, but for today it's mostly
about laying images out and then we'll look at how to create animations with
sequence of images. So if you look on my slides here, we've
got an image taken from a sequence that Mick has prepared for his DJ App, DJ App,
and I'm going to show you how you would display this kind of image in processing.
So, Matthew, last week, talked you through loading up sound files and
playing them. In many ways, loading up images is very
similar. You have something called a PImage object
uh,which represents the image and you load that into file.
So what you do is you create a variable of type PImage and you Load that in based
on the file name of that image. And as Matthew noted last week, that
should go in the data folder of your processing sketch.
just as like, just like the audio files that Matthew talked about.
So once you've got the PImage there, then displaying it is very simple, you use the
image command. So the image command, what that does is
it draws the image that you've loaded in, and you can call that in your draw
method. You normally load the file in your setup.
So the main parameter the image command takes is obviously the image you're
going to display. But you can see here that it takes two
other images. to other parameters.
Those are two numbers that give the position at which you want to draw the
image. In fact you can pass yet another two
numbers, which is the size of the image. By default it draws the image as its
actual size in pixels. But you can adjust that to any size you
want by passing in a width and a height. So, I've just said that you can give the
position of an image, but what does that actually mean, because an image is a big
thing what does it mean for an image to be asked to take a pick.
And it turns out you can actually define what that means in a number of ways...
The default, is an image mode called corner.
So, here I'm showing you the command, image mode, which specifies how you draw
an image. And by default that's set to corner.
And what that means is that the position of the image is the top left.
Off the image. Sign on the red dot here.
So if I were to call a image with position 0 0 the top left of the image
will be at the point 0 0 on the screen. You can also use imagemode center.
Which means that You must position the image based on the middle of the image,
and often that's more convenient. It's often more intuitive to think of it,
the center of the image as its position, so in this case, if I were to now call
image zero zero the center of the image would be at zero, zero, which is the top
left of the screen. Which is probably not even what you want.
but if you would set, to set the position to something else you could get an you
could position it well. So I'm going to talk a little bit more
about positioning images. but first let's have a look at an example
of this working in practice. So this is a very simple processing
sketch that involves loading and displaying an image.
I'm creating at the top of the sketch here a p image variable.
I'm loading that in from file. I'm here, I'm doing something clever, I'm
setting the size of the screen to be exactly the same as the size of the
image. So I'm using the image width and the
imadge dot height, to find the width and height of the screen and down here I'm
just drawing the image at position 0,0. And there we are with displaying an
image. I can move the image about by changing
the positions I'm parsing in. I can change its size and I'm going to
show you here that you have to be a little bit careful because if I set its
size to 100 and 100, I'm not maintaining the aspect ratio.
Of the image, so I'm squishing it down. So the, you've gotta be careful to make
sure you're always keeping the same ratio of the width and the height, otherwise
you're going to get a squished or stretched image.
one nice way of doing that is, is this, I'm [NOISE] So here I'm, so here I'm
calculating a height. Of the image that maintains the aspect
ratio based on the width. I'm setting the width to 100.
And what I'm doing is, I'm taking that width of 100 and multiplying it by the
height, and dividing the height of the image and dividing by the width of the
image. Doing that multiply by height and divide
by width Maintains the ratio between the width and the heights of the image.
So this image height is the right height. So that's the image is of width 100.
And it isn't washed or stretched. Okay the last thing I showed you was
image mode So I can set imageMode corner.
ImageMode corner doesn't change anything. So if I do it there, it's exactly the
same. I am going to leave it down a little bit
to make it clear what I am doing. But if I move image mode sensor it would
be different. Actually let's, let's draw it at the
mouse position, and it will be very clear what's happening.
So I'm now drawing the image at the position of the mouse, and the center of
the image is at the mouse position. If I do it at the corner.
The top left of the image is at the mouse position.
Okay, let's have a look a little bit more about how to lay images out nicely, and
how to use these commands to get the right sort of layout feeling, which is.
So getting a correct layout for your, for your screen is really an important part
of getting your app to look nice. So you need to think about it a little
bit. And maybe we'll talk about this a little
more. In his lesson today.
But let's look about how to do this. So, this is an example.
So, If we look at this big rectangle is the processing window, we can draw an
image at the point of our box. Now, one of the most basic things you
might want to do. Is sent to your image in screen either
right in the middle or it's centered in 1,1 dimension often sent to it
horizontally. And that's what we're doing here.
So I'm using image mode center, and I'm drawing the position at.
Of the box at width divided by two. Width divided by two is half the width of
the screen. So, it's halfway across the screen.
So, I'm going to send to it horizontally but I want it near the top vertically,
but not at the top. So, I don't want it at zero.
I'm going to add a little margin. So, margin is two of that small value,
1020 pixels. That moves it down to, adds a little edge
between the top of the screen and the window.
How about some other examples? So what if I want to lay things out in
columns? Well, here we're still relative to the
middle of the screen. so we want to position it relative to the
middle of the screen, but we want to put it One side of the the middle of the
screen. So, we want it moved from the middle of
the screen in by a certain margin. Again we add a little margin.
And then by the mid, in, the width of the image divided by 2.
So the width of the image divided by 2 is half the width of the image.
That's half the center of the image. And we're essentially moving the image in
from the center by first the margin and then half it's width.
So it's now half way into, so it's the, it's In from the center by amount given
by the margin. And we can do exactly the same thing
vertically. We can move it down by half the height,
so it's half way down the screen, add a margin, and again add image.height
divided by 2 to move it down by half the height.
If we were, that image.height by two is only there because we're doing image mid
comma, so we're specifying where the center of the image is.
So, that's the kind of thing you might want to do, when you're looking at
positioning images, you need to think relative to points on the screen, like
the halfway point on the screen, width divided by two, height divided by two.
You want to add a little bit of a margin just to sort of give a bit of space to
your layout, and then you may want to shift it around by the size of the image,
or half the size of the image. And Mick will show you a number of
examples of that. So now we're going to look about, at how
to create animations for the sequence of images.