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 a second. It's this line 22 where I'm saying that the size is 100. That means it's making a box that is a width of 100, a height of 100, and a depth of 100. So, it's making a perfect 100 by 100 by 100 cube. Other than that not much different. Well, that's not entirely true. I think I changed the oscillator here. If you look I'm doing an oscillator for rotation and I'm doing an oscillator for the Z-axis. So, now I'm going to take this cube and I'm going to be moving it towards you and away from you. The Tween stuff, still the same. So, when I actually ran this sketch, you will now notice that it is still running the positions. So, it's still running the four coordinates, but the drawable is actually a three dimensional cube now. It is not a flat. It is not a flat rectangle. It is actually a 3D drawable. You'll also notice that it's a perfect cube. So, I did it again, it is 100 by 100 by 100. You should notice that it's doing actually some shading. The reason why it's doing some shading is, well, maybe before I talk about shading, notice that it is still sampling the color from color.jpegs. So it's still using HPixel Colorist to sample the color, but you might notice that the colors actually shifted a little bit. That's because once you actually get into working with 3D, you can start setting up lights. So, I'm just going to close this for a second. I'm going to move all the way down here to the bottom. Notice that I actually set up some point lights. I set up three lights. I set up an orange light, a teal light, and a white light. Lights want to know basically the color. So, you'll notice when you look at a light, this is red, this is green, this is blue. So, you specify an RGV value. Then, you specify where that light is in space. So, according to this point, like I've said that the X-axis of the light is at zero, the Y-axis is height divided by two, and the Z position is negative 100. So that light is actually on the left hand side centered but back at negative 100. I then set up a teal light. I then set up a white light. The teal light is actually width. So, it's all the way on the right hand side and height divided by two, so it's in the center, but it's only at a negative 50 on the Z-axis. The white light I have width divided by two, so it's in the center. But its Y position is only 100 pixels off of the top and its Z position is 150. So, the white light is actually above everything so that it's casting a white light on the front faces of the cube. So, once we start getting into using 3D, we can start to do these lighting coordinates which is really fun. You can change the RGV values on this and cast different lights onto your cube. You can start to manipulate the color there. So, not only is it getting the color from HPixel Colorist from the JPEG, but we also have these lights that are casting their own individual lights on the cubes, which is just, this stuff's beautiful. I'm mesmerized by this stuff. I can start tweaking this file. Really, the mutation and research on this for me is endless. I can always think of different ways of adjusting some of the stuff in this file. Let's close this one and let's just move on to example 13. Example 13 has just really one minor change to it. I changed the point lights to use basically gray and white. I don't use orange and teal like I did in the first two lights. So, you'll see here I'm just doing a light gray 204, 204, 204. I'm still using that white of 255, 255, 255. So again, I've changed the lighting a little bit to be a little bit brighter and not to actually cast a color on the HPixel Colorist. The second thing that I changed is, if you look at the HBox, in example 12 it was a perfect cube so it had a width of 100, a height of 100, and a depth of 100. So it was a perfect square. It was a perfect cube. Look at what I've changed in example 13. I'm still creating an HBox, but look at what I do on line 26. I say, "Hey, I just want to let you know that you're not actually a perfect cube. Your depth is actually 500 pixels. Your width is only 50 pixels, and your height is only 100 pixels. So, now I'm making an elongated rectangle rather than a perfect cube. So now, when I run this file, you'll notice that this sketch is using that elongated rectangle instead of using a perfect cube. So again, I can make an HBox, but I don't need to make it actually a perfect cube. I can start to adjust depth, width, and height, and basically make any kind of shape that I want. You should also notice that, again, the point light is just using grays and white. So, I'm not offsetting the color that's getting stripped out of HPixel Colorist. This is great. This really starts to wrap up HTween. We're going to move on to HSwarm which is a behavior system, but I would, say, take a break and start thinking about, again, some of the artwork that we created in the first class. We could be animating SVG. Maybe you want to really play around with these 3- files and see this is like spin art. This is like I am tripping acid spin art. Josh Davis, I am freaking out. You can. Maybe it's a good time to freak out, right? So, take a break and experiment with some of this stuff. Again, we're using HTween just to animate those four coordinates. Oscillator is taking care of this other stuff. Great. This ends this section. We're going to move into HSwarm which is dealing with a behavior as a system which we'll get into and I think you'll really enjoy. See you in the next section. 27. Intro to HSwarm: So, now we're starting to get into the more robust aspects of using HYPE behaviors. When we were using HFollow, we were using mouse input, we were using gesture to move things around on screen. When we moved into HTimer, we were animating stuff based on tempo. But I've packaged up some behaviors that do way more robust things. So for example, in HTween you had to specify what the animation action was, the point A to point B, but we have a lot of other behaviors that exist in HYPE that execute much wilder animations. The first one that we're going to cover is HSwarm. So, the best way to think about HSwarm is an insect behavior. Imagine fireflies flying around your backyard in summer. HSwarm is going to give you that kind of feeling, that kind of movement. Now HSwarm uses some interesting arguments. The first is we're going to specify what is my destination. So, in this first file that we'll probably create, the destination is going to be the center of the screen. So, already the swarm has been given instructions of where it wants to try to get to, in this case, the center of the screen. However, we're using a few more behaviors like rotation, speed, turn is, so how many degrees does this insect turn as it's trying to reach that destination? And you'll see in a couple of other mutations we're going to use twitch, and twitch is what knocks that insect off course. So, in these first files, if we set the destination in the center of the screen, and after we set up all the parameters for rotation and speed and whatnot, you should notice that the object is rotating around that destination because it can't quite get to it, right? It's trying to swarm to that destination, but it actually never reaches that destination because of these variables that we put into place. Now, that behavior is going to be very uniform. It's not until we introduce, in another file, twitch where we actually start to knock these things off course. As we knock them off course, each of these little pieces of art that were creating onscreen will give the perception of them having an independent behavior, an independent mind of its own because they'll meander all across the screen, but all of them are still trying to get to that destination fixed in the center. 28. Unit 7, Video 1: Okay. Welcome to HSwarm. In this section, we'll be covering a behavior that's a system. So, basically, you're going to set up a system, register a bunch of objects to that system, and this behavior system then controls all of the assets that are created. So, you should see in HSwarm we've got seven files and we're going to run through the first three, example one, example two and example three. Let's go ahead and start our breakdown of example one. So, example one again is very similar to some stuff that we covered in HTimer in the sense that we're using a timer in conjunction with a pool. Okay. So, let's just digest those aspects of this file. I've got an HDrawable pool, I've got an HTimer, we can see here that we have an HDrawable pool that's going to draw 40 assets, they're going to get added to this stage, we're going to be painting a rectangle that has a rounding of four, and the size is only a width of 18 and a height of six. We have a colorist with an HColor pool and some random colors in here, and we know that it's only going to get applied to fillonly. Okay. Scrolling down to the bottom here, we've got a timer because we want to stagger when these things get presented on screen. So, instead of doing a request all, we're using a timer to generate our rectangles. Line 44 has a numCycles, so we know that this particular timer is only going to run 40 times and then shut down. We know that it's going to fire the callback every 250 milliseconds, and when that call back fires, it's simply going to ask the pool to request an item. So, we've got pool.request. Now, this is a swarm. So, if you just look down here on the bottom with the draw, I've got H.drawStage, and then I'm doing some other processing syntax for representation. So, I just want to show you here that I'm making two ellipses. The first ellipse, I'm going to put towards the top and actually tell color that one teal, and then I'm going to put one in the center of the screen, and I'm going to color that one dark orange. The reason why I picked two colors is because one point is going to represent the birth of the objects, and the other point is going to represent the point that the swarm is trying to swarm around. Okay. So, I've got two ellipses at two alternate colors. Now, when we look at the onCreate here, and we go ahead and look at our HRectangle which is our Drawable, we are not applying any stroke. We are adding a location and that location is the first point. So, look, width divided by two, so it's going to be the center of the screen, but then it's going to be 100 pixels off of the top. If you look down here on line 60, that's the same exact point, width divided by two, 100 pixels off the top. So, this would represent the position that the assets get born at, and the anchoring is H.CENTER. So, we've covered everything that's non HSwarm, so we can see what's happening here. Now, let's cover swarm. Swarm is a behavior, but more importantly it's a system, right? It's a system that's going to control all of the stuff on screen. So, at least before we even run this file, we have an understanding that every 250 milliseconds, it's going to be creating a rectangle in the position that we set desirable. Okay. So, let's look at swarm here. But on line one, you see I've said HSwarm, we're going to call it swarm, and then on lines 10-15, I create an instance of that HSwarm. So, I said, swarm is a new HSwarm. Let me tell you some stuff that you need to know. The first is, I want to add a goal, and the goal is, width divided by two, height divided by two. So, the goal that you're trying to get to is the center of the screen. So, swarm is going to swarm around with always that desire to try to get to the center of the screen. Now, we need to give swarm a speed. So, in this case, I've said all right, the swarm of the object should have a speed of four. Now, you'll see that we have turnEase. So, how many degrees of rotation does it make to try to get to the center of the screen? So, in this case, I've said 0.025f. So, it's a float. Okay. I also have argument here for twitch, and you'll notice that twitch is set to zero. So, with this particular file, it's actually not applying any twitch at all, which we'll cover in example three. So, right now, no twitch at all. So, lines 10-15 setup this swarm behavior, and the swarm behavior is a system. Now, what I need to do is register the objects into the system. So, you're going to notice here on line 37, as I'm creating assets, as the timer is firing every 250 milliseconds and as it's firing the onCreate for each of those individual assets, line 37 says, "Hey swarm, I want to give you another player in the system. " So, I just say, swarm.addTarget(d), d being our HRect drawable. So, now the swarm is registering assets to it, and in this case it's going to register 40 of them. Now, if I go ahead and test this sketch, we start to see the swarm behavior. So, every 250 milliseconds, an asset is getting created, they are getting born at that width divided by two, y100, and it sets them in the motion. Okay. Now, it is to set them into motion, but here, let me just close this and move up to the top here and rerun this again, that way we can look at the swarm while it's running. The goal is this width over here divided by two, height divided by two. So, these guys are trying to get to the center location. The other things that we have to look at is,okay, cool. There is a speed associated with these objects. So, right now we're seeing a speed of four, and then we have turnEase. So, that turnEase is degrees that it's turning to try to get to width divided by two, height divided by two, that goal. But, because there is a speed and because there is a rotation, you can see they sort of fall into a perfect circle. Because based on the speed and based on the turnEase, they actually never get to the goal. Again, it's like, think about driving your car, you can only turn the steering wheel so much, and if you were in a parking lot and you put a soda can in the middle of the parking lot, and you had your foot on four miles per hour for the speed, and you turned the wheel, you're never going to get to the can. You're just going to be basically doing circles around that can. So, again looking at those two variables dictates how this system is going to behave. Now, I'm going to run it one more time because this is going to prep how we move into example two, which is, watch the bath animation. So, notice that they're always shooting out to the right hand side, and they're all falling into this perfect pattern. So, I wanted to stagger that a little bit. So, let's go ahead and close this and move into example two. Now, in example two, I make just a little adjustment which is, I want to randomize how those things get thrown out of their bathing position. So, if you look at example two, all I want you to do is to scroll down and look at the onCreate method. You'll notice here that I put in a few extra things. One is, I just said float rotation equals random(TWO_PI). So, I put in this rotation variable, and then I made a little adjustment to our HDrawable d. On line 35, I said, okay,well the rotation radius should be whatever rotation fired up on line 30. I also just want to do a quick movement of HDrawable d to be cosine rotation times ten for the x, and sine rotation times ten for the y. Now, just with that little addition in this particular example, let's watch what happens. You'll notice that when the assets start getting created, they kind of shoot out like fireworks. Instead of them constantly being thrown out to the right, I'm actually randomly distributing how these things get thrown out. The problem with this file right now, is there's no twitch, and because there's no twitch, again, it doesn't matter how I throw these things out, they're going to fall into this circular rotation. What is nice about this one in particular is this, that you have some that are going clockwise and you have others that are going counterclockwise, whereas in example one, they were always going clockwise. So, at least with the addition of this code in example two, we do have some assets going clockwise and some going counterclockwise. Okay. Let's go ahead and close this and I'm going to go ahead and move on to example three. The only change inside of example three is, and I would say example three is actually a copy of example one, I got rid of that firework kind of throwing out behavior in example three just because I want to keep things simplified. In example three, all I did was was add this twitch. Actually, I changed the speed to be five, the turnEase is now 0.05, but look at this twitch, twitch is 20. This is where it's just this one little variable that really strikes up the excitement in this particular behavior, which is, what twitch is going to do is knock it off course. So, if it is implementing a certain speed and it's implementing a certain turnEase, all twitch does is basically knocks it off course. So, again, imagine trying to drive your car to get to a soda can sitting in the middle of the road, but it just so happens that there are other cars that are actually slamming into you, knocking you off course. So, that's what twitch is. Twitch is deviating from the path, just knocking them off of course a little bit. Now, and again, that's the only change here in example three. Watch what happens when we run this sketch. We start to get this really beautiful organic behavior because now it appears that each of these has a mind of their own. So, you might have seen in the intro video I referenced, it's like an insect behavior and it really takes on that sort of aesthetic because, as swarm is running and as they're all using a speed of five, and yes they're all using turnEase of 0.05, they're each randomly getting a twitch hit to them. So, as soon as that gets implemented, this whole system seems to take on all of these things look like they're acting independently, but they're really obsessed with getting to the center of the screen. So, this wraps up examples one two and three. In the next video, we're going to cover the additions in examples of four through seven. See you in the next video. 29. Unit 7, Video 2: Okay, this is the final video in this section. We're going to work on examples four, five, six, and seven. These are mutations, just to show some enhancements that can be applied to these files. So, let's go ahead and look at example four and some of the examples, some of the adjustments that I've made is look at line seven. I said auto clear false. So, right now it's going to start to leave trails on screen. The other adjustment that I made is look at line 11. In the previous files ad goal was width divided by two, height divided by two. Here I'm just saying H.mouse. So, H.mouse is going to return the x and y position of the mouse as I update, so it's another tip to what we did in H.follow, which is using gesture. So, now the goal is wherever the mouse happens to be. Other than that, the code is exactly the same with one other minor little adjustment here which is on line 31 for size, I just randomized the size of the H.recs that get created. So for the width is doing random 10, 20 and for the height is doing random two, six. Now, if I go ahead and run this sketch, you should notice that if I put my mouse here in the center again, there are 40 assets in this drawable, the timer every 250 milliseconds is firing, and they're all they're just trying to get to my mouse. So, if I actually move my mouse up here into the upper right hand corner, the swarm goal has altered, so now I can start to execute gesture and the swarm is constantly trying to chase the location of my mouse. So, just remember that goal doesn't always have to be a fixed point. In this case it actually can be a point that's moving, in the case of this one is H.mouse. All right, so let's make some other enhancements. This obviously is using colorist and an HColorPool so, I thought maybe I would try some other stuff which if you look at example five, we covered this in the first-class but so far I haven't really talked about it until now which is HColorField. If you remember, HColorField allows you to create gradient points of color. So, here you can see I'm adding a point of blue and adding a point of pink. So, I'm using HColorField to define pools of color and also if you remember, if those pools of color overlap, they actually blend new colors where overlapping actually occurs. So, the only change on this one is the addition of getting rid of, you'll notice it's gone now, the.colorist HColorPool is missing from this particular section. I'm now using on line one here HColorField, and again on lines 11 through 17, I'm specifying two colors, a blue and a pink and saying that they should only get applied to a fill. Now, there's a couple of things if you remember with pixel colors that we have to do, is you have to set a fill with color field and you can think of color field is like being a tint. Again, I don't know if you remember that conversation that we had in the first class. But I want full saturated color so I'm actually going to set the fill to black,000000. Now, because I'm using H.mouse, and because I'm moving the mouse and the swarm is following the gesture, I need to constantly be updating the assets that are inside of swarm. So, let's look down here at the draw function, and you'll notice that I have a little for-loop. Now, a for-loop is something again, that runs a set number of times. So, what I want to do is loop over all 40 assets that are on the screen, and update each of those 40 assets update their colors. So, I say for HDrawable d inside of pool. So now I know that this for-loop is going to run 40 times. When I do that, I just say I want to talk to the color field. So, I say colors.applyColor and I'm applying it back to d.fill and again, the d.fill is a block. Now, if I run this sketch again, you'll notice that a swarm gets initiated you should be able to move your mouse, they will run to your mouse and as you move around, you're actually updating the fill color with this with this color field. So, if I only moved to this right position, I'm getting the full saturation of the blue and again, you'll notice as I start to move to the middle, I get this purple because that's where the two color fields are actually mixing. If I move here to the extreme left, then of course I'm going to get the brighter of the pink. Because it's a gradient, again as you start to move away, you'll be able to start to see the gradient as it moves out. So, if I come into this position, I'll probably get close to that black as possible. So, again this is using HColorField. So, in example four, we were using HColorPool and example five, we were using HColorField, so of course if you transition over to example six, I want to do PixelColorist. So, if you look at HPixelColorist we have our color jpg. So, let's just go ahead and look at line one. I'm saying HPixelColorist colors on lines 11 through 15, I'm saying hey go into the data folder and find this color.jpg. Other than that, the code is still absolutely the same except for down here on the bottom inside of the draw, I made a little bit of an adjustment which I said, "Cool, I need to loop over all of the assets in the pool and I need to update their color, colors.applyColor" but notice I'm saying d.alpha 50 so I'm actually changing the alpha transparency of the HRectangles inside of the swarm system. So, if I actually run this sketch, you'll notice that it is sampling the color but again, I've have this this alpha of 50 so I can start to have them kind of create new colors as they run over each other. If I were to stay in one section, obviously the swarm would build up enough that particular area would become quite saturated with the color that's getting sampled from the jpg. Now, moving on to the last file which is example seven, you knew that this one was coming, is adding HCanvas so up at the top I said HCanvas c1, again this is just repetition, so much repetition in programming. Lines 12 through 13 creating an HCanvas auto clear false. Again, notice that the autoClear false has been removed from line nine, it's been added to HCanvas with a lovely fade of two and our canvas C1 is being added to the stage. So, because I did that, notice that I needed to make an adjustment to line 25. So, instead of adding it to the stage, I say pool.autoParent and then pass it the canvas. So, now each of these 40 HRects are getting drawn onto the canvas as opposed to the stage. Now, again the rest of the code has not been modified. The for-loop down at the bottom, I took away the alpha and then just said d.fill in and pasted in that color of black. So, now when I run this sketch, this represents for me the beauty of all of the elements working in tandem. So I've got a really nice swarm happening, I have at picking up the color from HPixelColorist from that jpg sitting in the data file, but we're using the power of HCanvas to slowly burn away the trail of the system so that it doesn't fill up the screen entirely, it allows me to explore areas of the sketch and then have the trails fade away into the background. Okay, so this wraps up exploring HSwarm and again, God I hate to keep saying the same things over and over and over again but again, this is just using an HRect. This can use any of the SVG that you made. That's where the experimentation comes in. I'm trying to keep the code as generic as possible so that you can start to, "Well, what if I put an image in place of that?" or, "What if I use SVG with that?" You can start to mix and match some of these things that we learned by making these kinds of mutations that I'm talking about. Again, this is stuff that I do on a daily basis, is come up with these ideas, try to write the code is generically as possible so that I can start to explore all these different mutations. What does this look like when you put some of your SVG assets in there? I'm assuming that you're going to be posting some videos inside of the final project section that that will show us exactly what it looks like. So, I'm excited to see what you guys do with the system in particular. Okay, we're moving on to the last two big code sections, and we're going to move into HOscillator next. Here's the part where when you click HOscillator you slightly freaked out because yes, there is 23 examples in the HOscillator section. I am dating age oscillator, I am in love with HOscillator and you'll obviously see why as we move through that progression. So, HSwarm, it's been fantastic. I will see you in the next section HOscillator. 30. Intro to HOscillator: Right now, you have reached the section, that is my absolute favorite and that is HOscillator. Because HOscillator is so simple, and so beautiful, and so surprising. There are so many mutations that we're going to do with HOscillator. That, you're not going to sleep, you're not going to sleep for a month. Because you're going to be thinking about all these different ways, of combining HOscillator to create these impossible unexpected animations. Now, HOscillator is just a wave pattern, and we've actually got four different waves that you can work with. There's a sine wave, which is that beautiful curve. It's probably the one that we'll use the most. We have a square wave, we have a saw wave and we have a triangle wave. Now, we're going to look at some of the parameters of the HOscillator. Again, like Swarm, it wants to know a target, who are we applying this wave to. It also wants to know property, just like HTween did, in that previous section. What are some things that we can actually oscillate? Well, we could oscillate again, Alpha, we could oscillate scale, we could oscillate rotation, we can oscillate position. It wants to know things like range. So, like what is the range of oscillation? Could be, if we were applying it to rotation, could be, positive 180 degrees to negative 180 degrees. So we'd have this thing, like a pendulum, going back and forth. Oscillator has frequency, so what is the amplitude of the wave? Is at a slow undulating wave? Or is it very erratic? We also have a property of current step, and current step, is what allows us to offset that wave, across different things that we're painting on screen. So, in the first class, we learned things like GridLayout. Well, GridLayout and HOscillator work great together? Because, we can layout things on screen, and then have oscillation happen across all those elements in the grid. Now, we're going to apply HOscillator to two-dimensional animation. Where it really gets bananas, is when we actually apply HOscillator to a three-dimensional animation. We can oscillate things like, the Z space, as well as, we'll do a sample where we're actually using HBox, which allows us to make a three-dimensional cube, and we can actually oscillate how that box rotates in three-dimensional space. So HOscillator, if it's not your favorite, we're not dating anymore. It's just that simple. If you don't love this section, I'm breaking up with you. 31. Unit 8, Video 1: Each oscillator. You're my best friend. Each oscillator makes everything beautiful. I can't even express how much I love HOscillator. It is probably the most surprising thing I've ever experimented with, in the sense that, you mix like a few things and it's like "What?" I'm like, "Yeah." it's like, "what?" It's crazy. I love it. Twenty-three examples, man. I went nuts. I really love this class. So, attached to this video obviously is a zip file. Open that up, you're going to see 23 examples. In this first video, we're going to walk through the first six. So again, go ahead and download that zip, unzip it, you should be looking at it and here it is. Now, let's go ahead and look at example one. Example one does not contain an HOscillator. In fact, what it does contain is code that we did in the first class using our beautiful friend, HGridLayout. So, let's just walk through this grid that we're going to create and then in example two, will start to explore oscillation. Now, before I get into the hype code, I just want to jump all the way down to the bottom and again, just showcase some processing code. So, if you look here, I'm creating a stroke of a light grey, CCCCCC, and then I'm creating a line, and I'm creating a line from the first point is zero, height divided by two. So it's centered on the y-axis and the other point is width by height divided by two. So, we're basically making a horizontal line. Again, I want to see that horizon line because once we get into oscillation, I wanted to see how the oscillation affects that baseline. So, let's go ahead and review this. Up at the top we've got an HDrawablePool. The pool is going to attach 90 assets. It looks like we're attaching a rectangle again but check out the size, the side is only six pixels by six pixels. The rounding of the edges is two, it's anchored at the center and there is no stroke. There is a colorist with an HColorPool with some random colors getting applied to fill only. You'll notice, again, I'm just going to skip over some stuff. Look down at the bottom, yes, the return of requestAll. Notice that we're not using a timer to build this grid, I want all 90 assets all at once. Let's look at the layout here. So, we've got an HGridLayout. It's going to start at an x-axis of nine and height divided by two. So, it's going to attach on that center horizon line. Because our HRect is six pixels by six pixels, notice that the spacing is seven pixels. So, well, let me just come back to that because you might notice that there's zero for the y. Why is that? Because there's 90 assets in the columns which means, we're using grid layout to build one row of assets and those assets are six pixels by six pixels but because the spacing is seven, there is a one pixel gutter between each of the HRectangles. Since we're just building one row, there really is no reason to put any number for the y spacing. So, let's go ahead and test this sketch and again, you should see that we've got 90 rectangles all built out into one row, and it's perfectly centered on that horizon line that we defined down into the draw. So great, so now, I have this row of assets that I want to apply some oscillation to. So, at least with this file, you can see how we're attaching this stuff on screen before we apply oscillation. I'm going to go ahead and close that and I'm going to go ahead and advance on to file two. Now, inside of file two, I am going to add an oscillator to each one of those rectangles. So, if I scroll down to the bottom here, you'll notice that there is a requestAll. requestAll is going to fire on create for all 90 assets all at once and what happens is it creates RDrawable d. It applies the layout to the d. But then, it creates an oscillator for each one of our HRectangles. So, let's take a look at some of the properties that go into HOscillator and again, this is the first time that we're covering it because we skimmed it in some of the previous examples up above. Killer. First thing it wants to know is who the hell am I oscillating. So, we're creating a new instance of an HOscillator and we're passing it our HDrawable of d. The second thing that it wants to know is the property that it's oscillating. We're beginning to see a pattern here very similar to HTwin. HTwin wanted to know who am I twinning and what is the property. So, as you saw in some of those previous examples, yes, you can stack the hell out of HOscillators, and as long as they don't fight the same property, they'll all work independently. Now, what's important to notice here is that on line 33, I have said that what I would like to oscillate is the y-property. So, that must mean that I'm going to move stuff up and down on the y-axis. Now, after you've specified the property, it wants to know, "Well, what am I oscillating? What is the range of oscillation?" So, for example, if the property H.alpha, the range might be something from 0 to 255. So it would oscillate from not visible, zero, up to full visible, 255, and would continue this oscillation from zero to 255. So look at what happens on this file, I've said that I want it to oscillate from a range of 10 to 50. Now, it needs to know some other stuff, it needs to know, well, how fast should it go. So, like swarm, there is a speed variable, and the other thing it wants to know is frequency. So, we're going to explore frequency quite a bit. Frequency, is at a slow wave or is it a very erratic wave? So, in this one, I've said that the frequency has too. Now, this file is actually a failure and the reason why it's a failure is because I'm illustrating for the very first time what happens when you pass it a property of y with a range of 10 to 50. Now, watch what happens when I test the movie. When I test the sketch, it starts oscillating, but you'll notice that all the artwork just jumped to the top of the stage. Well, why is that? Well, the reason why I did that is because that's what you told it to do. You said that you wanted to move this row of artwork from a range of 10 on the y to 50 on the y. So, even though the grid layout did a starting location of height divided by two, so in the case of example one where it created it along this horizon line, it did do that for a split millisecond until the oscillator kicked in. As soon as the oscillator kicked in, it said "Oh yeah, cool. You want me to go from a y-axis of 10 to a y-axis of 50?" So, all of a sudden, that whole entire row jumped up to the top and started oscillating between a y of 10 and a y of 50. So, you might imagine you can play around with this if you said the range was zero and the max range on this was 640, then all of a sudden you would see that the oscillation is going from the top of the screen all the way to the bottom of the screen, because you're specifying absolute positions of oscillation which is from zero to 640. So, in the case of the previous file, the zip file that you have, it's doing a range of 10 to 50. So, this poses a problem where you say "Well, yeah. I really didn't want that, I wanted it to oscillate off of that horizon line." Well, instead of trying to figure this out, if you did it the hard way, you would say "Okay. Well, the range is height divided by two minus 100, and then the max range is something like height divided by two plus 100." Then if you ran this sketch, you would notice like, "Oh, okay. Cool, that's what I wanted to use, start at that horizon line and then oscillate off of that horizon line." However, this is a long way of doing it and again, I like to make things easy. So, I'm going to take this away, going back to range of 10 and a range of 50. Now, this really only applies to when you're setting a property of like x or y, that you can do the next set of trick, which is go ahead and go to example three, and you'll notice that we've already considered that you would probably want to oscillate off of an already set position. So, you'll notice that on line 34, there is relative value and then you pass it, it's relative value. So, let's just think about this here for a second, layout is saying, "I am going to attach the artwork, height divided by two." So, it attaches it on that center horizon line. Once it gets to the oscillator, you're saying, "Hey, I want to oscillate these drawables, I want to oscillate the y-axis, but do me a favor in the mind where that artwork was initially created." In this case, the relative value is d.y, which is height divided by two, it's that initial horizon line in the center of the screen. So then, range becomes a range off of the relative value. So, here I just said "Man, wherever you got that attached to, which is d.y, do minus 100 off of d.y, and do positive 100 off of d.y. So, again you don't have to worry about like, "Oh, what do I type in order to find that horizon line? " You can just say relative value, and again, this is specifically if you're working with the x-axis, the y-axis, the z-axis, relative value is probably something that you'll use. So, it's using range based off of this base value. So, now, again when I run this sketch here, you'll notice that it is now minding that initial horizon line, that layout used, which again is start location, height divided by two here on line 21. So, relative value is minding that it's attaching the artwork at height divided by two. Then range is simply oscillating off of that base number. Got it? Good. So, the next thing that you might notice is, "Josh, this is not what I expected, I thought this was a wave." Technically, it is a wave but it's applying a wave to all of the assets at exactly the same time. So, what we probably want to do is create a little offset so that they still use the wave but just offset each of the HRectangles just ever so slightly so that we actually do get that wave pattern. So, let's go ahead and look at example four. What example four does is introduce this idea of current step, so think of this as an offset. What I'm doing is, is saying, "All right, current step is the pool.currentIndex." So, the first block passes one to current step, the second block passes to the current step. So, since current step is getting its own unique number, we're using that unique number as an offset on the wave, so it's really this line 38 in example four, that just becomes the magic. Watch what happens when we test the sketch. That's probably what you expected, which is, we're using this wave, we're using this oscillation, but it's not until we actually put in an offset of the assets on screen, that we actually start to get a wave pattern here. So, line 38, current step, pool.currentIndex. Now, great. Let's start to make some adjustments. So, I'm going to go ahead and close sketch four, and I'm going to move on to sketch number five. The only thing that I changed in sketch number five is I've changed the frequency, so you might notice here, the speed is one and the frequency is five. Whereas in the previous one, the frequency was two. So, since the frequency was lower, it was a nice soft undulating wave. Now, if I change the frequency to five, that would mean that this wave is going to be a lot more disruptive, and actually the higher you make that number, the more disruptive the wave will become. But notice that with that frequency, it appears that it's actually sped up the movement of that wave. So, I want to show you a little trick which is, if I've got a speed of one and I have a specific frequency, it makes me start to think about that line 38, this current step. This current step makes me think, well, it's stepping by one each time, so one is one, two is two, three is three, four is four, and so on. But if I can just increment the steps as a greater number, how would that actually affect this wave? So, I'm going to go ahead and close that. I'm going to go ahead and look at example six, and example six has lines 37 and 38 modified. The frequency I actually dropped back down to two because I actually liked the movement of that wave. I just wanted more waves in the movement, but not necessarily changing the speed of set wave. So, check it out. On line 38, I just said, instead of doing one is one, two is two, three is three, why doesn't current step be pool.currentIndex times six. So, I'm actually multiplying a number onto the current index. So, that way, the steps between each of the assets is not a single jump each time. So now, when I run this sketch, you'll notice that the speed and the frequency is actually what I liked, but I've changed the steps in the current step so that it actually presents more waves in the oscillation pattern. Yeah, cool. Okay. I'm going to close this video now because for some reason, I'm failing miserably. I'm trying to keep these short. So, let's wrap this one up and let's move to the next four files which is going to be example seven sine, example eight square, example nine triangle and example ten saw. 32. Unit 8, Video 2: Okay. This video is probably going to be a heck lot shorter because I just really want to showcase the four different types of waves that we actually have inside of hype. So, if I were to quickly run build seven, you'll notice that by default, each oscillator is always using a sine wave okay. So you see you just get these really beautiful curves, with a sine wave. Now, there is a few adjustments that I made on this file that we're going to do on these four and that is that I change the property. So, if you look here, I'm changing H.Height. So, if you remember when we attach the artwork across this grid, each one of the H rectangles is 6 pixels x 6 pixels and what I'm oscillating in these files is I'm stretching only the height of the property, okay. So, if you look at line 33 I'm saying property H.Height, and then if you look at the range, here I don't need to use relative value because I'm just going to tell it what numbers I want to go to. So, in this case I'm saying, "Hey I want the range to be 6, which is what you are initially created at right, right here on line 11," HRect 6 pixels x 6 pixels, for the H rectangle. Here I'm saying, okay I want the range to be 6-200 pixels. Notice that the speed is 1 the frequency is 3, and again, I staggered the current step a little bit by saying pool.currentIndex times 3. So, when you run example seven, you're seeing that beautiful sine wave being applied to stretching the height of that H rectangle. Okay. Now again, there are four available oscillators inside of a hype, by default, sine wave. If you go ahead and jump over to eight, you can actually change the waveform to a square. So, here I have wave form an H.square and this one's odd. This is actually a wave, but the wave is either down or up, right. It's not a sine wave, there is not a slope or curve to this wave. It is still a wave, but really you're just getting the low range and the top range by using square. So, you'll notice here you can say waveform and then H.square. If we jump over to example nine, you'll notice that we have waveform of H.triangle. Okay. So, again it's not a sine wave, it's not curves, but we actually are using a triangle up and a triangle down. So, again this is another type of waveform that you can use inside of H oscillator, being H.triangle. The final one that we have is inside of example 10, which is a saw wave. So, if you look here on line 37, we have the waveform of H.saw, and if you go ahead and run this sketch, the saw wave basically builds up until it gets to its maximum range and then drops all the way down to its minimum range. So this is a saw wave. So while I have these samples to show you the different type of waveforms that can be used inside of H oscillator, sine wave is the sexiest. So, actually from the rest of these files I'm just going to be using the default sine wave because in my opinion it's the most beautiful. Okay. That ends this video. In the next video, we're going to cover examples 11 through 15. See you in the next video. 33. Unit 8, Video 3: Okay. In this video, we're going to cover examples, 11 through 15. This is where oscillation really starts to present some of the surprises visually. Least things that I never expected initially, and hence, began our lifelong love affair. Let's go ahead and look at example 11 and let's just digest some of the the content that's happening here. First, it is a little bit of a departure. I got rid of object pool, and HDrawablePool, and grid layout. I just want to use a for-loop because I'm actually just going to attach everything in the same exact position. So, let's just start to break down this code here. First is I got a for-loop, and this for-loop is going to run 40 times, and each of the 40 times I'm going to attach our HRect of r1. If we look at r1, I say, "Hey you're an HRectangle, your rounding is 20, your size is start scale." We'll come back to this in a second. It's going to have no stroke. The fill is going to get a random color out of r HColorPool appear at the top. The location is going to be width divided by two, height divided by two. So, I know that every single one of these 48 HRectangles is going to attach directly in the center of the screen. The anchor add is H.CENTER. Again, super important because in this first file, we're going to start to work with rotation for pivot, and you'll also notice that I specify a rotation of 45 degrees. So, instead of it being a square, it's going to turn 45 degrees and be a diamond shape, and H.add(r1) for our rectangle. Let's back up and look at this start scale business that we've got going up on. Up here at the top, you'll notice on lines four and five, I have a start scale of 450 and a scale offset of 10. It's not until you come down to line 37 that you see that after it runs for the first time and attaches the first HRectangle at 450 for the size, startScale starts to decrease in size down by 10. So, if you look right here, it says, "startScale -= scaleOffset." So, that means on line 37, it goes from 450 to 440, then to 430, then to 420, then to 410. So, the startScale is slowly decreasing in size. Now, you'll notice I have HOscillator commented out, and that's because if we actually run this sketch, you'll see that yes, in fact, that for-loop attached 40 things, it randomly grabbed a color in the color pool. It attached that first one at 450 pixels for the width and height. Then, the next one is at 440, the next one was at 430, and so on. Each rectangle started decreasing by ten pixels each time. So now, we get this really beautiful cut tree trunk spiral thing. Great. Now, let's go ahead and put in our HOscillator. So, let's just go ahead and look at our HOscillator. I said that the target obviously is r1. The property is going to be H.rotation, and the relative value is going to be 45 degrees, which is that initial rotation that we set in line 23. Look at the range. The range is negative 20 positive 20. So, we had this square, it turned 45 degrees and now it's rotating negative 20, positive 20 off of that initial 45 degree relative value. You should also notice that our speed is 0.4, our frequency is eight. So, that's a larger number than the previous files, and current step is i. So, I'm just stepping by one each time. You notice that i is our integer up here in the for-loop. So, currentStep is zero and then one, and then two, and then three, and then four, and so on. So, let's go ahead and run the sketch. You'll now see that oscillation is rotating, it's oscillating the rotation of these HRectangles between negative 20 and positive 20. But again, because current step is i, they're offset a little bit. Now, you might be asking, "Whoa, why didn't you do like i times a number like you did in the previous one?" Well, if I do that, if I say i times three, for example, my opinion is that the rotation of it is too disruptive and you really lose, in my opinion, the slowness and the beauty of when you're just using i. Don't get it wrong. That's fancy but I prefer, for this particular file, just to do i. Slow your roll baby, slow your roll. That's exactly what we're going to do. Bring that back down to i. Each thing is just stepping by one and again, the movement of the oscillation is just as elegant. All right. Let's expand upon this idea. This is where it just really goes bizarre, is when you start stacking oscillators. Again, as long as they don't fight the same property, magic ensues. So, let's go ahead and look at example 12, and on example 12, I've just copied 11 to 12, and then this is the only modification that I made, which is I added a new HOscillator also targeting r1. But this time, the property is scale. I'm having it scaled between 50 percent its original size to 150 percent its original size. Remember that scale is based off of the artwork's original size. If you remember, the original size starts at 450 and starts declining by ten each time. So, we're still minding the artwork's size that it got created at, but we're scaling a percentage based off of the artwork's original size from above. Great. So, from 50 percent to 150 percent, notice that the speed is still 0.4, the frequency is eight, currentStep is still high. Now, watch what happens when you test this sketch. Now, we're stacking two oscillators that are working obviously together. It really starts to simulate this kind of 3D feeling but it's not. I mean, really, this is just two dimensional artwork. There are still 40 of them just stacked on top of each other but oscillation, in this particular case, really starts to trick my eyes because it begins to feel 3D when actually it isn't. All right. Let's move on to another mutation. I want to keep mutating this base set. So, I move onto example 13 and the only thing that's in example 13 is a new HOscillator of H.Y. So, I'm going to move the Y position of our HRectangle with an oscillation range off of the Y-axis. So, check it out. Got a property, H.Y, the relative value is, I don't know, where were you created originally? Well, where it was created originally was height divided by two. So, you can just say r1.y, and that will fetch the number that was set up here in location of height divide by two. Now, it's using that as a relative range. So, it's going to oscillate negative 50 off of that middle, and positive 50 off of that middle. Again, the speed is 0.4, the frequency is eight, and again the current step is still i. Go ahead and test that sketch and now we have rotation scale and Y, again, all oscillating in tandem, and you can see just by starting to do these mutations, man, the sky's the limit. I begin to think well, how many different ways can I change this to get different results? For me, that's part of the journey is trying to figure out this fine tuning to figure out what kind of animation behaviors they start creating aesthetically. Notice that speed and frequency are 0.4 and eight for all of these and I've kind of done that on purpose. Let's move on to build 14. Build 14, again, only introduce a new HOscillator but this time, for the X-axis. So, I've just copied the Y oscillator and have renamed it to property H.X. Of course, the relative value is going to be r1.x, which obviously from up above, retrieves width divided by two. Again, the center of the screen. Again, the range just like Y is negative 50 and positive 50 for the oscillation. Speed is still 0.4, frequency is still eight, and current step is still i. So now, when I test this sketch, again now, I have four oscillators all working in tandem. Now, here, you'll notice that because all four of these oscillators are using the same speed, the same frequency that really it does create a pattern. Notice that it's going from the upper left to the bottom right. It's doing this animation. That's because the oscillator for X and the oscillator for Y have the same speed and the same frequency. So, of course, they are going to fall into rhythm because they're using the same numbers. So, it's at this point that I want to talk about example 15, because example 15 is going to be about disrupting this rhythm. So, if we close this and move to example 15, the only thing that you need to look at is how I changed some of the settings. So, look at rotation. Rotation is going greater now. It's going 45 to 45. The speed is 0.4, the frequency is 10, but the step is still i. Scale is doing two to eight. So, it's different than what rotation did, and I added this i times two so that scale is happening more erratic on the oscillation than previously. Look at the Y oscillation, I said, "75 to 75 whereas the X is 50 to 50." But look at how speed is 0.5 for the X, speed is 0.5 for the Y. But under this Y, it said that the frequency is five but under the X, I said that the frequency is eight and that the current step was i times two. So, by disrupting all of the numbers, when you actually run this sketch, it actually doesn't fall into rhythm. You're going to get a certain static but it's not falling into that upper left, to the upper right. It's actually snaking around like this, and it may come down. So, that's going to happen by disrupting the numbers on each of the oscillator. So, now, each oscillator truly is acting independent. Again, it's amazing how much this simulates something that looks three dimensional when it's not. This is two dimensional and I'm just using scale to trick your eyes into thinking that this is a 3D form. Okay, let's explore the next series of examples. So, I'm going to close this video out and we're going to move onto examples 16 and 17. 34. Unit 8, Video 4: Okay. For this video, we're going to be looking at examples 16 and 17, and 16 and 17 is when this starts to allude to the type of things that I'm constantly tinkering with to find different results. So, 16 is a continuation of the files that we just did in 11 and 15. But I spent some time tweaking some of the variables. One is that we're attaching 100 things on screen. Okay. So the length or the amount of things that you create obviously is going to have a direct effect to the oscillation. So, add more and more things onto what gets attached on the screen. That's obviously going to change what happens with the oscillation. So, in this case, I am adding 100 things on screen here. The other thing that's also important to remember is that anchor is going to play a huge role in oscillation, especially when it comes to rotation, because let's look at line 19. I said, well, the anchor is 50. But, again, it's that negative 50, so that it's off artwork. So, oscillation now is happening off of this pivot point. So, the rotation now is going from negative 180 to positive 180. I've got a speed of 1, a frequency of 4. I've got an oscillation for scale that's going from 25 percent its original size to 100 percent its original size with the speed of 1 and a frequency of 4, and the current step being I times 3. So there's going to be more pulses within that particular oscillation. I've got an oscillator for Y that's going a much larger number than before. It's going negative 150 to positive 150, and for the X, I'm also doing negative 150 and positive 150. Even though they both used a speed of 0.5, you'll notice that the Y is using a frequency of 2 and the X is using a frequency of 1. So just by changing the frequencies on these two, means, again, that they're going to fall out of repetition. So, let's go ahead and run this sketch and look how the results have changed. So, I've made the scale a little bit tighter by only going from 25 percent to 100 percent. But because I made the Y oscillation and the X oscillation a much larger number, like negative 150 and positive 150, the range of motion is a lot greater. Again, because we have changed the anchor point to be that negative 50, that directly affects our oscillation for rotation which is going negative 180 positive 180. It's this type of experimentation or mutation of file that, what can I change next to produce what next? So, I end up saving out these files as so many iterations just trying to discover these kind of fantastic movements. Again, I just love how 3D it looks even though it's just a trick of the eye. All right. Let's look at Build 17 because, as you imagine, I've always got a loop back around to stuff that we've done previously. So, of course, I'm going to introduce each canvas. So, you'll notice there's an H canvas, there's our C1, there is the addition of our canvas. Auto clear has been moved to the canvas. It's using a fade of 2, and we're adding the canvas to the stage, line 25. Again, the artwork is getting attached into our C1 canvas. So, another little change I did here is I did a little fill, and I did this get color. So, it's getting random color off of this H color pool. But I'm doing a seed here. So I did I times 250 and it just kind of creates this interesting banding. So, other than that, well, it looks like I blew out the range a lot more. Let's check here. Rotation is still 180 to 180. Scale is still 25 to 100. But yet I made the wide range 300,300. I made the X range 300, 300 as well. So, go ahead and run this file, and again, you should notice that it starts to do this nice beautiful color banding by doing a seed inside of that get color call. It does these kind of interesting groups. Because I'm using H canvas and a fade, this thing slowly burns out. So, again, I just find myself constantly doing mutations to see what different types of patterns and animations I get. The play that can be attached to these kind of things is infinite. I find myself constantly trying to discover what types of aesthetics I can get out of something just as simple as stacking oscillators. All right. I'm going to close out this video. The next one, we're just going to be looking at example 18. 35. Unit 8, Video 5: All right. This is example 18, and I thought example 18 again, I would just try to keep really short and sweet. It's some further unexpected mutations. So, up until this point, we had been using HRect in this oscillation. I just wanted to show what would happen when you start doing some variance. So, let's take a look at what I've done with example 18. The first thing that you'll notice is HCanvas is still here, that's carried over from previously. You'll notice that the canvas is doing an autoClear(false), but you also notice that I don't want to do any fading, I want it to leave trails behind it and keep those indefinitely. Now, let's go ahead and look at our creation of a drawable d, on line 16 through 25. So, in this case, I'm going to do a HPath. HPath allows us to do all sorts of different things like; triangles, and polygons, and stars, and in this case, I'm going to use HPath to define a star shape. So, if you look here on line 16, we've got HPath d, d being a shortcut for drawable. Again, we're specifying a star, it's a five pointed star with some arguments of 0.4 and a rotation of negative 90. Again, the size of the stars is 200. In the previous file, we were randomly getting colors but for fill, this time I'm going to randomly get colors but for stroke. So, here I'm setting the stroke color again using this random seed, i times 250, just to get some interesting patterns. The fill, I'm actually going to make black and I also set the background to black in this sketch as well. The anchorAt is H.CENTER and again its initial location is width divide by two, height divide by two. Adding the drawable to our friend HCanvas here, and here are the oscillations. So, again, I'm stacking oscillators like the previous file. So, let's see what we have here, we have a oscillation for rotation, going from negative 180 to positive 180, with a speed of one and a frequency of 0.5. So, it looks like that rotation slowed down a little bit with a frequency of 0.5. We've got our scale oscillation, and it looks like it's going to be doing a speed of two and a frequency of four for 25 percent its original size and 100 percent its original size. We also have some X and Y oscillators here and it looks like both of them are going from negative 500 to positive 500, but the Y has got a speed of one and a frequency of 0.7, whereas the X has a speed of two and a frequency of 0.5. So, let's go ahead and run this sketch to see what happens. So, it's really interesting the fabric texture this ends up creating, because I'm using a star as the initial shape, and because that star has a certain pattern to it. Obviously as it oscillates and I'm leaving the residue of it running across the screen, it actually really starts to create these beautiful, interesting fabric patterns. So, again we can match this with SVG shapes such as drawing Illustrator or in this case using H.path. So, again I get to keep this video simple. Again, I can watch this for days because I'm just that kind of dude. So, I'm going to close out this example 18, and I'm going to move on to a video that just works with example 19. 36. Unit 8, Video 6: Okay. Here we are in example 19. Example 19, getting seriously close to what we did in the first class that we're using H-drawable pool, we're using a grid layout. Great. So, show me how to oscillate stuff based on a grid layout. So, let's just break down the layout here. We've got an HDrawablePool. It looks like on line eight I am attaching 49 things. It looks like I've got a colorist here that's going to pick some random colors, and then of course, I've got a grid layout. That grid layout is getting a start x, a start y, a spacing, and some columns, and the columns are seven because I'm going to do a seven by seven grid of assets, hence 49 objects in the HDrawablePool. Let's go ahead and look at the very bottom here, which is the draws, just doing the H.drawStage. Yes, we're doing request all, give me the grid layout please, instantly all at once. Then if you scroll up to the top here, you can see that I am using H-path to randomize a bunch of stars. So, I did some things like, on line 27, I want to randomize some aspects of the stars. So, on line 27 I said, well let's randomize the edges, give me a number between five and 10, and for a random depth, give me a number between 0.25 and 0.75. So, then I create this H-path and you'll see here, I set the star and I provided it with the random edges and the random depth. Each of these stars is going to be a size of 64, there's going to be no stroke, it's anchored in the center, and it's also going to get a random rotation. So, you'll notice that rotation is random 360 degrees. Now, you might notice in my file, I have commented out the oscillators and that's because, I just want to run this sketch so that we can see visually what's getting drawn on screen. Great. A seven by seven grid of random stars, and again in this case, the stars, it was much easier for me to create them as H-paths, but there's no reason why these couldn't be SVG assets that you made in Illustrator, if you wanted to make a bunch of stars like this. But because I wanted to randomize the stars, it was much easier for me to do it with code than to do it in Illustrator. So, grat. There's our grid. Now, I want to oscillate that grid, but I want to oscillate that grid fancy. So, let's look at a little adjustment here. I actually added 3D to this file. So, believe it or not, example 19 is going to use some 3D oscillations. So, notice on line four, I have to specify the processing that I want to use the P3D renderer. Notice on line five, I have added the use 3D true. Again, because I want to do some 3-dimensional oscillations. Now, these stars are flat. Right, and they're just hanging out like that, straight at us. Okay. If you scroll down to what I've done for oscillation here, again in my file it's commented out, because I want to show you these each one at a time. All three of these oscillations deal with 3D transformations. So, let's just do the bottom one which probably makes the most sense, which is oscillating the z-axis. So, again the z-axis is going to come towards us and away from us, and you'll notice that it's a very small range. It's only going negative 50 and positive 50. The speed is two, the frequency is one, but I stagger the current step by doing the current index times eight. Now, with that oscillation on, I'm going to run this sketch here, and you should see that we are oscillating the z-coordinates of the stars. So, this is what I was talking about earlier where I was simulating 3D by using scale. Here, I'm not using scale at all, I am actually moving this in 3-dimensional space. But you would never know that, because z looks very similar to scale. Right. It's just coming towards you and away from you. So, let's look at some of these other oscillations that I have here. In order to look at them independently, I'm just going to comment this out again. Let's uncomment this oscillator which is rotation y, and you'll notice that it is 45 on the negative, 45 on the positive and speed, frequency, and currents and so forth. That's going to give us this movement. So, I'm going to be turning the flat objects this way. So, watch what happens when I test this sketch. I'm now applying a oscillation to this pivot. Right. So, even though it's still a flat two-dimensional object, I can actually pivot that two-dimensional object in three-dimensional coordinates like this. Okay. So, I get a nice movement like this. Again, you can really mess with this if you do negative 180 to positive 180. That's that's pretty hilarious. Right. Because it's going to flip the star completely around. So, you get these nice twinkling patterns, pretty fun. All right. Let's put that back to the numbers that it was, which is negative 45 and positive 45. I want to comment that oscillator, and I'm going to uncomment this oscillator which is using rotation z. Right. So, the first one was rotation y, this one is rotation z, and I too have said it to negative 45 positive 45, but a different speed, but a similar frequency to rotation. So, let's go ahead and look at this oscillation, and notice that it's giving me this pivot, very similar to ordinary rotations. So, you've got y which is this way, you've got x which is this way, and z give me that pivot this way. Now, the magic happens when you turn all of these on. When you turn them on, you're going to get dark magic, rotation y, rotation z, and oscillation on the z axis. All right. So, now I've got my grid, but now I'm stacking all three of these oscillations to give me this movement. So, here's a nice little tweak, by using oscillation in a 3D space which is just super bananas. All right. Let's close this file, and we're going to move on to the next one. We're just going to be focusing on example 20, making good progress. 37. Unit 8, Video 7: This video is dealing with example 20. And you say, "Josh Davis, why do you keep talking about SVG? Show us an example that uses SVG." So, example 20 does just that - in fact, I actually pulled this file from a class that we did in the previous first class - in the sense that I've got a grid layout and I'm randomizing some SVG assets. So, let's look at build 20. The big change here, obviously, is I'm adding a bunch of SVG shapes. I commented out one and six just for the heck of it. This one only uses SVG2, SVG3, SVG4, and SVG5. So, if you look at the HDrawablePool, we're going to attach 144 SVGs. We've got a layout here and inside of the onCreate, it is attaching our SVG, it's enableStyle false, it's killing the stroke on the SVG, it's applying a random 90-degree rotation and I also ask it to grab some random colors from our HColorPool listed above. Now, check this out. Here, I have two stacked HOscillators, and if I actually comment those out and just run this file, let's just see what we get here. You might've remembered this from the first class where I'm just creating a pattern by randomizing these SVGs. Right now you'll notice that on line 36, I have the size commented out because if I actually put the size in there where I'm randomizing 50, 100, 150, 200 for size, if I actually run this, it's going to give us these kind of, yeah, that's great, looks awesome. Cool. Now, I want to oscillate this in some way. But, just for the heck of it, I'm going to comment out that size position so that we're just back at this grid here and let's just see what happens when we oscillate this grid. So, let's go ahead and do this first oscillation. Of course, it's targeting our drawable, it's applying rotation, it's going from negative 180 to positive 180. Look at the speed, 0.05, that's really nice and slow, and the frequency is five, and notice that the current step index is just stepping in increments of one. So, look at what happens when I test the sketch here, you'll notice that, again, we're slowly running that 180 to 180 oscillation across the grid. So, again, it presents an entirely new pattern here just by applying this oscillation. So, that's fun. Now, let me uncomment out this oscillation for scale. So, look at what I did for scale here. I said, "Okay I want you to oscillate scale but I want the range to go from 100 percent to 500 percent." So, that's going to get quite big. Again, the speed is 0.05, that's nice and slow. But the frequency is a little bit more abrupt in the sense that we're using a frequency of seven and the current step is using current index times three. Let's go ahead and run this file. Again, now we're getting a scale oscillation in conjunction with a rotation oscillation. This is just triangles, it literally is just using triangles, SVG that I made inside of Illustrator but, again, this kind of mix starts to produce these really elegant results. Because scale is based on the artworks original size, you'll notice that, again, the artwork here is 50 by 50 so the scale is only getting applied to each of those assets that are 50 by 50. It's when you uncomment out the size setting that things are going to get a little bit more random because now you're randomizing the size of the assets in that grid. This is fun because you'll get these moments of smaller shapes but then you get these nice big, sweeping shapes because that's the element of absolute random in this piece, that's the only thing in the system that is really staggering in the sense that if I close this and run it again, I'm going to get something different. If you have line 36 commented out, you're going to start to see sort of an aesthetic where as by implementing that randomization of size, I'll get something different pretty much every time. So, example 20 just showcasing what happens when we start oscillating some of our SVG files. I'm going to close this one up. In the next video we're going to be working with example 21 and example 22. See you in next video. 38. Unit 8, Video 8: This is examples 21 and 22. I hope you're going to enjoy these next two because I really love now the addition of experimenting with with 3D objects. So, of course, example 21 and 22 are going to be using our friend HBox. So, before we've been experimenting with a lot of different things like HRect, and HShape and SVG and HPath. So, I thought I would take the time to show using 3D drawables. So, let's go ahead and dissect, build 21 here. So, up at the top, I've said that the box size is 150 and you'll see down below when we call this variable, this box size is going to be used for the width, for the height and the depth. So, box size is 150. Of course, I have to make adjustments to line five and six to use P3D and use 3D true. We're going to draw 100 items. We are going to use HBox as the drawable. We have a layout, it's a grid layout, it's going to start at negative 125 on the x, negative 125 on the Y, the spacing is going to be 100 pixels between each box, and the columns is 10. And so, it's doing the 10 by 10 grid. If you go ahead and look at the onCreate, here is we're creating our HBox and you'll notice that I just did a little shortcut, I said the depth is box size, the width is box size, and the height is box size. I put it this way because if you didn't want to use the variable box size up above, you could put three separate numbers here to actually change the size of the rectangle, if you didn't want to use a perfect cube. There's going to be no stroke on these boxes. Check it out, I set the initial Z depth of the boxes at negative 500. So, I'm building this big grid but then I'm dropping it way back in space, negative 500 pixels. Now, I'm going to skip over the oscillators, I'm going to get down to the bottom and notice that I'm creating some point lights. So, I'm setting up some lights in the scene and you can see I've got three colors here; I've got an orange, a teal and a yellow. Again as a refresher, a point light, the first three arguments wants to know red, green, blue, and then the last three positions are X-axis, Y-axis, and Z-axis. So, this is where I'm putting that light in space. Now, if I go up to the oscillators and actually comment these out and if I run this sketch, you should see that I am building a grid of boxes. Not only is it a grid of boxes, but also you get a representation of the point lights. You can see that here's our orange point light at negative 300, here's our blue point light a teal, at negative 300, and then there's a yellow sitting on top at negative, well actually it's beneath, it's not on top, at negative 400, that is yellow. Now, in this case, look at the oscillators here, for the oscillation all I'm doing is oscillating rotation x, rotation y, and rotation z. That's the only things that I'm rotating here. So, if you think of this box, it should start to do this movement because I'm oscillating the box on three different axes. Go ahead and test this sketch and it's just beautiful. So, I'm building this grid of boxes and I'm using X, Y, and Z rotation oscillation to create this really beautiful pattern with these 3D cubes. Again you can go onto lines 29, 30, and 31 and actually change the depth, the width, the height, to any number that you want, and you'll get some pretty surprising results. Let me just try a test here, if I said that the depth of the boxes, box size times three, let's see what that does. Who knows? Okay. Hopefully, you're able to see the depth of the box rate at that point, yeah. So, you can start to adjust these numbers and again you're going to see something different here in this animation. Great. So, that is example 21, let's move on to example 22 and this one was just I had this hunch that it was going to behave a certain way but I wasn't entirely sure. I was thinking of the original movie Tron and the character in Tron had that I think it was called bit or byte or RAM. I can't remember, it's been so long since I saw the original Tron, but it had this shape that only said yes or no. I thought, wow I wonder if I could take this same system and actually get that effect? Actually you can. So, if you advance on to build 22, here's really the only adjustment which is, I said that the layout should start at width divided by two, height divided by two, but the spacing was zero and zero. So, if you look at HDrawablePool, I'm actually making 50 boxes all in the same location, which is the center of the screen. So, I'm attaching 50 boxes all at width divided by two, height divided by two and again it looks like the box size here is 500. I have a rotation X, a rotation Y, a rotation Z and then I added a fourth oscillator for scale. So, I'm going to be with all 50 of these boxes, not only am I going to be rotating them all on top of each other, I'm also going to be shrinking them and expanding them. Again if you test this sketch, this was like a hunch that this was going to be cool looking but I had no idea until I actually tried it. So again, another mutation where I'm just taking a bunch of boxes and stacking them all on top of each other on width divided by two, height divided by two, and again, you see I get these really beautiful patterns within this system. This video closes up examples 21 and 22. We're going to move on to the last one in this section which is example 23, which is using a shape that I made in illustrator and just a little trick behind that. So, see you in the next video. 39. Unit 8, Video 9: We made it. We made it to the last file on HOscillator, but by no means I will continue to steadily date each oscillator because, again, it could just continually surprises me. This is example 23. Example 23 just made me think about what I had done in 3D for each box was are some things that I could do, that I could try. So, this was going to use an SVG, and if you actually go into the Data folder and look at the SVG, that's it. It's a ring. So, I made this artwork in Illustrator, I made this ring, but what I was really interested in is knocking out the center. So, it literally is like a ring and the center part is actually transparent, it's knocked out. I just thought, I wonder, based on that last file, what if I put a bunch of rings on top of each other and what if I started to oscillate those rings, would I be able to see through this center space and be able to see some of the other rings beneath them? The answer is that it's amazing. So, let's look at Build 23. The first thing that I want to point out is that I did that trick like we did earlier where we took each rectangle and we had a start size and then we had a series of steps that stepped down, I did the same thing here with the ring. So, you'll notice up here on the top, I've got two variables, I've got a flute of a ring scale 600 and an integer of ring steps five. Okay, of course, I've got P3D as a renderer and use 3D in my hype setup. I'm going to attach 153 rings, and again, here I'm using HShape and I'm going and getting that ring.svg, and just like the last file, the layout is width divided by two, height divided by two, no spacing. So, it stacks all 150 rings on top of each other. But like I did with that previous file, check it out with the size. I said the size is ringScale. So, we know that the first ring that gets created is going to be 600 by 600 and again it's here on line 42 that I do ring scale equals ring scale minus ring steps and so ring scale starts to decrease in size. Now, I'm going to go ahead and comment out the oscillators and let's just look at what is happening here. I've said that HShape drawable here, d. I'm going to enable the style, there's going to be no stroke, and I'm randomly grabbing a fill out of our HColorPool, and again, I'm doing that i times 250, which is a random seed. So, it's going to create this interesting banding. The size is the ringScale, the anchor is the center. So, that's kind of important, and the z axis for this one is just zero. So, I'm going to go ahead and test the sketch here and I should see a bunch of rings declining size as they go down. But again, what's interesting is that these aren't a bunch of circles, they are a bunch of rings with the middle knocked out. So, if I start to oscillate these, what kind of results am I going to get? So, let's go ahead and look at some of these oscillators. Of course I'm going to uncomment out the bottom one first because I'm doing an oscillation between 50 percent and 100 percent the speed is 0.3, the frequency is five. Let's go ahead and see what it does, and you can see that it's just a nice slow oscillation of the scale. Now, I just have to do all three of these because why not hit you with a ton of bricks. Again, rotation x, rotation y, rotation z, and the range is negative 360 to positive 360 for these. If I go ahead and test this, again, what's fascinating about this is by using SVG and making a ring by having the middle knocked out, I can see through that knockout of the ring and it starts to create these interesting patterns. So, you can imagine that I'm really eager to take this particular example right here and provide it with a lot of different SVGs to see what type of different visual patterns and results I get because that's really fun. Okay, this closes out the section of HOscillator. We're now going to move onto Combos. Combos is really going to walk you through a process. It's going to walk you through with an idea that I had, the execution of that idea and watching how I slowly mutated it. You'll also see that- it's 20 examples, so it's going to be just as robust as this section. So, I'll see you in the next section of Combos. 40. Intro to Combining Behaviors: Now, before we get into actual output I wanted to take a section where I talk about Combining Behaviors. Now, this is where you start to create super animations. As long as an animation behavior does not fight for the same property, two behaviors can work together to make an entirely new behavior. So, for example, I can use H tween to move something around on screen, I can use H oscillator to actually animate the scale of that object up and down. So, as long as H tween is dealing with location and H oscillator is dealing with scale, those two behaviors can actually snap together to create a new super behavior. So I thought I would take the section to work out some of my favorite combos of mixing behaviors together again as long as they don't try to fight for the same property. We can use many of these behaviors that we've learned in class to create these new crazy super animations. 41. Unit 9, Video 1: Okay, so we are in this last section before we actually start to get into output. This one is hardcore. There's going to be a lot of videos in here and we're going to work through all of these 20 steps but there are some times when I go and give talks at design conferences I really try to showcase process. This is the ultimate, this is really starting with an idea and letting that idea unfold itself. So rather than these being separate files, example 1 all the way up to example 20, this is a continuation of a single idea. So again, make yourself a cup of coffee, put on some cosy slippers because we're really going to digest this. Now let's go ahead and start with example 1 and this is all going to start with a cube. The things that we're going to cover inside of this particular example, eventually I'm going to fold into Hype, specifically into HBox. But right now I wanted to explore some things that I had never really explored yet and that was using begin shape and vertex. What I want to do is just really dissect the first two examples right now. Let's look on line one. I'm going to be making a box and that box is going to be a width of 100, a height of 100, and a depth of 100. And I then have three functions here in my sketch. I have our setup, I have our draw, and I have a function called build cube. Now let's just look at the setup first. The first is very minimal. I'm just saying that the size is 640 by 640. It's going to go ahead and use the P3D renderer and next I'm going to fire hypes constructor. The background is going to be 20-20-20 and of course we want to wake up all the 3D possibilities of hype so we need to say use 3D true. Now let's go ahead and look at the draw. At the draw, I'm going to say, "Okay, let's go ahead and do H.drawStage and I want to build this cube." Now you'll notice on lines 12 and 15 I'm using push matrix and pop matrix, which again with push matrix and pop matrix whatever is between those two matrices calls. It's going to do some stuff and then snap back to its original settings. So, let's just look at what we're doing and it's just real simple. The first is I want to translate to the center of the stage so you'll notice I say translate width divided by two, height divided by two and the Z I'm going to keep at zero. So that now has moved the matrix to the center of the screen. You'll then see I'm going to fire the build cube function and when I fire build cube, notice it's not passed any arguments. Here is the build cube function and if I scroll down here is the entire function here. You'll notice I'm doing a begin shape on line 19 at the very end of doing an end shape. Now what I'm doing is building a cube manually by putting in all of the different vertexes to define each of the faces. So you might notice here that if you look at- I've got the front face so the front of the cube, I've got the back of the cube, I've got the bottom of the cube, I have the top of the cube, I have the right hand side of the cube, and the left hand side of the cube. So each of these four vertex calls is for each of the faces that make up this particular cube that we're creating. Now you might be saying yourself, "Well, Josh, why aren't you just using HBox? Why are you doing it this way?" Well, I'm doing it this way because HBox doesn't support yet the ability to map textures to this cube. And that's really the idea that sparked all of this was I wanted to be able to experiment with the idea of mapping textures to a box and I hadn't even really defined what the heck a texture was. And you'll see as we progress here that's going to take on a fascinating answer. So let's look at each vertex here. You'll notice that I'm calling box size for the first three attributes because if you actually look up a processing reference for vertex, if you were actually passing at five arguments you're doing the x coordinate, the y coordinate, the z coordinate and then the last two numbers here are supports for the- the first is U and the second is V and those represent a float. The horizontal coordinate for texture mapping is this fourth argument and the fifth argument is the float vertical coordinate for texture mapping. So these two right here are dealing with horizontal and vertical coordinates for texture mapping and as it currently exists HBox does not support texture mapping. It will in the future but right now again I'm thinking of an idea and I want to explore it. So, what happens when we run this particular sketch? There really isn't any animation happening at all so this should be interesting. I go ahead and run the sketch here and it's 640 by 640 and it draws a cube but you would never know it's a cube because that cube is perfectly in the center and again the the width, the height, and the depth are all 100 by 100 so you can actually see the three-dimensionality in this particular cube. So, I was like okay well I need to address this. I'm going to take example 1, and great, I'm going to save it as example 2. Now let's go to example 2 and what I wanted to do an example 2 was use HOscillator. This whole section is about combos. We're going to start comboing all these different things to get to some end result. So, I thought well okay I'll add an oscillator to this cube but I decided that I was going to do it in a way that would be unique which is the oscillator is not inside of a four loop, it's not inside of a drawable pool. So, how do I create instances of oscillator and then later attach them to this cube that I've created on screen? So, let's look at example two. I've now up at the top added an oscillator for RX, RY, and RZ which would be rotation X, rotation Y, and rotation Z. And so my goal is to take that cube and have it spin around like this using HOscillator. Now, let's go ahead and look at lines 10 through 26. So, inside of my setup I said, hey I want to set up these oscillators so I say, "RX is a new HOscillator." It's going to go from negative 360 to positive 360, 0.1 for the speed, five for the frequency. Now I just copied that two more times so I could set up my rotation Y oscillator, and my rotation Z oscillator. Now one thing you might notice is wow I haven't specified property and I haven't specified target so this is a super generic oscillator that's just sitting in setup. And when h.drawstage fires, each oscillator is just going to be spitting out some oscillation numbers completely absent of who they're going to be applied to or the property that they're going to be set to. So these are just totally generic oscillators. They have no idea who and they have no idea what property they're going to get set at. So, let's now look at our build cube. Our build cube hasn't changed so I just want to let you know that all that code down at the bottom, that box, nothing has been altered in this code. So the only change is here inside of the draw. What I want to do is I want to get the next raw values out of that RX, that RY, and RZ. So inside of draw I say, hey RX HOscillator give me your next raw value because I understand that you're oscillating some numbers completely absent of who or to what property but that's okay just give me those raw numbers. So I can say rx.nextdraw, ry.nextdraw, and rz.nextdraw. Now let's go ahead and look at our push matrix and pop matrix here. The translate is still absolutely the same. Well, I'm translating to the center of the canvas width divided by two, height divided by two. You can see here on line 43 I'm still using built cube but now I'm using processing's rotate X, rotate Y, and rotate Z and because rotation and processing wants to know radians, I call the radians function and inside of the radians function I'm saying hey go get the current value of RX, go get the current value of RY, and go get the current value of RZ. Now something exciting happens. I'm going to go ahead and test my sketch and you should see that that cube is in the center of the screen. I haven't specified any stroke. I haven't specified any fill. So it just does black stroke by default and white fill by default. But now I have three oscillators that are oscillating values without being attached to a target or a property. So, I'm just getting the raw numbers from these oscillations and just applying them to rotate X, rotate Y, and rotate Z. Great. Now I'm getting somewhere interesting. Now, the reason why I've done this exercise is to move on to example 3 and get a texture mapped to this cube. So, I'm going to go ahead and close down this video. In the next video, we're going to pick up by looking at example 3. 42. Unit 9, Video 2: Example three. This video is just going to showcase this one example. It's the start of something beautiful. Let's go ahead and look at example three, and you'll notice that inside of the data folder, there are some JPEGs. So, I had worked out some artwork inside of Illustrator. This is just 200 pixels by 200 pixels. I outputed these from Illustrator to JPEGs. So, if you look inside of the Data folder, you'll notice that there are five JPEGs that just have some 45 degree lines on them and texture five has a checkerboard, okay? So, I want to look at mapping a texture to this cube. So, let's go ahead and look at what gets added here in example three. Let's look at line four. Now, I'm reading the documentation of processing, and the documentation says that you can use a PImage as a texture. So, I thought, "Okay, let me check this out." So, up at the top we type PImage, and then I just did "tex" for texture. On line 11 I said, "Okay, T-E-X, tex equals load image and then go get "tex1.jpg." The other thing that you'll notice about using textures on 3D objects is you need to set a texture mode. In this case, I used texture mode normal. So, on line 12, I add texture mode normal. Now, our oscillators are still the same. Our draw is still the same. So, nothing has changed inside of our draw here. We're still applying oscillation to rotate X, rotate Y, and rotate Z. The last addition here is setting a few things on the cube. So, the first thing is that, I wanted to set a stroke weight in a stroke. So, you'll notice here on the cube, on each of the vertices that get created, I say that the stroke weight is four and that the color is black, zero, zero, zero, zero, zero, zero. Then, inside of the begin shape and end shape, I add texture and then I point to tex that we set up above. Now, it's at this point that if you actually save and run this sketch, you'll notice that it is using tex1.jpg as a texture on each of the surfaces of the vertex and I just went nuts. I just thought, "Wow, this has opened up a whole idea of possibilities and I want to try to mutate this file and see, what can I do with this system? " So, for example, if I went up here and changed this to tex5, that would be the checkerboard pattern. Again, if I run this sketch, you'll see that it is attaching the checkerboard JPEG, and it's mapping it perfectly to the surface. It's amazing. Now, here inside of buildCube, right? I could try some things. I could comment this out and I could just say, "noStroke", and if I said "noStroke", then you're not going to get that black line, you're just getting the texture but up against the texture which is fine. If I bring back this stroke and lets say I wanted that dark orange, I could say FF3300, I could save and run this sketch. Again, I would just be creating a stroke weight around this particular box, right? So, I'm trying these tests to see what different kinds of things I can come up with. Now, I'm just going to put this back to black. Back to black. ACDC anyone? Back to black. All right. So, here it is with that nice thick stroke of four black. I just thought added a nice kind of shading to that. Okay. So, of course, I want to think, "Well, all right. What do I do next with this? " So, what I want to do next is close this video and then the next one, we're going to cover examples four and five because I just want to see how this file is going to keep evolving. So, let's go ahead and close this and we'll move onto example four and example five. 43. Unit 9, Video 3: Okay. So, in this video, you'll notice that we are in example four and example five. You might also notice that the folder has the letters MOV at the end of it. Because curiosity had to see if this was possible. I started thinking about well, what is a texture? Is a texture a JPEG? Can a texture be a quick-time movie? Can a texture be something else that I do generally inside of processing like swarm, like can I use a swarm behavior as a texture? I started having questions about, what was possible to use as a texture? So, you'll notice that example four and example five deal with, how do I set a movie as a texture? Now, let's look at example four and I'm going to go inside of the build folder and I'm going to go inside of the data folder, and I have an MP4 in there. If I were to run this MP4, you would see that it's another little experiment that I had posted on Tumblr. It's a 30 second video of like a little confetti burst. Again, this was something that was scripted using processing and Hype and I had rendered it out as a movie. I wondered, could I use this as a texture? So, could I take that cube and actually play a movie across the surface of my cube. Of course, after a few digging, I've figured out that yes the answer was in fact yes that you could actually map a movie as a texture. So, let's look at example four and see what has changed. So, you might notice that on line three, I'm importing processing.video, and the reason I'm importing processing.video is because I want to be able to load in a movie, I want to be able to loop a movie, I want to be able to play a movie. In order to do that, I have to import processing.video. Now, on line four, you'll see that instead of using a P image, I'm using a movie. Okay? So, I'm not going to be mapping a JPEG. I'm going to be mapping a movie. So, of course tex needs to update line four Movie tex. Now, let's go ahead and look at lines 12 through 14 and you'll see that tex is now not load image. Load image, work yourself out here Josh, load images, yes correct. So, in example four, I'm saying tex is actually a new Movie. Then specifying what MP4 you can use movie, obviously I use MP4 because they're compressed and tiny which is good. So, the movie that I'm loading is that burst.mp4 inside of my data folder. Now, you'll see on line 13 that my movie is only 30 seconds long, so I just want it to loop continuously. So, you'll see on line 13, I'm saying tex.loop. Line 14 textureMode is actually still Normal. Now, you start to scroll down here and believe it or not this code hasn't changed. You can still say on line 57 that the texture is tex, but you have to add one last thing and that's tail processing to actually begin playing this movie. So, if you scroll all the way down to the very bottom, you will notice that there is a new function here that says void movieEvent Movie m, m.read. So, right now that is going to start playing our movie. Now, let's go ahead and tex this sketch here and you should notice that our cube is actually playing that MP4 on the surface of each of the vertex's here. So, really fascinated by this idea of recursion right. Using code to generate a movie and then that movie I end up mapping as a texture back inside of this code. So, again this opens up so many different possibilities of being able to create some three dimensional objects inside of processing and then start mapping different things as textures. So, great and example three, we know that we can load any kind of image into this box. With example four, we can see that we can actually play a Movie across to this box. Now, let's go ahead and close this and just look at example five because I just made a little adjustment to example five. In example five, if you look down at the build cube here, you might notice that I got rid of the back face, bottom, top, right, and left face. That's because I just wanted to show that it doesn't have to be a three dimensional object, it can be just a plane in which it plays. So, you'll notice that I just kept the vertex for the front face and then I just put in some random numbers just to make a weird shape right. So, instead of doing box size, you can see here I did times 1.5 times three times five or times two or divide by two. I just put in some bogus numbers. So, that I could test, well, what if the movie is not a square? What if it is an odd shape? Sure enough with texture mode normal, you can see that it still does a really great job of mapping that movie as a texture to these to this vertex even though the vertex's that are getting created are not a perfect square or a perfect rectangle. It's actually an odd shape so. Okay. So, I'm going to close this video now which is again example's four and five. We're going to move on to example six because again I want to keep exploring like well what do I do next? What is the next thing that I want to try with this code? So, see you in the next video. 44. Unit 9, Video 4: We are in example six, and I have to back up a little bit. I just thought, okay, in the example three, I loaded in a single image, and I loaded that image in the set up. So, I just said tex and I loaded in that image. Then, in the draw, I just said, "Hey, use this one image on all the surfaces of the cube." So then, I got to thinking, "Well, what if I randomize that." The Cube has six surfaces. So, it's got four sides and it's got a top and a bottom. So, there are six possible surfaces that I could map things. In Example three, I was just taking one thing and mapping it to all six surfaces. So, then I thought, "Well, what would happen if I randomize the images that get mapped to each of the surfaces?" Now, the fun thing about processing is that you've got a set up and you've got a draw. That draw is going to run over and over and over and over and over and over. I couldn't, in the draw, just say, "Hey, go get a texture," because every single time that thing would run, it would randomly pick a new texture for that surface. That's not what I wanted to do. What I wanted to do was just pick six random images, remember them and then map them to the six different sides, and when that thing moves, it would have the prepicked texture. So, this is the odd bit about processing is that if you want to do this randomization, what you'll have to do is inside of the setup, you have to prepick stuff. Store what you prepick, so that when the draw runs it's cycling through those things that got prepicked. You're with me? All right. So, I've got five textures that I can grab. So, the first thing that I want to do is look at loading in all of those textures. Now first, let's look at line number five. Line number five is going to be a list of all of the available textures to choose from. It ends up that there are five: One, two, three, four, five. So, on line five I say, "Array a list. This is going to be text list which is our texture list." Now, I'm now going to skip down to lines 13 through 24. Now, let's look at this. On lines 13 through 17, I load in our five images. So I say, "PImage t1, t2, t3, t4, t5. Hey, man, go get text1. Go get text2. Go get text3. Go get text4. Go get text5. Load those suckers in." Now that I've loaded in to processing those five images, I want to push them to the array. So, let's look at lines 19 through 24. On line 19 I say, texList up on line five. I just want to let you know that you're a new array list, and I am now going to push you some stuff. So I say, "texLixt. Add t1." So, all of a sudden, if I look at the first entry into text list, it's going to equal t1. T1 is tex1.jpeg. I then add t2 and I add t3, add t4, so on and so forth. So, if I'm writing that out, if I went like this, texList would look something like this where it would be tex1.jpg. It would be tex2.jpg. So, it would be the list of the five images. So, texList is now all five of our available images that we've just loaded in. It's a list of them. Great. So, what do I want to do now? What I want to do now is prepick some random images. Now, before I can do that, let's look at line six. Line six is a new array of PImages. It's going to be the images that I prepicked ahead of time. So, let's look at our cube. Our cube is six surfaces, four on the sides, a top and a bottom. So, what I want to do is randomly pick six images. I'm sorry. Yes, randomly pick six images and map them to each six of our surfaces. So, what I need to do now is to prepick randomly from our five available JPEGs. So, let's look at this for loop. This for loop needs to run a set number of times. What it needs to run is pickedTex.length. How many items are we picking for? What is the length. The length is if we look at pickedTex that's right here on line six, we've said here that it's six items, so if I were to actually trace this right here, it will return six. So, this for loop is going to run six times. That's great because there are six surfaces. All right. So now, it's this line right here which allows us to randomly get an image and add it to this new array. So, it says, "Okay, this is running sixth time. I want to go ahead and prepick the first image that you're going to use." So, pickedTex it's going to pick subitem zero. It says, "Okay, let me go to my text list and let me get a number." What number do you want? Now, the best way to look at it is that this would be picking number one. This would be picking number two. This would be picking number three. This would be number four. This would be number five. So, imagine for a moment that we have a hat. We take five pieces of paper. We write one, two, three, four, five on them, and we take the pieces of paper and we put them in the hat. Then, I hand out the hat to you and I say, "Listen, there are six surfaces to this cube. Please, pick a number." You reach into the hat and you grab a piece of paper, and you pull it out and you go T3. T3 is tex3.jpg. So for the very first surface which would actually be the front face, I'm going to picked tex3. Now, you put the piece of paper back into the hat. I shake up the hat and I say, "Okay, keep going." You're basically picking a number out of the hat six times. So, that's what this block of code does right here. It says, I want to randomly pick one of these five images for all six of the surfaces. So, let's try something here. This video is going to be long. I'm just saying. Josh, why you hurt us? Check this out. I'm going to print one and let's go ahead and print pickedTex. So I'm going to print the pickedTex array. Now, I'm going to go ahead and run this. Of course, you're going to see the animation runs here. I'm going to move to the side. I just want to look at this right here. Look at this. It picked a one PImage here. Looks like the object was assigned 2f2a5869. It picked 5126db0. That's a different one. So it picked a different one for that service. It picked 512 again. It looks like it picked 2f2. This one picked 7cb. I wish it would spit out the numbers but it doesn't. The point is that we randomly selected the pieces of paper out of the hat. So, the nice thing is that this four loop prepicks which of the five images we are going to map to each of the six different surfaces. Now, textureMode (normal) that hasn't changed. Our HOscillator that hasn't changed. Our pushMatrix pop matrix that hasn't changed. But now, look at how buildCube has changed. Now, if you look at example three, for example, we had one beginShape and one endShape. Between that beginShape and that endShape, we called all these different vertices for all the different faces. But when you do that and then you call texture, it's going to use texture that one image for all six surfaces. So, it's only mapping one image to all six surfaces. I didn't want that to happen. What I wanted to have happen here was map a different texture to each surface. So, what I have to do is actually make a beginShape and endShape for each of the individual faces of our cube. If I make a beginShape and endShape for each individual face of our cube, I'm allowed to call a independent texture for that face. Holy crap, man. It's like drawing an example six and already my brain hurts. Trust me, it hurts for me too. So, we're in this together. But again, notice that update is that now I'm doing a beginShape, endShape, an independent texture for each of the faces. So, if pickedTex is a array of each of the six different images that we picked out of the hat, I could say, "Hey, I want to go to this array. Can you tell me which image you picked in selection zero?" It gives me an image. I could say, "Hey, for the backface, can you go to the array and tell me what image it picked for one, what did it pick for two, what it picked for three, what did it picked for four, and what did it picked for five." Because remember, programming most of the time starts at zero. So, it's six different textures, zero, one, two, three, four, five, six. I'm sorry. Zero, one, two, three, four, five, which would be six items in the array. Now, please don't hurt me. Let's go ahead and run this sketch. Again, now when I look at this I go, "Wow, okay, that's cool because now I'm building this cube, but now each surface is randomly getting its own image out of the data folder." So, I'm cool, I can see my checkerboard. It looks like it picked that really thick 45 degree line actually bunch of times. Now, if I close this and actually rerun this sketch again, I would get something different. Some thick lines, some medium lines, some thin lines and on that one I didn't get any checkerboard at all. So again, because I randomly prepicking the images inside of setup, I can run this over and over and over and over again and I'm going to get a different unique mapping every time. I just thought, "Wow, that's looking really fun." Now, I know this file hurt, but it's now starting to get exciting because what happens now when we start to add a bunch of these cubes, and that was my next idea, which is I don't want one cube, I want to draw a bunch of them. So, let's go ahead and close this video file and we're going to move on to the next one which is going to cover examples seven and eight where I explore this idea of drawing multiple cubes. 45. Unit 9, Video 5: Hi. We are in example seven and I am pleased that you haven't taken a Baseball back to your screen because the last file truly has given some of you a headache. So, thank you for joining me to the next video. So, I want to draw a bunch of cubes, all right? Let's look at the problem that we need to fix, which is, I've got this canvas and in the previous files, the cube was getting drawn in the exact center. I wanted to draw a bunch of cubes, but how was I going to randomize their positions? Not only did I want to randomize their positions, but I wanted to randomize them off of that center point. So, it would be great if I could say, "Hey, I want to make 10 boxes and I want to randomize the position of those 10 boxes, but I want to randomize them off of that center point." So, there is a problem, is I want to draw 10 boxes, but I need to randomly pick a spot for them. Okay. So, let's look at lines eight and nine. Now, anytime you're doing some randomization or some prepicked scenarios, you got to save them ahead of time. You've got to set them up, you got to randomly pick the stuff and setup because draw is going to access those prepicked attributes and just keep using them over and over again. You can't randomize in the draw. If you randomize in the draw, all of a sudden your cubes are going to be moving everywhere on screen and I don't want them to be moving it everywhere on screen. Oh, you pick sqween! What time is it? I'm sure it's like 04:00 in the morning. Good, I'm good thank you. You can't randomly pick down in the draw because all of a sudden all these things would be moving all over the place. I need to randomly pick their positions in the setup once and then have them stay there. So, this's always been the big conundrum for me with processing, is that draw is just run in fresh every single time and so you can't randomly pick stuff in the draw because stuffs can move around. So, I got to prepick my randomization. So, look at line eight. I know that I want to paint 10 cubes now, not just one, I want to paint 10. In those ten, I want to randomly pick a location. So, you'll notice that line nine are beautiful friend p-vector, right? A p-vector is a beautiful coordinate system and because it's 3D, I'm going to pick an x, y and z for my p-vector. Now, line nine nine I say "Okay, I need to randomly pick a location initially and then save it." How many entries are in this array? Num cubes, 10. So, you're going to draw ten cubes, I need you to randomly pick ten locations. So, you'll notice picked location equals new p-vector and then the number of times I need to pick something, which in this case is 10. Awesome. So, lines 29-32, that's where I prepick my textures. It's now lines 34-41 were I'm randomizing my positions. Now, let's take a look at this. This for-loop is going to run how many times? Ten, because we want to paint 10 cubes. Okay. On line 36, I set up a temporary p-vector. So, I say, PT for Point is a new p-vector and I say, "Hey PT-X should be equal to width divided by two." So, go to the center of the screen, plus pick a random number, negative 200 to positive 200. So, it goes to the middle of the screen and it's randomly going to go negative 200 to positive 200 off of it randomly somewhere within that range, and that's just for the width. P t.y is going to do the same exact thing except for it goes height divided by two plus random negative 200 to positive 200, so now it's picking a range off of height divided by two. Now, I also want to do that on the z. So, I say that the the points z number should be negative 100 to positive 100, right? So, I'm picking a range between here. Then I say, "Hey, array, go ahead and take this p-vector that I just randomly set up." Okay, so now I have an array of 10 p-vectors and if I were to look at each individual p vector, it would have a unique x, y and z, but that x, y and z is based off this randomization of width divided by two, height divided by two. Great. So, now I have prepicked a bunch of 10 random locations off of the center of the screen. Now, let's go ahead and look at our draw function because our draw function updated rather than having just a push matrix, pop matrix build cube, just one. Look, it's nested inside of a for-loop. So, now, this for-loop is going to run how many times? Ten times. So, now I know that I'm firing build cube. Ten times, okay? Now, I'm going to say, great let's translate to that random X location, that random Y location, and that random Z location for one of the cubes. So, it moves to wherever that random location is and you'll also notice that it puts in the rotate X, the rotate Y, the rotate Z oscillation and it builds the cube. Now, the for loop then runs for a second time and attaches the second cube in a random location so on and so forth. The buildcube function has not changed, its exactly the same as before. So, if we now run this sketch it should build 10 cubes for us. You'll notice that essentially it's 10 copies of the same cube. Because you'll notice that they all have the same surfaces. I'm not randomizing each of the individual cubes. Obviously, I could but the reason why I didn't on this one is because I do like things to be familiar. If I'm doing some randomization or if I have some random stuff happening in my file, I do want some things that are consistent. So, all of a sudden you can look at this and go, "Oh, it's basically one cube and the patterns that got mapped to it copied 10 times." So, there's a familiarity to this because it's recycling the same patterns across all 10 of these surfaces. Now, of course, if I closed this document and run it again, we would get another unique 10 positions. So, I was like, All right, this is fun. The problem though, I would say that I want to modify on this is undoing that translate on the Z-axis from negative 100 to a positive 100, but still the blocks are big. I would maybe like to do a variance on the boxes. So, that's going to leave us to move on to the next example, which is example eight. You'll notice in example eight I've said, oh, man I've got to randomly pick a scale now. So, let me set up the instructions for randomly picking a scale. So, look lines three through four are randomly going to pick a texture, line six is randomly picking a location. I now need to start to add some information to randomly pick a scale size. So, I said all right, let me pick a minimum scale and a maximum scale. So, you can see I created two floats here. The minimum scale being a box, 40 by 40 and the max scale being a box 100 by 100. So, then I said, "Okay, well let me create an array of randomly chosen scales." So, I said, "Okay it's going to be a float, is going to be a box size and it too, is going to be like location where I'm randomly picking 10 sizes." So, box size equals new float and I pass it the number associated with numb cubes which, of course, is 10. So, inside of this full loop now, is the edit. Which is oh, here is where I'm randomly picking the location, I probably want to randomly pick a scale now. So, I say, "Okay box size, I'm ready to start picking a scale for you." So, you'll notice I have random in here and random is arrange for min scale to max scale. So, now I know that each box size is going to be some size between 40, but no lower than 40, and a 100 but no larger than 100. So, I'm now randomly picking 10 random sizes to use on my box. Oscillators remain unchanged. My full loop adjusts ever so slightly. Because, now what I need to do is when I actually build cube, I need to be able to access what random size actually got picked. So, let's check this out. You can see that online 82, I say, "Hey, build cube. I'm going to give you the variable I." So, I equals zero, then one, then two, then three, then four, then five, then six, then seven, then eight, and then nine. So, I know that I'm passing zero through nine to the buildcube function. Now, if you come down to line 87, you'll see that I'm accepting I into buildCube. So, buildCube runs and buildCube says, "Hey, I understand that you're giving me a number, tell me what that number is." That number is just assigned to integer I, just recycled the same exact variable name. Now, the reason why I do that is because I say well, when you build this cube you need to go to array list boxSize and access the first size zero. Let's pretend that it picked 62. So, now the box is saying, "Okay, cool word 62 for each of the faces." Then this four loop runs a second time, it then passes buildCube and sub item one. One gets passed to buildCube, it goes up to the boxSize array and says, "Hey, what did it pick now for the boxSize." So, now I'm randomizing the size of the boxes. So, if I go ahead and save and test this sketch, you will now notice that I'm now able to throw in a lot of unique boxSizes. So, I'm still randomizing the Z, but I'm now randomizing the sizes within that Z. So, now I can get some smaller boxes and I can get some bigger boxes and I was pretty happy with that. We're getting somewhere. Again, we're just slowly mutating this idea and let's see where we decide to evolve this next. So, let's go ahead and end this video. In the next section we're going to be covering examples nine through 11. 46. Unit 9, Video 6: So in this video we are going to cover examples 9, 10, and 11. Again, this was part of my, I wonder face. So I got to thinking on example nine, I thought, "Okay, I've mapped JPEGs, I've mapped movie files." You'll notice that in the zip folder, example 9, 10, and 11, have a PNG attached to it. I just thought, "I wonder if I can use a PNG because a PNG supports transparency and I wonder if that affects mapping to this set of cubes." So if you go into example, 9.PNG and you look at the data folder, there are four PNGs that I outputted here. Wherever it was white I actually made transparent. So when I outputted this from Illustrator, the only thing that actually has any coloring is the black, the white is actually transparent. So I thought, "Okay, in example nine, what happens when I just make this modification right here on lines 18 through 21 and actually switched the asset from a JPEG to a PNG?" I thought, "What would happen if I got a cube and I have transparency, would I be able to see through the transparency to the shapes on the other faces of the cube?" So with that said, let's go ahead and test this sketch here and let's see what happens. So we're now building, I think I made a little adjustment here on line 6. I said that the number of cubes was actually 20 instead of 10. If you look, yes, you can actually see through the transparency of the PNG and see some of the textures that are through the transparency. Now, it's not 100 percent perfect, if you actually look you'll see some glitches where some of the PNGs actually disappear. But all in all, I was like, "Oh, wow. That works okay." So from there I thought, "Well, all right, let's just look at trying something." I'm going to scroll down to the bottom here and here is that buildCube function. I thought, "Well, okay, I'm building these six different surfaces to make this cube." Then I thought, "What would happen if as I was building the cube, I actually, for each of the six sides, I created two faces. So there'd be two faces for the front, two faces for the back, two faces for the top, two faces for the bottom, and so on. Now, let's go ahead and look at example 10 because I thought maybe I can use this PNG transparency to my advantage, which is if you look at example 10, what I've done is I've introduced an HColorPool. Line two HColorPool colors, just like everything else, just like I picked a location, and just like a box size, I am going to pre-pick six colors for the surface of the cube. On line 21 you can see here I have the HColorPool and some random colors in it. Now, here is the four loop where I am randomly picking the textures of the PNGs. In addition to picking a PNG for a face, I thought, "If I'm using two faces for a surface, what I'll do is, is I'll pick a color for one of the surfaces, and then I'll pick a PNG that will sit on top of that color." So line 36, I'm picking a texture and on line 39, I'm pre-picking a random color. Now, because the code is getting long, if you actually look down here into the buildCube, I have shortened everything to one line just so that it just wasn't a tremendous amount of code. Now, here is where I am selecting two surfaces for each face. So on like 98 I say, let's pretend we're just doing the front now, which we are. On line 98 I say, "Hey, let's select that color that we pre-picked and let's pretend that it's orange." So it picks orange and it attaches it to that begin shape, that end shape, and those vertexes. That's all on line 99. Then on line 100 I say, "Okay, cool. Kill the fill", and on line 101 I say, "Cool, let's make the next surface the same exact information, but it's now sitting above the one that has the color." So I thought, "This will be great", because it's like conceptually, it's a cube within a cube, but the inside cube is randomly picking colors, the outside cube is skinning the surface with those transparent PNGs and because those transparent PNGs are transparent, you will be able to see through the outer cube to the inner cube that actually has the random color selection because I'm just messing around. Now if you run this sketch, that's exactly what happens is you have a cube within a cube because each face is two begin in shapes. The first one, we're randomly picking a color, the second one is we're putting the PNG on top of it. So, you're actually looking through the transparency to the color on the inside box. Now, here it looks like it just picked a bunch of greys and one orange. If I actually run this sketch again let's see if I can get a better mix. So now, looks like I got some greys, I got a teal blue, and it looks like I also got an orange surface. So I thought this was like the next logical evolution was "Wow, maybe I can use PNGs to use the transparency in my favor to look at another cube on the inside that is getting a solid fill." Now if you're thinking like my crazy brain, you might figure out what we're going to do on build 11. On example 11, I thought, "Yeah, I have got to use HPixelColorist." So you'll notice inside of the data folder there is this color.JPeg and if we look at example 11's code, I have taken out HColorPool and I have added HPixelColorist. Again, on line 14 this remains unchanged on example 11, we're still picking a color. On line 21 we've updated from using HColorPool to HPixelColorist. So let's see what we have to do here which is right here on the four loop as it is pre-picking the location, pre-picking the scale, I'm also saying, "Hey, can you do me a favor and pre-pick the color, but the color that I want you to get is to access the HPixelColorist, get the color, and I'm going to give you this X coordinate and this Y coordinate which is pt.x and pt.y." Now, if you remember pt.x and pt.y is our random location selection. So I'm saying, "Pick a random location whatever the location that is. Also look at the X and Y coordinate on the JPEG, find the pixel at that particular position, and pull that into the cube." So if you come down to the buildCube function the code hasn't changed. It's still the same from example 10, but now when I test this sketch, again, we're still doing that cube within a cube concept, except for it's stealing the color from our color.JPG. So again, what a great way to use PNG to our advantage. Let me just run this one more time and see if we can get some different random scales. That was going to get a little bit smaller around boxes there. But again, it's sampling the color from HPixelColorist. Okay, we're going to end this video. Next, we're going to just spend time on example 12. 47. Unit 9, Video 7: Great. We're now on example 12 and what are we going to do for example 12. So, I got to thinking, I thought, I don't know if I necessarily like the oscillation of each individual cube. I thought I wonder what would happen if I took the oscillation and used it on the entire cluster of cubes. So, instead of each individual cube giving me oscillation rotateX, rotateY, and rotateZ. What if I use that oscillation to move the entire cluster of cubes. So, let's go ahead and look at line six our numCubes is 20 so we're going to randomly generate 20 cubes in this cluster. You might just want to check out that on line's 39 through 41, my randomization is larger. It's now negative 300 off the center and positive 300 off the center for the x axis. Negative 300, positive 300 for the y axis, and also negative 300, positive 300 for the z axis. Okay. Now, our oscillators remain unchanged. They're still the same here. Okay, but what I've done is edited the push and popMatrix. Now, let's see what has changed here. In fact, I'm going to go back to build 11 so that you can look at how we initially had the pushMatrix, popMatrix setup. It was going to translate to the random location. It was then going to do rotate x, rotate y, rotate z for each individual cube, build the cube and then pops the settings back out. Okay. So, 12 takes on a little bit of a different role in the sense that, actually I need to show you one other thing which, is if you look at pt.x, pt.y, and pt.z in build 11, remember this random location had to find the center of the screen first and then randomized off that center of the screen. So, notice that the pt.x was width divided by two plus a random range, height divided by two plus a random range, and again the z was only negative 100, positive 100. In 12 hopefully, you noticed that the width divided by two is gone and the height divided by two is gone. Okay. Now, the reason for that is the picked location. I just wanted to pick a random number based on a min and a max, and again the min and the max here is just negative 300, positive 300. So, okay, let's look at this pushMatrix and popMatrix. Okay. Line 75 says, "Hey, let's move to the center position," so it translates to width divided by two height divided by two. So, move to the center and then it says okay, "Let's do rotateX, rotateY, and rotateZ not in the for loop," it's doing it outside of the for loop and because it's doing it outside of the for loop, it's going to perform that translation of rotateX, rotateY, rotateZ to the whole environment. Okay. So, it translates rotateX, rotateY, rotateZ then it gets to the for loop that runs, in this case, 20 times. The for loop runs 20 times, it attaches the cubes and says, "Yeah, but these cubes need to move randomly on the x, randomly on the y and randomly on the z." Okay. So, we've got a new nested push and poMatrix that is dealing with the individual cube and that individual cube says, "Okay. I can go negative 300, positive 300, negative 300, positive 300, negative 300, positive 300, so on, and so forth. Okay. Then it builds the cube. So, by moving the rotateX, Y, and Z out of the for loop and putting it in a first initial push and popMatrix, then inside running the for loop and doing its another individual push and popMatrix for each individual cube, that now means that we're using the H Oscillations to move all 20 cubes at once. All right. So, everything else down below remains unchanged. You might notice that only build 10 and build 11 are using the transparent PNGs have actually gone back to the JPEGs in this file. So, I'm not using the transparent PNGs, and I'm not doing the box within a box thing. That was only on files 10 and 11. So, I've taken that away here in build 12. In build 12, I'm just building my box and attaching random textures to each of the surfaces. All right. So, let's go ahead and run this particular sketch and what you should see is that I'm using the oscillation now, I'm not rotating each individual cube, I'm rotating the entire mass now. I just thought, "Wow, okay that's pretty amazing." I really enjoyed that. So, I'm going to go ahead and I'm going to keep this video short. In the next video I'm going to move on to examples 13 and 14 because another idea hits me that could advance the way this looks aesthetically. So, the thing that I want you to notice right now is that we are rotating the entire selection of 20 cubes, but notice that all of the cubes are not rotated. So, they're all basically facing the same direction. So, I thought, I need to randomize that. So, let's close this video and let's move on to examples 13 and 14. 48. Unit 9, Video 8: We are in examples 13 and 14 now. So, right now, I'm in example 13 and I again, just thought I need to address this issue of rotation, the fact that all 20 of the cubes shared the same non-rotation. So, as you imagine, if I want to rotate the cubes randomly, at least fixed, and then rotate the entire cluster, I've got a pre-pick random rotations. So, let's go ahead and look up here on line 13. I randomly pre-pick a texture. I randomly pre-pick a location. I randomly pre-pick a size based on a min and a max. If you're going to randomly rotate something, you need to pre-pick a picked random rotation. So, I create a PVector here called pickedRotation, and it too is numCubes, which means that it's going to have 20 pre-picked rotations. All right. So, let's look at lines 49 through 51. What I want to pre-pick is an X, Y, and Z rotation for each cube. So, I'm not just doing one rotation. I'm doing rotation of all three planes: an X rotate, a Y rotate, and a Z rotate. So, on line 50, I say, "Okay. Well, I want a PVector. I'm going to call this PVector pr for picked rotation", and I'm going to say, "Okay. For the X, do integer random 360", which is going to give me a number between zero and 360, "and for the Y, give me a random 360, and for the Z, give me a random 360." Once you randomly pick these three rotations, take that PVector and save it to our array list of picked rotations. So, now on lines 49 through 51, we have randomly picked a rotation for the cube. Now, you get down into the draw here, and here is our push and our pop matrix. Now, again, lines 81 through 84, that's dealing with the entire cluster, and you'll then see that it is the addition of lines 90 through 92, where I say, "Okay, you're now picking individual cubes, translate random X, random Y, random Z. Also, rotate to your random rotate X, rotate Y, and rotate Z." So, now each cube is picking its, I'm assigning whatever I pre-picked for rotation for the rotate X, rotate Y, and rotate Z. Stellar, nothing else is different. Build cube is still the same. Now, look at how just implementing that pre-picked random rotation, look at how it changes the cluster. So, I'm gonna go ahead and run this sketch. You'll notice now that the arrangement of the blocks is way more interesting because now, they're not all the same non-rotation. Now, they're all a different rotations, but then I'm moving them all as a cluster and just aesthetically, I thought, "Wow! This is visually a lot more interesting. Let me just run the sketch again to see what sort of random setup I get." Again, now I'm creating this really beautiful cluster of cubes, but the fact that they randomly rotate means that some will knock into some of the others, and I just thought, "Wow! That looks pretty good." Again, I'm using oscillation to move the cluster as a whole. So, I'm sitting with this guy for a little while, and I then got to thinking what would happen if I added rotation back to the individual cubes. So, it just made me think, "Well, okay. I could have oscillator oscillating the whole cluster. But then, what if the individual cubes were turning on themselves while oscillator was moving the cluster as a whole?" But I wasn't sure that I wanted to go through and create a whole new set of oscillators. So, I thought, "Let me save this out to a Build 14 and try something." So, let's go ahead and move on to Build 14. Build 14 is almost identical to Build 13, but I implemented a little tiny trick inside of this sketch, and that trick is inside of the draw function. This is all I did, was this little edit right here. I just said, "What would happen if just inside the rotate X and rotate Y, what if I subtracted the frameCount of the movie?" Now, frameCount is always counting one, two, three, four, five, six. The second you start your movie, frameCount is always running. I thought, "Well, what if I rotate X minus the frameCount, and what if I rotated Y plus the frameCount?" So, I'm not creating a whole new set of oscillations. I'm just adjusting this rotate X and Y minus or plus whatever the frameCount of the movie is. Again, I wasn't entirely sure what this was going to do until I run the sketch. As soon as I run the sketch, I was pretty happy. Now, you could create a whole entire new set of oscillators if you wanted. We could apply a secondary set of oscillation for each individual cube, and then the main oscillation doing the main cluster. But I thought, visually, this minus frameCount and plus frameCount addressed the issue without writing a whole bunch of new code. So, I thought, "Wow! This is really beautiful." Again, I can run this over and over and over again, and we get different. There we go. So, now I picked some smaller cubes. So, you've got the main oscillation that's slowly rotating this thing around, and the frameCount rotating each of the individual boxes. Now, one thing that you should be thinking right now is, "Oh my gosh! Maybe I'm new to processing, and a lot of this code now has just gotten too much, too fast." Regardless of that, I can go up to the top, and I realize that I'm mapping JPEGs to this environment. So, I can jump over into Photoshop or Illustrator, make some new assets, and I can actually map them to this environment and see what kind of patterns I get. So, you can swap out my artwork for something different. So, I'm looking at this, and I'm just thinking this is great. I had a really good experience with this system. It produces something that's kind of interesting. But in the back of my mind, I was still wondering what defines a texture, and this section is called combos. I thought how could I take this amazing thing right here and combo it with something else that we've already covered in this class. So, the first thing that came to my mind was, what would happen if I made a swarm behavior and I mapped the swarm behavior to the surface of each cube? Would that even be possible? So, what we're going to do now is, I've written a little note here, which is take a break. So, we're going to take a break. We're up to example 14, but I want to stop this code that we've done, and I want to make a little side file and illustrate what we're doing in this side file, and then take this side file and merge it into what we see right now. So, how can I work on a swarm that eventually I will map to the surface of this cube animation? Exciting stuff. Let's end this video, and I'll see you in the next one. A little break. Moving into example 50. 49. Unit 9, Video 9: Okay. We're taking a break. This file is a break, a little bit of a break, because I'm wondering in my mind, can I use HCanvas for a texture? Could HCanvas be mapped to the surface of the cube? I got JPEG's mapping, I got PNG's mapping, I got QuickTime Movies mapping. Why couldn't I map an HCanvas to that cube? I think we can do it. So, I thought, well, okay let's take a break here, let's look at file 15. File 15, example 15, you'll notice it says Swarm and that's because I want to do a Swarm behavior. Now, if I look at example 15 and I look at the data folder, I've got our good friend color.jpg here. So, I thought okay, I'm going to use this color information for my Swarm. Let's check this out. I've got an HCanvas, HPixelColorist, I've got HSwarm, I've got HDrawablePool and I've got a HTimer. So, we're going to combine all these things together on an HCanvas because in the back of my mind, I'm thinking I'm going to use an HCanvas on the surface of the cube. Notice the size of my movie, it's 1280 by 640. Now, I've done that on purpose so that when we run this file, it allows me to demonstrate what's happening visually. Now, 1280 is 640 times two. On line 12, I create an instance of HPixelColorist and I say go get our color.jpg. I just want to let you know that we're going to be applying it to the fillOnly. Now, look at lines 14 through 16, I'm creating an HCanvas but notice the change. The change here is, that if you don't specify any argument inside of HCanvas then it just adopts the width and the height. I want to make an HCanvas that's only 640 by 640, so on line 14, I say c1 is a new HCanvas, 640 pixels at 640 pixels, autoClear is false and the fade is one, so we're going to get that slow burn. Then ignore line 15, pretend like you don't even see it. Line 16, H.add(c1). On line 18, I'm adding the image of color.jpg, and I'm putting its location at an x-axis of 640 and right now I'm talking through the code but when we run it, you'll be like, "Oh, okay, I get what he's doing." I'm creating an HDrawablePool and we're going to draw 20 of them. We're going to parent this stuff into our c1 Canvas, so we're painting our HRectangles into c1. We've got an onCreate, notice there's no requestAll and there's no requestAll because we're using a timer to attach each of the items into our Swarm every 250 milliseconds. Now, in our onCreate, I put in that stuff that we had done on an earlier file of Swarm that it was like fireworks, they shot out at different positions. I want to use that in this one. So, I do float rotation = random(TWO_PI), the size of the Drawable here is 100 pixels by two pixels, there's no stroke. The location is 320 on the X and 320 on the Y. So again, if our whole movie is 1280 by 64 then I'm only doing the Swarm point on the left-hand side of the screen, 320 by 320. I go ahead and put in that stuff that I put in the previous Swarm where I'm doing the rotation radians to rotation and the move, Cosine rotation times 10 and Sine rotation times 10 and the anchorAt is in H.center. I'm also doing the colors.applyColor from a HPixelColorist which is grabbing color out of color.jpg. Wicked. Now, I'm creating an HSwarm and adding D to that HSwarm and I'm saying, "Hey, here's the properties that I want you to have." The goal that you're trying to get to is 320 by 320, which also happens to be the birthing point, your speed is 15, your turnEase is 0.02, and your twitch is five. Now, down here at the bottom I have a little four loop and I'm saying let's cycle through all the assets in the pool and update their color from HPixel colors. So, as the Swarm starts to move, it's updating the color as it moves across this color.jpeg. So, let's test this sketch and see what I'm trying to illustrate here. Cool. So, the reason why I made this file this way is so that on the right-hand side, you can see just the color.jpg and I'm saying, "Look, I'm loading in this color.jpg and I'm using its color information to update the Swarm that you see on the left. Now, the Swarm that you see on the left, you'll notice it's actually an HCanvas. So, there is an HCanvas that is 640 pixels by 640 pixels right there on that left-hand side. The Swarm is running around and it's updating the color but what we're viewing on the left is an HCanvas. So now, I want to know after this wonderful little break that we've taken, can I use this HCanvas that we see here on the left-hand side, can I use this HCanvas for all six surfaces of the cube? I'm going to freak out if it works. So, let's close this example, let's move on to the next video where we're going to talk about Example 16 and Example 17. 50. Unit 9, Video 10: It's about to go down right now, example 16 and example 17. Here is where I'm taking example 15 and seeing if I can merge it with example 14. So, example 16 is a merge of those two files. There's going to be a lot of code here, but hopefully, you've watched this start off easy and progressively get more complex. Hopefully, even though it's a lot of code, you've understood the steps that got us to this point. So, let's look at example 16. I've done some stuff to this file, there's some visual cues and it will make sense when we run it. Over the top, I just copy and pasted all that stuff that we had just done in the previous example 15. The Canvas, the PixelColorist, the Swarm, the Drawable Pool, and the Timer. If you look at the setup, I've copy and pasted all the stuff from example 15, which is adding the HPixelColorist, adding the Canvas-One. You see here, it just says new HCanvas. Take one notice, line 19, this file is back to 640 by 640. So, we're back in our smaller canvas size, we're not at 1280 anymore. We're back at 640 by 640. Line 25, I kept the same. I just said, let's make it an HCanvas and that canvas is 640 by 640. Auto clear is false, the fade is one. Ignore line 26, you don't see it. I'm adding canvas to hype. Texture mode is normal. I then added all of the code for the pool in the timer. So, the pool is still the same as it was in example 15. We're drawing 20 assets, it's using a HRectangle, it's doing that firework rotation radians thing. We're adding an HSwarm just like we did in example 15 and the Timer is still going to shoot these things out 250 milliseconds. Now, the rest of the code is all our pre-pick stuffs. So, if you look at this four loop, that's from before, that's from example 14. Where I'm pre- picking a random location, pre-picking a random scale, pre-picking a random rotation for x, y and z. Our oscillators have remained unchanged from example two. Now, let's look at the draw. The draw, I added that little four loop to cycle through the pool and reget the color from each PixelColorist in that color.jpeg. This push and pop matrix is still the same. This remains unchanged from example 14. What is different is the buildCube function and look at what science I did here. I said for the texture, instead of tex, T-E-X, instead of going to an array of images, I just said, "Go to the canvas and grab the graphics from it." I've done that for all of the faces. So, you'll notice that texture is c1.graphics for all six surfaces of the cube. I'm now going to run the movie and you're going to notice some wonkiness but it's there for a reason and I'll explain it. When I run it, I have left the HCanvas of C1 in the background there. So, you can see it running but then you can also see that it is indeed mapping that swarm behavior to all six surfaces of the cube. So, I have the swarm behavior sitting in the background, you could see it moving and you can see that it's actually updating on the surfaces. So, that's just a visual cue. A holy crap moment, this god damn thing has worked. So, I'm going to go ahead and close this and I'm going to fix it in example 17. So, if you go to example 17, the only thing that's different is this line 26 right here, where I create the HCanvas 640 by 640. I add the HCanvas on line 27 but on line 26 I say, "Can you move the canvas as X axis like negative 10,000. Like basically, get it the hell away from me. I don't want to see it. I need it, it's there, I'm painting to it, I'm going to use it as a texture but move it way the hell off screen so that I don't see it." So, there is our line 26, which is move the C1 Canvas exposition negative 10,000 pixels. So, now when you actually run your sketch here, all you are seeing is the cubes and the swarm behavior getting mapped to all six surfaces of that cube. Can I get a hallelujah. Can I get a amen. So now, I'm like, "Oh my God! The sky is the limit now." Now, if you think about this, anything that we've learned in this class, tweening, rotation, the swarm behavior, as long as we're painting it to an HCanvas, we can actually map that HCanvas as a texture onto this surface. Now, you might have noticed the only thing that we're viewing now is these transparent cubes and if you wanted you could come down here to the buildCube function then you'll notice, look at line 146. I commented out this line 146 but let's watch this. If I comment out line 147 which is no stroke, no fill and I actually put line 146 back, which is a stroke weight of one and a stroke color of grey, you can actually run this sketch now. In fact, here let's just make this a little bit bigger. Let's make this a stroke weight of four. I don't know if the stroke of that grey color is going to be an n, that works fine. So, you can see that the boxes, you can see their rotation and you get this really interesting pattern of the swarm running across the surface of that cube which is beautiful. Now, I'm going to put this back to the way we had it. So, I'm going comment out line 146. I'm going to put 147 back. Again, it's amazing. I'm actually using this entire environment to actually hide the cluster of cubes. I'm not really interested in maybe seeing the cubes but I'm more interested in the abstraction of the swarm behavior getting mapped to the cubes and there's where the magic is. Now, I am going to end this file and literally we have three videos left. There's going to be one for example 18, one for example 19 and one for example 20. The purpose for these next few files was again me just going, "I wonder." What the I wonder was, I'll give you a little hint, is to come up here and to look at line 20. Line 20 is the stage and you'll notice that the background is just 20-20-20. It wasn't until I tried this said, "What would happen if I didn't auto clear the stage?" If I didn't auto clear the stage, it would leave trails, wouldn't it? So, I saved this file, I ran this sketch, and I got this. So, I thought we need to make some new files. Let's go ahead and end this video and we're going to move on to example18. 51. Unit 9, Video 11: Example 18. We're getting down to the last few videos here, and boy does this process, this experimentation of what ifs, and I wonder what would happen if I do x, y, and z. It takes a weird turn, and as I mentioned in the last video, all I had to do, was add that autoClear(false) to the main stage, which is, "Hey you've got these cubes moving around. Why don't we paint them and see what happens?" Okay. So, I added that autoClear(false). The other thing that I changed is, is I changed HDrawablePool to only be one asset. So, now, there's only one swarm behavior that's getting mapped to each of the six faces because I thought 20 was too many. Especially since you would get those rotations on the outside, it would create this ring, and again it made the cubes too visible. I like this idea of using this totally crazy 3D cluster, but hide it in a way that if people saw the files, they maybe wouldn't even recognize that I was using 3D cubes to make this in the first place. So, in order to dial that down, I change HDrawablePool to be one. In this file 18, that's the only changes, as I add this autoClear(false) and I drop the pool down to one. So, let's go ahead and run this sketch and now by dropping the swarm down to one asset, the cluster of cubes almost has vanished. Right. You see, you've got this system painting, but it's hard to really identify how this is painting. Right. Isn't that amazing? Would you ever have thought that when we first started this, back in example one in using these three dimensional cubes, that we would get to an example 18 where I hide the system that's actually generating these patterns? Would you know? Would you even know that this was generated by a bunch of three dimensional cubes? Now, oh man that was really pretty. So, I'm thinking about this and I think that this needed some adjustments. One is, I felt maybe there should be some moments of calm. Maybe the swarm is running too fast. Maybe I need to change the speed or the rotation is, so that we get these moments, and then maybe it just can't resolve quick enough, and so there's a pause, and then it comes back, and then you see it swipe. The other thing that's interesting in this particular file, is that we're not using any lights. We're not using any point lights. So, we're getting the color at 100 percent saturation, and by adding a point light would mean that if I had this box that had six surfaces, and it's turned slightly this way, and if I had a point light over here, that would mean that the swarm behavior would get the light on this surface, but it would start to darken out on this surface. So, I thought by using point lights in this environment, I could really start to control the shading of this environment. Because right now it's very flat, very psychedelic, but I want to add some more tonal range, and I think that's gorgeous, I think, I swear to God, this is what I do. I come up with crazy, batshit, nuts ideas, and I code these things and I just sit here like, it's amazing. That's what I do. That's what I do. I just sit around trying to amaze myself. Hilarious. Okay. Let's close this, that looks great too, but it's gone. Let's close this file and let's move on to example 19 in the next video. 52. Unit 9, Video 12: We are in example 19, and I'm going to implement some of those suggestions that I mentioned in the previous video. So, if I toggle back to example 18, let's look at some stuff here. The number of cubes is 20, the min scale and max scale is 40 and 120. If we look at the swarm the speed is 15, the turn ease is 0.02 and the twitch is five. Let's make some adjustments. If you move on to example 19, I move num cubes down to 13. I thought 20 is just too many. I need these moments of space. So, I move the number of cubes down to 13. I also increase the max scale, so you'll notice that min scale is now 50 and max scale is now 150. I also changed the size of the canvas, 900 by 900. I wanted a bigger viewing area to paint on instead of 640 by 640. However, that doesn't affect the H canvas. The H canvas can stay at 640 by 640. So, it doesn't matter what we change the the width and height of the main canvas as, as long as the swarm and the H canvas still stick to that 640, everything's going to work out great. All right. Down in the swarm, turn ease has been dialed down. So, instead of 0.02, it's now 0.01, so it's just a little bit slower, okay? Then I thought, well, the other thing that I probably want to update is the random X and the random Y. In example 18, it's negative 300, positive 300 for X and Y. In 19, I'm making it 400 on the negative and 400 on the positive. So, now each of the cubes can move out a little bit more, right? That makes sense because our canvas now is 900 by 900, so by opening them up, just means that the cluster is going to be a little bit more spaced. Each drawable pool is still one, so we still have one happening inside of our swarm. The next update is one point light. So, notice that by adding a point light, you now are getting some shading on the three dimensional objects. Okay? So, again look at this point light, it's a white light 255, 255, 255. The position of the light is in the exact center, width divided by two, height divided by two, and I've pulled it up a bit to Z axis of 100. Now, if a cube was like this, that would mean that the light is shining on this surface perfectly. So, you would see the color that's being sampled from each pixel colorist in all of its rainbow glory. However, if the cube was at this position, the light would be hitting that surface and there would be some shading down each of the sides of these surfaces. So, you would not be getting the color from each pixel colorist in its 100 percent bright saturation. It would actually start to darken. Now, imagine that it's moving the entire cluster, so it's even going to get worse, right? So, as the entire cluster starts to rotate, some things are going to come to the front and some things are going to be all the way in the back here, and they are probably going to go all the way to black. Okay? This will actually work in our favor because it's going to look like it's a racing, right? So, something will move to the front, it'll paint a big swathe of color, and then as the thing rotates around and some of these darker shadows on the cubes is actually going to be black on the swarm, it would actually will start to erase. It will look like it's erasing. Let's go ahead and run the sketch and see exactly what I'm talking about. So, now we actually start to get some tonal range, and look at this, you see now the swarm is actually is presenting a little bit of black, because that point light is not hitting that surface right from the front. Because we changed the turn ease to 0.01, look at this, we've got like a moment of calm and we're just waiting. We're waiting for swarm to resolve itself back into a position to paint something. That could happen quickly, and that could take some time. Because we've got a twitch of five, technically this is knocking it off, of course, so we don't see anything. Now, it comes into view. So, it does this nice swipe and then it disappears, right? So, the swarm comes across it and then moves off. Again, we're getting that tonal range because we're using point light. I hope you are freaking out right now. You did not see this coming. Whoa, beautiful. You have no- most people- shh, it's our secret. It is our secret don't tell anybody the magic behind this Wizard of Oz crap. All right? Because I've changed that swarm that way, I get these moments of calm and I'm really able to look at this and wait for the next swipe and and see what forms it's going to create. But here's the interesting thing, because you're mapping the same swarm to all six surfaces, there's the familiarity. Right? So, even though you've got 13 cubes and those 13 cubes are moving, they're all mapping the same behavior as a texture. So, when it swipes green, it swipes green on all 13 of these cubes. If it swipes pink, it's swiping pink on all 13 of them. So, all of a sudden you start to notice, oh, wait a minute, it's doing something in different locations on the screen, but they all burst the same color at the same time. There's something about the animation that seems familiar on all of them, right? So, I think that for me is what I'm constantly trying to do when I'm making these things, which is, how can I program surprise, right? I want to be surprised. I want to run something. This is taking way too long, right? I've given up on that one. I'm going to close it and I want to run it again, because I want to be surprised again. I want to use randomness to generate the surprise, but I want there to feel like there's some familiarity so that it doesn't feel totally random, like, know there's definitely something at play here. Again, you can run this an infinite number of times and you'll get an infinite number of compositions. Now, it could be that the swarm is just it's taking too damn long. All right? So, of course, these pauses are too long. So, if I close this, I could come up to swarm here and let's say I put turn ease back to 0.02. That would mean that it does a better job of turning back into view, right? So, look at this, we get some nice swirls, oh, see it's already too busy. See, it's fine tuning, okay, cool. There's, nope, it's backing again. See, I want a few moments to live with this before it paints again, which means, I'm going to have to figure out the golden number for that turn ease, so that it gives me this movement, but it gives me enough time to appreciate it before it paints again. I don't know what that golden number is. It could be 0.015, all right? So, let's try to make it more than just one, maybe 0.015. Again, I like that black that comes across and starts to erase a little bit. But hopefully, you're astounded that we're using cubes to do this. Okay, this is a good one. I'm going to keep it at this. Let's close this video and we're going to move on to the last one, which is example 20. 53. Unit 9, Video 13: All right. Here's the last file in this section. Some things to think about, if you look at example 20 and you look in the data folder, I have changed color.jpeg. This is a photograph taken by my friends Cosy and Dan who do a lot of scuba diving, and this is of a shot underwater and it's of kelp. What I did was is I opened this image of kelp inside of Photoshop, I applied a Gaussian blur so that it would kind of I didn't wanted to blur out the image a little bit. So, I blurted out with like a Gaussian blur of like 10 or something like that. I then applied some noise on it, you can see that it's actually maybe a little bit pixelated. Then I used the sharpen tool, to sharpen that noise. So you get this kind of grainy blurred out photon, and I thought that graininess would pick up maybe really nice and h pixel colorist. So notice, that on this bill 20 there is a new image that we're sampling color from. Okay. What has changed in this file other than a new jpeg? Well, I modified turnEase a little bit, so I'm doing 0.017 again trying to find that kind of a golden number. Other than that I think pretty much everything has remained the same, except for I changed the point lights. So, in example 19, the point light was directly in the center. Now, I've added two lights, both of those lights are white but they're shining from the sides. So, if you look at lines 112 and 113, 255, 255, 255 so the lights are white. But the first one is zero on the X axis height divided by two at Z axis of 100 so the light is shining at on the left hand side. Then line 113 it's exposition is width height divided by two. So, I have two white lights now shining on either side of the stage. Now, remember how I said earlier that I just needed to slow things down a bit? Well, there's a little trick. What I've done here on line 22 is I've slowed down the frame rate of processing. I believe by default the frame rate is 60. So, here I'm reducing the frame rate of processing to a frame rate of 30. So, I've cut the tempo of everything moving in half. All right? Other than that I think everything else remains the same. Let's go ahead and test the sketch and let's see what we get. So, you can see that it's slowed down a little bit. It's taking a little bit more time to draw these curves and again it's sampling from the new jpeg so we're getting some nice chocolate and mint colors, got a little bit of a pause here and then boom it comes in with the golden honey. Mint chocolate chip and honey, that is the name of this piece. So I can watch this for days, and you're going to get something different, right? Because there's so many random events happening that it's going to unfold for you dynamically just like it's unfolding for me right now. So, this really ends this section which is trying to come up with an idea and really explore the process of that idea but really it's about combos, it's about combinations, it's about taking all of these things that we've learned and trying to have them work together to create this super surprise. I had no idea at the end of this, I had no idea why we embarked on this journey that I was going to get to this kind of little painting structure. Little did I know that I was going to work out this whole entire 3D environment to try to hide it from you. I don't know if I would have discovered this, if I wasn't willing to walk the path and that's what this is about, is walking the path trying things what happens if you change this number? What happens if you change that number? What if you try to map this thing to that? What if we try switching out to an SVG instead of each rectangle? What if it's moving a triangle now? Haven't done that yet, maybe that's what you do, maybe you take one of your drawings that you made in the first class and you're mapping that to the Swarm behavior rather than on line 33 using each rectangle. It's that always questioning what if, what if, what if, that I happened upon these happy accidents because that's what these are, these are happy explorative accidents. Okay. Let's look at everything that we got going for us. We covered HRotate, we covered HCanvas, we covered HFollow, we covered HTimers, HTween, HSwarm, HOscillator, and then ran a combination process. We have one last section, and that's how the hell do I get this out, so how do I take this thing that I'm making. Oh, look at that, oh here comes the mint, here comes the mint on the top of my chocolate and honey. It's a cool mint. How do we get this out? I want to post this on Vimeo damn it. Or I want to make an animated Gif. So, the next section, is going to deal with output. How do we render this to a image sequence? We've learned a lot of really fantastic ways of, oh my god that's pretty, that's good too. I'm sorry this video could be six hours, I literally could watch this for six hours. So, let's move on to the next section which is output but not only do I want you to try things with some of the stuff that we did in the previous class, but I constantly want you to always be wondering what if, because what if means that you're going to take some of these files and make your own mutations, and that's what's going to happen in the project section of this class. Is that what if? And here's what I did and that what if and here's what I did, and I put in this image with this kind of color information and look how it changed. There's always that experimentation that is going to reveal the unexpected. All right. Moving on to output. See you in the next section. 54. Intro to Output: And you're now in the final section of output, and for me this is wrapping up everything that we've learned in this class and outputting it into something that we can use out in the world. So, what's going to happen is we are actually going to render these animations to image sequence.. Right. So, we'll learn about how to write the code to create a folder and actually start to output every single frame of this animation, that we're doing generatively to an image sequence, and this section also lets me showcase some external tools that I actually use for the sole purpose of creating output. So, we're going to use a little apple script program to point to this image sequence and actually build a quick time movie. Great! Once we've got it into quicktime movie what other applications do I use to move it into MP4? Because our movie file is going to be a little bit large. So, I actually want to move my files from a movie format into MP4, and I'm going to use a totally separate program to create that. How can I use some other tools to actually reflect or create a kaleidoscope of the animation that we just created? Another thing that I'm super crazy about is reflection. How can we get this output into gif, into the animated gif format? So output is going to basically just look at all of these behaviors that we've spent all this beautiful time creating together and getting it into a format that we can publish online and again for me it's been Tumblr. I've been creating these 30-second second animation that had been outputting to tumblr. So, how do we take these generative animations and get them into a format that we can publish to tumblr or we can use in a music video? Just like I did for phantom gram. So I'll show you how I created some of these phantom gram animations that got used in the music video. So, output bitter sweet but welcome to the end. 55. Unit 10, Video 1: Sorry. This is it. Where the hell are we? We are in output, and this is it. This is the magic that you've been waiting for. If you download the zip that is associated with this file, what I did was, is I went into combos and I took example 14 which I just thought was a beautiful sketch for us to render. We've got animation, I now want to get it out. So, right now I have example 14 open, and what I want to do, is every time the draw function runs, I want to basically paint the screen, and then capture that image. Okay. So, if you look at example 14 inside of combos, you're going to see that on line 99 is the line that I'm interested in. Now, let me just comment this out, and let me run it so that you can see what example 14 looks like. It's this guy which is, it's just pretty. Okay. So, I want to output that to a sequence of images. Now, in the case of my Tumblr project, one of the restrictions is that it's going to be a 30-second animation. So, if I'm compiling a 30-second animation at 30 frames per second, then I would know that I want 900 images, and so let's look at this line. It's actually two actions here, and here's the first one, which is I want to save the frame, and so, inside of saved frame, I've done something unique which is, I'm saying go up to a directory, create a folder called frames, and now start saving out a sequence of tiffs, and these pound signs are going to get replaced with frame count. So, all of a sudden, the first file is going to be 000000001, and then two, and then three. So it's going to save out a sequence of tiffs. Now, while that's happening, I have a little conditional here that says, if the frame count has reached 900, then I know that I have 900 tiffs that I can compile into a movie at 30 frames per second would be 30 seconds of animation. If it reaches a frame count of 900, it's actually going to exit out of the program. So, the entire sketch will collapse. All right. So, let me just do this right here which is, I am going to bring this little folder over. Let me just position this on the left, and let me position this right up here. So, here's that example 14, and inside of there is my build.pde. Okay. So, now I've got this this code right here uncommented. So, let's go ahead and run this and the sketch. Look. It just created a frames folder, and if you actually were to open up that frames folder, you would watch this grow right now 253 items, 300 items. So, as this animation is running, it is capturing the animation to a tiff, and eventually, this is going to build up to 900 images. Frame count is going to reach 900, and it's going to shut this animation down, just like so. So, it actually exited this sketch, and you can see now I have 900 images inside of this folder called frames. So, if I were to highlight the first tiff, there it is. I can actually click the down arrow, and you see I'm moving through the sequence of the images, and it has in fact rendered each of these tiffs out. Now, you can render any kind of image; jpeg, png. I like tiffs, because tiffs are uncompressed. They're crispy, crispy files. Right. So, I don't have to worry. If I go to a jpeg, I worry about maybe getting some jpeg compression. So, I tend to like to output my images as tiffs, so that way when I'm building a movie, the clarity of the assets that are getting captured are as best as they possibly can be. So, tiff is what I use. Here you can see inside the finder that each of these tiffs is 1.2 megs. So, depending on the length of the video, you are going to start to eat apart hard-drive space actually pretty quick. Okay. So, now we've added the last piece of code for output. In the next video, I'm just going to show you a little trick that I use to compile this to a QuickTime movie, and then to publish it to a mp4. Okay. See you in the next video. 56. Unit 10, Video 2: I thought I would take this last video here just to share a couple of tricks that I use when preparing some sequences. In the last video, we rendered out 900 tips. Here's all these tips and again, it's an animation now. PC users, I'm sorry I'm probably not going to be much help on a PC because obviously I use a Mac in the two recommendations. This is Mac software. I'm not sure if there are PC versions or not. The first is you're going to Google search for this word right here, Sequimago. Sure. Again, you're going to Google search this. This is for Macintosh and this is just a great little program that I like to use to take these tips and actually compile them into QuickTime movies. So, I have already downloaded. This is an Apple script. I've already downloaded this Apple script and it's actually sitting in my applications folder and it so happens that I've dragged it onto my taskbar, on my finder bar here. Because I'm always building movies so you can see right here Applications Sequimago. Watch how it works. So, what I do is I go into a folder, in this case, I've got 900 images and I'm just going to do select all. Then, all I'm going to do is, when I have all of these 900 images selected, I'm actually going to drag them up to this little Apple script. Once I let go, it's going to open up this dialog box and it says, okay please name this movie that you want to create. So, let's just call this rendered. Then I'm going to go ahead and click save and then you get a new window that says, listen you need to select the timing for this image sequence. You can do frames per second or seconds per frame. Now, I know that I want to do 30 frames per second because that's why I rendered out 900 images. So, I click this middle button here, frames per second. It says, please enter a desired frames per second. I'm just going to go ahead and enter 30. I'm going to go ahead and click Enter and then the makers of this Apple script wanted to know like, "Hey, did you want us to sort the images by filenames before processing them?" I'm going to go ahead and say no because it's already a sequence of images. I've done that for you, so I don't need you to do this for me. So, I'm going to go ahead and click no. When you click no, you'll notice that your cursor changed to this little icon here. Here is the rendered.MOV file that's currently being written to and you'll notice here inside of my dock, the Apple script is in fact running. Now, this render process is going to really be determined by the amount of RAM that you have and whatnot. I've noticed that when I do a 900 frame image sequence like this, it takes a few seconds. This maybe will take 30 to 40 seconds to render this movie but that's because this particular machine, it's done. So, it took about 30 seconds. This particular machine has 32 gigs of RAM. My laptop only has about 8 gigs of RAM and sometimes a rendered movie could take 15 to 30 minutes. I've seen some take up to two hours, three hours. So, it really varies on how long it takes to build these QuickTime movies. I'm going to close that. So, this is what this Apple script does is actually turns, and I didn't know how long it was takes so I actually did a Betty Crocker pre-rendered one but clearly we don't need it. Again, I can go ahead and click this MOV file and sure enough it's QuickTime player. You can go ahead and play it. It's running 30 frames per second. It looks exactly like our sketch except for this is rendered video. This obviously isn't going to be random. It's just a playback of a random moment. Now, this is an MOV file and if I actually select this MOV file and click info on it, you can see that this movie is quite large. Even though it's 30 here duration, you can see it's only 30 frames per second, this rendered movie is 98.7 megs. It seems a bit big for me. So, I actually want to render this out into an MP4. So, this is the second piece of software that I really like using which just helps me tear out movies to other formats and that's this guy right here, iSkySoft Video Converter which I've got right here. If I go ahead and launch that, it says that I can drag any movie into this area and output it into any other format. Again, you can explore all these different formats that this can render too. If I grab this QuickTime movie, I can actually drop it right there. I already have MP4 selected and look at this. It says the source material is 640 by 640, 30 frames per second. It's 98.7 megs. Just want to let you know that it's still going to be 640 by 640. It's still going to be 30 seconds but it's going to be 7.6 megs. So, I go ahead and click convert. It takes a whopping two seconds. It's now finished. It tells you, "Congratulations! You have rendered an MP4." Go ahead and click okay. I can do info on this MP4 and sure enough, it is not 7.6 megs. It's 25.2. You lie, software. You lie. But it's not 98 and I'm pretty happy about that. So now, if I just move this aside here, you'll notice that here are the two files side by side. MP4 again, looks very similar to the QuickTime so Josh is happy and ends up it's the MP4 that I end up sharing on Tumblr when I'm ready to publish this or to Vimeo or to whatever video service you use. There's another thing that I really like about this iSkySoft Video Converter. There's another reason why I like it and that's because it has this mirroring function. I do really like reflection. You could do some kaleidoscopic mirroring and I'm sure the video editing application of your choice, whether its Aftereffects or Premiere or whatever it is that other people use, but again this is just nice and easy. If you look here, if I take this video that I dragged, you'll notice that right over here on the right there is a pencil and if I click this pencil, it gives me some editing options like I can trim, adjust, add some effects, watermark, subtitle, so on and so forth. So, I actually I want to go to effect and if I click effect, you'll notice right here is mirror and all it does is just takes your video file and mirrors it. That's nice but I don't know if that's exactly how I would have done it. Cool. You can actually click adjust. If you click adjust, you'll notice you've got the ability to rotate 90 degrees. So, I could actually change the rotation to get to something that maybe I like or I have the option of swapping vertically and swapping horizontally so I can actually click these tools right here to see if I get a reflection that I think is most optimal. Once you're done, let me see if I can flip this. That's pretty good. I'm going to go click done. I'm going to go ahead and click convert. You'll notice that it takes a few seconds for this thing to render out but it's actually rendering a new MP4 so the first one was one MP4, the second one is two MP4 and so now I can actually quit this application on this thing here to the side. I've got an MP4 that is the original render of my piece and the second one shows the reflected one. I just like using that tool because it lets me very quickly try to use reflection possibilities. If you look at some of the pieces that are on Tumblr, I have used this and abused this. I've used it more than on one occasion. These are two programs that I use to help build my QuickTime movies and render them to MP4 and then try some possibilities like reflection. Okay. We have arrived at the last movie and this has been fantastic. I hope that this is just the beginning of your journey. As always, like the first one, I'm constantly going to be looking at the projects that you guys submit. Hopefully you're going to try adding some stuff that you did from the previous class. Hopefully, some of these files have inspired you to try new mutations and please post as much as you can inside of the project section because it inspires me as much as it inspires some of the other students taking this class. Just like the first one, you never know, I could get totally derailed by something that you post and I may make a new section like I did on the first one and offer some new mutations and walk you through those. But that's only going to happen when you inspire the crap out of me. So, please make that happen. I am happy to say that there is actually going to be a third class. The wonderful peeps over at SkillShare are extremely interested in a third class which is going to be hardware. In hardware, I'm going to start to cover some things like using the Leap Motion so that you can actually paint with your fingers. We'll probably get into the steps of how to use a Microsoft Connect. We'll also do some stuff with Webcam, using frame differencing to do some wonderful visualations with Webcam. We'll probably get into doing some stuff with audio as well. If you've been following me on Twitter, I've been doing some really fun stuff with minimum detection. So, I'm hoping that that third class will just encapsulate things that use external things as input, whether it be sound, microphone, Webcam, Connect, Leap Motion. So, there will be a third class when I find another set of moments to compile a class using hardware. So, Twitter, I'm on it. Email, I love it. Please send me some feedback and I really hope that you've enjoyed this class and we shall party soon. Take care. 57. Processing 3 + HYPE library / update: To record a quick little video of an update. When I first did these courses some four years ago, Processing 2 was the thing. In conjunction with using Processing 2, HYPE and how I described HYPE in all these classes was also a.pde file. So, in these three classes, you had a Hype.pde. Hype.pde contained the entire HYPE library, and that also meant that you could use things like Processing.js at the time. But now a lot's changed, it's four years later, Processing.js really isn't a thing much anymore but p5.Js is the new new. Of course, we have Processing 3. Well, since I was doing more on an application basis and not really using the browser anymore. We actually updated HYPE to a proper Processing library. So, what I've done is, is I've gone through all of these classes that I had previously done four years ago using Hype.pde and Processing 2 and updated them so that they were using Processing 3 and HYPE the proper Processing library. So, I just wanted to show you really quick if you go on to Github.com/HYPE you will see that there is HYPE Processing right here. This is the master repo. However, I just want to show you that if you click Branches, and inside of Branches, there is lib staging. Lib staging is always the most current, it's where we're pushing the most stuff, the most changes, making adjustments. It's always the work in process before it actually gets pushed to master. So, because we want the new new, the secret new new, let's go ahead I'm going to lib staging and you're just going to click this green button that says "Clone or Download" and then you're going to say "Download zip." Now, what this is doing is downloading the entire HYPE library, including the source code and everything. But we want to use it inside of Processing. So, you'll notice that if you go to your Documents file, Processing, there's a folder called Libraries. In the case of this particular example, my folder is empty. So, I am going to unzip the zip that I just downloaded and I should get this guide. What this has is it has reference and examples and resources. Really the only thing that you need to look at is the Distribution folder. The distribution means, this is the current build that you can push inside of your Documents Processing libraries folder. So, go into Distribution and you'll notice that there is HYPE.jar and HYPE.zip. Let's go ahead and zip HYPE.zip, and it will create this folder called HYPE and you are just going to drag that folder to your Processing libraries folder. So, inside of this HYPE you should have example, library, reference, and source. If you look at examples like, "Oh my gosh there's a ton of examples here." Now, if we were to launch Processing the IDE, you would notice that if you came, it's probably going to tell me to update. No, yes, no. Let's go to sketch import library. Look, you shouldn't see HYPE there. So now, HYPE is a proper Processing library. So, the question is, does that mean can I use this in a browser? No. You can't use this in a browser. If you want it to output your stuff to JavaScript, I don't suggest using this environment or go ahead and look at the p5.Js project that's happening, which is Processing for the browser in JavaScript. But, if you want to update all these class files that I've done over the past couple of years, I moved to the system now where you're going to be using Processing 3, and then you're using HYPE the Processing library. So, cool. So, we got this inside of Processing and just for the heck of it, if I was to move this aside and here is some of the Skillshare and Gumroad classes that I have been working on. You'll notice, if I go to Programming Graphics 001, I have now included in this zip all of the updates to this code to use Processing 3 and to use HYPE the library. So, if you go to, let's just say, Drawing Visual Assets and you were to go and look inside the folder, you'll notice that HYPE.pde is now removed completely from all of the projects. If you click on build.pde, you will notice up at the top here that we've got a new structure, which is now that it has a proper Processing library, you have to import HYPE as an external library. So, at the top, you can see I've said import HYPE.asterix which means loaded in. If you want to use other things, so if you just are importing HYPE, you get the bare bones that's needed in order to use HYPE with Processing 3. If you want extra stuff like, "Hey, I'm using a color pool or I'm using a grid lay out." Then you have to also manually import the class that handles whatever it is you're trying to use. The best thing to do is to go into an examples and say, "Hey, I want to use an oscillators." So, if you look oscillators you'll notice, "Oh, I've got to import oscillator." That means that this keeps the HYPE library very thin, whereas before with HYPE.pde you will importing everything even if you were using it all. So, this is lean, this is mean, it's much more efficient as a proper Processing library, you import the classes that you want to talk to. So again, look at the examples folder, it will show you how to structure things. In addition to that, if you look at this zip file, you will see that all the files are there just like they were before, but they all have been updated to support this new structure. I'm going to do that for all the classes and I'm obviously going to use this structure for all new classes going forward. Hope this helps. Chat soon. 58. More Creative Classes on Skillshare: