This course is for anyone who would like to apply their technical skills to creative work ranging from video games to art installations to interactive music, and also for artists who would like to use programming in their artistic practice. This course will teach you how to develop and apply programming skills to creative work. This is an important skill within the development of creative mobile applications, digital music and video games. It will teach the technical skills needed to write software that make use of images, audio and graphics, and will concentrate on the application of these skills to creative projects. Additional resources will be provided for students with no programming background. At the end of this course, you will be able to: * Write creative, audiovisual programs in the Processing environment that run on desktop and mobile * Programatically manipulate sound in creative ways * Display images and image sequences * Generate interactive, algorithmic graphics * Work with a 2D physics engine to create a basic game
2.2 Images
Loading...
Del curso dictado por University of London
Creative Programming for Digital Media & Mobile Apps
33 calificaciones
De la lección
DJTube
This week we are looking at using images and video, and also finding out how to control sound more fully in an interactive way. We're going to be showing you a really basic interactive VJ/DJ app called 'DJTube', which is a very simple example of how to create and load video, images and animations on desktops / mobile devices, and also use them as a basic user interface.
Conoce a los instructores
Dr Marco GilliesSenior Lecturer
Computing Department, Goldsmiths, University of London
Dr Matthew Yee-KingLecturer
Computing Department, Goldsmiths, University of London
Dr Mick GriersonReader
Computing Department, Goldsmiths, University of London
[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.
So what is an animation? An animation is essentially something
that moves over time. But when we're looking at film or
computer animation, we're really talking about a sequence of frames over time.
So it's not true movement, it's just a, a sequence of individual images that
present one after another. And this goes back to the glory days of
Disney animation. And form then until now animation has
always been placed as a number of images along a timeline.
and so we can always think of this as image 1.
This is image 2, this is image 3, and each of those has a moment in time.
when we're talking about real images, it looks something like this.
We have a sequence of images. in real animation we have many more of
these to make sure we have smooth movements, but I'm showing this as an
example. And we lay these out in order so we have,
and then we play them sequentially one after the other.
And if we play them fast enough, that gives us the illusion of movement.
So at a technical level in processing, what we need to do is to be able to
collect together a large number of images and then play them one after the other
very quickly. Now,that's doing something a little bit
different from what we were doing last week, so last week, we created a program
where we sort of set it running. And then we interacted with it, we we did
mouse drag, mouse movements, and those most mouse movements resulted in changes
to the state of the program, changes to what was drawn, that we could then see.
But when we're playing in animation, we want stuff to happen independently of
whether we're drawing stuff or not. We want it to just play along.
So, we're not responding to mouse drag or mouse pressed events.
We need the program to do its own thing independently.
And, what we use is a method called draw, and this is a really fundamental part of
processing, this is, a method that is called every frame up to 60 times a
second. And is used to draw a new image time
after time after time. And as we're changing those images
slightly each time we get the illusion of animation.
So in the draw method, we're going to draw our image, and then we're then the
draw method automatically repeats and repeats and repeats.
so that we get that illusion of animation.
But we can't obviously be drawing the same image every time.
We need a lot of images. To represent a large number of images, we
use a data structure called an array. Now, if you're already familiar with
programming, you're probably familiar with arrays.
But if you're not familiar with them, please look at the additional lecture
I've put about arrays. Okay, we create an array and an array is
a large block of memory that has a numbered sequence of elements.
So we've got an array of images. So we've got a bunch of images Each of
which has it's number in the order and [SOUND] because of the way arrays work we
start at 0. So you have 0s.
Image 0, image 1, image 2, image 3. The other thing we need is to be able to
keep track of where we are in the image sequence.
Which, which image we can't reclaim. And to do that, we keep in variable which
is the number of the current image. It's an int because it has be a whole
number to be that, that image sequence. So we got this variable current image
which is keeping track of where we are, and then when we, we draw a frame.
So when we, in our draw method. We just draw the current image.
We use the image command, anim currentimage, and hold the position in
there that we've put a position in there. And that will draw the image we are
currently playing. So, that's doing the basics of what we
need to do. The only thing now is that we're not
actually animating because nothing is changing.
So the core to animation is that every frame when we do something, something has
to change. So that we get a new image.
And in this case it's very simple. All we need to do is move on to the next
image. And how we do that is simply add one to
our current image available. So that our image steps onto the next
one. You'll note I'm going to use this syntax
current image plus equals 1 that just means adding 1 if you're not familiar
with price signal Java syntax. So, each time draw is called, so every
frame, up 60 times a second, we're adding one to our current image.
So I'm moving on to the next image, and displaying that one.
Moving on to the next image, displaying that one, and the next one.
And carry on. To large number of images in our examples
we'll be looking at, sort of, over a hundred images.
So, this is an example of what our program would look like in setup.
We, we create our, our our array of images, and we start our current image at
zero. In draw, we draw the current image.That
gives us the currentimage. And then we add 1 to it.
And then we can still use things, like mousePressed and mouseDragged to control
the playback. For example, when we press the mouse we
could set current image to zero. Which would reset playing from the very
beginning. Before I show you and example, I want to
go over one last thin, which is looping. so it's fine adding one to the current
position. But what happens when we get to the end
of our array? When we run out of images.
If we try to access an image that's not in your way.
So that's, so we're getting a current position which is more than the number of
images we've got. We'll get an error, your program will
crash. So we need to do something about that.
We could just stop the animation, but a common thing we might want to do is loop.
So, this is just an example of some codes.
If we just check if the current Position is more than the length of the image and
if it is, we set the current Position back to zero so we reset it back to zero.
So, let's have a look at that in practice so here is our animation sketch, I have
written a little example. Function that loads images.
you can have that in your example pack. You don't have to rewrite that.
We load the images, passing in an im, image format.
So this is the name will look like this, movie then the number then JPG, and this
is the number of images. Then we Each frame will display and
image. We add one to it, and we go back to the
beginning and leave. And mouse press will just reset to 0.
So, and the mouse press function, where we set it to 0, when the mouse gets
first. So I can restart it when the mouse
button's pressed but otherwise it will play in a loop, the animation.
There's one last thing I'd like to cover, which is playing and pausing an
animation. So sometimes you want to stop the
animation temporarilty and restart it. And to do that, we use what's called a
boolean variable So that's a variable that can only take two values, true and
false. And it acts like an on-off switch, so,
when playing is true, it means it's on. We are playing.
When playing is false, it means we're not playing.
we can use this boolean variable as the input as an if statement like this.
We can use, if playing. And that just means if playing is true
then we move on the currentImage. If playing is not true, then we're doing
nothing. So this is what is controlling playing.
and then we can turn playing on and off in mousePressed, and I am using some
clever here, it's called the not operator And that, what that does is it takes a
Boolean variable, and it does the opposite of it.
So it switches, we're taking playing here and we're switching it, accessing it to
the opposite of playing. So if playing is false, it will become
true. If playing is true, it will become false.
And I will show you How that works in practice, here.
So we've got a, a processing sketch which again, loads images, but we have a
Boolean variable here, and we've wrapped our playing code in an in an if statement
and in [UNKNOWN] we're just toggling so we're turning playing from true to flase
or flase to true. And I can just click it to turn it on and
off like this. Okay, so Matthew's going to tell you a
little bit about Doing some work in audio that we need today's lesson and then
we'll, Mick will show you an example how to use all this to create a VJR [MUSIC]
Explora nuestro catálogo
Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.
Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.
© 2018 Coursera Inc. Todos los derechos reservados.
