Okay in this video. I want to think about images in a slightly different way let's first though
let's think about how we've been thinking about them so far.
How have we been doing that? We have an image? You know our example is a file called frog dot JPG.
Can you see that? I think so. It's got a frog in it, and we load that image, and maybe we have a
Processing window and the frog... oh my God, I'm going to try draw a frog is drawn into the window.
So we take this image that we've loaded from a file
and we're drawing it into the window. Another thing that we've seen is...
Well instead of just taking the image and displaying it all by once
What if we look at every single pixel one at a time?
Let's look at this first pixel and do something to it and set that first pixel there. Let's look at that second pixel,
let's do something to it and let's set that second because there. Image processing. Make it brighter,
make it darker, a threshold effec,t bla bla bla all this stuff that we've been doing.
Here's a different way that I want to think about what we might do with an image in this video.
Okay
Here is a Processing window. What if I forgot all about the fact that I could load images
or do anything with images and all I'm doing is I'm making some kind of drawing pattern.
Oh, maybe I wrote a program that draws cool squiggly lines all over the screen, or maybe I wrote a program
that's a particle system and
there's all these bubbles and when I click the mouse the bubbles float up
and they bounce across the top and then they explode into flying stars and hearts, whatever it is. Whatever kind of animated
geometric design algorithmic pattern Thingamabob that you're making...
You're making it. How do you decide what colors should be in this thing?
Maybe you pick your favorite colors my favorite colors are purple and pink. Maybe you pick your...
Random colors, and you use random or maybe perlin noise or gaussian or all these crazy other ways of picking numbers...
But maybe you have something else.
Maybe you have a database of color.
You have this like file with all these things written in it. Which are all the colors that you'd like; a palette so to speak.
What could be that database of color? What could be that palette? It could be a source image.
So what if instead of simply drawing an image or having one-to-one; every pixel pixel, every pixel pixel...
I just had an independent drawing system from which I am pulling colors from an image. How do we make that work?
So this is what I want to start to do and I want to build a couple little quick examples...
To see how this might work, so let's go back over.... I hope I'm recording. I am recording.
Let's go back over here, over to the code oops. You could see my laptop all secrets are revealed, okay,
hopefully that's better um by the way. I have this watch this...
Whoa... Can you hear that? Just like a hydraulic desk, okay.
Alright, so you know we've got to take some minutes here to enjoy the the small wonderful little things in life, okay.
So here's a Processing sketch.
It loads an image, it draws the image and...
That's what it does. Now, let's think about some other things
we might do in a Processing sketch like let's say
I make a black background at the beginning and what I'm going to do is I'm going to draw a circle
somewhere
in the window instead. Here's my independent drawing system.
How should I pick my colors maybe I'll pick my colors from the frog. But let's make this a little bit more interesting. Let's....
at least
every time we run through draw let's draw a
circle at a different location.
So now if we run this we can see every time through draw, I'm not erasing the background
I'm drawing a new circle, drawing a new circle,
I'm drawing a new circle.
And we could say, we could, we could, we could take ourselves up on this challenge
and say what are my favorite colors? My favorite colors are...
You know some sort of purplish color. Now I'm drawing a purplish.
I could say actually what I wanted is it to be a random color now. I'm drawing them somewhat randomly. Now,
let's do something finally different. What if I were to say?
Give me a color
from the frog.
Look at this little bit of code here.
The get function. Now, here's a moment... I don't remember what I did in the previous videos.
I wish I did but in the previous video certainly we were accessing the pixel array. We were saying....
We were saying...
We would say something like this frog dot pixels and then the pixels
index and maybe that index would be an x plus
y times the width. Right, this we spent we certainly spent all this time
trying to make; figure out how this algorithm works, right?
There's a two dimensional image. All the pixels in that image are in a one dimensional array.
If I have an x and y coordinate
I want to look up at a pixel from that.
I need to convert from the x and the y to that single index into the array. And this is
probably how we should do this example here, but just for simplicity...
And this is sort of the fastest the the fastest way of doing these pixel operations.
But if you'll notice something about this example that I'm making...
How many pixels do I need to look up in draw here? One. Every time through draw
I just want a single pixel. Where am I drawing this ellipse.
That single pixel here.
We can use the get() function. get() is convenient, it's maybe a little slower, but in this case, it's totally fine.
We just need one pixel.
But if I run this... I'm going to get an error the method get() expects parameters like this: (int, int).
This is a lovely error message by the way. This is... if you're don't, not aware...
I mean, this is going to become quickly out of date this video then if I say this, but this is version 3.0a5.
A lot of the error messages have changed in recent Processing versions to make them a bit more friendly and understandable.
But what is the error here?
I mean, I'm able to draw an ellipse at pixel x comma y, even though they're not integers.
But
while Processing is a
forgiving and friendly and happy to take your floating-point numbers and figure out which pixel you meant on the screen, after all pixels are really
integers. There's no such thing as
pixel 2.5 or 3.5. I think I think we might have covered this at some point.
I really shouldn't make these videos like weeks apart that I've no idea what I did in the previous ones.
But let's think about this if I have an image, and I have a pixel location like 300 comma
215, these are integers.
There's no pixel 215 point 2, there might be kind of sub pixels in our mind and fancy ways of thinking about this
but we need an integer.
Even if I say ellipse 300 point 5
where Processing is really going to draw that ellipse, it's going to just take off that decimal place and draw it at 300.
And however with the get() function with the pixel array we have to really enforce that use of integer.
So I'm going to
very... an easy way for me to do this is
to simply convert these values into integers before I ask for that pixel color and I'm going to do this we can see oh
if only we could just sit here and wait for a long period of time, maybe we would see our frog.
So in my mistakes, I stopped and paused the video, and I've returned. I actually left this run for a while
which was a good result which you can start to see that that image of the frog kind of peering through here.
So we've what we've done is we're not displaying the image anywhere.
We're simply loading it into memory. We came up with some weird idea which is like
let's just draw circles all over the screen, and then we picked colors out of the...
we pick colors out of that image. We essentially, that image became a lookup table, a database of color by which we choose;
Wherever we drew a circle
we looked up the
corresponding color at that, in that location in the image and
drew it there.
So let's just do a couple more things to this. One is I'm going to take out the stroke and then I'm
also going to just to make this happen faster... if I put a little loop in draw...
I can say like oh just do one hundred at a time. So now we can see, now we can see that
we're just like layering
100 random circles with colors every frame... and, and you can sort of see the quality here is kind of different, it has this...
The resolution is not very high.
But you can see all these circles are picking up the colors from the image and another thing. We might do is...
Just add a little alpha here.
So if I give it an alpha value of 25
you can see that now these colors are going to slowly blend in over time.
And you get this kind of watery like
appearance... and, and, if, you know, I've kind of gotten addicted to doing this. If I had to do
500 circles per frame it's going to be much much faster
and you might even see almost as if we have this kind of shimmering version of a frog. So this is one example.
I kind of...
Let's, let me save this and let me go to a different sketch.
You know there's there's not much different about this sketch other than instead of simply
randomly placing a circle on the screen each frame, this is they're particle objects.
They move randomly about and while they're moving there's no reason why I couldn't say like okay. Well, where,
here where I display it. I'm making them white why don't I...
pull up wherever...
This frog is... this frog; this ellipse is going to be drawn at x comma y.
Why don't I before I draw it wherever it is look up the pixel underneath in that image? So...
If I go back and actually I need to load the image. I already have it in the data folder. I did that before.
Jpeg and let's go back to this crucial... right let me put this in here 255. We can see...
There are my white circles. Now, let me instead say see the color from the frog and you can see wherever it is
it's sort of
revealing the color that's underneath it in that image. Now, we can't make out the frog at all. I could say like okay...
Well, what if I instead of having 2000, maybe
3000 circles
And you can see like... oh...
You can sort of see how that frog is kind of being revealed as these circles move around I could start to do things like...
okay, well let's uh let's give it some alpha and....
If I do that you can see like, it's like much dimmer.
But what if instead of drawing the background every frame...
I move the background back into setup and you can see oh
I'm like painting the frog now as these particles move about and I had so many on the screen
I wonder if this would have been a slightly more effective
demonstration with only 100 you can see how these are moving around and we're kind of, they're kind of
streaking and painting. So again I haven't picked
two very creative ideas. I just said, okay
well, why don't I randomly put circles on the screen or why don't I randomly move circles around the screen.
But you could come up with a much more elaborate set of behaviors.
Things bouncing into each other, swirling around and spiral patterns things that aren't just circles.
Streaks of lines could you make kind of like...
What kind of painterly non-photorealistic rendering
techniques might you be able to generate by layering shapes with different
alphas. What if you use like images. Like other images that you're tinting as they're like smearing across. There's so many possibilities.
But I will leave you with
a couple exercises.
One is...
If as soon as I have some system, where you could find these code examples... Although
they're mostly the same as in the in learning Processing chapter...
15
Let me give you a couple exercises. One is
change these from using get() to using the pixel array.
Just as a kind of practice between get and the pixel array and seeing the difference. Another thing you might think about is...
This one that, this particle one that we just made.
These particles are moving and their color is
adapting to their location according to the image.
But what if you drew the entire image as a set of particles and then the particles started moving
but they took their pixel color with it, with them?
So could you make an image can fall apart and then could it put itself back together? So that's certainly a challenging problem
but one that you might think of in terms of like
practicing all of these techniques and and the last one that I'll mention I think which is worth...
Which is one of the examples here. Is you might think about what this would mean in three dimensions?
So if I went I'll open up this example, and I hope this works. I think it's just using a sunflower.
It's very low, but you can see here. We have this image.
Which is actually drawn as a bunch of rectangles, and I'm moving those pixels in a
three-dimensional space according to their brightness.
So this is another thing you might think about. What if you had, you took a 2-dimensional image and brought it into 3D?
Could you could you have a pick, a kind of like...
3d, 3-dimensional space of pixels that are all moving around each other? Okay, so
you will write some comments or email me or
tweet at me. I guess.
And I will
provide some solutions to some of these exercises or answer questions, or post on the forum.
I don't know.
There's got to be some better way of being in touch with each other than be just spouting to a
camera with a screen behind me. But for now I'm going to go this video. I meant to time it.
It's I don't know it's been a while.
Goodbye