[MUSIC] Hi, welcome to this new video. In this video, we're going to continue
working with images, not only one, but a few. And we're going to really
practice of what kind of designs, what kind of compositions can we make
by using images together, right? So let's jump directly into processing. As you can see here we have. I'm starting from what we had
last us class or last session. We can remove this. Basically, this is our template, right? So there's a few things that I would
like to bring to your attention. I'm going to be working
with a few new images. Those images are going to be available
to you in the reference files, in the example files. So if you want to follow along,
go and find the video or, sorry, the code that refers to this week. And you're going to find the images
that I'm going to be using, right? I'm going to be using three
images that I put in this folder, which is again the same folder
where we saved the script. I'm basically using the same script,
but I'm modifying it so it's going to be called image one. I'm going to be using this retro PNG or
JPEG, actually, I need to be careful with the extension
and then this cursor images, right? So let's go ahead and
see a little bit what we want to do here. So the first thing I want to do
is create a background, right? I'm going to change the canvas size this
time for something that matches our image. I know that this image is 500 by
750 pixels in width and height. And the first thing we're going to
do is just as we did before, let's do a global where we
can say something like img. We will bring more images later,
but for now, let's just do one. So img = LoadiMAGE. And I'm going to bring the retro.jpeg. Okay, sorry about the caps lock. Right, so we have the, here's the. There we go. So we have the retro.jpeg. This image is going to work
as our background, right? So we could already draw
it into the canvas. So let's say image(img,0,0). If we want to make sure
that it's the same size, we can specify the size of seven,
of 500 by 750, right? That's the canvas width and the height. And we can test. Processing doesn't like when we
don't have anything in our draw. Let's just do it as is. Okay, we're running into an error here. Is it possible that we don't
have the right resource. Here we go. That should have been a comma. There we go. So we load the image that
is our background, right? So this starts to open the door to think,
well, I don't have to do everything
through code, right? I'm kind of starting to think, well,
maybe I could use code to create a form of collage or a form of composition
that includes several images. If you use images that have a PNG,
let's say a transparency or a cutout information, you can use them without
necessarily showing their rectangle. The alpha channel of an image
represents its transparency, right? So formats like PNG are capable to
carry that transparency information. So I'm going to bring an image
that has some transparency and that would be brought on
top of our first image. And you'll see that this
is a composition that is inspired by a music video
called Kilo by Light Light. So I think that we're going to be using
something like a cursor that kind of operates by registering where a user has
been positioned in the screen, right? So let's see how that would work. We're going to load a second image. So I want to hear in global,
we can use comma to define a second image. And we could say Img2 = LoadImage. And here the name of the image will be cursor_icon.png. Sometimes it's good to
just copy paste the name. If you have an image that has a long name,
you can copy paste it from the file itself just to make sure that you don't have
any spelling errors within that, right? So now that we do have our cursor loaded, we could say something like,
if(frameCount), this is a technique that I use. FrameCount is a variable that is inbuilt
into processing that allows us to kind of check which is the current
frame of the screen, right? And if we use the modular function and
a number, and we ask the questions, is that = 0? If you remember, this modulo
calculates the remainder, right? Basically what this sequence is asking,
if we divide 5 into the frame count, does the result of this operation,
is it = 0? Basically, does it have no remainder? That means that every 5
frames the answer will be 0. So this is a way of saying do this every
5 frames and you can change this number, if you want to do it every
other frame you would put a 2, every 3 frames you would put a 5. 3, sorry,
every 5 frames you would do a 5, right? So is this calculation resulting in 0,
right? If so, this is something that we
don't want to do every frame, right? We are going to say, translate(mouseX,mousey). Let's move the canvas to
the position of the mouse. And then we could say image(img2,0,0,20,20), right? So what we're saying here is like every
frame, we're making sure that the image will be placed wherever the mouse
is in the mouseX and Y coordinate. And let's draw that second image, which is something like a cursor icon,
wherever the mouse is, right? So you can see we have
this kind of painting tool where we can paint these cursors
on top of our background, right? And if you want to densify or
kind of reduce the density of painting, there's a few things that you could do. Like if you don't like it to
be exactly where the mouse is, you could add here a bit of randomness
in X and Y with two variables so that you have a bit of a scatter
around the position of the mouse. You can make it less frequent, or you could actually do it whenever
you're pressing the mouse. So it really becomes like a pain tool. Just to conclude, I would like to add
a little bit of randomness by bringing a third image to the mix. So img3, it's going to be, let's copy paste that img3,
and in this case, the name of the image
will be cursor_icon2, I would like to mix that some
of the cursor are white and some others are black. So we have a bit of a variance between
the images that we're stamping, right? And as we have seen, we're kind of starting to use
some of the different techniques, different kind of concepts that we've
developed throughout the course. So we're going to use rand_number,
a random number, which is going to be random, but I want
to make sure that I import it up here. The random module,
otherwise we're not going to. So I'm importing the random. Therefore I can use random.uniform(0,1.0), right? want to make sure that that's a decimal
place value between 0 and 1.0. Because now instead of drawing the image all the time, we could say if(rand_number < 0.15). This means that there's a 15%
chance of drawing this image. Else. We are going to do the same thing,
but draw the other image, right? So there's a 50% chance. I don't like the distribution of 50, 50, because it would just become very
symmetrical in terms of distribution. But if I'm giving 15% of one type of
icon and maybe 85% to the other type, I'm going to create a little bit of
a variance that it might look interesting. So let's see if this is working,
if we're missing anything. So you see, we made the black icon
kind of the most dominant one. Every so often we get the white one. It's not exactly 85%. There's a random chance for
this to happen, right? If you like it, if you would rather
have it the other way around, you just couldn't burn this number to 85,
so you would get more of the white cursor. And, yeah, again, this is kind of
a simple composition position. A little painting tool that we created,
combining one image in the background and a second image that we could use and
create this kind of bit of like a random brush, if you want, with some
of the tools that we've been covering. So I'm going to be showing you how to save
this material, how to export material out of processing, and then how do we
create an animation out of this content? So I'll see you in the next video.