Hi, welcome to this new and final video of at least code wise of this course. And we're going to conclude with
looking at a form of dynamic grid by doing a process of resampling
of this image, right? So let's see what I mean by that. If we are able to sample the color
of an image, we could reconstruct that image using our own version of
pixels, a rectangle, if you want. And we could reconstruct
pixels at any size, right? This would require that we
create a rather dynamic loop, one that is changing
the number of iterations. It does in x and in y to achieve
the right resolution of the image, right? But at the core is the idea of
accessing a pixel first and getting the color of that pixel. So we're going to do that
with the get function, right? An image in processing we
have the get function, and the get function asks us to provide as
an argument the x and y coordinates. In this case, we're going to use the coordinates of the
mouse to get started and see how it works. And in that way,
we'd actually display the color. But then we can reconstruct many
pixels using this technique, right? So let's jump into processing and
see how to implement this. Okay, so we are here, I have a little
bit of a boilerplate to get started. This is a very simple code
that we've covered already, how we load an image and how do we display
that image in the draw loop, right? So we are going to start by
understanding the get function, right? So let's create a color that
is going to be img.get. And here we can use something
like mouse X and mouse Y. And let's create a rectangle that is going to be also in mouse X and mouse Y, 40 and 40 pixels, right? And we can define that the stroke of
that rectangle is going to be white and the, sorry, the fill is going to be
the color that we just constructed, right? So what is this get function doing? Let's see, first this is running. There we go. So the get function is going to
return the value of the color that we are evaluating, right? So as we kind of use this pointer,
we can actually determine different colors and
we can use those for fill here. So this is kind of like
a color picker kind of tool. And that seems to work pretty well,
if you can extend it, if you want to also display with a font,
maybe the rgb color or maybe even hexadecimal color,
which we're going to cover in course two. But again, very useful tool to have
a color picker if you need that. But let's just use this
idea of the get function. So that many rectangles
can use a get function and paint themselves basically
on the right color. So we're going to
reconstruct the image and resample that image in a kind
of a lower resolution. Let's just start by defining a resolution. So the resolution in x, it's going to be, sorry, canvas width, and the resolution y is going to
be the canvas height. But if you think about it, right? We want to reduce the resolution. We cannot increase the resolution. We don't have more pixels to work with,
but we can decrease the resolution. So we're going to multiply that amount. Let's say we want half the canvas, right? So we can actually create
a variable called pixel scale, which is going to be something like 0.1,
right? And let's imagine that we
multiply the canvas width and the canvas height times the pixel scale,
right? So this variable now will continue
if we want to do half resolution, we would say 0.5, right? Maybe start half of the resolution, right? So that's all good. Finally, we also will determine, based on the information we have,
what would be the pixel size. So the pixel size we can derive it from, it's going to be the canvas width divided by the resolution in x, right? So we could do,
because we're doing a rectangular grid or our square,
our pixel size is going to be rectangular. We can use either x or y. But basically what we're doing is saying,
whatever, how big is the canvas let's
divide it by the resolution. So if we're kind of deciding
a resolution of 200 pixels, we divide the canvas width by 200 pixels. Then we're going to end up how big
the pixel should be, all right? So we're creating some variables
that would actually make our life allow everything to be
interconnected in a way, all right? So here we go. So now everything that
we did with the mouse, we want to do it within a loop, right? So for i in range, here, we're going to use resolution x. But notice that out of this equation,
the canvas width and pixel scale, which is a decimal place, we might end up getting
floating point value, right? So let's make sure that the resolution,
because we're using it in a loop. Let's make sure that we use an integer. So we declare that that's going to be
an integer of whatever we're getting here. We can copy paste this now and
do a second version. Let's make sure we change that for
variable j and resolution y, right? So that's all good. Now, we can actually
indent our lines here. All of them are within this nested loop. And we can actually define where
it would be the x coordinate of our first rectangle,
which is going to be i times pixel size. We've done this before with an arbitrary
20, I think, or something like that. Many times we reconstructed a grid. So, hopefully you're familiar
already with some of these ideas. We're trying to really tie all
the variables with each other this time. So we're doing x and
y is i times pixel size, y is j times pixel size, right? So now we're actually
evaluating the color, but instead of using the mouse coordinate,
we're going to use the, let's evaluate the x coordinate,
all right? And here we can evaluate the y coordinate,
all right? So, because we're going to
be doing this in a loop, we're going to do it for each one of
the rectangles that we're going to draw. And each one of the rectangles should
also be located in x and y, all right? So we basically have,
let's just comment out. Well, let's just leave
it as it is right now. Let's see what we're getting. We have a loop. So we're running into an error. What could be an error? This division could also end
up resulting in some decimal. So let's just make sure that we do an integer wrapper for x and y here. Let's double check that. So, okay, that seems to be working. But we see a lot of white. So I think that what we're seeing here,
let's just comment out for a moment. The stroke value to change it for
a noStroke, because I feel like that might be
interfering in our visualization. So we're getting that, but
we don't see much of a difference. Maybe we see a little bit of pixelation. Let's see if we can actually reduce
the value of the pixel scale. So now we can actually have
the pixel scale controlling the pixelation that we have, all right? So this is 0, 1. And here we actually make it. We broke the system somehow, so we'll have to figure
out what's wrong there. Let's just take it up again. What about zero point? Okay, so it seems to be working within
certain ranges, and certain ranges break. So, why don't we make what we've
done before map this variable. Let's make it dynamic, right? So let's map it from
the mouse x coordinate that we know that goes between
zero to the canvas width. That's the first domain
of the mouse x variable. And then the second domain,
we want to achieve something between 0.01 and let's say 0.3, right? It could be higher, it could be 0.5. But maybe this is a good place to start,
right? Let's just double check this now. So it seems that the pixelation
effect is kind of working, right? As we kind of move further down, we can see the pixelation
effect working quite well. I think at some point, we start breaking
it, and we can see what's happening here. At some point, the separation, this pixel starts separating
from each other and breaking. So that's quite interesting. Let's just see what is the error there. Okay, I see the problem. So, we are using a kind of
an arbitrary size of pixel, all right? Which is 40. And that value doesn't cut it
when it has to be bigger, right? It actually was not really working very
well when it was higher because it was kind of overlapping. So let's see what we get now. So, now we actually get a much cleaner version of this where
we can get all the way. So, if you think about it, what we're doing now is kind of
quite a dynamic loop, right? The loop is changing how many x like or
how many iterations it does in I and in J, depending on how we move the mouse,
right? But we're making sure that through
the kind of association between variables, that we're keeping all
the variables still working. One of the things that I've
noticed here is that this loop, especially if you,
let's bring back the stroke, right? So, here in the stroke value,
255 is maybe too strong. Let's just give it some transparency,
so we can see a faint line. I don't know you can see it, but maybe we need a little bit stronger. That's a little bit more visible. But again, on the bottom and
the left side of this grid, there seems sometimes to
be a pixel missing, right? So what we could do is actually
increase the size of this pixel or loop to whatever it is plus 1. Just let's make sure that we get one extra iteration no matter what, all right? So that we can make sure that we cover
the last row of pixels, all right? In both x and y. So here we have a really
well calibrated every time. If you think about how can we
pixelate this image, I mean, you can obviously take it into
Photoshop and change the size. But here, we're kind of sampling
each pixel to what would be their coordinate color. Again, it could be like an interesting
effect if you start mixing some of the things that we've been doing. If you mix the previous session, you could create a color palette
of 3,4,5 colors and then pixelate. You might be able to get some form of
pixel art achieved with this technique. So, again,
the invitation is to really mix and match some of the techniques
that we've been learning. So with this,
a very kind of dynamic, associative, nested loop of resampling and pixelection,
we're going to conclude this course. I hope that you really enjoy
the content that we have offered here, and that you can really use that for
your own work. And I invite you to check course two. We're going to do a quick
recap in the next session and also share with you what
we're going to be doing next. So I'll see you in the next video.