Programming Graphics II: Generative Art Animation

1. Trailer: Hello. I'm Joshua Davis. I am the Media Arts Director here at beautiful Sabrosa where I use a lot of this code that you're going to learn in this class to create dynamic interactive physical experiences. This class is obviously an excellent extension of the first class that I taught, programming graphics and introduction to generative art, but, specifically using a library that I've created called the Hype Framework. Now, that brings us to the second class which is programming graphics generative art animation. So now, we're going to take all of this stuff that we learned in the first class, still using Hype Framework, still using processing, sitting on top of Java, but now, we're going to actually learn how to animate the stuff on screen 2-dimensionally and 3-dimensional. I'm out. 2. Unit 1, Video 1: What? What was that about? We should get this party started. What do you say? Yeah. We want to get this party started? Yeah. Let's get this party started. Yeah. 3. Unit 1, Video 2: Welcome back. Second class. Amazing. I have all of you to thank for taking the first class, to even make this second class possible. I'm not even going to hesitate. I'm going to throw out a huge warning right now. Huge warning, and that is, this class is amazing. However, if you have only taken this class and you didn't take my first class, which is, I'll provide a link to it but it's Programming Graphics and Introduction to Generative Art. If you have not taken that class, this class is going to fail miserably, and that is because in that first class, I introduced you to the Hype Framework, which is a library that we work on that makes all of the stuff that we're learning possible. So, you learn all of that in the first class, right? So you learn how to use Sublime Text 2 in conjunction with processing, and we're tapping into this library that helps us sketch things more rapidly. So, that's the huge warning. The huge warning is that if you are taking this class and you have not taken my first class, the very first video, when we start covering HRotate, you are not going to know what we are talking about. So it's best that you pause this class and actually take the first one. Other words, you will not have been cut to speed about all the functionality that the Hype Framework allows you to do. Okay. So, this is Programming Graphics Two: Generative Art Animation. Now, don't get me wrong. I loved that first class but this is where, in my opinion, the fun happens. I think the fun happens here because you're going to see when we get into a lot of the later files, unexpected results. HOscillator, amazing. It will do things that you just didn't believe. So, I spend a lot of time tweaking little aspects of the programs to discover things that I never knew that I could get to. So, love the first class. This class is fantastic because we're basically covering animation. So, we're going to look at a lot of the stuff that we covered in the first class in terms of using pools and attaching things on screen. But now, we're going to get into the behaviors of Hype that just deal with moving things. Okay. So, I'm going to wrap up this video. If you move on to the next, we'll just do a quick introduction to some of the things that you'll learn as well as looking at where a lot of these animation classes are within the Hype Framework folder that you have downloaded previously for GitHub. See you in the next video. 4. Unit 1, Video 3: So, I just wanted to take a little bit of time just doing an overview of the hype framework that you downloaded off of GitHub. If you actually open up the hype processing staging folder, again, just a quick refresher, there is a folder called pde, and inside of the pde folder is all of the classes that are currently available within hype. You can see I've got a few that are highlighted that we're actually going to cover. For example, HFollow, HOscillator, HRandomTrigger, HRotate, HSwarm, HTimer, HTween. These are about animating things about moving things around or moving things around based on a system like HSwarm. Don't forget that inside of examples there's always tons of examples, there is actually an HTween folder, there is actually a HSwarm folder. However, the files that have actually made for this class I try to deviate from these examples so that I can get a little bit more in depth to some of the classes and maybe showcase some new stuff that I haven't actually quite published two examples yet. So, while there are examples for some of the things that we are going to learn inside of the examples folder, a lot of the content that we're actually going to learn in this class is not online. So, you're not high-five, we like exclusivity. Most of this stuff that I'm going to be working through with you in this class is most of the stuff that's been this project that I've been doing on Tumblr. So, if you actually go to pre-station.tumblr.com, this is this experiment which is I've given myself some rules. I've said, "Okay, it only has to include animation, each clip is 30 seconds long, I for some reason given myself the restriction of it has to be black and white so I'm not actually using any color on this project, and cool. I'm about 50 years so files in of animations that I've been sharing on Tumblr." So, if I were just to show you some of these pieces, these are just a few of the abstract studies that I've been tinkering around with using hype and again publishing on Tumblr. So, we're going to work through some of these and talk about how some of these are made, and then we're going to get into how to output this. Just like the first class we can actually still output this to print if we actually choose to, but we're not going to spend a lot of time outputting this to print. We're going to talk about outputting this for animation. So, I'll show you how to get this into a movie format, how to put it into an mp4, some software that I use to help me with this process. Our last project is going to be very dynamic like this one, it's going to be fun, it's going be exciting as one looks actually great reflected. Now, most of this stuff by actually have used in the new phantom Graham music video, so my co-directed music video for phantom Graham called fall in love with really amazing and talented crew led by Timothy Cicenty. I'm going to show you how I've taken a lot of these programs, use them for the music video, and again, we can now put this to a movie, some of you might want to do shorter clips and output them to animated Gif, I know Tumblr loves animated Gif, but I've been doing these 30-second rips, so MP4 has been the format that I have gone to. So, check out the playstation.tumblr.site that I'll give you a flavor of all these little different animations that I've been making exclusively with the stuff that we're actually going to learn in this class. Refresh yourself with the hype processing, staging, look at the pde folder or look at the examples folder, again, there is some stuff in there that we're not going to cover in this class. So, that wraps up this first section which is just overview, which is just introductions, giving you a flavor of some of the stuff that we're going to cover in this class. In the next section we're going to cover each rotate. So, we're going to again, start off very slow and slowly we're going to build these files up. This is an intermediate class which means all start as basic as I can in the very beginning, by the time we get to HOscillator and combos, I'm pretty sure that I will have torn out your soul and your eyes will be bleeding. It is going to get complicated, but I'm going to walk you through those steps of creating these complex systems with very simple steps. So take a deep breath, walk this with me, I promise it will be fun, but it's going to get complicated and for some of you intermediate processing people out there. Hopefully, this is the the class that you've been looking for, for you people who are new to processing, I love you, I'm so glad that you are on this journey with us, but I'm going to hold your hand, walk this slowly. All right. Onto the next video, HRotate. 5. Intro to HRotate and Anchor : Here we are at the first section, HRotate and Anchor. So, we covered anchor a little bit in the first class, which was this idea of having an object and being able to specify a particular anchor point for that object. In this section, that's going to work very nicely with HRotate because HRotate is going to allow us to pivot an object around that rotation anchor. So, we're going to look at all of the aspects of HRotate. We have the ability to specify some constants for anchoring, right? So, there are nine possible positions, center, top left, bottom right, for example, or we can work with anchor, where we specify an X and Y position, and that anchor position is going to work in conjunction with HRotate. Now, HRotate wants to know a few things. It wants to know who is it rotating and at what speed should it rotate that particular object. Speed can be broken down into two events. You can use degrees or radians. So, you can say, "Okay. I want something to rotate positive two degrees every time, or I want something to rotate negative two degrees." So, we can specify whether something rotates clockwise or counterclockwise. 6. Unit 2, Video 1: All right. Let's get ready for magic. This is the first section when we're going to start covering code. This section is HRotate and anchor. Attached to this video, there should be a zip file that you're going to download. That zip file is going to include all of the examples for HRotate and anchor. So if you download the zip and unzip it, you'll notice that there are 10 examples inside of this folder. Again, we're going to start off very simply. Then, we'll keep adding on to these files to see what types of results that we get. So if you go ahead and look at example one, EX 1, you'll notice that there is a build.pde and there is HYPE.pde. Again, HYPE.pde is a minified version of every single class that's inside of the pde folder that you downloaded from GitHub. So HYPE.pde contains the entire HYPE universe. So you should never have to open that particular document. We're going to be opening build.pde. Now, if you open it, you should see this code here. We're just going to walk through, as a refresher, we're going to walk through what this does. Then, we'll run it and then we'll add HRotate. Now, every processing file has two functions. You'll notice that the first one here is setup. That is again our constructor. It runs once. So it's where we put up all our setup information. Then, our draw function is the loop. It's what runs over and over and over again. Now, you might have noticed in the first class we might have not ever used the draw function or this H.drawStage, which if you remember paints the screen was always inside of setup. So we wanted to do some stuff and then just paint the screen, but we only needed to paint the screen once. Because we're animating, we're actually going to move the H.drawStage into the draw function so that it runs over and over and over again. So let's just look at what we're doing here. From a setup perspective, our movies are going to be a width and a height of 640. We go ahead and add HYPE's constructor, H.init(this). Remember that from the first class? We're going to set a background. The color is going to be a dark gray of 20, 20, 20. I'm going to go ahead and say smooth. I now want to attach something onto the screen. So I'm going to attach an HRect. So appear at the top. I said HRect r1, for rectangle one. Down here on lines 8 through 13, I'm going to add some information about that particular rectangle. For example, what's the size of the rectangle? Well, I want it to be a square, that's a 100 by 100. But I would also like rounded corners with a rounding of 10. Now, on line nine, we're saying, "Okay, I want to add this rectangle to H, H being HYPE, so that HYPE knows that this rectangle exists and it adds the rectangle, so that when H.draw stage runs, it has information about r1. Now, where do we want to attach this rectangle? I say location,.loc. I'm going to say width divided by 2, height divided by 2, which means that it's going to put that rectangle in the center of our screen. Line 11, I don't want any stroke. Line 12, a fill, a nice orange color. Now, notice that we're not covering anchor at all at this point. If you remember from the first class, if you don't specify anchor, then you're rotating off of 0, 0, right? So it puts it in the upper left hand corner. Now, move down to the draw. We're going to make a loop H.drawStage is now drawing over and over and over and over again. Then, on lines 22 and 23, I just put some processing code to visualize where the anchor is. So you'll notice, I said, "Hey, don't do any fills so that it kills the fill of orange up on line 12. Give me a stroke weight of 2 and give me a stroke color of a teal blue, 0095A8." Then, again just using some basic processing code, I just said, "I want to make an ellipse. The x and y position of the ellipse is, well, what's the x and y position of r1?" So you notice I said that the x is r1.x open parenth close parenth. So it gets the x position of r1, and then it gets the position of r1 on the y axis and the width and height of that ellipse is 4 by 4. Now, you'll notice that I have this code right here commented out because we're not quite ready for it yet. But if I go ahead and test the sketch, you should see that it indeed gave us a file that 640 by 640, the background color is gray. It attached our rectangle. It did around the corners. It's orange. We've added that little blue dot right in the center so that we know where the anchor point is. So you'll notice that that dot is in the exact center of width divided by 2, height divided by 2, and that the artwork hangs off of the bottom right because that top left hand corner is the anchor point, is the registration. Now, believe it or not this is an animation. The draw function on line 19 is firing over and over and over again, but what's happening is that no positions have changed. So it's not moving it's x position or y position or scale or rotation, but it is actually painting that thing rapidly over and over and over again. It just happens that it's in the exact location previously. So there is an animation happening. This is very conceptual. There isn't a loop happening but nothing is changing visually on the screen. It's just repainting everything in the exact location over and over and over again. Now, I want to rotate this thing. Rotating stuff and processing for me has always been a little bit wonky because degrees versus radians, where is the anchor point? What am I rotating around? So honestly, I hope that if you're wanting to rotate things, you're going to love using HYPE to rotate things because I just think it's a little bit easier than having to do a push matrix, a pop matrix and then rotate with that and blah blah blah. So let's go ahead and uncomment the outlines 15 and 16. This is just an example of how you can use HRotate. Actually, this code is going to get a little bit simpler as we proceed forward but lets take baby steps here. So in line 15, I'm simply saying I want to make an HRotate and I'm going to call it hr1. So HRotate1. It is a new HRotate. So line 15 says, "Okay. Cool. Hype, you have added a rotation behavior to you, but I need to know some stuff." The stuff that it needs to know is who it's rotating and a speed. Now, speed gets a little tricky because that can be a positive or a negative number. Positive being clockwise, a negative number being counter-clockwise. So look at line 16. I say, "Hey, HRotate1, your target is that rectangle, r1. So that's the guy that you want to rotate. Your speed is 2." Notice that I don't have to specify radians. I'm just giving it a number. Now, as it happens, HYPE by default does degrees. So if I actually run this file, you will now notice that the rectangle is rotating two degrees at a time. So again, the speed can be a positive number. It's a float. So if you wanted to really slow this down, you could say 0.5 and you could run it and you would notice that it slows down. You could change this to a negative two and that simply would go counter-clockwise. So there we go, we've animated something. We're rotating our rectangle around an anchor point. Now, I'm going to go ahead and close that file and I'm going to look at our folder here at example two. Again, in example two, there's just a build.pde and a HYPE.pde. Now, if you open up example two, code is still basically the same. I just want to show that if you happen to be a lover of radians, you actually can do.speedRad, instead of.speed. So.speed is going to do degrees,.speedRad is going to give you that rotation in radians. So in example two, this is the only thing that is different is specifying speedRad instead of speed. So that's the only difference in example two. Again, if you're a lover of using radians like negative 2 Pi divided by 90, then of course you can do it that way. So that's example two. Finally, in this video, I just want to talk about example three before we move on to the next video. Again, in example three, there's only a build.pde and HYPE.pde. In example three, you can see here in either example one or example two creating a rotation, created two lines of code. You had to create an instance of HRotate and then tell it target and speed. But again, I want to do things quickly. I want to be able to sketch out my ideas rapidly without having to fuss about writing a lot of code. So it's actually a file three that is my favorite because it uses the most minimal amount of code. In this case, all you have to do is say one line of code. Again, this is the way that I like to do it. Line 21 you can just say, "Hey Hype, I want to make a new HRotate." HRotate can be passed two arguments. The first being the target, the second being the speed. So line 21 is the change on file three from files one and two. It's simplifying two lines of code down to one line of code. Again, by just running the sketch, you'll notice that we still get the rotation. We're still rotating around that anchor point, but I'm writing less code. At the end of the day, I want to write less code. I want to get results and write less code. So line 21, new HRotate, r1, the target, 0.5, the speed. Again, you can come in here and make this a negative number and it will then animate counter-clockwise. Now, this ends this video. We haven't really done dealt with anchor at all. So in the next video, we're going to look at the next span of HRotate files that talk about the different flexible things that we can do with anchor. So see you in the next video. 7. Unit 2, Video 2: All right. So, in this video, I want to work through the next four files, which is going to be example four, five, six, and seven, because they're all clustered together because they are going to deal with anchor, you'll see here in a moment. So, let's look at example four and let's run through what I have set up here. Instead of rotating one rectangle, I'm actually going to rotate three. So, let's just look at some of the adjustments. Up at the top, we have HRect r1, r2, r3, since we're going to attach three rectangles, and all I did basically was copy and paste one rectangle two more times, and made some slight adjustments. So, r1, r2, r3 just copies, and the only thing that's been changed is the colors are going to do a gradation of oranges. So, you got a dark orange, medium orange, and a light orange. Then I'm obviously changing their location. So, since I have three rectangles and I want the middle one to be in the center of the screen, if you look at d2, location says width divided by two height divided by two. So, we know that r2 is going to be in the center of the screen. Now, if you look at r1, I just said, hey, width divided by two, height divided by two. But when you do that width divided by two, just subtract 160. So, it starts in the center and then moves 160 pixels off of the center. Of course, r3 is plus 160. So, if you look at the location for r3, it's width divided by two plus 160. Now, the reason why I put three rectangles in this piece is so that we could really start to explore the different facets of using anchoring. Now, we covered this a little bit in the first class, but again this is a nice refresher. Let's look at lines 29 through 31. We have three separate HRotate, and again you can call multiple HRotate. So, what happens is I'm basically registering three rotation behaviors and specifying different targets. So, the first HRotate is going to target r1, the second instance of HRotate r2, the third instance of HRotate r3. Now, if we look inside of our draw, I just added again a little bit more processing code to specify where the anchor point of rotation is. So, let's go ahead and test this sketch and see what happens. So, we have three rectangles. We have them moving at different rotation speeds because we've registered three different HRotates. Again, we're looking at the anchor point here. So, if no anchor is specified, again, we've got that 00 and the three of these guys are moving. Great. So, let's now take this and just save it out a few more times and start to explore working with anchors. So, with that, I'm going to go to example five. I'm just going to throw this over here on the screen. All right. So, if you open up now example five, this is a duplicate of example four except for we've added an anchoring system. All right. So, if you look at r1, r2, and r3, you can see that we have put in what's called a constant. So, this is a Hype constant, and we're going to explore constants here in a little bit. The constant here is H.CENTER. So, we're saying that the rectangle is 100 by 100, so, on lines 10, on lines 18, and on lines 26, we're saying great, find the center point based on the object's width and height. So, since the rectangles are 100 by 100, that anchorAt H.CENTER ends up being 50-50, and let's go ahead and test this sketch and you should see that we're still getting the rotation, but we have in fact changed where the anchor of rotation occurs. So, now, again our little blue dots are representations of the anchors haven't changed, you can see they're still in the same exact positions. But now, we're getting this nice rotation this way because we've asked anchorAt to be H.CENTER. Now, if you wanted you could open up the HYPE Processing folder, and if you actually went into pde, you would see that there is an HConstants.pde. If you actually would open this up, you would see a lot of the available constants that are inside of Hype. We've got things like left, right, center, colors. So, you can see here we've got center, and of course it's populated with some default numbers, but those get overridden based on your assets size. So, check this out. We've got other constants like top-left, top-right, bottom-left, bottom-right, so on and so forth. So, this H.constants.pde is nice because you can look through this and see all the different types of constants that we have flushed out inside of height. So, center, great. We've got that center pivot point. Now, let's go ahead and move on to example six because it's going to start to explore some of these other constants that we have inside of the Hype framework. So, again, example six is the same as four and five, we've just changed the anchorAt constants. So, look at r1. On this one, on line ten, we said well, okay I want to anchorAt but this time let's do center-top. So, if we had a piece of artwork, it would go to the top but then it would center on that object's width. r2, just doing H.CENTER again, r3, looking to see what bottom-right would do. So now, if we test this sketch, we're starting to look at the different types of available anchor points that we have. Now, the only one that really looks different is r1 because you've said center-top. It's hard to see that that actually r3 is bottom-right because it looks very similar to no anchorAt all which is 00. So, you have to be aware that sometimes some of these anchors, who would know that that's actually bottom-right because it looks very similar to a rotation of 00. So, these constants do exist, it doesn't necessarily represent onscreen, that hey it's not 00 it's actually we're actually anchoring on the bottom-right. You would see it visually anchored on the bottom-right if we were actually rotating maybe some artwork that we made an illustrator, or a typeface and so that you could see that how it was spinning around that anchor wasn't at the top of the letter a but maybe the bottom-right of the letter a, if we were doing something with type. Now, anchorAt is nice, but we start to get into some a lot more interesting things when you just use anchor. So, anchorAt always wants to be fed a constant, anchor wants to know coordinates. So, I'm going to go ahead and close example six and I'm going to move on to our last example for this video which is example seven. Now, when you open up example seven, as you might have guessed it's the same as four, five, and, six except for instead of using anchorAt, we're using anchor. Now, I like to stay in anchor because I like to be able to mess with the numbers and see different types of results. Now, anchor allows you to specify any x and y coordinate. So, again, if we look here on line 10, on line 18, and on line 26, you can specify any x and y position as the anchor point for rotation, and here's where Hype really shines. To do this in just regular Processing, it becomes I think a little bit more difficult to actually have an object rotate around a specified anchor position as easily as it is with using Hype. Now, let's look at r1 and r2 and r3. We all know that the artwork is 100 by 100. So, if we look at r1, let's look at the first anchor position. We've said that the x is 50 and that the y is 25. So, what that would tell us is that if this is our artwork that we know that the exposition is the middle. Because 50 is half of 100, so that we know that on the x-axis it's half the distance. But the y is now 25, which means it's just dropped down 25 pixels from the top. If we look at r2, we can see that its x is also 50, but it's y is negative 25 which means actually the anchor point is off of the artwork and slightly above it 25 pixels. r3, again a little unusual, the anchor position is zero for the x but 150 for the y. So, it too is also off of the artwork. Now, let's go ahead and test this sketch, and we'll start to see these different types of rotations. So again, I really happen to favor anchor, because as I start to move things around or animate things on screen, I tend to be more surprised when I'm using anchor and especially when I'm using anchor with numbers that are off of the artwork. So, the artwork is sweeping around and such. So, this wraps up this video where we've really cover these four files that introduce us to anchor and anchorAt. The last video is going to cover the last three files and the section that just shows some tweaks and possibilities with using HRotate. Also we'll probably introduce some stuff that we're not going to cover until a few more sections but I think it's nice to show some stuff that's to come. So, remember that anchor is not just with rotation it's with any behavior. Its with HTween, its HOscillator. So, anchor become super important as we start to move things around on screen, because it will really dictate the type of animation that we're seeing. Is it something that's fixed and swirling around a center point or do we get these sweeping movements because we've actually set the anchor off of the artwork. So, keep this in mind as you start to try your own adjustments when you're animating things that anchor can be this thing that you can try a lot of different numbers and we'll get a lot of different animated results. Okay. Three more files left. See you in next video. 8. Unit 2, Video 3: Okay, so we are going to cover the last three files in the section of HRotate. There's just some tricks. I just really love some of these features here. So, let's start with example eight. Example eight covers the idea of nesting, and what happens if one object is nested inside of another object, but that main object has an HRotate assigned to it. So, love this, and this is such a great trick that you can use here. So, let's break down example eight. I want to draw two rectangles. So, I've got r1 and I've got r2. R1 is a 100 by 100. It has an anchor of negative 50. So, we know that the artwork is going to be centered. But, why position is going to be negative 50 pixels off of the artwork above it, okay? We can also see that r1 has a color of orange. Here's the important part. Look at this, right here, line 9 is H.add(r). So we're adding to the stage, we're telling hype that we're adding this rectangle called r1. Now let's just forget about r2 for a second because down here on line 23, you can see I have it comment out but it says new HRotate(r1), so we know just from this block of code that the rotation is going to be applied to to r1. Now I'm introducing r2. R2 has some slightly different settings. First of all, the artwork is only 50 by 50 so it's a smaller rectangle and you can see that it has a different anchor point. It has an anchor of 25 which of course is half of 50, so that we know that it's going to be centered but it's negative 25 off of its Y. So we know that it's 25 pixels above. You can see here by the fill that it is a also a shade of teal. Now line 17 is the magic. Line 17, do we add r2 to H? No! We're actually going to put the r2 rectangle inside of the r1 rectangle. So you can see there on line 17 we're saying r1.add(r2) and so if I were to test this sketch what you would see is two rectangles. But what you don't know visually at least just yet is that r2 is actually inside of r1, but because it's added later second it does reside above it. So it does have a higher depth because we added it second. But if you could think of r1 as just this object that has infinite space, it ends up that r2 is inside of r1 but floated above it. Now the best analogy that maybe I could come up with is like grouping in Photoshop or Illustrator. So if you had two layers, you could group them together into one folder or something like that. So if you actually moved that folder, you would move all of the assets that were in that particular grouping. Now the reason why this is awesome is because if I uncomment out line 23 and say rotate r1 as you might have guessed, it actually rotates r2. So the simple fact that I'm applying one HRotate to one asset but then investing another asset inside of that asset, yeah it's going to rotate with it. So, I like this idea of nesting because it makes my code a little slimmer because I only need to specify one HRotate and r2 is just inside of r1 so don't forget that you can do this kind of nesting. So, any time you H.add, it's adding that object to the stage. But then once an object has been added, you can start to do nesting. Like in the previous files, we had an r1, r2, r3, you could add r1 to H and then r2 could be in r1, r3 could be in r1, r3 could be in r2. You can do any kind of multilevel nesting like that. Again we only need one HRotate because the other objects are inside of it so of course they get rotated as a group. Pretty killer. Something to think about. Let's move on to example nine. Now open up example nine and I'm going to introduce a few things. Again, I like to show a preview of stuff that's come. Down here at the bottom, you're going to see that we're going to show HOscillator. HOscillator we don't cover until a few more sections but again it's just the power of awesome. I will show it to you. So, let's work this one out. The first thing is before we get to HOscillator let's just look at some of the changes that have happened. First is I put in an auto clear false so this is something that I don't think we really covered in the first class because again we weren't animating anything. But if draw is running over and over and over again, if it's a loop, auto clear true is default which means that if you don't specify auto clear, it's true by default, which means I will clear the background before I paint something again. So, in the case of all of the other files that we've shown, it looks like a single object that's been moving all by itself and it hasn't been leaving any residue, because we've actually been clearing the display before we paint the display. Well, by changing hypes constructor to say auto clear false we're saying, hey man don't clear the screen just keep painting that thing forever and ever and ever and don't wipe the screen at all and we'll see what that does. Some other changes. We added a stroke and the stroke on all three of these is dark orange and we added a fill. The fill is the same color as the background and it has different anchor positions. So, 50,150 for r1, 50, 200 for r2, and 50, 250 for R3. So, there's a couple of different age rotates parameters here. So, positive one, positive two, and negative three. So, let's just go ahead and look at what this auto clear false does. If I run this sketch right here, you'll see that we're not clearing the display before we paint the display again. So, again, auto clear is true by default in hype if you don't specify it. So, in any of the other files that we've seen, it's always cleared the display before it's painted the display. Well, now I'm saying, don't do that at all. Why don't you just keep painting that thing as it goes around? So, now it starts to get interesting because here I'm just using a simple rotate and we're painting the trail of this thing as it moves around its rotation. So, fun. Well, let's go ahead and close this and look at this I've added a little H oscillator and I'm not going to go into great detail about each oscillator until later on in the section when we cover that section. But, watch what happens when I run this sketch with three oscillators, and all the oscillator is doing to these three rectangles is changing the scale. So, it's going to be oscillating the scale up and down. So, I'm going to go ahead and run this sketch and you can see that I get the rotation around its anchor, and I'm leaving a trail because I'm saying autoClear false, but oscillator is oscillating the scale up and down based on some settings. So, you can see just from this simple amount of code, we can start to get some pretty interesting patterns and obviously this is just a rectangle if we put in some svg or some other assets, you can begin to imagine how I'm having a heyday on Tumblr with this stuff, creating these sort of little animations on Tumblr. Just using these very simple properties. Our example nine, a preview of the awesome to come. We got one last file here. I just wanted to show rotating svg. So, in the other files, we were just rotating some rectangles. If I were to open up the examples 10 folder, you could see that I've got a data fault, so right, there's a build.pde, there is HYPE.pde, but now there's a data folder and inside that data folder, I have two svgs. I have a small cog and I have a large cog. So, I just made these in Illustrator and outputted them as svg assets. What I want to do is, is animate those cogs. So, check it out. I, basically, this is the adding of the artwork and the rotating of the artwork. So, you can see here. I'm saying, I want to import an svg. Please go get the small cog. I want to enable style false. So, if you remember from the first class that kills any of the coloring that was specified inside of Illustrator, I didn't anchor at center, because I want that cog to spin around its center point. I gave it a location to 223 on the x, 413 on the y, and got it as a dark orange and then look what I did here. I said, "H rotate, hey, I want to rotate svg1 negative 0.5." Then, this next block here, I've said, "Okay, svg2, go get the large svg." Again, enable stylus false, again, I want a center. I'm putting this at an x and y of 690 to 60 and the fill is a medium orange, and I've said HRotate svg2 0.3333. Now, when I actually run this sketch, you would see that I have an animation of these two cogs spinning against each other. All of this is using is HRotate. The nice thing is, if I just move this to the side here and I'm just going to open up a new browser because HYPE is not a jar file. I just want to show you here that if I go to movabletype.com, you can see that I actually published this to JavaScript. So, that's actually the animation that's running here in the background of the movable type website. I'm able to create that animation using canvas. So, I opened this up in processing, I switched the mode to JavaScript, and actually outputted this using processing JS, which makes a canvas and you're now viewing that animation in canvas. So, look at this 29 lines of code. I was able to produce this animation for this website in about, I think, 11 minutes and that's what HYPE is great at doing, is helping me prototype and sketch ideas very quickly without having to write a lot of code. So, I was able to use HYPE to pull in the shapes and use HRotate to animate those cogs against each other that would sit beautifully in the background, and again this runs on tablets and most modern browsers. Awesome. This concludes the HRotate and an anchor section. We're now going to move on to the next series of videos which deals with each canvas and how to paint to something other than just the stage. So, see in the next section. 9. Intro to HCanvas: Now, great. We've rotated something, but that object that we've actually rotated in that previous section as well as the very first class, everything got painted on the stage. So, we need a backup for a second and we're now going to cover HCanvas. What is HCanvas? HCanvas is processing's P graphics. So, think of it as you're creating an image and we're actually going to paint to that image. Now, why is that better than painting to the stage. Well, we can stack multiple HCanvases on top of each other. So, much like Photoshop or Illustrator, we can use HCanvas to do layering, right? So, we can have certain things paint on a lower plane and certain things being painted on an upper plane. So, the other benefit to having this kind of canvas layering is think about if we were painting to stage and we have some kind of behavior like fading or blurring. That fading or blurring would happen to every single thing that was getting painted on the stage. So, another benefit to using HCanvas is we can specify types of fading or blurring to only happen on a per canvas layer. So, for example, an animation can happen on our top layer that doesn't have any kind of fading at all, but we might have a swarm behavior on the bottom that we wanted to leave trails. So, in this section, you're going to see that using HCanvas has greater benefits than just painting directly to the stage. 10. Unit 3, Video 1: Okay. We are now in HCanvas. Again, attached to the section is a zip file for each canvas, and there are six example files in this folder. Now, in the first class and up until this point, we have been painting objects on the stage. Yeah, so we've been saying H.add and what happens is, is that any objects that we happen to be painting with whether they're drawables like ellipses or rectangles, or if they're images, or paths or SVG, all of that content has been painting onto the stage. So, in some scenarios this would be not favorable. Let's find out what those scenarios are. So, let's look at the first example. The first example is like a Hrotate examples. It looks like we're attaching an HRect called R1. R1 is a square that is 100 by 100. It has arounding of 10. It has an anchor of 50 and 125. The location is the middle of the screen with divide by two, height divided by two. This rectangle does not have a stroke, and it is a fill color of orange. You can see we have an Hrotate, and it's rotating R1 and it's rotating at a speed of two degrees each time. Now, you'll notice on line five that I'm setting up autoClear false. So, I don't want it to wipe the display, I want it to keep painting the trails. Now, watch what happens when we run this sketch. You'll notice that the rectangle starts, and voila. Because we're doing autoClear false, it paints the rectangle around the rotation and obviously once it makes a full 360 degree turn, you have no clue that actually an animation is happening here. But in fact, there is one that boxes is slowly making a rotation around that path. So, what if I wanted to fade this out? What if I wanted to have that box leave a trail, but then slowly fade that trail away into the background? Now, I am going to show you a non-hype trick for doing that. You'll probably see this in a lot of processing sketches. So, example one is a problem we need to fix. So, let's move on to example two. Now, if you go into example two, you'll notice that it's this copy of an example one, however, I've done something a little tricky in the draw. Again, you might see this in other processing sketches, but it has some limitations. Now, the trick is inside of the draw, before I actually paint that rectangle moving in a rotation, I'm saying okay, I want to create a fill, and that fill is 20, 20, 20, same exact color as the background, but instead of the alpha being 255, the alpha is only 10. So we're creating a fill, same color as the background, but it has an alpha of 10. Now, look at line 21. Here is the fun little trick that people have been using, which is, what if we had the stage and what if we made a rectangle the same exact size of the stage, but that rectangle had that fill of 20, 20, 20 at an alpha of 10, and got painted on top of the stage? Then the rectangle would get drawn, then the loop would run again. So, it's constantly smacking this huge rectangle, the same size as the background, but with a fill and an alpha of 20. So by doing that over and over again, it would appear to burn out the trail in the background. However, if you've used this trick you know what's going to happen next, which is, it has a little bit of a limitation. So if we test the sketch, you'd see that, yes, it in fact start to burn it out, but because the fill is only a alpha of 10, for some reason processing doesn't build it up enough to actually burn it back all the way to the background. So, you might notice that it's actually left a green ghost of a circle, it actually doesn't burn it completely away to the background. So, bit of a limitation there. So I want to get this effect, but I don't want that residue to be left in the background. So, in this section I want to keep the video short so I'm going to stop right here, then we'll move on to example three which is going to use this concept of canvas. So I'm going to stop the video here, we'll move on to the next one and I'll get into the nuts and bolts of using each canvas. See you in the next video. 11. Unit 3, Video 2: Okay. We are in example 3 which is going to illustrate this idea of HCanvas. Now, each canvas inside of processing is a P graphics which basically means it is an image. What I want to do is is paint to that image, not to the stage. Okay. So, a good analogy would be like Photoshop. When you start up Photoshop and you start making some artwork, typically you have one layer in your layer's file and that layer is called background. And you say, I want a new layer, and that adds a new layer on top and then you start making artwork inside of that thing, and it doesn't have anything to do with the background. So, same exact concept which is, we have our stage and we're going to add each canvas above stage and we're going to be painting to that. You'll see in some of these later files that has tremendous advantages. So, let's take a look at this file. Up at the top here, you see HCanva c1, canvas one, and you'll see here on lines, well more importantly, I just want to point out on line 6. You'll notice that I removed autoClear(false), right? If I go back to example 1 for example, you'll see I set autoClear(false). So, I removed autoClear(false) from line 6 because that's the stage and I'm not going to be painting to the stage. So, you can go ahead and clear the stage because the only thing that I'm going to paint to it is this canvas. Okay. So, you'll notice that I've removed autoClear(false) from line 6. Now, lines 9 and 10 are new. It says, "c1 = new HCanvas" and here is where we put the autoClear(false). I want that image that we're painting to, I don't want to clear that before I paint again. So, now I'm leaving the trails on the canvas. Look at line 10, you're saying, "H.add(c1)". So, you've got your stage and then above your stage, you're adding this HCanvas. Now, let's go ahead and look at the attaching of the rectangle. So, here is our rectangle and you'll notice that it's pretty much the same from example 1, example 2 except for line 13. Line 13 says don't add this to the stage H, add this to this canvas that we just created called c1. So, remember that nesting example that we did in HRotate? Same exact concept. So, we've got our stage, we've got our canvas and we're actually painting the rectangle into the HCanvas, right? So we're nesting. Okay. So again, no h.add(r1), it's c1.add(r1). All right. Again, we're doing a little rotation on r1 and in the draw we're just painting H.drawStage. Now, watch what happens. Now, you might notice that my file has one thing missing, then the zip and I'm doing that for a reason. Watch happen! What Josh! Test movie. Now, right now. Okay. Run the sketch and look, it looks exactly like file 1 in the sense that it's not fading at all, right? It's not burning out. But again, we've got our stage, we've got our canvas, and we've got our rectangle that's rotating inside of the canvas. Now, all I have to do, again you see it in your file, right up here, I can put fade and then pass in a number. In this case I want to fade a four. So, if I go ahead and run this sketch now, you'll now see that it's basically is doing what example 2 did except for its perfect pixel fading, that it actually doesn't leave that green ghost behind in this file. So, awesome. Okay. So hopefully, you understand what's happening here is that our stage is holding our HCanvas and our HCanvas is what's holding our rectangle and by putting in this fade four, we're burning this thing out. So, obviously, the lowest number that you can put is a fade of one and that would slowly, right. So, that would slowly burn that out. In fact, so slow that it doesn't have a chance to burn it out before the loop starts again. Now, let me just put this back to four so that it mimics yours. So, I used this analogy of Photoshop and this is where HCanvas really shines because let's look at another problem that we would encounter if we weren't using HCanvas. Okay. So, I'm going to move on to example 4. Now, example 4 has HCanvas removed again. I took it out because I want to pose another problem which is, what if we have three assets, right? So if we just skimmed this very quickly, you would see that this is a mimic of example 2 except for in example 2 we're only painting one thing and in example 4 we're painting three things, right? So, I've got three calls to make an HRect. I've got r1, r2 and r3, and again I'm rotating them. Again, I'm showing you that trick of just creating a fill with an alpha of 10 and then painting a very large rectangle on top of it. Now, the reason why I'm showing this again is because if I run this file, again, you'll notice that it doesn't burn it out perfectly and we're getting that ghosting but we're getting that ghosting in three different colors now because, again, it can't burn out perfectly to the back screen. So, great. This now showcases this idea of, oh my god, what if I'm painting three things? How does canvas be the lover that I've always wished for? Because like that Photoshop analogy, I can have 3 HCanvases, and I can ask each of these three rectangles to paint to their own separate HCanvas. If they're painting to their own separate HCanvas, we can do all sorts of different effects on those each canvases, like, "Hey, auto-clear true, don't paint the trails." Or, "Make this one a fade of four and make this one a fade of eight." So, I literally think of each canvas like layers and Photoshop, and I can apply different treatments to those canvases. So, let's go ahead and close this file, and let's see the fix in example 5. So, in example 5, I fix, I get back to example three, but with example four's structure. So, I want to paint three things. Now, check this out. Up at the top, I have each canvas c1, c2, c3, canvas one, canvas two, canvas three. You'll notice that I set up the canvases on lines nine through 11 where I say, "Okay, c1 is an HCanvas, c2 is an HCanvas, and c3 is an HCanvas, but I'm going to give them different settings. The c1 canvas is going to auto clear true, so it's not going to paint trails. The c2 is going to do a fade of eight, and the c_3 is going to do a fade of two. So, again it's like setting up three layers on top of the stage and giving them different animation filter properties. Yes. Now, look at lines 13 through 15. This is the order that they get stacked. So, you've got stage, then c1, then c2, then c3. So, that is the order layer, because that's the order that I put them in the code. So, stages first, c1, then c2, then c3. Excuse me. Now, each of the r1, r2 and r3, they're going to talk to their c1, c2, c3s. So, on line 18, c1, r1, line 25, c2 to r2, line 32, c3 to r3. So, each rectangle is painting to its own separate canvas. Again, we've got our rotations in here, and in the draw we're just asking it to draw a stage. Awesome. Let's run it. So, I'm going to go ahead and run this, and you'll notice that we get exactly what we had anticipated, is creating three layers, three canvases painting our rectangles to each of those canvases and having a different look, something you could not achieve and processing just by doing that. One rectangle burnout trick inside of the draw, because it would apply it to all three. So, example five really starts to, I think clue in now to all these great things that we can do using HCanvas, which is, "Oh, my God, I'm going to think of HCanvas as layers, and maybe on one layer I've got type and I don't want that type to leave trails, but then I've got this other layer that might have some animation that is leaving trails." So, you begin to think of each canvas like layers like in Photoshop and you're just applying different effects to each of those HCanvases. So, then I thought, I would just give you one last file before we end out the section which is example six. Example six is just going to put these three rectangles on top of each other. So, if you go to example six, you'll notice that really the only thing that has changed, and this one in particular, is take a look at the fades I put in a fade two, a fade four, and a fade eIght for each of the canvases. But now, look what I did on lines 13 through 15, I reversed the order in which they get attached. So, I said, "Hey, I want the stage, then I want canvas 3, then canvas 2, and then canvas 1." So, I've changed the stacking order because that relates to the fade. c3 is going to burn out a lot slower, so I actually want it on the bottom. c2 is going to burn out a little bit faster, I want it in the middle, and c1 is actually going to burn out the fastest with a fade of eight, and I actually want that on top. So, I've actually reversed the stacking order of the layers. The last thing I did is on line 19, on line 26 and on line 33, I just have them all in the middle of the canvas. So, it's with divided by two, height divided by two. When you actually run this, because they are three different colors, and because they are on three different canvases, and because they are burning out at three different rates, it creates this really pretty gradient. So, you can do these tricks where we're using HCanvas conceptually like creating layers, and we can treat each of those layers with different effects like, please clear the background, or don't clear the background, go ahead and add a fade. Awesome. We're going to use HCanvas a lot, because again, when I think about the creation of animation, I want a layer of things on uncertain levels, and HCanvas allows us to do that. So, again, nothing's happening on the stage, everything is happening on this HCanvas layers. Sweet! That wraps up this section. We're going to use HCanvas a ton in the rest of the sections. Next, we're going to move onto HFollow, which at this point, rotation really hasn't had any input. Each canvas didn't have any input. So, HFollow is the next animation behavior that uses the mouse's input. So, it's going to follow where we make mouse movements. So, wrapping up each canvas, I'll see you in a HFollow. 12. Intro to HFollow: So, in this section we're going to be covering H-follow, okay.H-follow is going to be using in these examples the mouse as input. So, in some of the later sections we're going to be learning about behaviors and behaviors might run independently, but in this particular case H-follow is actually going to use the mouse as input. So, as we start to move our mouse across the screen or actually execute gesture, we'll have something that actually follows that gesture movement. Now, H-follow has a bunch of different parameters that we can actually apply to this. So, for example, if I paint an object on screen and then I say that I want this object to H-follow, it's a one-to-one ratio which means everywhere I move my mouse, that object is stuck to that particular mouse position. But, we can actually extend this behavior by introducing a few more arguments. So, I can say things like this H-follow has an ease or a spring to it, and if I said that H-follow has easing, as I move my mouse the object would make a slow transition to the mouse. So, as I moved it would sort of slowly be trailing behind. So, you'd get this nice gentle movement in. If I implement a spring, you get elasticity or rubber banding. So, I could start to move my mouse around and the object would actually rubber band around that particular mouse movement. So, with the ending of this particular section we're going to learn how to move mouse, execute gesture, which is a great combination with pixel colorist, right? So, this very last file that we're going to work on, we're actually going to load in a photograph and we can actually move the mouse much like a brush and actually pick up color from a photograph. So, It'll be an interesting way to actually do a portrait of someone because you'd use that portrait information from that photograph and using H-follow to execute like a custom brush. 13. Unit 4, Video 1: Hello. Welcome to HFollow. Now, in the first couple of examples, we've used animation that wasn't driven by any input. So, with HFollow, we're going to cover how to use the mouse to actually drive input. So, we'll execute gesture and something will follow our mouse. Now, if you download the zip file that's associated with this video, you should unzip that, open it up and see that there are six files associated with HFollow. Now, I have example one open right now and you'll notice that, I have some comments added into this file so that you can see some of the functionality of HFollow, some of the arguments that it supports as well as learning how to register, unregister, add or remove a behavior. So, if you're an intermediate programmer to processing, I'm just showcasing some of the feature sets of HFollow. All right. So, let's break down this first file. You can see up here at the top, I'm creating an instance of HFollow called mf for mouse follow. I've got r1, HRect where auto clear is not present here so we know that's going to be clearing the background. We've got our rectangle, it's a 100 by 100 with a quarter radius of 40. We are not applying any stroke to r1. The fill is going to be a light shade of grey ECECEC. The location to start is in the center of the canvas, with divide by two, height divide by two. The anchor point is going to be in the center and I'm simply going to rotate this rectangle 45 degrees. So, by rotating at 45 degrees, should look like a diamond. I go ahead and add r1 to the stage and then right here I specify mouse follow up. So, I say mouse follow, you're a new HFollow and the target is r1. Of course, avoid draw simply just as H.drawStage. Now, if I run this sketch, you'll notice that it's basically a 1 to 1 ratio. So, wherever the mouse goes, the r1 is stuck to that position. So, there is no latency. I just move this around and wherever I go it goes. So basically, HFollow is a way, as a shortcut for doing the x and y position of the mouse. Now, you might be looking at this comments and realize,, oh, okay, there's some other features here. So, I thought I would blow out those features two separate examples. So, let's go ahead and look at example two. Now, the only thing that's different in example two is applying some "ease" to this follow. So, if you look at line 21 here, we have a mouse follow is a new HFollow. The target is still r1 but we've added an ease of 0.1. So, it's not going to be a 1 to 1 ratio of where the mouse is. It's actually going to ease into position. So, if I run this sketch, you should notice that as you move your mouse, r1 is chasing the mouse but it does have some easing to it. So, it's not a 1 to 1 ratio but slowly animates into place. Now, there's another argument besides ease, so if we go ahead and closed the sketch and look at example three, the only thing that's different in example three is that we've added the attribute of spring. So, we want to get some elasticity going here. So, you'll see that I still have ease at 0.1 but I've had applied some spring to this HFollow and that spring is doing 0.95. Again, if we run this sketch here, we'll see that it is not a 1 to 1 ratio. It does actually ease to the mouse but it also has this elasticity. So, it's pretty fun if you end up doing the circles here. You get these nice elastic patterns. Now, with this, you could see that this could be a pretty good system for making brushes. I could use this as a brush and somebody could execute gesture and some kind of painting could happen. So, let's go ahead and close this and look at example four and example four just says, all right, well, let's treat this like it's a brush. So, the first thing I want you to notice is on line seven, we said autoClear(false). So, as we actually move gesture, it's going to leave the path because it's not clearing the background before it paints the rectangle again. I've also added an HColorPool and provided some colors. So, here on line 10, I create the new HColorPool and then I specify some colors inside of that pool. Let's take a look at r1 because r1 did adjust a little bit. In the first three versions, we really weren't doing anything with the stroke. Here you can see I've said, well, I want to make the stroke weight too and I want to make the fill a very dark grey; 111111. So, that's the change here and r1 is adding a stroke weight and actually changing the fill from that EC to the 11. Again, the mouse follow hasn't changed. It looks like I slowed down the easing. So, the easing is 0.05 and the spring is still going to be really elastic at that 0.95. Now, the change here is online 30 I said, okay, as this runs, I want to update r1's stroke to randomly get a color out of lines ten's color array. So, unlike 30, it's going to be randomly picking one of these colors. Now, if I run the sketch now, again you should see that it is randomly picking a stroke color. But as I started to move my mouse, I'm leaving the path of where this elastic mouse follow traveled. So again, I can think of this as a brush as I move my mouse position on screen. So, let's add onto this. So, I thought, well, okay that's nice that we're picking random color but if you look at example five, example five says, well, let's get the color actually from an image. So, if you look at example five, there is actually a data folder and inside of that data folder, is this JPEG that I took in Sintra Portugal. We're going to use HPixelColorist to actually steal the color from this JPEG. So, if you look at line three here, instead of using color pool, we're using HPixelColorist and then on lines 10 through 14, I've specified the image that HPixelColorist should use which is, Hey, go get this sintra.jpeg and you can see I'm also passing along the argument that I only want to apply the coloring to the fill. Not to the stroke, not to the fill and stroke but only to the fill. All right. So, let's look at r1 HRect. The only real adjustment that I made here was that I added a stroke color of black and put in an alpha of 150. So, the stroke is not going to be solid 255 black, it's going to be a little bit of Alpha to it. Updating the draw down on line 35 here, you can see that we're saying colors.applycolortor_1 and because color is specified fill only, it's actually only going to update the fills. So, if I go ahead and run this sketch, now I have a way of using a brush but I'm actually sampling the color information from the JPEG provided. So, the X and Y position of my mouse is stealing the x and y position on the JPEG and looking at the color of the pixel at that specific x and y position. So, this is a trick that a lot of us have seen Eric Netsky use, where he has these systems that are actually painting and sampling the color from photographs that he takes. So, up to this point, we've done five exams but you might have noticed that we did not introduce our good friend HCanvas. So, I thought I would add an example six and inside of examples six, I have eight added HCanvas c1 on lines 11 through 12. I'm saying, hey, I want to make an HCanvas, the auto clear is false on the HCanvas. So, I removed it from line eight moved it down here so that I'm not auto clearing the HCanvas and I put in that lovely fade of four and then H.addC1 and then if you look down on line 25, I'm saying rather than H.add I'm saying please add r1 to the canvas C1. Other than that, everything else is still the same. If you go ahead and run the sketch, it should look exactly like build 5. Except for we've got that beautiful perfect pixel fading of the gesture using our good friend HCanvas. Awesome. So, we're now starting to look at some more of these behaviors. This is a nice one because it's gesture. We can start to build brushes and it doesn't matter whether we're using an HRect for the brush or using SVG. So, here's a perfect opportunity to take some of the artwork that we drew in the first class and you could actually use your SVG as a replacement to this HRect so you can start to now build these custom brushes using HFollow. Now, the next section, this is like a perfect advancement. HRotate just ran on its own and mouse HFollow required you to listen to the mouse and move the mouse around. The next section, we're going to talk about timer so how do I start to do things based on a tempo. So, each timer would allow me to paint things or introduce things based on a tempo. Of course, if I've got something that's a steady tempo, I'd probably also want to showcase HRandomTrigger and HRandomTrigger, like timer says, I want to fire stuff, I want to introduce stuff, but I don't want to do it on a very steady tempo. I want to randomize that tempo. So, that's what HRandomTrigger is. So, this wraps up a HFollow. Let's move on to timers. See you in the next section. 14. Intro to HTimer and HRandomTrigger: So, with HTimer, we basically have a steady pulse of actions. It's based on a tempo. So, if I set an interval for every 1,000 milliseconds, that would mean that I have an action being triggered every second. I also have the ability to set something like num cycles, which is how many times do I want this tempo to run. So, when that pulse happens, I basically have a callback. So, we'll work on a file that uses HTimer to very steadily paint things on screen. So, while HTimer uses a steady pulse to create something, a nice companion to that is HRandomTrigger, and HRandomTrigger is based on a random tempo. So, there's a variable chance percentage. So, for example, if I said I wanted a random trigger but I wrote something like 1/15, that would mean that random trigger has a 1 in 15 chance of getting created. So, you're still creating a tempo but it's not a steady tempo, it's offset a little bit based on a random percentage. So, you might get bop, bop bop bop, bop, bop, bop. So, we're still creating with tempo, but it's not a steady tempo as previously used in HTimer. 15. Unit 5, Video 1: Okay. In this section, we're going to cover timers. HTimer, which as I mentioned before, is going to fire something based on a pulse and each random trigger which is going to randomly trigger a pulse based on chance, probability. So, in this video, we'll actually attach to this video, you should see that there is actually a zip file. If you download that zip file, there should be nine files in that zip. The first seven deal with HTimer and then there are two in there that deal with HRandomTrigger. In this particular video, we're going to cover the first four examples in HTimer. Now, let's go ahead and open up example one, which is HTimer one. In this particular example, actually, nothing gets painted on screen. We're actually just going to print an output to the output window here inside of Sublime Text 2 that's just going to say Hello World and a counter. So, let's take a look at timer. It's got some arguments that we probably want to run through. The first is appear at the top. I say HTimer is a timer. Forget about counter for a moment. Nothing much happening in terms of size, background, what not, but here on lines nine through 20, I actually specify the timer. So, I say, timer equals a new HTimer and again, let's look at some of the arguments of timer here. The first is numCycles. Now, if you actually don't have this line, then the timer runs indefinitely. It's going to run until you actually close the movie. In this case, I'm showing you that I only want the timer to actually fire 10 times. One, two, three, four, five, six, seven, eight, nine, 10 and then it shuts down. Now, if this is going to run 10 times, what is the interval between each time that gets fired? So, you can see here on line 11, we have specified an interval and it is actually in milliseconds. So, in this case, it's going to fire every 500 milliseconds or approximately every half a second. Now, what happens when the timer fires? That's actually our callback. So, you'll see here inside of the callback, again, I'm just going to print to the output window on the bottom of Sublime Text 2. I'm just going to say hello, world and then counter, how many times did this actually fire so that I can test that it actually does shut down after numCycles gets to 10. So, in order to count, up here at the top, I'm saying counter equals one and then on line 15 I'm saying, okay, print out "hello, world" plus whatever the value of counter is. Then after it has done with that I just say, plus, plus counter. plus, plus counter says add one onto the value of counter. So, one plus one becomes two. Two plus one becomes three. Three plus one becomes four, and so on. So, let's go ahead and test this sketch, and again, we shouldn't see anything on stage but you should notice inside of the output window that it actually does say hello, world 10 times, one through 10 and then you'll notice that it actually stops. So, again, HTimer allows us to execute something based on a pulse and using the argument of numCycles, I can tell it when I actually want it to shut down. You're going to see a little bit later this would come in very handy with pools. Because if I say I want to draw 100 things, maybe I want this timer to shut down after it has displayed all 100 objects. Great. So, I'm going to go ahead and close that file and I'm going to move on to build two. Now, build two, I'm going to start to do some stuff, visual onscreen. So, let's just run through this file and see what we have happening here. So, up at the top, again, we've got our HTimer, we've got our HRect, and again nothing happening much with the background. If we look at r1, lines nine through 15, looks like we're making a rectangle, again, that rectangle is 100 by 100 with Corner Radius of 10. I'm adding it to the stage, H.add location. Now, let's look at location here. Location says, "Hey, I want you to pick a spot randomly on screen. So, I say, integer random with an integer random height. That basically means that it's going to pick a number between zero and 640, but because it wrapped an int in front of it means it's going to be a whole number so it's not going to pick decimals. So, I'm going to get 1, 45, 122, et cetera. This HRect has no stroke. It has a fill of orange, FF3300 and again, I rotated 45 degrees. Now, before we get to the timer, we just understand that we've got our stage and it's just randomly going to pick some spot and it's going to paint the rectangle. Now, what I'm doing in timer is I'm going to be rerandomizing the position of r1. So, if you look here, like in the first file, there is no numCycles, which means I want this to run infinitely. So, if you look at build two here there is no numCycles, which means this timer is just going to run until we actually close the movie. The interval is every 250 milliseconds, so a quarter of a second. The callback just says, "Hey, r1. I want to reset your location random width, random height. So now if we test the sketch, which you should see on screen here is that every 250 milliseconds, a very quick pulse, it is rerandomizing the location of r1. So, again, we're not dealing with pool at this point, we just have one asset and based on a tempo here, 250 milliseconds, we are rerandomizing this rectangle's location. Great. Let's move on to build three. Now, build three, again I'm going to introduce a few new things but it really is just a copy of two. The first is I'm going to add a color pool. So, up here at the top you notice I put a HColorPool colors and I just added some colors here on line 10. Now, line 17 is a bit of an edit. Instead of passing it one color I say, hey colors, give me a random color from up above. So, line 17 it's randomly going to pick one of the colors inside of our HColorPool. Now, I added one other thing here, is I wanted to actually randomize the size. So I said, okay the size should be random three plus 25. So, if you look at that, for example, three times 25, that's going to pick a random number zero, one, two. So, zero times 25 is zero, one times 25 is 25, and two times 25 is 50. So, we know that this randomization is going to give us the numbers zero, 25, and 50. But look, after it picks this random, it actually adds 25 onto it. So, what number we're actually getting is a size of 25, a size of 50, and a size of 75. So, we're just randomizing these three numbers; 25, 50, and 75. So, again, there's no numCycles, this is going to run infinitely. The interval is now 50 milliseconds, so it's going to happen very quickly. Again, it's only talking to r1. On line 28, I say yes, I want to randomize the location. But then I say, hey, I also want to re-pick a new color from the HColorPool, and hey let's pick a new size again, and again, that size is either going to be 25, 50, or 75. Now, here's the thing that I want you to notice is auto clear is actually set to false. Now, let's pretend for a moment that that's not there, if I actually cut that out. If I actually test the sketch here, again, notice that it's r1, we're just moving that one asset but we're rerandomizing its position, we're rerandomizing the fill color, and we're rerandomizing the size. But again, the reason why I put in that auto clear a false is because I don't want it to clear the background. So, if this runs now, you'll notice it looks like it's painting an infinite number of rectangles but in actuality, it is only painting the one and just changing its location, changing its fill color, and changing its size. But because we say auto clear false, it actually doesn't clear the display. So, this eventually will fill the entire stage. Great. So you can probably figure out at this point what I'm going to do with example four. So, let's go ahead and close this and let's jam on over to HTimer four and sure enough, the first thing that you should have expected was that we were going to add HCanvas. Let's rerandomize this rectangle but inside of a canvas so that we can actually fade it away. So, look at lines eight. Again, I took the auto clear true off of the stage and added it to the canvas objects. So you can see here c1 is a new HCanvas, auto clear false, and it's going to do a fade of two and we add our c1 HCanvas to H, the stage. Again, look at here on line 17, instead of doing H.add r1, we do c1.add r1. So, we're actually painting the rectangle inside of the HCanvas. Other than that, all the code remains unchanged. Let's go ahead and save and test this sketch, and you should notice that it's executing the same animation in three but our beautiful HCanvas is slowly burning the rectangles away. Awesome. So, I'm going to end this video here. We're going to move on to the next video. The next video, we're going to deal with HTimer five, six, and seven. But at least at this point, you're understanding that HTimer is a way for us to attach something but based on a steady pulse. When we move on to HTimer five, we're going to start to talk about pools like we did in the very first class. So, let's end here and I'll see you in the next video. 16. Unit 5, Video 2: Okay. I am super excited about these next three files. The reason why I really love these next three files is I feel like they so closely relate structure-wise to the files that we did in the first class. So, there's a few things here that you'll be able to copy and paste from that first class and actually get stuff animating. So, let's look at HTimer5. Again, HTimer5 really starts to use the structure that we did in the first class. In the sense that finally, we are saying hello to HDrawablePool. So, this file very similar to the the first ones with some slight edits here. Now, HDrawablePool pool up at the top. That's great, and I'm going to highlight all of these stuff right here which is lines nine through 33. Before we even run through this code, I just want to say what's missing. What's missing is what would be on line 34, which is or actually, would be between lines 32 and 33. It would be that.requestAll. So, in that first class, when you called that requestAll, you were saying, "Give me everything in the pool. Paint it on screen because we're doing print and I need everything right now." So, the first thing that you should notice is that's gone. The reason why that's gone is because this is an animation class and we want to animate our artwork on. So, we're still going to use Pool. We can even still use Pool in conjunction with a grid layout or shape lay out or whatever you did with the first class. But if you remove that requestAll and cut in this timer, you actually could animate your grids on. So, the first thing you should notice is that the call to requestAll is actually been taken away. Now, let's go ahead and look at this pool that we got here. On line nine, I'm saying pool is new HDrawablePool and, hey, I want to paint a hundred things. It says pool.autoAddToStage so that we know that it's going to paint onto the stage. Well, what are we painting? Well, we're painting our good friend, HRect, and it has a quarter radius of rounding of 10. We have a call to a colorist. I'm not sure if we covered this in the first class being able to make the shortcut instead of saying a HColorPool, HDrawablePool can be called a colorist method. Inside of the colorist method, I'm creating a new HColorPool and passing the colors in, and specifying that I only want them to color the fills. Now, you might remember from the first class, you've got this onCreate method here, and this onCreate method is what happens to each individual HRect to all a hundred of our HRects that getting created on screen. So, I say, "Okay, cool. HDrawableD, what do I want to do with this drawable?" The Drawable being the HRect. Why, I would say, "Okay, I want to strokeWeight to four. I want the stroke to be black and I want the Alpha to be 75 instead of 255. Like the first four files, the location is random width, random height. I'm turning the rotation 45 degrees. Again, I'm doing a random size here so the size is going to be 50, 100, and 150 because we're doing random three times 50, plus 50, and the anchor at is H.CENTER. So, these lines right here, nine through 33, is setting up the pool and what do you want to do to each of the individual elements inside of that pool? But again, requestAll is gone. So, what do we do here? Well, we've got our timer. If you look at our timer here, I'm saying, "Well, I want to animate each of these 100 objects on rather than just seeing them all at once." So, look at line 36, numCycles. numCycles is pool.numActive. numActive is going to be counting how many things get painted on the screen at a time, until it gets to a hundred. So, pool.numActive is a way for us to find out if we have attached all of our 100 assets onto the screen. If we have it all 100 assets onto the screen, then this numCycles is going to shut the timer down. The interval is every 100 milliseconds and when this timer fires every 100 milliseconds, what are we going to do? That's our callback. Inside of our callback, we're saying, "Hey pool, I want to request one of your dudes." When you say pool.request, it goes up to the pool. It says, "Hey cool, you're asking for the first one, I can give you a hundred on create," and it fires the onCreate. So, this timer keeps doing a pool.request until we get up to a hundred. Once we get up to a hundred, the numCycles is going to shut the timer down and pool.request won't fire the 101th time. It will only fire a hundred times. The draw function, it just has a H.drawStage. Awesome. You go ahead and run this sketch, and what is going to happen is going to animate up. This is not the same rectangle, this is a hundred different rectangles. So that's where it varies from the first, well, HTimer4, for example. In HTimer4, we were just moving around one item. Here, what we're seeing on screen is 100 separate items. So, like I said, you can take some of this code and actually cut out the timer stuff, paste it in the files that we did in the first class and you could actually have your grids animate on because you're not saying requestAll anymore, you're actually using a timer to animate the artwork on, one bit at a time. Stellar. Now, let me tell you why this is stellar, is because look at what happens when we go to HTimer six. Now, lets just scrub through some of the stuff that's changed. So five and six are copies of each other with some editions. Htimer six, we've got our HCanvas, that's great. So, we've got a canvas in there, you can see on lines 11 and 12, we add the canvas to the stage, just as I expected, autoClear is false and Josh has done a fade to five. So, again, it's going to burn that animation out. Sorry, I'm just putting in a really quick edit because I realized that I skipped something and that's line 17. Line 17, again, is a new addition, which is in the previous file of HTimer four, we said pool.autoAddToStage, which meant that the HRectangle assets got added to the stage. But because HTimer six actually has an HCanvas, look at the edit on line 17, I say, "Hey, pool.autoParent into c1." So that code is changed because we don't want to put the HRectangles onto the stage, we actually want to put them nested inside of the parent of c1. Okay, quick edit, back to whatever the heck I was saying next. Other than that, not much is different except for line 35. Look at that. So, if the onCreate is creating 100 unique HRectangles, line 35 creates a unique HRotate with each individual asset. So, what that means is, is that now there are 100 rectangles on screen, they all get animated up separately, and they have their own unique HRotate. Look at what I did here, I just put in a little random. I said, "Hey, give me a range, from negative two to positive two." So, some are going to spin clockwise and some are going to spin counter-clockwise but that clockwise and counterclockwise spinning won't go any more than positive two degrees or negative two degrees. Now, will we get some zeros? Yeah, which will mean that some of the assets don't rotate at all. That is entirely possible. So, test the sketch and look at what happens. HTimer, every 100 milliseconds is requesting a new HRectangle out of the HDrawablePool. It attaches the HRectangle and then attaches a HRotate with that asset. One thing that I forgot to mention is, let me just close this here, I actually did change the anchor. I put that negative 25 so you'd have that artwork. So the pivot is happening negative 25 above the HRectangle. So, check this out. For example, if I change the interval to 1,000, that would be every one second. If I tested the sketch here, you would notice that there's one, there's two, three, four, five, six, seven, eight, nine. See, it's happening on a tempo and it's going to do this until all 100 rectangles get painted out of the pool. But again, and this starts to allude to the section of combos, which is, oh my god, the timer is introducing the elements to the screen but as they get introduced, we're creating a unique HRotate with each unique asset. So, these are all animating separately and they're getting their own unique HRotate, which is beautiful. It's a beautiful file. Now, of course, I'm going to do what I did in some of these other little sneak peek scenarios, which is look at HTimer 7. HTimer seven is a copy of HTimer six, but I couldn't help but put in that HOscillator code and that HOscillator code again, is going to be changing the scale. So again, here I changed the pool. I'm only attaching 50 items this time instead of 100. The rounding is 40 on this one. Oscillator is going to be oscillating scale. So again, we're going to cover oscillator, I'm not going to break this down but the nice thing is that it's going to be oscillating- HTimer is going to be attaching a unique asset, giving that unique asset an HRotate, and a unique HOscillator. So, I won't waste any more of your time here. Run this and now we're getting the unique HRotates and we're also getting the unique HOscillators on each of the individual 58 rectangles. Believe it or not, you can open this file in conjunction with one that you did in the first class, and believe it or not those grids that you made using HGridLayout, you can throw in an HRotate and an HOscillator, and your grids will start animating. So, let's end the HTimer stuff, we're going to move onto HRandomTrigger. But I would say at this point, try stopping this file and going back to some of that work that we did in the first class, and yeah, taking out that request all, putting a timer to add each of your assets one by one. Try copying and pasting the HRotate and HOscillator and actually watch your grids come to life. Okay, this video's done, I will see you in the next one, which is HRandom trigger. See you later. 17. Unit 5, Video 3: Okay, this video shouldn't be too terribly long because it's just an update to what we've already covered in HTimer. So again to reiterate, each timer is using a consistent tempo to create things. So, random trigger just helps us offset that literal tempo. So, let's go ahead and look at HRandomTrigger one, and again, it should feel very similar to the stuff that we just created using timer. So, let's break this down. Up here at the top I have HRandomTrigger is a random timer, and the code maybe a structured a little bit differently in the sense that like if I look at let me pull up build four here for a second. So, if you look at HTimer four, we had this block of code right here which created an instance of the timer and then provided what the interval was and the callback. So, if we look at HRandomTrigger, really it's just a callback, and what I want us to look at now is line 14. So, line 14 says, "Okay, I want to create an instance of this HRandomTrigger, and I'm going to provide you with a number that represents chance." Now before I talk about chance, again, line 14 is how I would write this because I want to type lest. However, line 15 is actually the same as above. You can say, all right, I want to create a new HRandomTrigger and you could then chain a.chance and then present the chance number inside of there. So, I like 14 because it's obviously typing less. Now, let's look at chance. So, chance has to be described this way. IF/15, so essentially, I'm saying that there is a one in 15 chance that random trigger is going to fire. So, a great analogy is that if you cut up a bunch of numbers, zero through 14, and cut them up into separate pieces of paper and put all those pieces of paper in a hat, and reached into that hat and grabbed a number, if it was zero, then callback would fire. If it's not zero, then the piece of paper goes back in the hat and you start and re-pick randomly over again. So because there's only 15 pieces of paper, you have a one in 15 chance of actually pulling out a zero. If you pull out a zero, then the lines 25 through 31, that call-back is going to return true and it's going to fire. Now, if you look at line 28 here, again, it's very similar to what we did in HTimer, all I'm doing is re-positioning the location of our r1H rectangle, which is random width and random height somewhere on-screen. So, let's talk again a little bit about chance because you might notice that we've introduced this F. For random trigger, when you're specifying chance, you have to pass that number in as a float, so that's what's happening there, I'm actually putting that trailing F behind the number so that I am passing the suffix of F is telling the compiler that the number coming in is a float. So again, I have a one in 15 chance of getting drawn. Now, let's go ahead and test this sketch, and again, we're only changing the location of r1, but you might notice that the movement is erratic. I like this because again, HTimer is always going to give us that consistent tempo, and I wanted something that didn't feel like, "Oh, there's a rhythm here, I want to break up that rhythm." So again, it has a one in 15 chance of getting drawn, so if you hadn't figured out, you obviously could pass in one F divided by two and that would have a 50 percent chance of getting drawn. So the greater you make that number, the slower your random chance is going to have of actually firing. So one in 15, I like this non-repetitive pattern and it has a nice feel to it. So, rather than building out a ton of files with this, if you look at HRandomTrigger two, it really is our HTimer seven file. It's got HCanvas, it's got our ColorPool, it's got a DrawablePool, but instead of using HTimer, we have HRandomTrigger. Again, you can see I put in a random timer here, a one in 30th chance of getting created, and again, this is the callback to actually draw from the DrawablePool. So again, you'll notice that the "Request all" is not there, and right here on lines 45 through 51 is my random timer, so it has a one in 30th chance of actually doing a pool back request. Now, I should probably mention that this obviously doesn't have like HTimer seven has, if I open up this file you'll notice that there's a num cycles here, so we know that this timer is actually going to shut down after it reaches, in this case, 50 objects. So, random trigger doesn't have that argument, so what happens is that that pool.request, eventually gets up to 50, and then random trigger actually does keep firing, but it's saying, "Hey Pool, can I have one?" Pool just keeps denying it because all 50 items have been created on screen. So if I actually run this again, it's just a way to randomly stagger the tempo of this animation. If you actually ran HTimer seven next to HRandomTrigger two, you would notice that the rhythm of the animation is actually staggered, that in HTimer seven you would notice that there is a consistent rhythm to these things oscillating on-screen because they were created on a tempo. Whereas, HRandomTrigger two, because it's randomly calling things on- screen, you'll actually notice that the overall aesthetic of the animation seems more chaotic than HTimer seven does. So, that wraps up this section on timers, and of course, this is a perfect segway into covering each tween and diving further into callback because we want to now use these two things to start to move things on-screen and have them move into certain positions and so on and so forth. So this wraps up this section, see you in each tween and each callback. See you later. 18. Intro to HTween and HCallback: So after covering timers, it probably makes a lot of sense to move into this next section which is HTween and HCallback. HTween basically is moving an object from one location to another, so from point A to point B. Some arguments that HTween uses is target, who are we moving? Property, what sort of property are we tweening? Not only can we tween from one location to another location but we could tween from zero Alpha to full Alpha. We could tween 0 rotation to 360-degree rotation. We can tween small scale to larger scale. So, HTween wants to know what property are we actually tweening with. We have things like start and end; what's the start position what's the end position. Is there easing and spring? Like we talked about in HFollow. Is that a steady movement or does it have some sort of bounce or elasticity to it? Now, you'll see in these first examples, HTween, we're going to move something from point A to point B. But we might want to talk about HCallback, now HCallback is something that we actually wrote in the first class but we didn't go into much discussion about it. HCallback is a way for us to know whether we've arrived at our destination. So, for example, if I'm using HTween to move from point A to point B, maybe I want to know when it's arrived at point B, so we're going to use HCallback in conjunction with HTweens so that the object will move from one location to a new location, and once it's arrived at that location, HCallback will say, "Hey, you've arrived at your destination." Now, why is that important? Because in a mutation file that we're going to create, we're going to use HTween and HCallback to basically create a loop. So, it we'll animate from point A to point B, when it arrives at point B, HCallback will let us know that it's arrived at its destination and then we'll have it go back to A. So, we'll just go from A to B, B to A, A to B and continual. So HTween, very exciting because now we're starting to move things around on screen. But again, remember that tweening is not just necessarily position. We're going to tween all sorts of things like Alpha, scale and rotation. 19. Unit 6, Video 1: Wow! Okay, here's where it's going to get dark star heavy. There's going to be a lot more examples happening now, and I'm probably going to break up a lot of these files into a lot of separate videos. So, these last few sections, HTween, HSwarm, HOscillator combos, this is where it gets heavy. Man, I hope you enjoy this process because this is where it starts to really produce some really beautiful results. We are in HTween. Now, HTween is simply moving from one state to another state. I should probably preface that attached to this video somewhere is the zip file. Inside of that zip file, you will see that there are 13 examples, and what's nice is if you look at example 5, 12, and 13, I've attached a 3D to it because we're actually going to start talking about moving things in three dimensions. So, you'll see I have start tagging some of the files where I'm introducing some key aspects. In this video, I want to cover example one and example two, we'll just keep these videos as sweet as I possibly can and try to not make them 13 minutes like all the other videos. HTween, it is moving from one state to another state, and I'm using that language very specifically because it doesn't necessarily mean location, moving from one position to another position. In the case of these first files, we are going to be moving from one position to another position, but tween can be rotation, it can be scale, it can be Alpha, et cetera. So, let's just slowly break down these first two files here. So, up at the top, I have, as expected, our r1, our HRectangle. Now, I'm going to skip over some stuff. Let's come to lines 12 through 18. Again, we're just reviewing here. We've got a rectangle that's a 100 by 100, rounding of 10, we're adding it to the stage, the anchor is in the center, location has a variable of startX. We'll talk about that in a second. The art doesn't have any stroke, and it has a fill of that dark orange ff3300. Now, let's go back up to the top. Because I've added some stuff here, I basically want to animate the rectangle from position A to position B. So, we're going to do that using HTween. So, up at the top, you see I have HTtween t1, tween one. On lines four and five, I have the startX position, which is going to be an x-axis of 160, and I have the endX position. I want it to animate to 480 pixels on the screen, so start position, end position. So, now line 15 probably makes a little bit of sense because you're saying, "Heym I want to set the initial position of this rectangle," which is an x-axis of 160, startX, and a y-axis of, just put me in the middle of the screen, height divided by two. Before I talk about the tween, let's come down here to the draw function and just like in the rotate examples, I put a little bit of processing code so that I could see the two points. So, you can see here I said, no fill, stroke weight is two, the stroke is a teal color and I created two ellipses, and the ellipses are, startX, height divided by two, endX, height divided by two. So, I've got two little dots that show me visually where the start position is and where the end position is. Now, let's talk about the tween. So, I say, "Okay, t1, tween one, you need to know some stuff," and the first two are obviously the most important. They are, who is the target and what is the property? So, target is r1 which is our HRect. We're saying HRect is the asset that we want to move and its saying, "Okay, what's the property?" Again, if you look at the code here, I could have that on its own separate line, you could break it out that way. Usually, I put those two right after each other so that I can see who is getting the action and what the property of the action is. In this case, H.location, so Josh is moving stuff from one position to another position, but that property could be H.alpha, H.scale, H.rotate, constants, so on so forth. We're going to be moving it from, "Yeah, you don't know now are we be moving it?" Holy crap! Sometimes, my mouth is moving faster than my brain, and I'm working through this, working through this issue. Hi, the properties location, I'm going to be moving it from one position to another position. Can I get a hallelujah. All right. Let's look at the next property here,.start. Now, I think if you look at the HTween.pde, start and end is always going to be an x, y, or z position. So, in this case, the.start is startX. So, that x-axis of 160, and that end position is going to be height divided by two. Our end position is going to be endX and height divided by two, and again, you'll notice here on line 26, I've only specified ease which is 0.05. Now, when I test this sketch, let's watch what happens. Again, this is going to fire immediately. So, I'm going to go ahead and run this and very quickly, you should see boom, it moved from point A to point B and then stopped. I haven't specified for it to do anything different, so the action immediately takes place. So, again, you should notice that it moved from that first position to that second position and it eased into that position. So, build two, the only thing that I've done in build two is just shown that in example two, is that you can add elasticity just like we did in some of the previous files. So, in this case, I've said that the ease is 0.05 and that the spring is elastic, so it's 0.95. So, if you test this particular sketch, you should notice that it rubber bands into position. So, when you test this, it immediately is going to start going and it rubber bands into that final position. Let's try to keep these short, I will try to get my mouth to work in sync with my brain, and I'll see you in the next video. 20. Unit 6, Video 2: Okay. In this video, we are going to cover examples three and four. For this example three, I really want to work through the entire structure here because now I'm going to use HTween in conjunction with callbacks to move our asset from position A to position B and then when it has arrived at position B, I want to move it back to position A again and then start this loop. So it will go from A to B, B to A, A to B so on and so forth. Okay, so let's take some time to run through this code and just break everything down. So, up at the top we've got our r1 and we've got our t1, right? So we've got our rectangle and we've got our initial tween and the tween is going to be moving that rectangle around on screen. Now I've got, on line 3 here, HCallback and here's where I really want to really make sure that everybody understands what's happening here. Now, let's not forget that when you test this movie, the tween initiates and so it's going to move from A to B. What I want to have happen is callback to start our loop. So we know that the second the movie starts, it's already going to initiate from A to B. So look at my callbacks here. I have tweenDone1 and tweenDone2. Now, just conceptually, start the movie, moves from A to B. So, what I want tweenDone1 to do is to let me know that it has arrived at B and I want to move it back to A. So tweenDone1 is going to be the animation from B to A. Then obviously, if it goes from B to A, I want tweenDone2 to tell me, hey you've arrived back at A, let's now move back to B. So tweenDone2 is going from A to B. Okay. Let's move on to the next stuff here. Josh loves PVectors. I love PVectors. PVectors are a way for us to package up a position in space. So, a PVector can be two-dimensional or it can be three-dimensional. In this case, it's a two-dimensional point. Two-dimensional just being an X point and a Y point. But PVectors can also be an xy and a z. All right. So, what better way to set up are our point A and our point B than using a PVector. So that is a change from example one and two. So, I've said, okay let me just, before I think about this, I have to remember that my size is 640 by 640. So, because I'm only moving the x, I have to remember that the y-axis was height divided by 2 but height divided by 2, 640 divided by 2, is 320. So, if you look here, for my PVector I said, hey your first point is 160 on the x-axis and 320 on the y-axis, and the right position is 480 on the x-axis and 320 on the y-axis. So again, I love PVectors. They are just a really great way to package up points in space. So check it out, our r1, our HRect. Again it's a 100 by 100. It's got rounding of 10. H.add we're adding it to the stage. Our anchorAt is the center position, but look at the update to 16. So, on 16 I can say, hey your initial location, that first position, is go up to that PVector and give me the x, so pt1.x which obviously returns 160. The pt1.y returns the 320. So, I'm using, on line 16, the PVector to grab the x-axis and the y-axis. Again, it has noStroke and it is a fill of dark orange. Okay. Now, I'm going to scroll down a little bit here. I'm going to jump all the way down to the bottom and just show that the draw is just as it was in example one and two where it's doing draw stage and we're creating and processing those two little ellipse points so that we can see point A and point B. Okay. Take a deep breath, work with me here. Okay. Look at lines 21 through to 29. This is the tween and again remember, the tween starts instantly. It's going to move from point A to Point B. So, if we look here we say, t1 is a new HTween, again the target is our r1 HRect, the property is location. Hey, look at the start and end arguments here. The start is start at pt1.x, start at pt.1.y, end at pt2.x, and end at pt2.y. Again, our ease is 0.5 And have a little bit of spring but I've brought down the elasticity a bit, so instead of 0.95 like it is in one and two, I bring it down to a 0.7. Okay. When the movie starts these fires, look. Go, start tween from left to right. So, if I didn't have any other code written in here, it would move from position A position B. Okay? Now, I need a callback to know that I have arrived at position B. If you remember this is tweenDone1, so it has arrived at the right position. Let's move back to the left. So, check it out. I say tweenDone1 is a new callback, and what I'm saying here is hey tween one, I understand that you have arrived at the B position, the second position all the way to the right. If you have arrived to the B position, I want you to fire something different. It's still the same tween but I'm going to give you some new information and the new information is a new.start in a new.end. So now it's saying, well your start. If I'm correct, is the right position that you're over here on the right now. Okay. So, the start is pt2.x and pt2.y and the end position is back at the beginning. Back to pt1.x and pt1.y. Now, look at this next block of code here. This is where you create the link, and the link is is I want to register this tween and I want a new callback when I arrive back to the new position. So it starts at that pt2 PVector, it is going to end at the pt1 PVector and when it arrives back at pt1, all of a sudden we've added some information here. Oh my god, the programming wants to know when I have arrived back at that original location. What new callback to fire. So, when it goes back to the initial position, it's going to fire the callback tweenDone2. All right. So here is the link. So now if we look at code 43 through 53, we're just setting up the animation from A back to B again. Right. So, if you look at it once it has arrived back at the left position, I want to move back to the right now, so that way I'm creating a loop that goes back and forth like a Cylon's eyeball. You've got to be a super nerd to really appreciate that. I just threw a Cylon comment into this discussion. It's the love, it's the love we share. Okay. So, tweenDone2, check it out. I just reversed the start and end again. I say, oh crap we're back at the left, right? So the start is our pt1.x and y, and yes we want to go back to the B position which is a pt2.x and y. Then here is the infinite loop. I say, guess what, if I register this and once you arrive at that new end position go ahead and fire tweenDone1. So, now at this point, you should realize these two are just calling each other back and forth again. So, when one is done it calls two, when two is done it just calls one again. So now, these things are working in tandem. Now, you get that one is firing two, and two is firing one but check out line 55. If I didn't have this, if I comment this out, what is going to happen? Well, watch this. I'm going to run my sketch and the movie starts and boom it goes from position A to position B, because remember, I'm just going to close this here for a second, remember that when you test your movie t1 gets going. It starts, it runs, it moves from position A to position B. So now, hopefully, you understand that tweenDone1 and tweenDone2 are set up but we never get things rolling, right? So, now look at line 55. At line 55 here and at the very bottom I just say, hey after I've set up these two scenarios I just want to tell tween 1 that it should register and call back, one time callback tweenDone1 and then that starts the loop.Okay. If I didn't have this, it just moved from A to B because we never asked it to tell us when it's arrived at B. Line 55 is that, hey let me know when you've arrived at B because I want to tell you to do something. All right. So is that line 55 that it starts up, it moves from A, it goes to B. As soon as it gets to B we tell it to go ahead and start the tweenDone1, which then fires two, which then fires one, which then fires two, which then fires 1 so on and so forth. So. Now at this point, you can run this sketch and we now have an infinite animation where it goes from A to B. As soon as it arrives at B, goes back to A, and so on and so forth. Okay. So now, hopefully, you've really digested how we're using callback to create this endless trigger, but the trigger is only going to fire, the callback is only going to fire when it has settled into its destination, and in this case the destination is an x position, a location. Okay. Let's close this. Let's move on to example 4. The reason why I want to move on example 4 is because I wanted to make a slight adjustment and that adjustment is in example 3, the only thing that we really changed was where am I starting and where am I ending. What happened was is in example 3, I'm just going back to it here for a second, is we specified these ease and the spring which is 0.05 and 0.7. But you'll notice that in tweenDone1 and tweenDone2, we don't specify ease or spring so because we don't talk to it, it just keeps recycling what was initially set. Okay. So, I just wanted to show the possibility in four that this is what initially gets set but then you can actually modify it. So, let's check out tweenDone1 that's moving from B back to A. What I did was I changed the ease and the spring. I said, hey keep that 0.05 but can you give me that elasticity of 0.95. So, when it goes from B to A it's going to be very elastic, but once tweenDone2 fires, check it out. I changed the ease and the spring to 0.05 for the ease but don't do any springing. So it's just going to be a slow animation back and then it's going to bounce, and then a slow animation back, and then it's going to bounce. So, let's go ahead and run the sketch, and again, you should notice that it bounces from B to A, then it's a slow movement back, and then it springs back to A. So, you can modify the tween between your different callbacks. So, this is stellar. This is great. Okay. I'm going to wrap this particular video up and in the next one, we're just going to digest example 5 which is introducing using 3D coordinates rather than two-dimensional coordinates. See you in the next video. 21. Unit 6, Video 3: Okay. This is the video for example five 3D. It's very similar to example four, but I just wanted to make a very slight introduction to working with 3D coordinates. Again, this video is just going to be this example. So, again, let's just keep this sweet. Check it out. Here's what's different is, again, as I explained earlier, a PVector can be a 2D point or it can be a 3-dimensional point. So, in the case here, I've added a z coordinate to our PVector. So, rather than moving from one position to another position, from left to right, I want to move something back and forward. So, let's look at the PVector. Both pt1 and pt2 have the same x and y coordinates. So, it's going to be the middle of the screen, 320 for the x, 320 for the y, which is 640 divided by two, or width divided by two, and height divided by two. So, we know that the square is going to be in the center of the screen. What is different here is the z coordinate, which, again, zero is for the z plane, for the back position, I'm saying, negative 400, and for the front is positive 100. So, the change here for the PVector is making x and y both 320, and changing the z-coordinate. So, negative 400 for the first position and positive 100 for the the front position. Let's look at line 16. It`s start location is x, y, and z. So, you're talking to that PVector and getting the x, getting the y, and getting the z. Let's go ahead and scroll down here and let's look at the tween. Again, I've updated the start and end position to include those coordinates x, y and z. Now, another thing that I totally forgot, I got a backup, because this is muy importante, which is you need to tell processing that you're using 3D coordinates, and I need to tell Hype that I'm using 3D coordinates. So, look at line nine here. On line nine, I've said that the width and height of the movie is 640 by 640, and that I want to use P3D. So, I want to use the 3D coordinate system of processing. If I did not put this, p-vector is going to have a problem with you trying to specify the z-coordinate, because you did not specify that the renderer for processing should be a 3D coordinate system at all. So, it's going to throw some errors. Now, all of the initial code in Hype by default thinks that you're doing two-dimensional coordinates. So, I need to tell Hype to know that we're actually switching to a 3D coordinate system as well. So, if you look here on line 10, I have to put this argument saying use 3D true. So, I'm telling Hype that, "Hey, when you start to run through your classes, move to the methods that include the z-axis, other words it will also return errors. Hype will say, "Hey, man, what does this z business that you are talking about?" So, I need to tell Processing that I'm using a 3D coordinate system and I need to tell Hype that I'm using a 3D coordinate system. Very important. Can't believe I almost forgot to talk about that. All right. So, other than that, your tweenDone1 and your tweenDone2, the real only update here is that you're starting ends are using that z coordinate from the PVector. Again, I have some settings for ease in spring. Now, in my file, I've commented out line 62 for a second. Because I just wanted to show you that if you test this sketch here, it is actually moving the z-axis of that rectangle back in space and forward in space. However, when I first wrote this example I thought, how do you know that that's a z animation? How is anyone looking at this going? How was that could be scale? I have no idea that that's actually z, that could just be changing the scale of the rectangle from a smaller scale to a larger scale. So, I added this line 62, and, let me just uncomment it out here. Line 62 is just dealing with Processing's camera function, which I've added the mouseX, so that you could actually move your mouse and just get a representation that this thing is actually moving in 3-dimensional space. So, I'm not going to lie working with the camera is crazy. It's taken me some time to figure out all the different arguments that camera supports. If you just run your sketch now, you should notice that, yes, it is actually moving that in 3-dimensional space. So, if I actually move my mouse position here, I can actually change the camera angle, and actually see that our rectangle is in fact moving in 3-dimensional space. So, great. I think I'm going to wrap up example five now. We're going to move on to the next video which is going to digest example six and example seven, and then eventually we'll get back into playing with 3D because it's pretty fun. But, this is just a very quick introduction to using 3D coordinates with PVector, but again, really look at lines nine and 10. You've got to tell Processing that you're using a 3D coordinate system, you have to tell Hype that you're using the 3D coordinate system, other words it no worky. See you in the next video. 22. Unit 6, Video 4: How's everybody holding up? I'm not going to make you feel confident, because it's just going to get worse. It's just going to get worse, but in a great way. It's going to be painful in a highly enjoyable fashion. We are now in example six and example seven. In this video, I'm going to walk through these two things. Now, in example six, what I wanted to show you is behavior stacking. I can actually call two tweens that are going to tween to individual properties. As long as the properties are separate, they won't fight each other. So, let's go up to the top here and look at what has been changed. So, this is what I'm talking about is, we're starting off with a simple animation and we're just going to mutate it, make it a little bit more complex. Now, this is not using 3D. We're actually going back to example four and adding on to example four. Now, example four is that A to B, B to A loop. It's just been moving the X position, back and forth. I want it to now also rotate. So, it's going to move from position A to B, but it's also going to be executing a rotation. So, let's go up to the top here and see some adjustments. So, the first thing is, we're still moving one HRect, we still got our r1, but I now have a tween one and a tween two. So, a t1 and a t2. We know that t1 is the location tween, and t2 is going to be the rotation tween. So, I now need a new set of callbacks. So, you'll notice on line three, we're going to keep our tweenDone1 and our tweenDone2, but I've now added the callback for, rotateDone1 and rotateDone2. So, we know that when this starts, it's going to initiate a rotation from A to B, rotate date, rotate, rotate date, rotate your dates, rotate all of your dates. Don't ever get married, rotate your dates. You've heard it here, from Josh Davis. I'm going to be okay. Let's try that again. Rotate. Can I just tell you that in the past, when I used to teach at the School of Visual Arts, it was like 2003 when I first started teaching. People would bring their files in on Zip disks. Zip disks. You got to be really careful with that one. I had more than a few slip-ups. I'll just let you work that one out. Each callback, rotateDone1 and rotateDone2. So, rotateDone1 is rotating from B back to A, just like tweenDone1, and rotateDone2 is A back to B again. Now, I put in the P vector there. So, you'll notice that pt1 and pt2 is 160,320, 480,320, that hasn't modified. Let's go ahead and look at what we got here. Here is our r1. Because the code is getting a little bit longer, I take advantage of the method chaining and HYPE. So, I can just string that all out into one line. So, as I start to write more code, and my programs start to get a little bit more robust, I take advantage of the method chaining, and just have it all out on one line as opposed to breaking it out to multiple lines like I did in previous files. I do the same thing with our t1. Now, let's go ahead and look at this block of code right here, which is 17 through 31. That has remained unchanged. That is setting up tween one, moving from A to B, B to A, the callbacks, everything. That's exactly as it was in example four. What is new now is the rotate tweens. So, what I've done here is, I've said, t2 is a new HTween. It also is going to be targeting r1, but the property is rotation. So, t1 is dealing with location, t2 is dealing with rotation. Look at the start. Start at zero, end at 180 degrees. So, turn 180 degrees. I've got an ease and I've got a spring for that rotation. Again, I also have some callbacks here. So, when rotate one is done, it's going to go from 180 back to zero. When its back at zero, one calls two. Two then says, "Oh, let's create that loop. Let's go from zero back to 180 again." When it's at 180, one fires two. So, not any different than rt1 setup. It's a copy. Look at line 50. I register t2, and say, "Hey, I understand that you're going to fire from zero to 180, once you get to 180, go ahead and fire that rotateDone1 so that you can go one, two and two to one and start that loop." So, when I test the sketch, you should notice that I have two tweens working in tandem. They are doing different properties. You can have as Htweens as you want as long as they don't try to fire the same property. So, t1 is doing location and t2 is doing rotation. Again, I can stack multiple Htweens as long as they are addressing different properties. Let's close this and move on to example seven. Now, example seven is a copy of example six. But, do you remember back in Hrotate, I showed that you could nest one square into another square, and as long as that happened, everything was okay with the universe. I'm just going to show you that one more time. So, look it up at the top here. The only thing different in example seven, is I now have three rectangles. I have an r1, an r2, and an r3. Let's go ahead and look at lines 14 through 21. I say, "r1, you're 100 by 100, and you're a dark orange." Then, I say, "Hey, r2, you are 50 by 50, you have a rounding of five, and I want to add you, r2, inside of r1." So, we've now begun the nesting. You'll notice that I also don't specify a location. If I don't specify location, it just attaches itself at zero, zero. Go ahead and look at r3. R3 is 25 pixels by 25 pixels. It is a perfect square. It has no rounding at all, and r1 is where I'm placing r3. So, r3 gets placed inside of r1. Other than that, nothing else has changed. So, if you actually run this file, you will notice that the animation is still going from A to B, and B to A and it's still executing that second tween of using rotation. But, as you can see, it does it to all three objects because everything is being applied to r1, it just so happens that r2 and r3 are nested inside of r1. So, since those two shapes are nested inside of r1, they too will get the same animations. So, now you should be thinking, "Oh my God, I can work in Illustrator. I can start to draw a bunch of assets, visual assets. I can group them. I can start to make a lot of different things, and as long as they get nested into one asset that the tweens get associated with, that artwork is just going to come along with me." So, cool. Just showing you some of the possibilities of these tricks that I utilize in HYPE. This ends example six and seven. Let's go ahead and close this, and the next video is just going to deal with example eight. See you in the next file. 23. Unit 6, Video 5: Fun. We are now in an example eight, and again, I just want to keep taking these ideas, keep taking these concepts and just making them a little bit more and more robust. So, great. Example eight is going to show an animation to four different positions. So, it's a pretty good extension from some of the other files that we've been doing where it just went from A-B. What if we're going from A to B to C to D and then back to A again? So again, this is going to animate our rectangle to four different positions on screen, and it's going to set up a loop. So, great, I'm making four points now. So up at the top on example eight we've got PVector one, two, three and four. You'll notice that I put some comments here that I first define the top left, then the top right, then the bottom right, then the bottom left. So, if you're thinking about this in terms of animation one is going to go to two, two is going to go to three, three is going to go to four, four is going to go back to one. So, that would mean that I need four callbacks cb1, cb2, cb3 and cb4. Again, just remember here that cb1 is a callback of going from position one to position two, cb2 is going from two to three, cb3 is going from three to four and cb4 is going four back to one, and then again we'll create a loop here. So the HRectangle really hasn't changed much, it's getting attached at that first pt1 coordinate pt1.x and pt1.y. Now line 19, that's going to fire, and it's going to fire from start position of the PVector one to PVector two position. So when this initially starts up, it's going to go from position one to position two, so you know that after this initially starts it's actually hanging out in the two position. Now, I'm going to scroll down to the bottom here, look, I've updated the draw to include before different positions for our PVector so that we can see where they are on screen. Again, let's look at line 45. Line 45 assumes that the tween has already moved from the top left to the top right. So, we are now in the second position, so you'll notice that I call back cb2. So, I'm actually calling back lines 27-31. I'm not calling back cb1 because cb1 is from one to two, and that's actually already occurred when the tween has initially started up. So, I'm telling it to call back cb2. Again, cb1, cb2, cb3, cb4, these are just all copies of each other, the only thing that has changed is the PVector for start and end, and calling back to the appropriate callback. So, it starts up, it moves from position one to position two, down here on line 45 it says, "Oh hey, cool, you've already moved your sitting in position two, let's go ahead and fire position two's callback." So cb2 fires, it goes from two position to three position as soon as it arrives that three position it fires cb3. Cb3 says, "Oh great, I'm going from three to four, let's fire callback four." Callback four says, "Oh great, I'm going four back to one", and fires cb1. Cb1 then says, "Oh, right on I'm going from one position to two position, let's go ahead and fire cb2", boom, the loop has created. So, go ahead and test the sketch. Again, you should see that we have an infinite animation of moving to four different positions on screen. So again, as long as you're creating your tween you can create all these scenarios for callbacks and when those callbacks fire you're just moving to a new start and end. So, I'm going to keep this video short, we're going to move onto example nine. Example nine again is a really great extension of this is which is, "Hey Josh, what if I don't want a loop? What if I don't want to keep animating two, four different sections? What if I want it to go to one to two, two to three, three to four, four to one, one to the center, and then spring up and then stop?" So, example nine is going to illustrate that functionality. So, see you in the next video. 24. Unit 6, Video 6: Okay, we are in Example 9 and again Example 9 is not much different than Example 8 except for that, it's not a loop. It's going to execute some tweens and as soon as we have arrived at the last tween, this program is going to shutdown, right? So, Example 8, just kept looping into the four coordinates. Example 9, I want to go from one to two, two to three, three to four, four back to one. One, I then wanted to go to the center and after it gets to the center, I want it to scale towards you. After it's done scaling towards you, it can just stop doing any more tweening. So, this is kind of nice because it can be an intro-animation, but it does not have to loop. I just wanted to execute a sequence as soon as that sequence is done, it can shutdown. So, let's take a look at what's a little bit different in Example 9. The first is line two, we have two HTweens, we have t1 and t2. T1 is the tween that is going to deal with moving our asset locations. So we know that t1 is using the property of locations, so we are going to use that to move around on screen. It's this HTween of t2 that we are going to scale the asset towards you. So, it's going to deal with the property of H.scale, okay? Now, let us go ahead and look at lines four through eight, I have added a fifth PVector and that is the ability to move to the center of the screen so you'll notice that PVector pt5 is 320 by 320, so it's going to animate to the center of the screen. Now, let's look at line 10, this is where we have our callbacks. Again, Example 8 had cb1, cb2, cb3, and cb4, but I now need a callback to move to the center of the screen, which is cbCenter, call back center and I need a callback to then animate towards you which is cbScale, all right? So, we have got six callbacks on line 10. All right. Moving right along are r1, HRect that actually hasn't changed, it's exactly the same as it was in Example 8. Look at line 20, line 20 hasn't changed. It's the same as it was in Example 8 as well, and that is the initiation of the tween moving from position one to position two so that we know that when we start our movie, it's this line 20 that is going to initiate from point one to point two. So, it's now going to be hanging in the top right-hand coordinate, all right? Now, I'm going to scroll down here and look at the very bottom, just know that I have added a fifth processing ellipse to show where that center point is. Now, we have got a visual representation of the five points, the fifth one now being the center of the screen. Okay, let's look at the callbacks. You might notice that cb1 has been commented out and this is for a good reason. Cb1 is what created that loop, right? So the program starts, it moves from one to two, then cb2 went from two to three, then it went from three to four, then it went from four to one, and then as soon as it got back to one, cb1 fired back to position two again, right? So, it initiated that loop. So, I have actually commented out cb1 because guess what, we actually don't use it, because cb1 is what created that loop and we don't want a loop. So, actually, cb1 is not being used in this particular sketch. All right, so let us break it down. We test the movie, when we test it, line 20 fires and it moves from position one to position two, all right? Let us look at line 59, line 59 says, "When you actually fire and you move to position two, can you please let me know when you have arrived at position two's destination and when you have, please fire the callback cb2." So then, cb2 fires. Cb2 says, "Okay cool, I am starting at two, I am now going to three." When it gets to three, it fires cb3, cb3 then says, "Cool, I am in the bottom right-hand position, I am going to move to the bottom left position," so it moves to the bottom left position, it then fires cb4, cb4 then says, "Awesome, I am in the bottom left position, I want to animate back up to the first position." So it goes from PVector 4 to PVector 1, okay? Now, here is the change, in eight, cb4 would have fired cb1 again which would then have gone one to two and then boom you have got the loop. Here is where that break is, cb4 now says, "When you go from position four to position one, I want you to call back cbCenter," okay? So all of a sudden, it has arrived back at position one and cbCenter fires. So we look at the callback for cbCenter and it says, "Hey, I need to go from position one to PVector 5 which is the center of the screen." Now, it's lines 46 through 50 which goes from position one to position five, it slides to the center of the stage, okay? Now, as soon as it has moved its location from the upper left to the center, it says, "Hey, I want to let you know I have arrived at the location of the center and as soon as you arrive at the location of the center, I want you to fire call back cbScale," right? We are ready to initiate the scale towards you. Now, let us look at cbScale. cbScale says, "Hey Tween 1, the tween that has been dealing with all the locations, I don't need you anymore, I am not moving any positions anymore and so since I am not moving any positions anymore, you can tell Tween 1 to unregister." So you'll notice on line 54, Tween 1 dies a happy and content life. It has animated all the locations that we needed to go. We don't need it anymore. So line 54 of the cbScale callback simply tells Tween 1 that we're done with it. We are no longer moving any more positions. It's now online 55 that we set up our new tween and our new tween is moving towards you in space, so you'll notice it says, "Hey Tween 2, you are a new age tween. The target is that our one person that we have been moving around but the property this time is scale. I want you to start at a 100 percent scale and I want you to end it 300 percent scale." So, it's going to get 300 percent bigger or towards you and the ease is 0.09 and the spring is 0.9. So, you go ahead and test this sketch and watch what happens. It goes from one to two, two to three, three to four, four to one, one to center point, and then scales towards you and you will notice it has actually stopped. So, it executed our tweens for location, once it got to the center, it initiated the tween for scaling, and then once it got to its end position, you will notice there is no callback. I never asked it to let me know when it's arrived at, it's a scale of 300 percent. So the animation stops. Go ahead and let's just run this one more time. Again, you will notice that it runs all the tweens for location, gets to the center, spring towards you, and we're done. Okay, this ends the video for Example 9. The next video is going to look at Example 10 and Example 11 and do some fun things with pixel colorist and you are going to love it. See you in the next video. 25. Unit 6, Video 7: Okay. In this video, we're going to be working on example 10 and example 11. Now, example 10 and 11 are actually copies of example eight. I want to get back to just that loop of it running over and over and over again. Example nine was great. It just shows you how to execute a bunch of animations and then stop, but for 10 and 11 I want to keep that loop going. So, examples 10 and 11 are copies of example eight. Now, let's look at what has changed in example 10. The first thing is line one, we have our good friend HPixelColorist, and if I go ahead and navigate to the example 10 folder, you'll notice that there is a data folder and inside of that data folder is this jpg. So, I want the HTween to move our rectangle around, but I want it to sample the color out of this jpg using HPixelColorist. So, let's look at line 15, line 15, autoClear(false), right? So, I'm not going to clear the display before I start painting the rectangle again, so it's going to leave a trail behind it. Line 18, is creating an instance of our HPixelColorist, and so it says, "Hey, go into that data folder, go ahead and look at color.jpg." We're going to be dealing with the fill, we are going to be changing r1's fill to whatever color is happening on color.jpg. If you look at r1, the only thing that has modified here is I've added rotation 45 degrees. So, rather than being a square, it's rotated 45 degrees, so it's kind of a diamond shape. Now, nothing has changed with our Tween, it's going to animate to the four different locations. So, the Tween is going to go from one to two, two to three, three to four, four to one, as soon as it gets back to one, it fires back to position two again and thus the loop has commenced. So, that has not changed from example eight. Now, let's go ahead and look at our draw function and the only thing that I've added here as an update is the color.applyColor to r1. So, if we run this sketch, you'll notice that it runs the four corners, but as it runs the four corners and as that x and y position of the rectangle is updating, it is sampling the color from the color.jpg inside of the data folder, right? So, it's using its x and y as a look up to the x and y of the jpg and it's sampling the color from there. So, killer, really really love this. Now, let's go ahead and close this and move on to Example 11. You know that I love giving you these little sneak peeks of adding stuff. Check it out, we add some oscillators and I add two oscillators here. Again, I'm being wonderfully vague about oscillator because we're not at that section yet but again, I'm wetting your appetite to how awesome each oscillator is. I add an oscillator for rotation, so it's going to oscillate from negative 180 to positive 180. It's also going to oscillate its scale from 0.2 to one. So, from 20 percent its size to 100 percent its size. You'll also notice that I made a little update here to the rectangle, I got away from using anchor at H.center to an anchor of 50, negative 50. So, again here's your artwork, it's centered on the x-axis, but the y-axis is 50 pixels off of the art, so the pivot is going to have this kind of movement to it. Other than that, again nothing has changed in the draw, I just removed the visualization of the four points. So, in the draw, we're just updating the color and we're just painting the screen. So, at this point, if I test this sketch, I'm just showing how awesome oscillator is. Believe it or not, it's moving, the Tween is moving from upper left to upper right to bottom right to bottom left to upper left. It's still moving to those locations using HTween, but oscillator is changing its rotation and changing its scale, so that we start to get something a little bit more visually interesting. Because on line 15 we're doing that autoClear(false), we're just simply leaving a path. Again, because we're using HPixelColorist, we're sampling the color from our hidden jpg inside of our data folder. Okay. I'm going to close this video and we're going to wrap up this section with doing one last video which is example 12 and example 3d. I'm sorry. Example 12 and example 13 which used 3D. So, the same exact system but actually using some 3D aspects to the sketch. So, thanks for sticking with me. Let's move on to the last video and keep kicking ass and taking names. See you in the next video. 26. Unit 6, Video 8: All right. This is the last video for this section. I am loving some of the 3D capabilities of Hype. I'm just really enjoying moving into 3D systems. I spent many, many years in 2D systems and I'm just blown away by getting into 3D primitives and 3D coordinates. I'm just really, really enjoying it. If you look at my Tumblr very quickly, I moved into doing 3D shapes. It's been bananas to say the least. So, let's look at example 12. Example 12, again, is some 3D stuff. So let's look to see what's changed. Example 12 and example 13 are just continuations of 10 and 11. Well, more specifically it's an extension of 11. So, 12 really as a copy of 11 in the sense that I still kept those oscillators in there. Now, up to this point, even though we introduced 3D in example five, it was still using Interact. Interact is a two dimensional drawable, right? It's not a three-dimensional drawable. So, let's go ahead and look at what is different in example 12. Well, first we have to address lines 14 and 15 which is as soon as you move into a 3D environment, you need to let processing know by switching the renderer. So you'll notice on line 14, I've said that the renderer should be P3D so that you're telling processing that you're dealing with a 3D system. It also means that on line 15, I have to tell Hype that I'm moving into 3D as well. You'll notice on line 15, I say use 3D is true. AutoClear still false so it's not going to clear the display, it's going to keep painting trails. Now, I kept the oscillator in there. In fact, nothing is really changed code-wise, except for I've changed, well, let's back up to line three, actually. You'll notice that r1, actually, isn't an HRack anymore. It's actually become an HBox. HBox allows me to define a 3D drawable. We're still working on HBox. There's some stuff that needs to happen, but you do have access to HBox as well as HSphere. So line three, instead of HRack, it's actually an HBox. Let's go ahead and look at line 20 through 27. So I'm saying r1 is actually a new HBox, not an HRack anymore. Let's just talk about this for