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?