10.2: Animate an Image – Processing Tutorial


Hi, okay in this video I want to take the ideas that we had from the previous one about images and just move it one little step further. So if you remember at some point I think we probably had an example that looked something like this. Very basic idea of two bubble objects… The bubble objects have some functions like ascend which makes them float up display which draws them as circles and… Top which I guess stops them at the top. So if I were to run this program again, we can see we have these two bubbles floating up to the top. We have a bubble class; the clas… each bubble has an x and y diameter blah blah blah So the point of what I want to talk about here in this video is how do we take something like this? But instead of drawing these shapes have the bubbles be an image perhaps an image of a nice flower. So this time I learned my lesson from the last video and if I go to the Data Folder in here… I can see that I have an image of a flower. So I want this flower to appear instead of those circles. So say this actually isn’t that difficult of a problem to solve, but let’s do it together. Step by step and just see how this works and then you can kind of take it and do a little bit more with it afterwards okay, so… The first thing we know we need to do is… Make a PImage variable. I’m going to call it flower then in setup I want to load an image, and I have the path to my flower. So now I have a global variable called flour that flour can be used anytime anywhere I want it could be displayed on the screen. I can for example Just draw it. image, flower, zero, zero, so now I run this program I’m going to see the flower is back there and the bubbles are floating in front of it. I can do… one thing I might do is say image mode just to emphasize this center And then draw the flower in the middle of the screen. We can see now I have the flower in the middle this again is just using an image kind of as a static background which is probably a little bit less interesting than Than actually having be this Sprite if you will this this this this replacement for a shape that we may animate rotate changes color ETc So let’s think about it now. I don’t want to display the image here. Where do I want to display it? I want the image to draw itself for each bubble what each bubble has a display function each bubble has a display function if each Bubble has a display function. This is where I need to go in and start changing my code. What do I do for the bubble? I draw an ellipse. Now what do I want to do? I want to draw an image. I want to draw an i… and here I want to keep that image mode center, and I want to draw the flower at x y Let’s run this now and look I’ve got a flower floating up. Oh I got some sad things going on number one You could see the sort of rectangular edges even though. It’s white. This is what I was mentioning Maybe it would have been better if I had downloaded a Png with a transparent layer So that only the flower pixels would show through but these are all things that can be solved You know this is not the crucial component here now. I do have something else going on Which is that… Oh each bubble had a diameter variable which was controlling its size. So why not use… diameter diameter to be the width and height and only comment out And now I have look at this. I have my two flowers floating above and now, now I’m lucky because these aren’t overlapping so I don’t really see I Don’t really see those hard edges anymore of course if they were to overlap if I were to go back To this part of the program and start them kind of closer to each other you can see that I’m seeing this problem, so This you know, I don’t want to spend too much time with this because for me again, The exciting interesting stuff is when we’re going to start looking at the pixels of an image and how do we make up our own images and Mix the pixels around and do an invent our own image processing algorithms. But this is something you might take some time to play with in practice for example go and find yourself an image with some transparency. Maybe just try actually you know a quick and dirty solution might be That I’m just going to give it a tint with keeping the color at full, but give it some alpha and let me go back and Put them closer to each other again You know not great, but a little bit better at least they’re kind of like semi blended together but that’s not such a great solution, but I don’t know why I bothered showing it to you, but I know I want it to be back to what it was um so some of the things you might think about doing are Give the objects color so that you can tint them differently could you apply translate and rotate to the image of the flowers? Spin perhaps that would be an interesting thing to try Another thing you might think about is I got kind of lucky if I go and look at my flower My flower happens to be if I find the resolution Right there, it happens to be a perfect square. It’s 300 by 300 So this was kind of lucky in that in my code When I changed the size of the flower, I could just change the width and height to be the same value But what if you had an image that you needed to keep the ratio of the width and height the same how might you change… the size you might have different images larger and smaller width but keeping that… That core resolution intact give you a secret you might be able to, not a secret, but you know you can get The width of sorry you can get the width of that image By saying the name of the image dot width so one thing I could do is say flower dot width times 0.5 0.3 0.7 I guess I’m giving you the solution but give that a try and see it what happens there the other thing that I think is a really key element and maybe I should make a video actually just about this But we really did something which is a bit of a problem that I don’t think I should point out. This PImage flower is a global variable and the bubble object is just Accessing that global variable and actually you know what the next video I have in mind the looking at this so we’re gonna bring that back into the next video this perfect So the next video will solve this problem, but really what if I want… I want a whole lot of different flowers and every time I make a bubble I Make it with a random flower image I can’t just have a global variable flower that the image is kind of happens to be getting when it’s time to draw itself I need each Object to store perhaps its own Image each objects should know which image is it displaying and how could you solve that problem? that might be something you give yourself a little try too and um in the next video which I want to talk about having an array of images, we’ll look at a solution to this. Okay this wasn’t so bad. I think this was okay, it could be better, but That’s what it is. Okay I’m going to turn this off and I got a guy got don’t you got him do the next one? I don’t have a lot of time here, okay?

25 thoughts on “10.2: Animate an Image – Processing Tutorial

  1. Hi Daniel. I was experimenting with animating images and i came across a problem and i really need your help. I'm trying to use an image as a background and make it scroll to the left (by decreasing x) and wrap around to the right side when it reaches the left border (creating the illusion that the object in the middle is moving right, i think you get my point). i tried using an if statement but i don't think that will work because it just moves the whole image to the right. Is there a way this could be done? Thanks in advance.

  2. Hi dan! your videos as well as your book are great help! I was hoping you could tell me where i can find an introductory tutorial on how to manipulate framerate to slow my animation down/speed it up. Thanks!

  3. Hi Dan, I've got a question that I've been meaning to ask you for a while so here it is, What is a vector?

  4. If I want to do a slideshow passing some folder images and make a button in which if I click it passes the image, how should I do? can you help me please?

  5. Hello,
    Is there a way to say that a function shud Not show up i mean i know how to call it but not how i make it dissapear
    Ps:Really Good explaint Videos 👍🏿😁

  6. how do u make a photo lets say a pic of your self but u want the photo to load in from top to bottom like as if u found it on the internet and it was loading in slow to visual display the full picture … like if u were loading in a image that was slowly loading top to bottom how would I make this happen my kind sir

  7. What about a lecture (and coding) about light (reflection, refraction, diffraction, composition) ? Not a challenge, just light physics illustrated. Thank you.

  8. I have difficulty finding a gifAnimation library that would run with P3. Can you please provide a download link? Thanks.

  9. void display(){

    image(p,x,y,50,50);

    }
    my english is not good…
    I want to ask why this step always happens: nullpointerexception. What is the problem. Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *