Radial Generative Art: How to Easily Code Intricate Circular Geometric Designs With Processing | Melissa Wiederrecht Generative Art | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Radial Generative Art: How to Easily Code Intricate Circular Geometric Designs With Processing

teacher avatar Melissa Wiederrecht Generative Art, Generative Design, Creative Code

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

15 Lessons (41m)
    • 1. Introduction

      2:10
    • 2. Before We Start

      1:17
    • 3. What are sin() and cos()?

      1:18
    • 4. Numbers with sin() and cos()

      1:27
    • 5. Making a sin() wave

      6:21
    • 6. Making a circle

      1:39
    • 7. Breakable Rules

      1:17
    • 8. Breaking the circle

      7:34
    • 9. Playing around

      3:44
    • 10. More Ideas

      3:39
    • 11. Exporting the frames

      1:36
    • 12. Making a movie

      6:08
    • 13. Delete the frames

      0:31
    • 14. Making a gif

      1:12
    • 15. Conclusion

      0:41
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

1,138

Students

10

Projects

About This Class

ac2bda44

Learn how to make animated mandala animations using generative art in Processing!

Generative art is the awesome and fascinating world of making art with code.  Using code, it can be super easy to make beautiful animations.  This class will show you how to use two functions called sin() and cos() to make art that draws in circles.  You will make a beautiful and unique animation to show off to your friends with just a very small amount of code!  The best part is that you really don't have to understand the math or the code at all to do this.

What you need:

In this class you will learn:

  • What sin() and cos() are and how to use them to draw in circles
  • How to adjust the circle by changing numbers in relation to sin() and cos()
  • How to break the circle to turn it into beautiful and fun shapes
  • What sort of things to play with to turn the drawing into a beautiful and fun animation
  • How to export the frames from Processing
  • How to convert those frames into a movie using Premiere Pro
  • How to convert the movie into a GIF using Photoshop

By the end of the class you will have your own movie and GIF animation.

I can't wait to see what you create with this technique!!!

Related Classes:

Coding Easy Generative Art with Processing: The Basics -- In this class, I hand walk you through the very basics of Generative Art with Processing... all the way from setting up your first sketch, through drawing basic shapes and using randomness, and finishing up with coding a random walk.

Meet Your Teacher

Teacher Profile Image

Melissa Wiederrecht Generative Art

Generative Design, Creative Code

Teacher

 


 

Have you ever thought generative art and creative coding looked like a fascinating thing to try, but you wanted someone to explain it in an easy way for absolute beginners?

I’m here to help. Nice to meet you! I am Melissa Wiederrecht. I am obsessed with art, mathematics, computer science and most especially anything that combines the three together.

My online graphic design classes will take you step by step through the process of how to make art with code, how to use the Processing language, and how to easily make beautiful digital pattern designs.

Interested to see more of my personal generative art work, progress shots, and pattern design collections?  I post regularly on https://www.instagram.com/melissawiederrecht... See full profile

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hi, I'm Melissa. Winter it. One of the many hats I wear is that of generative artist, which means I make art with coat. And if that sounds surprising and hard to you in this class is for you. Generative art, for me is like this perfect blend of so many of my favorite things art, mathematics, computer science. Symmetry definitely lacks circles and things that move in circles. Sometimes I feel like I'm playing with a spy, a graph like I used to play with other kids Onley Waco and with so many more possibilities , I've been doing generative art for lots and lots of years. But still, to this day, I never fail to be amazed at the beauty that can come out of really simple code. Generative art really doesn't have to be hard, and it doesn't have to be complicated, and it's my goal to help you understand that and make beautiful, generative art of your own. You don't have to have any experience with coding before taking this class, although if you would like a little help getting started, you can check out my previous class coding easy generative art with processing the basics in this class, we're gonna have a blast learning how to make something that I call animating mandalas, which is really just the word that I'm using to describe generative art that drives in circles kind of like a spire. A graph. To do that, we'll discuss to mathematical functions called sign and co sign and learn how to use them to draw things that move in circles. And then we will have a blast playing with numbers and moving things around. And if that sounds hard to you, don't worry. It's seriously not as hard as it sounds. I swear, if you can type, you can do this. Once we come up with the design replaced with, I will show you how to turn it into a movie using Premiere Pro, and we'll play around with colors and fun effects that you can do in Premiere Pro and then will convert it into a gift using Photoshopped as well. The only thing you absolutely have to have for this class is processing, but it's free and you can download it at processing dot Borg. Of course, if you want to be able to follow along to turn your animation into an actual movie, you're gonna need Premiere Pro. And if you want to convert it into a gift, you're going to need photo shop. One last thing. I would really love it if you follow me on both instagram and skill share so that you can be sure to hear every time I publish a new glass. And with that, let's get started. See you in the next video. 2. Before We Start: Okay, I'm gonna pause right here before I get started trying to explain anything and give a little disclaimer. And that is that I'm going to be explaining some math that is going to scare some people, I'm sure. But I want to tell you don't freak out. And don't stop watching because you don't actually have to understand what I'm saying about signing coastline at all. To do this, I am gonna explain it because simply this wouldn't be complete without this kind of explanation for those who want to know and who understand it. But if my explanations feel like they're going in one ear and out the other, that's completely OK. The 1st 5 or so videos will be driven by logic and some mathematics, and they will make sense to those who want to know. But after that, you could do as well as I can at throwing crap into this code that we don't know what it's gonna do. And it'll make awesome stuff because I swear once we have this set up, it's all play, and it's just throwing crap in there and trying different numbers. So through these first videos, when I type code. Type it in. If you understand it, that's great. If you don't just keep typing and don't go away because I swear it'll be fun after we get this set up deal. All right, let's go. 3. What are sin() and cos()?: So first we need to talk just a little bit about sign and co sign signing call sign or just functions that you give them one number and they give you another number. As you give them progressively bigger numbers. They give you back numbers in a wave between negative one and one signs, start zero and then goes up to one down a negative one up toward down a negative one, and so on. Coastline, on the other hand, starts at one and then goes down to negative one upto one down, a negative one upto one and so on signing co signer actually the exact same thing as each other, except for where they start, Sign, start zero and co sign starts at one now signing coastline are each very beautiful and useful on their own. But what really makes them awesome is how they work together. When you use one of them to control the movement of something along the X axis and the other to control movement on the Y axis, you get circular motion. In fact, that is really what Signing co signer for circular motion. This is awesome and useful in so many ways. but for our purposes. In this class, circular motion makes beautiful art Messing with signing co sign finding lots of new and interesting ways to break their perfect circular motion is where the beauty happens. Get ready to be amazed at what we can make by using signing coastline in all the wrong ways . 4. Numbers with sin() and cos(): just a little more theory Before we get into the fund stuff. I promise that if you can understand this stuff, it is worth it off course. If all this theory is a little too much for you, don't worry. As I already said, you can still make cool stuff by just playing without understanding what the numbers mean. So that being said, it will be really helpful to you for me to point out what happens if you change the numbers in different places in relation to the sine and cosine functions. If you add a number before or after the function, you change the position of the wave or circle. If you treat Children were inside the function, you adjust the angle or position on the circle wave. If you multiply the function by a number, you change the size of the wave. Remember these. Write them down seriously. Understanding these things give you control over your art and the ability to change things in ways you intend off course. We like surprises in our art. After all, that is the whole point of doing generative art. But still, if you can remember these things, it will make everything with signing co sign a lot easier. One final thing to point out the angle that is specified inside the signing coastline functions is in radiance Nat degrees. This means that to move 360 degrees, you don't use the number 360. Use the number two pi, which is approximately 6.28 Fortunately, since this is art, not engineering, we don't really often care what the numbers really are. So what hardly matters how the angle is specified? Just know that it is ingredients and not degrees. 5. Making a sin() wave: Let's get into some code. I have here a basic outline of my processing sketch. For those of you who haven't taken my previous class, I will explain what this means Superfast. We have two functions set up and drop. The code that isn't set up is run once in the beginning to set up our sketch. The code in draw is run over and over once each frame to draw the frames sizes specifying how big our canvas is in pixel width and height, called a background turns the background to whatever I give it an RGB values here I specified white. Our first goal will be to make a circle move smoothly on a sine wave. Remember that I told you that science starts at zero and then goes up and down between one and negative one because we will need to be able display things that are at locations specified with negative numbers. I'm going to move the coordinate system of my sketch down to the center of the sketch before I draw anything. If I left the coordinate system, where it normally sits with the origin at the top left of the sketch and then drew a sine wave, half of it would be off the screen. I could move the coordinate system with the function translate. I will tell it that I don't want to move the coordinate system on the X axis, but I would like to move the coordinate system by the height of the canvas, divided by two in the Y axis. Now I'd like the draw sine wave. First thing I need to do is to make an ellipse. I'd like it to be moving from left to right on the X axis, and the easy and obvious way to do that is to use thief frame count variable to specify the X coordinate of the lips. If you've taken my previous class, you remember that the frame count is just a number that holds the number of the frame that is currently being displayed. Now, before we make the Y coordinate, move on a sine wave, let's check and make sure that this is actually making an ellipse moving from left to right in the center of the screen like we expect. So I will fix my Y coordinate and zero, and I will specify that my lips should be 50 pixels wide and 50 50 pixels high and great. That is exactly what we expected in what we wanted, the ellipses moving straight across the middle of the screen from left direct. Now what we need to dio is adjust the Y coordinate to make it move up and down on a sine wave. So we will take out the zero and type and sign. But now the question is sign of what? Well, it's experiment a little bit and see if we can figure it out. We know we want to move smoothly through the whole sine wave. Swell. Logical place to start would be to put a number that increases every frame into the function. We have a perfect variable for that frame count. Let's try and see what we get. Well, that's not quite it, but if you look really carefully, you may notice that the ellipses bouncing up and down about one pixel that actually makes sense. The numbers that sign produces only very between one and negative one, so the circle can only will buy one pixel up or down with the way we typed it. But we know how to change the size of our wave. Remember, if you multiply the function times a number, you change the size of the wave. Let's try that. I'm gonna multiply it by 100. Okay, that's interesting. That's getting closer. You lips is clearly moving up and down, but in a really strange way. Here is where the fact that the angle within the sine function is in radiance matters. If an entire cycle through the wave occurs every two pi, that is every 6.28 on we're passing frame count, which is counting 123456 every frame and as the angle. Then it only takes seven frames to make it all the way through the cycle, and we don't get a smooth motion. Now. At this 0.1 thing I could do is to convert my number from degrees to radiance. I do actually have a function that can do that. It's called Radiance, and if I use that function, then the frame count really is a degree and we get 360 frames to move through a cycle of the wave. And if I play that you will see that it does in fact, work we now have a beautiful sign ways. However, I actually have a different way. I prefer to solve this problem. What I prefer to do is to convert the frame count from an energy to afloat, as in from a number that doesn't have any decimal values to a number that does and then divide that number by something. This gives me both a lot more flexibility in the speed of the wave and a much more succinct , an easier way to type everything. So what I do is to make a new variable at the beginning of the draw function, Ah, float called T for time and then fill it with the current frame count converted to afloat. When you put the type float in parentheses in front of the variable, you are converting it from an energy toe afloat. And then I used t down to my son function and divided by something, and what I divided by changes the speed of the wave. The reason I have to convert my frame count into afloat before I divided by something is that when you divide an integer by a number, processing will chop off any decimal points in your answer and turn it into an energy which is not what I want. I want my decimal points. So that's why I'm converting it to a float before I divided by something. So now that I have my tea, I can use something like tea divided by 50 in my sine function, and I will get a beautiful, smooth wave. Or I could do two divided by 10 or tea divided by 100. So using this method, you can see I have a lot more flexibility in the way that my way of draws having the frame count as a float is so much more useful than having as an integer that I'm just going to use tea from now on instead of frame count whenever I need something to change over time, so I will actually switch it out here in the X coordinate as well. Now the astute among you may notice that sign is going down and then up when I told you that sign goes up to one before going down. Well, this is because why increases from top to bottom? Remember the opposite of a normal coordinate system, so higher numbers appear lower than smaller numbers. Finally, if we change, sign to co sign, everything is already set up and it should work perfectly, and the next video we'll make the Ellipse moved in a circle. 6. Making a circle: All right, guys, we've finally arrived at the moment when this is going to start getting really fun. The code you're looking at is the exact same code. We ended within the last video, but I've added some comments to help you remember what these lines do. Ah, comment is just a line. You right in the middle of your code that doesn't do anything. It's only there to help you understand your code, and you make a comment by putting two forward slashes in front of it. Now let's make our lips move in a circle around the center of our screen. To do that, we only need to make to simple changes to our current code. First will love the coordinate system again so that the origin will be in the exact center of our canvas. To do that, all we have to do is translate our X axis toe with over two, just like we did our white access to hide over to second. We can make our lips move with sign on one access and co sign on the other. And if we give both side and coastline the same angle, which is to say the same numbers inside the parentheses. We get movement in a perfect circle. So all I'm doing here is copying the same code from the white access to the X access and changing it from coastline to sign. And we got movement in a perfect circle. Yea. Now you may be wondering why we would go through so much trouble just to draw a circle when we could just drop in the lips centered in the middle of our canvas. And that is because, of course, a circle is only our starting point when we draw a circle in this way, now we can break it before we break the circle. Let's mess with our current circle just a little bit. Let's turn off the fell color by saying No, Phil, and that's turned the opacity down on our stroke. I'm still going to keep it black, but I'm going to turn the opacity down to 40 and this gives it a really soft, smooth look that I really like 7. Breakable Rules: Now there's a few rules that I normally follow when I'm making are in this way, the first of which is just don't worry about speed right now, even though eventually will export this and turn it into a movie right now, it doesn't matter how fast it's going. We could speed it up later. We're looking for beautiful looks, not speed right now. Second, at this point, I usually stick to black and white. You don't have to. You can use color in D in processing if you want right now, but I tend to stick to black and white and then later all imported into Premiere Pro, and I'll mess with colors. Third, save a copy of absolutely everything that you like. Sometimes you get carried away with trying out the next thing, and you'll lose something that you really liked if you don't keep saving, saving saving copies. If you are playing with this a lot, you'll probably end up with hundreds of different copies of your code. But that's OK. And finally, don't be afraid to throw crap into your code that you have no idea what it's going to do. I do it all the time, even though I have been working on this a long time, and I have a really good intuition or what a lot of stuff does. Still, oftentimes I have no idea what it's gonna do or a type in the wrong thing, and something completely different comes out. But often times those were the best artworks. Really crazy, beautiful stuff can come out of code that you didn't intend to write it all. 8. Breaking the circle: I highly recommend before you move on from here that you save copies of what you've done so far so you can get back to it. It's really easy to get caught up in making tons of fun changes that you lose something you really liked a few minutes ago and can't get back. So now the first thing we should try is changing these numbers. So, for example, if we changed what we're dividing T buy from 100 to 50 what would happen? I'm gonna change it on both sides. When we play the animation, we see that the result of making that number smaller is that it moves faster. What about if we change the number that we multiply R sine and cosine functions? By this time, I'll try just changing one of them. And when I play, I see that this number is representing the within my circle. And I would imagine that this one is probably the height of my circle, which is correct. And so, by changing both of them, I've made my circle smaller. The next thing to try would be the change the numbers in the functions so that you're dividing by something different in science and you are in co sign This will make some interesting. I don't even know what the column zigzag patterns that a really fun. And you can try this with so many different numbers and always get interesting results. So give that a try. I'm gonna change some more numbers to make this whole pattern bigger. Now, an interesting thing to note here is if you notice my pattern is repeating itself. And that is because the two numbers I'm dividing by 10 and 50 are multiples of each other. So it will take the co sign wave five times as long to complete one full wave as it will the sine wave. And since the multiples of each other, exactly five times as long. So just know that whenever you want your pattern to repeat itself exactly, you should have them. Amir's you're dividing by in your signing coastline functions be multiples of each other. And if you don't want him to repeat like that, then you should use numbers that are multiples of each other. And also, if you like your pattern. But you thought it was too choppy. Not smooth enough, like the circles or coming too far away from each other. You can take your same numbers and just add zeros after them. Like I took 10 on 50 here and made it into 105 100 and I'm getting the same pattern now, but a lot smoother. That's because the relationship between the two numbers is the same as it was before. But now there are a lot bigger numbers, so same pattern, much smoother. Now let's try some crazy numbers to see what happens. Okay, that's a little too crazy that 712 was gonna take forever. So we try something smaller. Okay, now, since the number and coastline is smaller than the one and sign my zigzags air going up and don't know and noticed, the pattern is going different every time it goes across. That's not repeating like it was. That's because I chose 13 and 63 which are not multiples of each other. I'm going to move all these numbers back to everywhere a little bit ago with our small circle in the middle's weaken. Try some different stuff. So now the next thing we need to try to start putting tea all over the place and just to remind you, because I know we've been over a lot of stuff. Tea is just the number that represents time. It holds the frame count as a foot, and so putting t into your code will make things change over time. If I add T after the sine function like this, slowly over time moves the center of my sine wave towards the right until the circle simply falls off the screen. If instead, I add T to the number that I'm multiplying my sine function times. It will change thes size of my sine wave over time. If we take out the 50 out together, then the way will start just a little bit smaller. Now, if you multiply both thes signing co signed by T, you'll end up with a spiral, but the spoilers growing much too fast for my taste. So I'm actually going to divide T by 10 on both sides, and now I have a much more attractive spiral that I really like. This is something I would like to save, so I'm going to save a copy of this one before I move on. We could also change the size of our circle over time, so it will simply start off as a little speck and grow a pixel, every frame. And wow, that's actually a lot prettier than I expected. So I'll save a copy of that one, too. If I divide to buy something, my circle will simply grow slower. Okay, how about if we try something crazy like divided by sine empty? I have no idea what this is gonna dio and look at that. It's actually quite pretty. This is exactly what I'm talking about when I say you don't have to know what it's gonna do when you put it in there. I'm going to start throwing in lots of crap that I have no idea what it's gonna do, and we'll just see what happens. It might turn out really cool, like I just changed, signed to co sign right here and check it out. Craziness. Pretty pretty craziness. What about tangent? If you're getting bored with what you've come up with so far, always try throwing in a tangent. What if it didn't? Instead of dividing to buy tangent? I just used tangent that's crazy. And instead of tea divided by coastline. How Ma just co sign. I'm getting some really strange and completely unexpected results, stuff that I never would have been able to plan, but that you get by just playing. And that's the awesome thing about code, because anywhere where you see a number or something that gives back a number you can put in absolutely anything else that gives back a number on the Kotal. Still work so you can keep piling this stuff on top of each other and in a 1,000,000 different ways and get a 1,000,000 different results. It ends up being just like any other kind of art, just like throwing paint on a canvas or during with a pencil. There are so many infinite, different ways to put these things together that it's really rare that anybody, any two people, would end up with the same artwork. Here. I replaced the tangent with Sign and Multiply two times 20 oh are maybe 40. And how about if we wipe out coastline altogether and just make that be 40? That's interesting. That looks kind of like a rotating ball. I really like that effects, so I'm going to see if I can accentuate it. If I make maybe both those forties be 100 see what happens. And I'd like my spiral to spread out just a little bit faster. So I'm gonna change both of these tens to be five. I'm not 100% sure how to get that effect that I'm looking for. So I'm just gonna try a few things, and I know that usually if I divide my tea inside the sine function by something, things tend to get smoother. So I'm trying that here. I divided by three, and that didn't really do it. But maybe it wasn't a big enough number. I'll try 30. Yeah, that's what I was thinking. That's really cool. Even though now that I got when I was looking for I wouldn't exactly call it like a ball turning. I don't know what it is, but it's cool. 9. Playing around: All right, let's completely mix us up. Now. I'm actually gonna comment out that line altogether, which will make processing completely ignore it, and I'll make a new line. And in this one, I'll fix the center of my lips in the center of my canvas, and I will make the within a height change with signing close I All right, so that's an interesting start, but kind of boring. So let's see what we can do to mix it up a little bit. I'll change what number I'm dividing by and co sign so that signing coastline don't move together, and then I'll make the whole thing bigger, and then I'll actually make it all bigger yet again. And then I'll pop a zero on the end of both numbers. I'm dividing to buy to make the whole thing smoother. And now I'm gonna throw a completely new function that you called rotate. And what rotate does is rotate the invisible coordinate system that you're drawing with. It doesn't rotate anything you already drew Onley stuff that you draw after you call it. Also, every time draw is called, as in every new frame, you start off again with no rotation. So I'm going to rotate by T. And that's because he's a variable that increases every frame. And I want my rotation to increase every frame so that the whole thing turns in a circle, and that's a really beautiful effect right there. But it's spending a lot faster than I actually intended. And the reason for that is that wrote, It works ingredients as well. And so, counting up by one every frame is just rotating way too fast, so we can fix it by simply dividing t Buy something. And we can set the speed of rotation by picking different numbers. So if I do t divided by 10 I get a kiss. And if I do t divided by 100 I couldn't much smoother rotation. Now, the possibilities with rotation here actually really interesting because every time you rotated a different speed, you're gonna get a different looking drawing. And that being the case, that seems like a fun place to put in some randomness. I'm going to specify three new variables toe hold random numbers. I'll call them Rand one run to and rent three, and I'm declaring these variables outside of my functions, because what I will do is pick my random numbers in the set up function and then use those same random numbers throughout the entire time. The sketches running in my set up function, I'll tell processing to pick these random numbers between zero and 100. So now we'll use those random numbers, all but one of them in as this speed that I rotate my coordinate system with. And then I'll use one for the speed of my sine function and another one for the speed of my coastline function. And now, before I run this, I'm actually going to print out my random numbers to the consul. And that is because if I like what it came up with randomly, I would actually like to be able to replicate it. I would like to be able to make the same thing again. And if I don't know what my random numbers are, I can't do that. So I'll print them out to the console. And then, if I really like what it drew, I'll write those numbers down now. Every time I run this, I should get some really fun and interesting, different results. And if you're running this yourself. Don't forget to write down any numbers that you really like. Or I guess you could just take a screenshot. I'm gonna tweak it a little bit and make these random numbers between zero and 500 now, just to give it a little bit more of a range of possible numbers. Oh, now it's your turn. Play with this go crazy throw stuff and that you have no idea what it's gonna do. Use random numbers. Whatever you feel like doing to it. Do it because your computer will not blow up. Go for it. Just don't forget to save as whenever you find something you really like. So you keep what you made, so play with it a bit and I'll see you in the next video. 10. More Ideas: and all my examples. So far I've been drying everything with the lips is kind of like this one, for example. But honestly, there's no really good reason that I'm using ellipses. I just like using them. So in this video, I'm going to give you some examples of other things you could be using to dry your stuff. So before I start a NCAA menting some of these lines and showing you different ideas, I just wanted to show you that I have this rotate up here, which is making a big difference. You could also change this number for any one of these examples below and get some completely different results. So if you're following along, make sure you play with fat number a lot, too. It's rotate up here just as an extra dimension and rotates things a little bit more than you would get. Just using the sign in the coastline. I really like to use it. So now let's go ahead and start a NCAA menting out. Some of these things is showing you here's an example with a line where the first point is going with signing co sign. The second point is going with co sign and sign. So it's rotating in the opposite direction, and I've made it rotate on a bigger circle, and I think it makes them really interesting effects. If you watch the pattern that appears in the middle, I think it's pretty cool. In this example. It's pretty similar to the last one, but I made both points of the line actually rotate outside the screen so you can't even see their circles. And I think it's really fun to watch this, Um, just this pattern that emerges. Here's another crazy example. Using lines yet another one using just lines and this one I make stuff up a little bit and threw in tangent just to see what would happen. I thought it was kind of fun because you're getting triangular stuff in the middle, not something I would have expected. Here's an example. Using rectangles, kind of interesting, another rectangular one. And then this one I threw an arc tangent, and I like the result Seriously, All of these I never, ever planned out what was gonna happen. I just threw in some stuff. I thought it looked cool, and then I saved it to show you and all of these, you could have come up with just Aziza. Leah's me just by throwing stuff in there and seeing what happens here. I took the exact same one is the last one, but I just changed the word wrecked to the word line, and it's also really pretty, but completely different. Last two examples. I went a little bit more crazy and started adding signing co sign after the original limbs to make a loop The loop effect. It's really fun. And here's my final example. I hope by now you're getting a really good idea of how simple it is to just start changing numbers. Throw in sign here. Coastline here. Add stuff. Change it from a line to a rectangle to win a lips, change the rotation and you get completely different. Interesting results. So have at it. Have a great time Explorer come up with something you really love. And in the next video, I'll start showing you how to expert these frames to turn it into a video 11. Exporting the frames: and this video will discuss how to turn our processing sketch into a movie. At this point, you should have messed around in processing and played around and came up with something that you really like. Here's what I came up with, and this is what I'm going to be turning into a movie. First thing we need to do is export every frame from our processing sketch as a J pick. To do that, we type, save frame into our draft function and give it a folder and the file name. Pound, pound, pound, pound dodge a pig. And what this will do is make a folder in the same folder as our sketch called Frames and then every frame. It will save a J peg of that frame with a number as its name, a number dodge a bike. So now I want to hit play on this sketch. I gotta frames fuller, and it started making frames. There's gonna be a ton of frames, and yes, it's going to take up a lot of space on your computer. So if your computer is pretty full, don't even try this. But now we just wait for a while. the sketch is going to draw a lot slower than usual because it's saving frames. But that's OK. It won't affect your video that you're gonna make in the end. It all just wait until it's gone long enough that you like what it looks like and I'll see you back here. Alright, minus finished. And if I open up the Frames folder, I can see that it's made 9478 frames, which is obviously a ton. But after an expert my video, I could just delete all of that. 12. Making a movie: So let's get on to making the video. I'm going to be using Premiere Pro. There is a way to do this in the processing program directly, but it's never worked very well for me, and I don't really recommend it. So I'm not even going to try to show you that I'm going to open a Premiere Pro. I'm using Premiere Pro Sisi, so if you're using a different version, you might have a little trouble following along. But hopefully you can figure it out and we'll make a new project. I really don't care what it's called, so I'll just hit, okay, And after Premiere Pro loads up, they come down here into my project window and DoubleClick to import media, and I will go find my frames that I exported from processing. Now, if I click the 1st 1 and then come down here in the options and make sure image sequences selected and hit import, it'll import all the frames together as a video. Now I can simply drag that on to my timeline to make a new sequence, and I can hit space bar to preview what my video looks like right on the first thing I'm noticing is that it is way too slow. If I click on my clip and then hit, Command are or control are on a PC, I get the clip speed dialogue and I can change how fast. Icos I'm gonna go ahead and jump straight to 1000% cause I know he wanted a lot faster and I'll preview that and that's a lot better. But honestly, I still want it faster. So hit command are again to get back into the clip speed dialogue and I'll try 1500. I'm dragging on these little, um, circles at the end of the bar on the bottom. Here does Oum in and out of my clip, and now I want to preview it a 1500 yeah, that's a lot better. I like that speed now. When I was recording frames and processing, I went away and my my friends actually recorded a little bit longer than I really wanted. So I need to come to the end here and chop off what I don't want. So I'm moving the blue marker here to try to find the exact place where I do want it to stop I think there looks pretty good. And then I'm gonna hit, see on my keyboard to get the razor tool I remember, see for cut. And then I'm gonna click on my clip right at the blue marker to break the clip into two pieces and then V on the keyboard to get back to the selection tool. And then I will tap the end of the clip and hit delete on the key part. And then that ends. That I didn't want is just gone Now. We could go ahead and export our clip right now, and it would be done. But since we're in Premiere Pro already, we might as well have a little fun and mess with colors and stuff. The first thing I'll do is bring up the effect controls. This is where you keep check of what effects are applied to your to your video clip and then on the right of a here open, looming tree color and we can adjust a lot of fun things about the color of our clip. And actually, you know what? I changed my mind before we do that. Let's go apply a tent with my clip selected down in the timeline. I'm gonna go into the effects panel and go to video effects and color correction and then double click tint. And what tint does is let me map the black and white, two different colors. I can get lost in here, messing with colors for quite a while. I think I really like that color. Another fun fact will play with is the four color ingredient. You confined this one by searching for color ingredient over here in the effects panel on the right, and then double click it while you have your clip selected and it will be applied now. Obviously, we don't want it to completely cover up our clip so we can change the blending mode over here, and the effects controls to whatever you like. Think I'll stick with the color blending mode. You can also adjust the opacity way down so it doesn't have quite a strong oven effect. And then, obviously you can pick your four colors here. I'm choosing to change the blending mode again. This is all just play. Do whatever you like, and honestly, this is still going too slow for me. I'm going to speed it up yet again. I'll try 2000% and a despondent pretty please. There's just one more thing I want to do to finish this off, and that is it. At the end of this clip, it just cuts off really suddenly when it finishes. And what I'd like it to do instead is to stay on that last frame for just a little bit. So I'm zooming in really close on this very last frame, and then I'm gonna put the blue marker just before the very last frame right where I wanted to pause. And I'm Rick clicking on my clip and saying, Add frame hold And what this will do is at another clip after my normal clip. That is just the very last frame, and I can stretch it out to make it sit on that frame as long as I want, and a few seconds seems pretty good to me, so I'll just test it out and great. I like that. It's a lot less abrupt, so finally we go file export media here in the export dialog, make sure your format is h 0.264 and then you can click this blue thing here to select where you're going to save your file and also give it a name if you like it save. And now when I hit export, it'll take its time. Probably not too much time, because this is a short little clip and export a movie for us, and everything will find that file out in the finder. I saved mine in the same folder as my processing sketch, and here it is, and the next clip will work with Photoshopped to turn us into a GIF to see you there. 13. Delete the frames: actually hold that lovely gift. Thought for just a minute. After you've exported your video, you need to come out here and delete this folder of frames just to free up space on your computer cause it's huge. And don't forget to empty your trash as well. And then I'm sure you had so much fun making that that you want to make another one, right? So before you come over here and hit, run on your code again, make sure you comment out that line that says save frame or you're gonna be saving frames every single time you run your code. Okay, back to that gift that 14. Making a gif: in this video, I'm going to show you how to convert your video that you just made into a gift. This is completely optional. You could totally be done with a movie, and that's awesome. And I usually do that, actually. But I figured since we've made awesome video, I might as well show you had to turn it into a gift. So to do this part, you need to open up photo shop and then say file open and go open the video that you just made in photo shop and we won't do any editing. And Photoshopped, all we're gonna dio is se file export Save for Web, which will allow us to say this as a gift. Make sure the format is set to gift and then adjust the looping options to live forever. And then you probably want to change those size to a lot smaller just to make the file size smaller. I'm choosing 200 by 200 and then you can just hit, save and choose where you want to save it and give it a name. I'm hitting replace because I've done this a couple times and you should have it a lovely gift that you can upload anywhere 15. Conclusion: And with that, we've finished. So if you follow it along up to this point, I am so proud of you. I bet you've made something really awesome. Please, please, please share it with us in the class Project Gallery. And go ahead and show it off to all your friends. You can send your gift out anywhere you please. If you enjoyed my class, don't forget to follow me on skill share and Instagram Also, it would help me a lot. A lot, A lot if you would leave me positive reviews and even drop me a note and let me know what you thought about it. And of course, if there's anything you didn't understand it. You couldn't follow along. Be sure to ask questions in the class discussion page and I'll try to get back to you as soon as I can. Thanks so much for watching. See you next time