Video: 10.3: An Array of Images – Processing Tutorial
Okay, so here we are again. In this video. I want to look, just talk about and look at the scenario where you have an array of images. You know, we've been looking at these little experiments where, "Hey, I load a… Some animal and I displayed it on the screen alright load a flower, and I just displayed it on the screen." What if I want to have a hundred different flower images or what if I want have a hundred different animal images? Certainly having a hundred different image variables isn't going to be that sustainable an array of course is the perfect scenario here and just as we have a you know in the same way that we have an integer called x We could have an array of integers You know called nums.
We can have the same exact thing with a PImage so I can make a PImage array Here we have ten PImage object just in this array by just declaring the variable name the type using the square brackets and then Specifying the size of the array and we could use an array list and other things that we may or may not have seen in videos. That's what… Okay, so why would we want to do this? So there's several scenarios. One scenario is that we simply want… by way I made myself a little smaller here. I don't know if this is better, but one is that we might just want to do a slideshow. So if we have a whole lot of images, and we either want to show them in sequence automatically or every time the user clicks the mouse we go to the next image that might be something we want to do and this example is in Learning Processing and there will be a link to it below somewhere. Another thing we might actually want to do is draw an animation. Now looking at this you might think: "Okay, the point of doing animation in Processing is that we have an algorithm and I'm using variables in the sine-wave been doing this thing and all this kind of stuff to make shapes change color and grow and shrink and move and all that sort of stuff on the screen.
But you know something that might happen to us for example if we look here These are just a whole lot of stick figure PNGs and each one of these is a frame of an animation sequence. Maybe you have you've done this in another environment and what you want to do is display that animation sequence back in Processing. So a way that you could do that is load an array of images and show them one at a time. Now this is kind of a sophisticated example which I will link to this one below and which involves a lot. Like, there's image sequence, there's a whole bunch of them on the screen, there's also, there's the actual sequence It's moving its x y position. Some of them are moving faster than others. So there's a lot of steps to creating this particular sequence.
I do have some simpler ones which I will also point you to, but the scenario that I want to look at right now together, just to get get kind of used to the basics of using an array, is this one. So sorry.. we gotta get back to our bubbles. And remember we have these nice bubbles on the screen, and what are they doing? They're floating to the top. This is what we had before only now instead of two bubble objects We now have an array of five bubble objects and I loaded an image of a flower so certainly I could do what we just did a moment ago, and Change from the ellipse to the flower and now I have these five flowers moving up, but if I look at the Data Folder here What I'll actually see is I have three flower images, and what if I want to… randomly each Object should display a different flower image. How would I do that so let's come back over here again. We know we have this image array so What we could do is say alright.
There's ten images I can refer to any individual image by its index So one thing that I might do in setup first is simply load each individual image into a slot in that array So right, I have image 0 it should be flower 1, I have image 1 it should be flower 2, I have image 2 it should be flower 3. Certainly I think there's a flaw in the way I numbered those images and in fact even though that might be your instinct to say oh I have a bunch of images. Let me let me let me let me Name them one two and three. I think it would make a lot more sense, and I'm just going to change this here to be flower zero. flower 1 and flower 2. Just to emphasize that the way we count with an array is by starting from zero. Okay, so now I have my image my PImage flower. I'm going to make this flowers and I'm going to have three of them. Obviously you could do it with a lot more. Now flowers zero, I want to load image zero. flowers 1, I want to load image one and flowers 2, I want to load flower two.
Now looking at this you might say to yourself "Down here we made all the bubbles we used a loop. i goes from 0 to the length of the bubbles. Let's make all the bubbles." Here something very similar is going on, but I load in each image individually. You know the way, the reason why I did that is I have a whole bunch of file names and I need to like manually type in those file names, but these file names also have a relationship. flower zero, flower one flower two, so actually there isn't any reason why I couldn't just say… for int i = 0; i < 3; i++ and really when I said three, I really mean the length of the array and then I could say flowers index i and this is kind of what I want to write right? I want to say for every flower, flower zero, flowers one flowers two, Load flower 0 flower 1. But this string is actually flower i .jpg, I don't have an image called flower i We're going to get into strings of data in some videos that are going to come later after I do these images one. But a trick that we can do with strings is I can actually say flower + i + jpeg.
So what this is doing is it's saying: "Start with the string flower, f-l-o-w-e-r. Then take whatever the value of i is and tack it in with that, zero, one or two and then tack .jpg on to it. So when I run this okay Flower I need to call this flowers. I've loaded all the flowers, but we have an error. What did I say here? I said flower… flower now I have an array. So if I want to draw flowers 0. Now I have those flowers. If I want to draw it with flowers 1. Now I have those red flowers and now flowers two. Now I have those yellow flowers and you can see my aspect ratios are off. So this is something I would encourage you to figure out how to correct with this particular example. But what I want is… Some variable… some flowe..
. some bubbles to draw a flower zero, some bubbles to draw flower one, some bubbles to draw a flower two. How are we going to do that? We need each object to store a reference to its own image. Now in truth you might be thinking actually the object doesn't have to store a reference to its own image it just needs to store a reference to the index into the array. Right? The flower… if I'm a bubble object I just need to store a zero one or two and that will tell me which image to grab but I think a more scalable and more flexible… a solution that I want to demonstrate here is what if the object itself… somehow… gets its own image in the constructor, so when the object is made it stores a reference to that image And then we don't have to dig / go to any global variable down here. We just need to display that particular image.
The question is how do we get the image here? Well… How did we get the x, how do we get the y, how do we get the diameter? We receive those as arguments to the constructor. We pass those in… We have made it up, so you know, I passed them 100 times plus i times 100 and 300 and then a random size; these are the pieces of data that I'm passing in to make each bubble. Now what I want to do is say… pass in flowers index 0 Right so I want to just pass it one more piece of data in addition to the xy and the size I want to give it an image. So if I pass that image here, and I say PImage temp… tempImg, now I can assign that image to this particular bubble, and we're done. So the bubble in addition to storing variables that keep track of where it is on the screen also stores a variable about what image it's going to display and then it receives that image in the constructor and then uses that image to draw itself and now if we run this I have all the pink flowers, I'm going to change this value to 1.
.. I have all the red flowers and to change this value to two and I have all the yellow flowers Let's do one more step here right. Now sometimes I want to pass in a zero, sometimes I wanna pass in a one. Sometimes I want to pass in a two. How could I make that decision I could use i. I could use random. Let's use random. Int index equals random between zero and three and really instead of three I want to zero between zero and the length of the array. So this is giving me a random value between zero and the length of the array. Converting it into an integer. If the length of that array is three I'm going to have a zero or a one or a two. Let's use that index here and now we can see when we run it each of our bubbles has a different file. We didn't get a red flower. That's so sad let's run this again. Now we got a red flower only one. But two yellow, two pink and one red.
So we can see this is the power of using an array and you can start to imagine… Hmmm There's more to this here. Even though we're using an array. The object itself has a reference to its own image. So let's say, we're pulling images from Google image search some web service some API somewhere. We could have some other mechanism that grabs those images and passes them into objects to use for its own internal display. So this is a very powerful way of thinking through this problem of… Keeping of having kind of an engine that loads the images and the objects themselves then receiving those images as inputs. So you know there's various things you could try here you could think about what if you made each one of these an image sequence? That's kind of a difficult problem. You might just simply figure like try, try the same idea with your own images. I'm trying to think of other things you could add to this example which I can't think of. I don't know I'll write it somewhere.
Somewhere brilliant someday sometime if I can. Okay, So this is it, now in the sense that this is not it at all. This is it for sort of like walking through the beginning, the basic first ideas of using images what we really want to get to which is what I'm going to start doing the next set of videos Is what if we don't just use images as things we draw out of the screen? What if we invent our own images through an algorithm. If we could set the pixels of every… if we could individually set the pixel… Every pixel in our Processing window. You know the world is our oyster. What could we not possibly draw, anything if we have access to every single pixel on the screen. So that's what I want to start looking at next. Okay.