Back to the Basics: Intro to Generative Art 0. 0

1. Introduction: Hello, everyone. My name is Hadeel, and this is back to the basics. Your guide to processing Internet apart in this course will learn the ins and outs of coding and processing, and we'll have plenty of examples to practice the fundamentals of any genital art creation . When I started creative coding, I looked up to everyone who's far more advanced and always wondered how they could do it. I spend days trying to learn, but what I failed to realize is that I didn't fully comprehend the basics. That's why I'm bringing you this class. As I create more generative art classes, I want to be sure there is one that teachers the building blocks as well as show your resource is an inspiration to have an overarching repository of information. Hence, in this class will first go through the processing ey to understand how it works on, we'll learn how to program and processing from initializing variables object oriented programming so we can later dive into the design basics of generative art with plenty of examples helping you figure out the different techniques. Genital artists employing their work well after go through the various ways to save and export your work based on the type of project you're creating. And last but not least, I'll share with you. Some resource is an inspiration that helped me learn and create more generative artwork. Now will stop dragging the central, further and let's start learning. 2. Chapter 1: Processing UI: before we start, anything will have to come out processing, Of course. Okay, So before we download processing or just want to show you a few things that you can do now , the first thing that you need to know about the Web site or any programming language when you're starting is the reference bait. He always have to look for the documentation because the documentation will show you everything you need to know about that program and how to use it. Let's say I I want to create a circle. Then I'm gonna go to Judy Primitives inside of shape, and you can see the circle over here so it can go into circle. I can see an example that it can use. Sometimes it has, um sometimes it displays how this example is gonna look like sometimes you're gonna have to use the example inside of processing just to see how it looks. And then it's gonna give you a description and, ah, the parameters or the syntax of how to use it, and then the parameters that you're going to use inside of it and what it returns. If it were trends, anything and then it's going to show you the related functions or properties, um, of that shape or that function or property that you're going into. And if you go to the reference page, you can see that there are a lot of things that you can learn about processing. I use a very, very tiny tongue of this whole documentation page. Um, and it can do a lot. So imagine what you can do it. You can use all of these. There is also a tutorial section, but I go to whenever I'm stuck it something that I cannot remember how to do it or if I want o direct someone to learn about processing that I would just direct them here because there are so many videos and articles and how to create certain things. So there are great tutorials over here, and they have different topics. Or if I go into images and pixels, you can see that it's an article or opposed where you can see lots of examples and explains , Ah, a lot of the things that you can use with images and pixels. So it's quite helpful if you ever need to learn a little bit more than the courses that he can that you find online like my course. And then there's also the example section in the Example section. You can see examples relating to the different topics in processing. So let's say color and I go to Hugh. You can see an example of how you would use Hugh, for instance. So for this, it's actually changing the hue as they go up and down the screen. And then it's gonna create rectangles as I go to the right side of my side. So these are very helpful for you to get a feel of everything in processing that you can use. No, there's also books over here that you can read you can buy and wait. It's It's for mainly for beginners, but some of it is pretty useful, and I'm one of my favorite is the nature of code. Actually, um, because it's all about simulations, and I love simulations, and this book is available online for free. If you go to the website, there are other left side, like learning processing. It has a lot of great examples. Some of these books, like Thes two, are by Casey Reyes, who is one of my favorite kind of artists. Well, so let's go to the download page. Okay? Now, in the download page, you're gonna just choose your system, and it's going to download it for you. I'm not gonna don't look right now, because because it will really have it downloaded. Okay, so let's head onto processing after he downloaded to check out the you I Okay, let's go through the You, I say can understand what I'm doing when I run the program or stop the program. Or if we want to plant anything to the Consul, you already know where everything is. So the first thing I want to show you is the play and with a run and stop button, and these basically won the programs and stop it so they don't do anything special on right now, you can see that the default size is actually 100 pixels by 100 pixels. And that's why usually change the size of the for first thing. When, when I first start programming anything because this is not an ideal size for anything. Really. Okay, next is the debug Ah, button. And it looks like a little bug. And if you click. It could actually get this empty window where you have a name and a value. And this is where you can see your variables when you're debugging and you can see that here everything changed. All the buttons changed. I know you have a debug button, uh, which means run it in debug mode. So if you have errors and you can't find those errors, the debug noticed is pretty decent, and it helps you find why certain variable isn't is empty, for instance, or why it is your circle not moving or your shapes or whatever. And Destro's you every variable that you have a break point in front of and what value they have. But I don't necessarily use this when I want a debug. I like to print things, the consul using the print line function. I just prefer doing it that way for other programming languages. I also do the same thing. I just print things to the consul. Um, there's only a few moments where a used debug, but if you really look, if you used it before in other programming languages, then I recommend watching Daniel Schiffman see YouTube video on deep on the D bugger and it will help you understand how to use it s o Generally, what you do is play the program, and as you play it where you put break points, you're going to see the variables here with their values in terms. Maybe the values air, not right. And that helps you in understanding why something isn't working and what it. What is so powerful about the D bugger, as opposed to your printing to the council is that the whole program actually stopped. So the whole animation stops and you can just use this to step to go through the steps. So if you were inside of ah, Loop and you don't know, we don't understand why something isn't working and white or what values are actually being presented, Uh, for your shapes or for whatever you need, Teoh, get that variable. Then this is a good way to debug your coat because then you can just step and you can go through it step by step. And then there's the continue, which allows you to jump over something. And then there is a stop button again. I'm not gonna explain this because I don't really use it, so I don't fully understand how everything works. I walked the video by Daniel Schiffman, but I think it's better if you watch it yourself. If you want to use it any. If you turn it off than everything just goes back to normal, and then this is a very important part in processing for a lot of people who like to use. Other program unloaders were well used Teoh other programming languages and one a use that for to create generative art. I usually make my classes in Java eso in Java mode, but there are other modes over here. Ah, there is one cold p five Js, which is basically another framework, so it's similar to processing, but it's built on JavaScript instead of Java, and they used to have an editor like this. But now they have just a Web editor, and I think it's much simpler and easier to use because I mean P five dress, or JavaScript is meant for the Web, so it's much easier to use it actually in a browser than if you, because if you use this mode than every time you run it, it will open a browser for you, and I find it really annoying because the Web editor has a much simpler you I where you can actually view your work directly in the right side of your screen, and you can actually do it. Ah, I think reality. So as you code, you can see your code odor running, which is which is quite nice. But I don't like the five dress just because it's much slower for certain things. Um, I think processing is much powerful for much faster, in my opinion, Um, maybe because it's in a browser, I don't know. But if you have the used Java script before, and if you think that it's much easier to use P five dress than do so, you can also follow my tutorials using Java. And you can translate all of that into drop a script. So it's up to you how you want to use processing. He want to use it with drama mode or P five dress. There's also a python mode. I've never really used this before, so I don't really know how it works, but there is one. So if you used Python before, this is going to be helpful for you. So when you first download the software, you're not going to see all of these modes. You're actually only going to see draw. Um, I think it's only drop. So if you want to add the other modes just at them, I just added them to show you that there are other modes. And you think like on agg? No, just to show you really best, um, you can see that there's also an android mode There is our for processing if you've ever used our for data analysis, um, and data visualization. This is also cool. Um, yeah. I don't really know a lot about traders, but I know there used a lot with processing, so you can maybe check that out if you know something about it. Okay. Next you can see the file or the tap. This is where you have your sketch file or your sketch. Basically, processing files are called sketches just because they produce art, and then you have taps over here, so if you want to add a new tab, you can call it whatever. So I'll color just new tap and you can have a new file. So all of these were going to be. When you save this, all of this is going to be inside of the sketch folder. So when you save any processing sketch, it's going to create a folder and every file that you add in here it's going to add it to that folder. Ah, and this is a great way if you want to organize your files. So usually when I create classes, I put them in here. Um, and you're gonna learn more about classes later in this class. Ah, if I want to maybe have color palettes than I will add a new file for that just two separate things. And to make it cleaner, it makes it much easier for you to navigate your code because having everything in one pile is an ideal because you've done your getting going school a lot, and that's not good. It's not gonna help you. That's just gonna make things harder for you. Okay, And then there is the numbering lie numbering over here. This is great for debugging. Usually that's when I use it, but I don't really look at the line numbers. It's also good for explaining what you want to explain to somebody just telling them that to look at a certain line, it's much easier to just let them look through the whole program. Last but not least, there is the console. This is my favorite part whenever I want a debug or see something visually Ah, sometimes some of the things that you right over here in your code isn't going to show up in the illustration. So positions, for instance, the numbers are not going to show unless you add a text, objects your screen and attach the position to that. Then you can see the numbers. Other than that, I'm not going to see any values. So if you want to see that, you can print it to the council. We're gonna go through that as well at the end of tractor, too. So we're going to see how the print line from friend works in how we can use all of this. And then, if you have errors, whether it's syntax, errors, eso if if I write something, you can see the errors over here, they're very helpful to fix your hours. So if you want to actually look into the area and copy the our message, and then you can go and search for it. Are Google it? And here also, you can see errors. So whatever problems you may have, you can see here and then it's going to tell you which tap it's on. So if it's in this top or in this stuff, and then it's gonna show you what's what will lie in its eso If you our online 12 then it's gonna tell you that the error is actually there. Okay, so this pretty much only need to know about the you I It's pretty simple. There isn't much to it, Senator. You can follow along with me much easier because you didn't know where everything is. So if I told you to open a new tab, you know where to go. If I told you to look at the console, you know where that this let's head on to the next section where we can actually learn about programming 3. Chapter 2: Java in processing: in this chapter, it's crucial Daddy practice alongside me to familiarize yourself with the concepts. It's always better to try it yourself. It's personal. Experience sticks better. We'll practice in this tractor is everything used in programming generally and in processing. Specifically, the first half or so will be on the basic concepts of programming such as variables, flow control and functions and classes. And in the other half will discuss system variables and functions that you don't need to create yourself. User inputs via the mouse or keyboard and the most used tool in many generative art projects. Randomness. And finally, we'll talk a bit about a very important part of coding that is often neglected by beginners , which was code structure and organization that will encompass annotating your code and separating it into multiple files. Now let's create a new processing file and get started 4. Environment: uh So before I start explaining or tapping into data types and variables and classes and functions and all of that stuff, I need to explain the environment. First, eso as you can see in front of you, I have two functions, and I'm going to just call them function, and you're gonna learn more about from translator and how to create your own. But the's come natively with processing. So in the center of function, you put everything that you want to be initialized or run once, so it's not for animating. Usually, it's not for displaying shapes if, unless it's just ah, shape that like the basis of your design that you only wanna do ones and then because you want to create something inside of the draw function, where it loops over and over again. Then you just put in the set of function. And in the draw function, you put everything that you want to be done over and over again. So it's a never ending loop. It's basically an infinite loop, so whatever you put in there, it's going to be done infinitely over and over again. So if I want to draw a circle in there. It's gonna draw the same circle over and over again on top of it on top of itself, until you stop the program. So until we hit the stop button, basically, the reason why I want you to know about these is because we're gonna be working in the set up and draw function the whole time. I am gonna need a place where you set up everything and another place where you can animate if you ever need to animate stuff. And you can basically recreate the draw function using a loop that we're gonna talk about later called a while loop where you would say, while true And this is something that a lot of python programmers do whenever they want something to run until they want to stop, it s taken. Do that by writing a loop that never ends and instantly. So they created it for you, where you can draw anything inside of it. There's a way to stop it and to maybe draw static drying inside of the drop Functioned. I've done this before, uh, and my other courses and you can use the no loo function for that, so they know live function is going to stop this from looping. So it's gonna be somewhat similar to the set of function where everything inside the doctoral function is going to be done once. And then there's also another function that is very helpful whenever you want a we draw something. So if you stop loop and you have a draw function, But then you want the user to maybe click on the screen to get a new virgin off the drawing , um, any would you can use? Uh, we draw function for that. So maybe I can say, and I'm gonna just write it in comments if a mouse is pressed and if, where I This is what they call studio code. When you write things in comments, just Teoh rationalize what you were doing, so I'm going to just write it in Supercuts. It is not necessarily a real code that he would write, So if amounts is pressed, then I want you to lead draw. I'm gonna just rightly draw like this because I don't want to write it in inside of comments. Just it is so you can see that it's colored that it's an actual function on processing. So we draw. So if I want Oh, every time I click the mouse, it's going to redraw. So we draw is gonna basically run everything inside of the draw function again. So every time you call, we draw, it's going to call the draw function. Let's say I want to draw a circle and I want to try it again. I could just do redraw whenever a mouse's collect or whenever a keyboard is clicked. It doesn't matter. Ah, when you want to be dry, it can maybe dry. We draw every 10 frames or so. Okay, that's only need to know about the environment. Uh, only need to know is the set of function runs ones that drop function repeats. And then, if you want to stop the draw function from a beating, you can just use the no look function, and you can use the redraw from Shinto. Just call the draw function again to run everything inside it. A liver again. Now let's go into the next model 5. Integers & floats: variable store information in memory in different data types such as numbers and text in this module will discuss two types of numbers. Integers in floats. Since integers are whole numbers, they're great for counting or for any functionality that doesn't require preciseness. Floats, on the other hand, are more precise, so they're useful for division calculations. For instance, let's say I want to divide the screen into equal rectangles. And afloat is the way to go as integers around the numbers, which adds more unwanted gaps into tourism. Floats are great for multiple uses, some of which are positioning elements on the canvas, setting a size or animating. So how do you define those two data types to define any variable? Used the data type keyword here It's either into or float a name of your choice and value. There are instances where you wouldn't assign a value to a variable definition stage, and that will look like this and processing. Though numbers are initialized with a value of zero by default, let's see an example 6. Example: Integers & floats: it's demonstrate where we learned about integers and floats. The first thing that I want to do is talk a little bit about the example that I'm gonna create. So we said that enters and floats are great for Anna meeting Frandsen. So I'm gonna create a very teeny tiny animation just to show you how to use variables and specifically in tickers in floats. Okay, I'm gonna use a shape function called circle. I'm gonna stick with circle for all of these demonstrations And this tractor, just because I haven't yet introduced take functions, so I'm not gonna include too many. It's just gonna be a circle, and I'm gonna explain how they how they work. Uh, just for the sake of these demonstrations to start with the circle, I'm going to draw the circle just to show you how it looks. Then we can use the variables. So Circle requires three arguments. The 1st 1 is the exposition on the screen. The 2nd 1 is the white position on the screen, and 3rd 1 is size. So for the 1st 1 I'm going to just put it in the middle of the screen. Since our screen has size of 400 by 400 pixels. So the middle is going to be 200 hands on the Y axis. I'm gonna do 200 as well, and then I'm going to give it a size of 20. Now, we already know that this is the exposition, and why position? In order to move this circle, I'm gonna have to change these into variables so I can increment those variables. Now, if I just won this right now, I'm gonna have a circle in the middle of the screen. But I want to move it. I want to move it to the right or to the left or a top and bottom. Okay, so we talked before about set up and draw. So I'm going to to create an animation and not make a circle draw over and over again. I have to at the background color here. So every time it's going to draw background color and then the circle, if I going to learn them, the circle so it's going to look as if I already have one circle. I'm not many on top of each other, and I was gonna look look cleaner when before it was, you know, little glitchy because it has way too many on top of each other. Okay, now I want to move the X position. So what I'm gonna do is create an integer and gonna call it X, And I'm going to give it an initial value of zero. Even if you don't do this, the initial values by the false hero. But I like to do it. Just just to be able to know that I meant to start at zero. Okay? No, to animate it, I'm going to write X and then plus the old value of X plus from annual value or this step value I'm going to just do I know this seems a little bit weird to use the same variable over and over again inside of itself. But, um, what I'm doing, basically, is assigning and you value to the old variable instead of having many variables, which doesn't make any sense. Because if I want to make an animation of 10 frames that I'm gonna have 10 x ah, variables, or I'm gonna have a for loop to create all those variables for me, which doesn't make any sense. So? So the way you would do this is just do X, which means the old X that we have over here a sign it the old value of X. So this is kind of like thing you X. They're saying Okay, now X is going to equal whatever it was before. Plus, let's say one, So I want my step size to be one pixel. No, if I If I run this, nothing will happen because I didn't really use it over here in my circle. So now I could just do X instead of the 200. Now this is going not to start it. 200 is going to start at zero. But that's fine. If I wanted to start a 200 that I'm gonna have to initialize it a 200. And let's do that for now, just to to make the example of It's simpler, you know it's gonna move from the center to the right. Now this is moving because it started a 200 then every time, adding want to it. So it's 201 202 203 and we cannot necessarily see or just because the frame count is by default, 30 frames per second and so we don't necessarily see. See it? Movements, every pixel. No. If I want it to be slower, I can just do 0.5, but it won't work. That's what I talked about when I said If I want a more precise movement or if and one of more precise ah, positioning, then I'm gonna need to flip. So I'm gonna just change this into afloat and it's gonna work. And now I can be even more precise with my movements. So if I wanted to be very, very slow, I can do 0.5. I can also do 0.1, which is gonna be very slow. Um, and that's helpful when you're creating a drawing. So if I want to draw this and I want o removed background, it is going to draw is gonna be smoother. But if I do plus one, then it's going to be trunk here. And if I do, plus three is going to be even Trunk here and so on and so forth because of the movement is very fast. So it's moving. Actually, three big souls each step each frank and this is something depending on what you are looking for. Some people like that trunk. You look, some people style, have very drunk e movements of people style have very smooth movement That looks like a painting in the end. So it depends on what you're looking for, what you want to create. Now, if I want to move in the opposite side, I can just say a minus three instead and this one is going to move the other way, and we can do the same thing for why it's just float wide and let's start at 200 and then I'm gonna change this to why. And now this is going to move to the left side really fast and down, um, slope. So if I wanted to be very diagonal, then I'm going to just come three and it's going to be 45 degrees. I was going to go through the corner, so that's basically what you can do with floats and into dress. And there are definitely plenty of examples that are gonna come up soon that will use floats and introduce a lot. So in every demonstration, are that are gonna come after the data types is going to be something that uses some of these data types again. So if you perfect these, you can easily go to the next modules. 7. Color: This data type is a bit different, but all we need to know about it is that it's stores colors of Fred Green, blue and Alfa values. Those values go from 0 to 2 55 The color data type is used with the filling stroke functions, which will visit later on to declare a color variable. You add the color keyword before your variable name for the value. There are different ways to store it. You can either use a hex code or use the color function with either 13 or four parameters. If you use one parameter, you're storing a grayscale value from black to white. If you use three, then you're storing an RGB spectrum of colors, meaning any colors that are the results of combining some red, some green and some blue. Let's say you have 255 for red, zero for blue and zero for green. Then you have a bright red color. The same goes for blue and green. The fourth parameter is for the alfa value or in other terms, the A pass ity value. Transparency can add another color to your scene without adding another color value. To understand this data type better, I recommend trying it out yourself. That's our cue to see an example 8. Example: Color: okay for the color example. I want to start by talking about the background function where the background function is actually using the color data. And as I explained in the video, when I use only one variable, then I'm using a value from black to white. So from 0 to 55. So now I have a background of white. And if I change this to zero, I'm going to have a background is black. So this is basically color. Uh, in the video, I said that we use color mostly with Phil and stroke functions, and that's correct. Those air, the functions that I use with shapes. But I forgot to mention the background function, which also uses the color of data type. And this is a farm using 200 it gives me great. So I'm gonna go back. Teoh, Wait. Just because that's what I start with, usually before I actually establish a design and she's my color palette, okay. And to define a color variable. Like I said, we used the color data type, and then you can give it whatever name you think is appropriate. So we from want to say if I wanna have a blue color. I want to just call it blue. Just trying Make sense of the values with the name of the variable. Just to make it easier for you once you start working on bigger projects is gonna be much harder for you to go back and forth to understand what variables you're creating and why. Ah, you're quitting those variables I don't really like when creating variables with one lever except if it's something that is pretty common for a lot of people to use. And I'm not going to use blue just because Blue is actually native to processing. Okay, So I'm going to create three color variables called, um rdd. So the 1st 1 is giving tohave the color red. And I said, Teoh Guy explained that there are several ways Teoh initialize a color variable. One of them is using a hex code, which is what I usually use in whether it's in my classes or in my personal projects, because it's much easier to use six figures than to use a whole color function with 3 to 4 parameters, especially if you have an Alfa value. So but for this demonstration, I'm going to show you the caller function as well. So for a red I'm gonna do to 55 are So we have RGB in the color function for values. Eso I'm gonna give the highest value to the red and then I'm going give no value to green and your value for blue just to give it a bright red color And then I'm gonna use Jeanne for green going to do the same thing. I'm going to give zero for radicalism. One a new red. I want a full green color and I don't want any blue. I'm going to do the same thing for blue. So if anyone who uses your program or if he ever share your program with anyone, they're going to understand that this means red and this means green and this means blue. So this is descriptive enough just because the color functions are already explaining what you're trying to set. Use your best judgments when you're creating your variable names. It's up to you how you want to create them, but just make them descriptive enough that everybody can understand them even if you're the only one looking at this code and Then let's use the these values to color our circles. I'm going to stick with circles again because we haven't introduced the shape functions yet . So I want to use just one thing to not confuse you. Okay, I'm gonna put it in the middle of the screen, so I'm going to just do 200. 200 because our screen is 400 by 400. Um, and half of that is 200. And then I'm going to give it a size of 20 actually, let's let's make it a little bit bigger. So I'm gonna give it a size of 100 and then to color this. So if you play this right now, you can see that it's white with black stroke. So these are actually the default values for the stroke and fill function. Ah, but we're going to change that. So I'm going to do Phil. I'm gonna give it the red color. I want to choose the red can. No, he can see that it has a red fill, but now the stroke is still the black developed black color. Usually what I do is just used the nose drug function and this removes the stroke. Uh, you can change the color of your stroke, so maybe I want to give it a green color, Their group color, they're created. And I can see. And you can see that what I did here, I used a stroke inside of the set up and I used to fill inside of the draw function. It's up to you how you want to do this, because it's based on your program. Ah, for this, For instance, I I don't necessarily set the stroke over here unless I want the same stroke for everything on my program to be like that. But if I want it specific to just a circle and I'm gonna put it over here So whatever goes underneath the Fillon stroke over here, it's going to be colored. So now Circle is going to have a red fill and a green stroke. But then if I create another circle and we're gonna actually put it at zero for at 15 and 200 given the size of 100 I know if I run this, it's gonna have the same color. So if I want to change it, I can just override that by writing another fill function, and this time of unease might be variable, which is my blue color. And I'm gonna leave the stroke the same so it's gonna still have the queen stroke. But if I want to change the stroke for this one as well, I have to write it before that. So I'm going to just give it a red stroke, is gonna have a red stroke. So whatever you put it before the shape, it's going to color it with those colors. So if I want no stroke for this one, I can just do in a stroke. It's not gonna have any stroke. So yeah, that's how you override the colors. So this time I'm going to show you how to create it using hex code. So you're gonna do the same thing. It's a color, so it's still gonna have a color data type, and then I'm going to just do a white color, and then it's going to house our symbol and six s. So this is actually going to give me a white color. So if I put it over here, uh, let's create a black color so we can change it and see how it looks like engages. Call it black, and I also use a hex code. And for black, it's actually six zeros. The first time I'm gonna use the white, and then I'm gonna change this toe black. You'll see that it's going to trains to black so the hacks goes actually work the same way the color function work, but it's much smaller. It's easier to find when you go to adobe color or cooler or any of those websites where you have color palettes. And if you have a multitude of colors, then it's much simpler to write it out this way than to write the color function over and over again. And even if you want to copy the color from any of those websites, it's much simpler to use to copy one color, then to copy one tax than to copy the three numbers that go inside of the color function. And one thing that I haven't explained in my video in my explanation video is that these hex code to go from 0 to 9. So each did it actually goes from 0 to 9 and then from a toe after the A T F are equivalent to 10 to 15. But because these air six digits so they substituted it Ah, whatever they needed, which letters instead? Also, that's why there are a combination digits and characters that for full white, you're gonna go to the last value, which is six EFS. And then, if you want to go to black, then you have no values whatsoever. So it's all zeros. It's basically like from 0 to 55 to 55 is the highest value. So it's the brightest. So it's white and zero is no color or no value. So it's black. That's pretty much all we need to know about color and we're gonna go through examples in the next chapter is, well, we can see how color is used a little bit more. 9. Boolean: Our next data type is useful for toggling between two states. That's because it only has two possible values. True and false. It's equivalent to an on and off switch in our daily lives. There are also returned types in condition. ALS, for instance, Checking if a number is equal to greater than our list than another number will result in either true or false. We'll learn more about condition als later. In this course, Cem use examples for billions would be toddling between two different colors, based on the position of an element on our campus to check of two elements air colliding or to limit some animation to define bull leans you follow the same syntax is the previous data types, but with the keyword Boolean instead. And the default value for this data type is false. Here's an example. Code 10. Example: Boolean: Okay, let's talk a little bit about billions. So for bullion is three example is going to be a little bit harder. Just because it requires conditional is to showcase their power. I'm going to show you very many example by using conditional or using it an if statement and they're going to be very easy to understand just because they're very similar to how you speak in English or in any other language using conditional zor when you want to tell someone. If something happens, then something else could happen. Okay, so how do you start? Um, if you remember from the explanation video, we set this in tax starts with a keyword, and they're called bullion because they're named after someone called George Boole. You can read more about it online if you like the one you know, What we need to know over here is that we need the keyword Boolean in order to create a variable with a true or false value. The majority of the time it's associated with condition ALS. What basically happens is that the if conditional, returns de bullion data types, so it returns either true or false, so it will tell you? Yes, the condition was meant or know the condition was intact. So yeah, that's where I usually deal with bullion. So I don't necessarily right billions all the time. Sometimes if I want to toggle something based on on off switch dry. If I wanted to be like if they use it as an input by the user, let's say you want to create an illustration and or a generative our creation, and you want the person to choose whether they want it to be colored or in black and white , or whether they want to see the design in black and white or color. Then you can use a bullion to say black and white and then put it into falls. But when the person clicks on a number of clicks and something that would change the design into black and white than that Boolean variable is going, Teoh change to true, which is going to produce a design that is in black and white. So basically treating what you want from it, Um, so today we're going Teoh do an example with color since we just learned about color. So I'm going to just do what I just talked about. So I'm going to just call it variable gray scale, and I'm gonna make it false, actually, let's start with True. So when I start, I want the illustration to be in grayscale. So I'm going to draw a circle again. I'm gonna have it in the middle and I'm gonna have it 100 pixels and then I'm going to use Phil, okay? And instead of creating a color variable, I'm just going to put the color directly inside of the fill function because they they also take the same things that the color function takes. So they take RGB an Alfa belly for the fourth parameter. So I'm gonna just do an arbitrary color because I know I'm gonna use an f conditional. You don't have to worry about this, but this is the only way I can demonstrate of Julian. Uhm, I'm going to just say if gray scale equals true, I'm gonna have a fill of gray And then if gray scale equals false, I'm gonna have this color. So right now it's true and it's going to be in grayscale. But if I change, this toe falls, but it's going to be this bright orange color. But this is basically how you're going to create a bullion. Um, all you need to know right now at this stage is how you create a bullion. We're not going to create examples using billions throughout this class, but we're gonna use, if conditional, is a lot. So these basically used the bully in data type behind screen. Ah said right now gray scale equals true is going to return a date a time. So it is trekking if the value of a grayscale is equal to true, and it's going to return whether it's true or false. So when this was false, this actually became false, so it didn't one, and then this was true because great skill is in fact, false. And so this one is run. You don't have to worry about if conditions we're gonna talk more in detail about them. When the examples for them I'll come along. So you only need to know is that Villines return true or false? And that, though used the majority of the time with conditional 11. Characters & strings: if you're looking toe at tax to your Dennard of art or do some simple operations like loading an image, then you need the string data type strings. Aaron Array of characters, which is another data type and processing characters, were useful to track. If a letter is clicked on the keyboard or to deconstruct a string will use them in an example in the type section of tractor to know back to strengths. Let's say we want a load a file. Weaken. Store its name in a variable like so we'll need the key word again. This time it's string and then the name of the variable and finally the value. However, this time the value has to be stored in double quotes, so we don't confuse processing. If processing sees a bunch of boards without quotes, it expects them to be variables, and it'll throw an error stating that the variables are in defined. Also, be aware that it has to be double quotes for strings because single quotes are for characters. Processing will throw an error anyway, so don't worry if you don't memorize all of this right away. Here's a quick mini example for you 12. Example: Chars & strings: Okay, let's talk about characters and strings. I want to start by defining a character and a string blister with strings. And then we'll talk about characters a little bit more because strings a usually used more often and characters in, ah, lot of the programming languages, not just processing. Okay, String is the only data type from the data type that I explained that has a capital letter for the keyboard. So all of the other ones that we used start with a small letter. So end actually start starts for the small letter. Ah, float small letter color as well. Bullying and character string is the only one. Now it has a capital letter. It won't work with a small letter. And just to follow the convention of every programming class out there that teaches programming to beginners, I'm gonna do a hello world string. So hello. World is just basically a first program that everybody, uh, runs in any programming language or anything that relates to programming. So if you want to do a Web developer and they're going to start with hello world So I'm gonna just Great, um, a string. I'm gonna call it. Hello. right this drink. Hello, world. This is basically when a string is, um how you would use this. Usually you would use it where the text function. So if you want to write, um, the text, this crane, you it use the text function you can use hello inside of it, and then you can set the position of where you want it to be. I'm gonna put it in the center again, and we're not gonna see anything just because of default. Fill color is actually white, So I'm gonna change that toe black so we can see something, and we can see Hello. World is on the screen at 202 100. So it is actually in the center. You would because it's not aligned. Center. It's a line to the left. So the left side of the sentence or the phrase is actually in the center. There are other functions that beacon we can talk about later. And the examples when we talk about text a little bit more, um, and we can see how we can align all of that. And now, if you want to use the character variable, you can just do character, and you can name it whatever you want. I usually don't define characters this way, so it's a little bit were to name it. But let's say I want to call it saving and I'm gonna give it the character s. And as I mentioned in Explanation Video for Strings, it's double quotes for characters. It's a single quote. It won't let you do it the other way around and going to end cynical and okay, so I don't necessarily initialize it this way. Usually, how we use characters is when I want to save an image. So if I wanted track of a person clicked the S button, then I wanted to save an image. Let's say maybe you want the person to change the shapes in your design. So maybe you created two different designs with one using circles and the other one using, uh, squares and based on the character they're clicking on the keyboard, you want to change those. So for s let's say you want them. Teoh draw you wanted, designed to change into squares, and then if it's using the letter C, then you want to change that sign to circle and you would use that inside of them a function called depressed or key released. So whenever the keyboard is actually pressed, it can understand the letters that you're pressing so we can check if this letter is actually Preston the key that is pressed. Then do this or do that. This is only demonstration to see how a string in a character are defined and how you can use them. So here we used amusing like we typed the phrase inside of the variable Hello inside of the text function. Yeah, and we'll learn more about text or type and the type section off Tractor three. 13. Arrays: last but not least in data types, for this course, is the array data type, which basically encompasses all other A raise store multiple values, and one variable is opposed to the previously mentioned data types, and the values are those previously mentioned data types. For example, we can use a raise to store multiple colors and use them to color shapes randomly using the same variable name. Imagine if we wanted to store five colors to using her scene. Will need five lines of just color variables. That's a little absurd, actually restrictive in the long run as raise open. So many doors for us. We'll see that morning the examples of the next tractor. Let's see now how we can define a raise To start, we have to know what type of data we want. A store. Let's stick with our color. Example for an array of colors will need the color keyword, but this time we'll follow it with two empty square brackets. This is our indication that it's an array will follow that with a variable name. I like to stick with pleura variable names because they make the most sense. There are multiple ways to declare a raise. You can either have empty initialization or you can assign values directly. The rule of thumb is to add the values directly in the defining stage if you have a small number of constant values, that's usually my color array, however, if you need to add more values later than just state and initial size for the array, like so they usually works for starting elements positions, among other things. Another very different thing about a raise is that when you use them, you have to use the name of the variable and the position of the requested value inside square brackets. And a very important thing to note here is that the positions start from zero, not one. So if you need the value of the first position, you'll use zero for the second, you'll use one and so on. Let's see a quick example 14. Example: Arrays: for raided its height. You can basically use any of the data types that we've used before and credit array out of it. It's basically a list of values inside of one variable off a certain data type. I'm going to continue with the color example because it's the most used one in my projects , and I think it's much easier for you to see it. Howie created because for my other classes or for any upcoming classes, I'm going to use this very often of it. So I'm gonna start with the color data type. And as we said to indicate that it's an array, you will have to ads square brackets. This is basically just telling you that we're telling processing that. By the way, this is not a regular color variable. It's actually Nobre, so it yeah, it's gonna hold an array of colors or a list of colors, and then you can name it whatever you want. Of course, you always have Teoh refrain from using the same variable name as the data type. He worked because it won't work since it's native to processing, but for a raise, I usually use the same durable him So for colors, I either use palette or I used colors just because color is used. But colors isn't because I usually use the plural to indicate that it's an array when I use it off somewhere else in the program, even though Reyes actually tell you that there a raise just because of the way there are used and throughout the program they're very different from regular variables. But I like to use colors or I like to use plural just because it's much easier for me. Teoh say it whenever I talk about all right, there's because it's much easier for me to think about a raise that way. And then I said that there are two ways to define a raise for colors. I'm going to show you the direct way to assign values to the colors array that is using the curly braces and directly putting the value inside there. And then I'm going to show you the other way. Nobody can use as well, which is also used a lot, or most often than directly like this, because the majority of the time when he used a raise, he want to store a lot of values that are initialized throughout the program. So, as loop, for instance, generates positions in the program, then you want to save it and that. All right, so we don't necessarily want to directly set the values inside of that array before colors variable or for colors. Right where you just want a set of colors to use throughout the program, Then? Yep. Definitely assigning it directly is the way to go. Okay, so I'm going to show you as well. Howie, usually go and choose my color palette. So I go through color dot adobe dot com, and I have my safe seems, and I'm gonna just use this one, but you can go and check the other. Check the trends. Drones based on what they have in ba hands. This is all the projects at the new project that are now on me hands in those sections, and there are plenty of colors in different categories. And then you can go to the explore section and he can also search my colors. Repeat, type orange. You can see all of the coal pallets that have the color or into them. Um, I already have a set in my library. I'm gonna just use this one, and I'm going to copy and paste these colors in here. So this is why use hex code? Because it's much simpler to copy and paste because you just copy the hex code and paste it . Okay, I know if we're in the program because we haven't used Array isn't do anything. So let's actually draw circle again, it center of the screen. I'll just give it no stroke for now. You can also use the North fill function any point where you want just a stroke and no, Phil. Okay, so for now, we're just going to use this and then inside of the Phil ah, function, I'm going to use the color array. Know if Aziz said is in the explanation video. If I wanted all of those five colors, it's a little absurd to use five variables. It's much simpler to use a colors array. Now, if we want to use one of these colors less, I want to use the first color. And as I mentioned again in the Explanation video, I used the variable name like any other variable. But instead I'm going to use the special square brackets and then inside here, in the definitions stage, you don't necessarily need to insert anything in here. It's just an indication that, by the way, this is an array and not regular variable. But here, you're gonna have to set a position because you're calling the values right now. So if I use the 1st 1 in in a raise, they start with zero and ends with one less than the colors array length. Now we have five. The last one is actually going to be a position for it's 0123 and four. If I want to use the 1st 1 I'm gonna just do zero. And this is actually going to take the color at the first position. And if I want to use the 2nd 1 I'm gonna use one. We're gonna use all of them to see the clothes that we actually have, and then two for the 3rd 1 three and four. Now what happens if I actually use something or a position that doesn't exist here? So let's say 55 doesn't exist. So if you forget that positions inside of an array start with zero and you end up doing 123 and four. And the last one is going to be five. Thinking that it's going to be five, you're gonna get an error. So they're basically is gonna tell you rain dicks out of balance exception they can to perform whatever you're asking for. Just because there's an error here and Ray index out of balance. Exception means that you're going outside of the array outside of the positions inside of the array. So there isn't a position five there is only 0123 and four, and this is a very helpful are actually a lot of times when I use a loop and I wanna go through the whole right, especially if you have a big array that you don't see the size of it over here, you tend to get into this er lot. And seeing this just makes you understand immediately that oh, maybe I'm actually using a position. So you're gonna actually look into the position of the arrays that you're using to find out why it's actually going outside of the bounds. Yeah, so I just wanted to show you that are, But if you go from 0 to 1 less than the length, then you're good to go. Another way to define, um, variables. In the example, video actually mentioned that you can use it for storing positions. So I'm gonna just do another array where I'm going to store. It floats the values and also again, Ah, we're going to use square brackets to indicate that it's in Ray. I'm going to just safe positions because it's a set of positions. And this time I cannot set a number of positions directly, usually because I use positions where I store positions as they generate them inside of four Loop, which we're going to see a few modules later, as they didn't read those positions, I'm going to store them into the positions away the way with Initialize an empty ray in job over and processing is using the new keyword and then using again the data type, uh, so just do float. Then again, the square brackets. But this time, instead of having empty square brackets, because right now we're initializing an empty variable. But we need to know how many we're gonna start with. It's it's an initial value, so you can write whatever and then you can expand it later if you like. With the majority of the time, we already know how many we're gonna use. So for a random walker, for instance, out, which is an example that we're gonna go through and tractor three. But you can start with 400 random walkers or 1000. It depends on the look you're going for. So right now, let's say I'm going to start with five physicians, Okay? I'm not gonna go through generating those positions, but I'm gonna show you how you would do it one by one. So right now we don't five. So for the 1st 1 we set that its position zero. So I'm gonna just do positions. And then I'm basically telling the program that at position zero, I want into store value of 200. Let's say and just keep in mind that these are single values, so they're actually not accident my values. I just call it positions this to make it easier, but it would make more sense if I call it maybe expositions. So I'm gonna just do that for now. And I'm gonna do the same thing for here, So it's going to be called expositions instead, Um, so we can substitute it over here, and then the 1st 1 I'm gonna give it a value of 200. Let's do another one. So this is going to be the exposition at position one in the array and let's give it any random value, and then I'm gonna do one and zero, so you can see a big change over here. Um, for the one of position to I'm gonna make it zero. You're gonna have to do this for three and four as well. That's why loops or better. Because then you can go through the whole thing and generate values there. So now I'm gonna use Exposition zero right here, and you're going to see that it's going to get the value 200 over here. Okay, The problem here is that I have no stroke, and so you can't see it because the default fill is actually white Syria, and you can see the circle over here. Okay, Now, let's do position to to see a big change. Now it's the exposition is actually at zero. No, I'm gonna play it. Actually see it. The exposition is actually add zero and The reason Circle is cut in half is because it's drawn from the center, so its center is actually at position. X add zero. This is all we need to know about data types in the next section. We're actually going through the other concepts and processing, such as, if conditional, is loops and functions and classes and objects. 15. Conditionals: conditional statements are a great way to control the flow of your coat. They're connected to the bullion data type because the condition evaluates to either true or false. If a condition evaluates to true the block of code relating to it runs. Otherwise, nothing happened or if to find the block of code associated with the false value runs. This is used in any example where you want to separate to functionalities based on a condition. Let's say I want to set the size of my shape based on the position on the X axis relating to the center line. If it's on the left side, I wanted to be small, and if it's on the right side, I wanted to be big. This is, however, not very realistic, because in real life we can have more than two conditions that can also be done in processing using two or more different conditions that can evaluate to true at a certain time of the programs life seeing the syntax will make more sense here. To write a conditional statement, you need the keyword if followed by two parentheses, continue the condition, for example, X is greater than 10. Then to curly braces surrounding the code you need to run will say size will be five of the variable X is actually greater than 10. Then the code will run. Otherwise, nothing will happen unless we define an else statement. The else statement runs, if the condition as false. Now, what happens if we need those multiple conditions? Well, we just added else. If with parentheses following Theis keyword, let's now make the condition X is greater than 30 and we'll make the size 10. Know if the X variable is greater than 10? We get the size of five. Otherwise of the axe is greater than 30 than the sizes. 10. And lastly, if none of these conditions were true, then the else block is run. You can have as many else if statements as you need after your first F statement, and you can always eliminate the final L statement if you don't have a use for it. This free information There's another way to write condition ALS using a switch statement. I'm not going to go into it because the F conditional on processing suffices, but feel free to check it out in the processing documentation page. Let's now head onto our conditional is example 16. Example: Conditionals: in this conditional example, we're gonna learn a little bit more about conditional. Then we learned in the explanation section just because there is a lot more than I want to talk about that needed a little bit more of an example in a demonstration. And I'm only going to demonstrate the f conditional just because switch is something that you can go into the documentation and understand once you learn all about the if conditional, mostly because I only use, if conditional, the majority of the time. Even if you go into other people's code, you're going to see if condition ALS more than you're going to see switch statements. In Python, for instance, there isn't even a switch statement. There's only and if conditional, um, but yeah, feel afraid to use it if you feel like it's better for you to read then and if conditional , once you understand how to use all of this to control the flow, whatever is going to show, I'm going to cover a few things that you're going to see a lot in people's coat, and I'm gonna talk about an example that I've used in billions and read rate on that because there are things that I'm gonna fix in that example. So let's start with that. In a previous example, I used bullion and I made it false. And then in here, I said, If gray scale equals true, then do something otherwise do something else. So this is what we learned about it. Condition ALS. Um, I didn't talk about the two equal signs before, um, in this class, but we're gonna talk about it inside of the demonstration because it's much easier to see it in action than to just see it in an explanation with some animation. Okay, so the majority of the time, you're not going to see, especially with people that are more experienced in programming, you're not going to see it. These two equal signs if the value that we're gonna check against is a 1,000,000,000 data types, so either true or false, the majority of the time, you're going to see the code like so if gray scale. So this basically means if grayscale equals true. Ah, but it's very redundant to write grayscale equals true, the code is gonna work. But you can also just do it this way, because if this the whole thing is true. So if grayscale equals true Onley work, the code inside of the condition will only run if grayscale equals two. True. So if this is true, then why trek? If it equals true once, it's because the value is already true. So this is gonna be runs so we don't have to say grayscale equals two true or whether it equals defaults. Now, if you want to check if it equals two falls, you can just do an exclamation point. An exclamation point means not so, if not grayscale meaning the opposite of what craze Gail is right now. So right now it's true. So here is going to be false. So if this was false, this is going to be true because it's saying if it's not the value in here, So if it's not false, then do something here. It is a little bit confusing in the beginning once you start learning this, but just understand that it's two values and you can easily remember this in the future. As you practice it the majority of the time, I don't news. Not unless I'm not going to use an else block. So if I don't use this. Maybe I'm gonna use not because I'm only trekking if it's not. And that's what I want a code to run and I don't care about any other thing, but yeah, usually I would just do if something is true. So just put the variable and it'll check for me if it's true or false by looking at the Valley. So right now, if Gray scale So it's looking for it to be true for this to run, but now it's false. So this is going to be false and it's not gonna run, Let's know instead of corn falls, check for values. So let's do two in cultures, and I'm gonna just call him X and Y. I'm gonna put them in two different lines just because I'm gonna give them value up there. So let's make this 10 for instance, and make this five because I don't know how can we check whether X is equal or greater than why, for instance, we're gonna use those comparison operators in order to track that? So it's exactly what we learned in math class. We're gonna do X. But instead of just writing a normal equal because in programming, one equal sign is an assignment time. So it's not gonna work for this expression. If we want a track of something is equal to something. So if I do this, then it's thinking as if I'm assigning why to the variable X and it's gonna give me the type mismatch that integers, which is X, doesn't match with bullion because inside of and if conditional, you have to have a bullion and in order to have a boolean, you're gonna have to equals in order to check if something is equal to something. Now, this is actually a conditional. So is X equal toe Why, it's not so it's gonna give me a false So whatever is in here is gonna run and the track we're gonna just print line community, correct. And then off I'm gonna do you wrong, and we're gonna see that it's wrong because X doesn't actually equal to five. So if I change this to 10 now, we're gonna get correct. And the reason why this is printing a lot is because the draw function is looping, so we can just stop that placing loop just for the sake of this demonstration. OK, now I'm going to return this to five, is gonna go back toe Ron. But this time I'm gonna check if it's not equal July. So I'm going to check if X is not equal toe. Why? By using the not operator in front of the equal Now he only need one equal because not is present. And so this is actually a condition that's going to produce a Boolean values or either true or false, And it's not equal, So it's gonna give us correct. And that is correct. Now there are other comparison operators, like Greater Than is gonna give me correct, because X is greater than we're gonna also do greater than or equal. And it's gonna be correct just because greater than or equal means either greater or equal . Any of those two will suffice. And then if I check also less than and there's also less than and equal to check less than is gonna give us wrong, because X is definitely not less than and then less than or equal. And it's gonna give me wrong because it's not. It's neither or, uh, if it's 10 then it's gonna give me correct just because one of these two is correct So X is equal toe. Why? It's not less than but it is equal. So it is going to give me correct. Now, as I'm talking, I said either or several times So I'm going to introduce another variable called Z, and that's to demonstrate different operators that we can use inside of conditional Zoe's. Well, I'm gonna give it an arbitrary value, So here, I'm going to give it for and I'm gonna check if X equals y. And then I'm gonna use this weird looking operator using two straight lines. So on my keyboard, you confined these with the backward slash. So with a shift in backwards slash, we're going to get one of these. So two of these is gonna give us or Okay, So what I'm saying right now is if x equals y. So if X equals the Grable, why or X is greater than Z, then run this so or is very forgiving. It's gonna look for just one true value. So if either of these conditions is true, this is gonna bread. Now, both of these conditions were true. But what if I do? X is less tansy. It's going to still give me correct because X equals y and this is true. And so I'm saying either that this condition is true or this condition is true. If either one of them is Drew, then give me correct. However, if I put in here and instead of or and these air to Amper Sands, this is gonna give me wrong. The reason for this is because the 1% or the and operator is much stricter. It's saying that I'm not gonna be true unless thes drew a true. So if this is true and this is true, then I'm going to be correct. So it's very strict. So if one of these two values is false, then the whole goat is not going to be run inside of that if conditions. So it's gonna go to the else walk If there is an else block immediately. Now, if I change this to true and I run, this is gonna give me correct, because now it's happy. Since this is true and the sister again, this might be confusing for some of you starting out. But as you practice it, you're going to see that it's common sense and that it's very easy to understand. OK, so now let's do an else. If now we're gonna change this example a little bit because correct and wrong are only two values. Don't want to make this a conditional of three blocks. So I'm gonna just say equals. And then if X is greater than why I'm gonna print greater or even better, X is greater. And then here, I'm going to just say, why is greater. So now if X is equal, Teoh, why we're gonna get equal, and then if X is greater, we're gonna get X is greater. And now, if why is greater, we're gonna get wise greater. So that's basically how using else with conditional It's very simple. Once you understand an f else block, you can understand else if easily, because it goes in between and you can have as many as you want you can also, instead of printing. I know I've introduced print Len before I actually talked about it, but you can also do text for all of these. So instead of printing to the council over here, you can just type it inside of your sketch I'm gonna put it in the middle of the screen before we run it. We're gonna have to change the fill toe black because the default feel is white and Texas gonna not gonna show because it takes from the pill value. And now it says, Why is greater and let's change y It says X is greater now and then finally, it's gonna say equal and well, that's all you need to know about. If condition als next, we'll talk about loops and what we can do with loops. 17. Loops: in this module will talk about my favorite concept and programming loops not to influence you to pick a favorite, but I believe a statement helping us avoid redundancy while adding to the artwork is amazing. Loops do wonders on their own, but they're also great. If combined with a raise, we can loop through an array by using the aeration variable in loops as the position of the arrays elements, allowing us to go through the whole array. We can use loops to draw a multitude of shapes, get access to every element in array or even act to an array for the syntax. There are two ways to write loops based on what you need. If you know how many rations you're going tohave than a four loop is perfect. However, if you're looking to loop until a condition is true, not knowing the exact number of repetitions than a while loop is the way to go. For a four loop, you need the four key word, followed by parentheses containing three components, an initialization, a condition and an incremental er. Whatever goes inside, the curly braces that comes after will repeat as many times as specified in the parentheses . The for loop variable can be an integer or afloat, but like we mentioned earlier, enters and float. Differ. Industries are meant for accounting. Therefore, if you're using the loops, toe access array elements, for example, than your initialized variables has to be of type in titters. Let's see now how to define a while loop. For that, you'll also need three important components on initialization. Then, on the next line, the keyword while followed by the parentheses containing the condition and finally, insider code block. After everything is run, we add the incremental er. One problem you may run into more often in while loops than in four loops is an infinite loop. This can crash your software. Infinite loops happen when a condition is never met, and that occurs when you have an incremental your variable or, if you right, the wrong condition. It's time for a mini example 18. Example: Loops: Now that we're gonna talk about loops, let's revisit or race. One of the examples we created in a raise is the positions, Ray. So I'm gonna recreate that if you want positions of float values, then we're gonna create an array called Float and the square brackets means array. And then I'm gonna call it expositions. I'm gonna give it five position. Some just can say your float, so initialize it with five empty cells. Now, last time we said, if you want to include values or generate values inside of expositions, weaken, just say expositions. And then 0123 and four So five valleys. But this doesn't make any sense. Because what if I have 100 values over here? I'm not gonna do from 0 to 100. I mean, from 0 to 5 is already a strict. Instead, I can just do a four lived inside of four loop. We said that we start with an initial Isar. Initially, there was basically a variable, so whatever variable usually create in outside of your functions over here, you can create over here the majority of the time we're going to see people using I and J. I use I for my first for loop. Sometimes if you nest for loops, then you use one I one j because you cannot nest with the same variable. So I'm going to just do and I eyes for index because it stores the index of for the for loop and then I'm gonna initialize it with zero. So this is my initial Isar, and then I have a condition. We already know how to read conditions from our last tractor and the majority of this high . And when using it with a raise, you're going to see the condition checking whether the index is less ban the rays length. Gonna just write that and then I'll explain I less than expositions. And I'm gonna use the property for a raise called length. And if you notice in between, I always use cynical and the reason why I used to me Coghlan's and I've used this throughout the program. A lot is to end a line of code. So if you don't and this line of code with a cynical and you're gonna get an error because your program won't know where to stern, where to end, So here I'm saying, OK, I'm done with this, so I'm gonna end it with a semicolon. So the same goes in here inside of four loops. I'm gonna end each section way the semicolon Because I wanted to trek for this alone and then for this alone and for the last section of love. And then I'm gonna increment before I incremental. When I explain this foreigner, the condition here is checking the I if it's less than the expositions that length. So now the length here is five. So it's checking if I is less than five. So as long as it's less than five, the increment value is gonna go up where the incremento is gonna make my eye over here, go up the value of I. So it's going to be from 0 to 1 to 2 to 3 to four until it reaches one less than five. So once it reaches one less than five, then it's going to stop. And then the incremental er I wrote in my explanation video I I plus plus if you remember from our integers and floats example, we incremental X like so. So this is an incremental er we implemented the old value of X by one, and we started inside of the old variable. Now this could be done in another way. It can be also done this way. So this is saying increments X by one and started inside of X. This is a shorthand. There's also minus minus, so it's actually decry Menting by one. And then, if you want to increment by different value, because that's something we also did inside of her integers and floats Example, which is like So So he did sweet. And this basically means the same thing. X incremental did by three and weaken do minuses well, and this is going to decry meant by three. So these air just short hands and makes your code much cleaner instead of writing this like so you can just read it like so it's much simpler. It's easier to understand, and it's nicer to look at in your code. So that's basically what I'm doing over here. I'm implementing by one. I can also do plus equal free so I can increment every three values. He can do this if you want to create a grid, I don't necessarily create a great this way. But I've seen people who have created grids by checking if it's if the eye is less than the width and then as they go the increments by the cells with eso, it's up to you how you want to use this. I usually increment by one, and then I do my calculations inside of my for loop. We're gonna just increment by one right now. And then I'm gonna close the parentheses and I'm gonna open my curly braces to write my coat inside here because now we're gonna do exactly what we did before using expositions zero and one and two and three. But instead I'm going to just do expositions and inside of the brackets, I'm going to put the index and then I'm gonna give it about you. So let's say I want to give it a random value, maybe from zero to tech. And let's also print expositions just to see the values inside of it. You can see that it gives you exactly what we did before when we assigned a value to the position at 01 Then 123 and four. So it's saying that now, inside of the expositions array at position zero. We have this random value at Position one. We have this value. So we have this floating barely three and four and so on, so we know it's working. But how is it really working? So a for Loop basically takes this index than checks if it's less than the expositions that length. So zero is definitely less than five because the length is the size of this array, and then it's going to increment by one. So now it's zero plus one. So now this values, actually one. Now in the next generation, it's going Teoh, check it against the condition again. No, it's 11 is still less than five, so it's going to increment and before it increments or every time in increments. Actually doing the calculations and here or running the block inside of a for loop in the first oration had the value of zero. So Exposition zero equal to random value from 0 to 10. And then when it became one, it was one over here. So expositions at position one is going to be another random value is I also did, let's say, 10 than all of them are gonna be 10. So they're all gonna be float values of 10 and noticed that there is a 100.0 over here Just because even though I entered an integer just because this is a float, all of these air gonna look like floats. So if I change this into an integer, then they're going to be in pictures. But now we cannot really input any Brandon values unless around them. So if I do 0 to 10 it's not gonna learn because it says type mismatch, since random returns a floating value. But if I round it and this is just a very simple mathematical equation that we used to use in school, we used to round numbers, so we know how to run them. So it's going to around the numbers for me. And then they became intercourse now, so it's gonna let me put it inside of anti drug. This is not very important right now, but only need to know about four loops is that you can use them to feed to raise values. OK, now, let's do the same exact example using a while loop, I'm gonna just leave the for loop right now. It's and I'm going to return this to you. Lived? No, I'm gonna comment this out. Okay, so, you know, in a while loop, we said that we're gonna have to have an initial Isar beforehand. So I'm gonna just create the initial Isar here. I'm gonna call it and I for index again and then going to write the while loop. So inside of the while loop, you only have the condition. And the condition for us over here is going to be again eyes less than the exposition stuff like and then inside of the block, I'm gonna do whatever I did inside the for loop. And then after that, I'm going to increments I So every time is going to look in, I over here is going to see the value is going to check whether it's less than the expositions that length the right and then it's going to do this if it's less so, if this is true, it's still less than five. Then it's going to do this and then it's going to increments. If you don't increment, this is going to be an infinite loop because this will always be zero. It will never go up to five. So the local stop so it'll run infinitely and that can break your program. It can freeze your computer. I don't know what happens. The majority of the time when that happened to me, I could just stop it using the stop button over here. So if it doesn't work, then just first quick processing and everything will be fine. But yet so just remember that you need the incremento inside of here and you need the condition. Teoh, at some point of the program, become false, so it stops. So, no, this is going to do exactly what the four looped it before and is going to give us a random value, a random floating value from 0 to 10 end positions from 0 to 4 inside of the array. So that's exactly the same thing as the for loop. I don't necessarily use a while loop with a raise just because, ah, for a while loop, it's better to use it with conditions that you don't know when are going to be met. Let's say you have random walker, and as soon as that random Walker moves from one side of the screens or one side of your canvas to another side of your campus. Then you wanted to stop. Maybe where you want it to want that circle to stop moving or stop coloring your screen there a while. Loop is great because since the movement is random, you don't know what it's going to cross that line. But if you want to generate positions, or if you want to do something where you know the amount of time or the amount of repetitions, then a four love is definitely what you need again. It depends on what designs you're creating. What are you looking for in generative art? And based on that, you're gonna choose whether you need a for loop or a while loop. Now that we talked about for a loops and repeating code efficiently next, you're gonna learn about functions and how to create reusable methods or usable blocks of code to avoid redundancy. 19. Functions: Now let's talk about avoiding redundancy in our coat. The most tedious task and programming is repeating the same lines of code whenever you need them. And if you later want a change of value, you have to change it in all those places every time you can avoid this whole mess by creating a function. Functions are blocks of reusable code that perform related tasks and sometimes even return a value that he can store in a variable for later use. I use functions for a text formatting, calculated numbers or making custom shapes. Let's say I want to create a smiley face or multiple smiley faces. This will require three circles, a large one for the face and two small ones for the eyes and, most importantly, an ark for the smile. I can put all of that inside a function, name it Smiley and call it a Zeman e times as I want. That's efficiency. Let's explore the syntax of a function with a much simpler example. I want a function that takes in a radius and returns a diameter will call this function diameter. Functions also start with a keyword like variables. The keyword, however, indicates the type of the return value. For our smiley example, the key word would be void, since it doesn't return anything. But for this diameter example, the return value will be afloat. Since our function takes in a value, we have to define a parameter. Let's call it radius and give it a type of floats. This is a simple calculation. A diameter is two times the radius weaken. Store this data in a float variable inside of function, then return it. But since it's a small example, will return the calculation directly. We use the return key word before a return. Values now to use dysfunction, we call it using its name followed by parentheses. Since this function records an input, we have to pass in an argument. I'll do a value of 10 for radius weaken. Store the return value in a variable, or we can use it directly in her coat. I think it's time for an example to understand this better 20. Example: Functions: okay, It's time for the functions. Example. As I explained in the explanation video, a function stores a block of code in a reasonable method that you can call anywhere throughout the program have been using the size and background function and these air functions that are native to processing. So there they've been created with processing already, so we don't need to recreate them. However, sometimes there are needs for functions or for you to create your own functions. In the example video, I talked about creating a smiley face and saving it inside of a function. Maybe we can recreate that example to see how it works. To create functions, we need the key words of the return type. So for a smiley example, we don't need to return anything I'm going to just use avoid, which means empty, so it doesn't necessarily return anything. And that's the key word that you use for that. As you can see over here, avoid is used, withdraw and set up because they don't return anything, and now I'll call it Smiley, and we have the parentheses where we can have parameters and then the curly braces where we can have the block of code that we want to run and inside of our smiley face. I'm not gonna go into the Ark function or the ark shape just because it's a little bit too complicated for this example. But I'm going to just create a yellow circle and two small circles, and I'm going to color them as well. So I'm going to give this a fellow of yellow, and it's getting to be in the center over screen, and I'm gonna give it a size of 200 this time. And then I'm going to create a different Phil for the two other circles, which are going to be the eyes I'm gonna give them a Phyllis Black. I'm going to create two different circles and I'm gonna put one of to 34 now and we'll see where that is positioned and we can fix it later, and they're gonna have a size of 20. So let's see where that one is. Okay, we're not gonna see anything. The reason for that is because we haven't called function, so we only defined it. This is a mistake that I've seen so many times teaching programming. Ah, lot of the students used to forget to call the function, and they expect their code to work. But what they need to do is call the function. I'm going to first stop the the draw function from looping. So I'm going to just use the no look function and then inside of the draw because they don't want it to draw a lot of circles on top of each other. On then, inside of the draw function, I'm going Teoh, call Smiley. So how you call a function is just by calling its name and then having to parentheses. Since we don't have any parameters over here, we won't need any arguments over here. I'm going to run it now we can see that it's very off. So the I shouldn't be over here. So I know that the centre 202 102 100 is here. And because I'm a visual person, it's much easier for me to see something in front of me just to understand the positioning of it. I can visualize it, but it can take more time for me. It's easier for me to just see it, so I'm going to move this up here, so we know it's 200 over here, so I just needed to be less than 200 the size is 200. So I know that the radius the size of the circle is 200. So I know that the radius is 100. So we know that I can move back maybe 30 pixels from 200 up 30 pixels. So it's going to be 170 for both, and it should work. Now I'm going to have another circle, and this time the why is going to be the same because they're going to be parallel to each other. But then the the other eyes going to mirror this I on the X axis. So it's going to be 2 30 this time. But why is going to be 170 now? We have two eyes. Great. So this is basically what a function is. Now you can create Aziz many smiley faces as you want inside of yours to crane, but with a problem. So the problem right now is that every smiley face is going to be at the same position. The reason for that is because we don't have parameters. So we're not calling this with different positioning. We can change that by adding parameters over here. So if I do float X and float why, This is basically how we create parameters. You just defined variables with no values, and then you use them in here, and this is going to give us an error over here in the call because it expects parameters. So we need to input arguments. And by the way, the majority of the time you're gonna hear people talk about parameters when they're defining and arguments when they're calling the function. Okay, now, we created our parameters, but we need to use them. So inside of this circle, instead of using 202 100 which are static values, I'm going to substitute them with the float values that I created or the parameters that are created. So I'm going to just do X and y know this is gonna work perfectly for the yellow circle. But how can I do it for the eyes? If you remember, I said from the middle position, I'm gonna move to the left 30 pixels and then up 30 pixels to create the first I So we're gonna do the same thing. So I know that whatever this position is, I know that the eyes giving to be 30 pixels less on the X axis and 30 pixels less on the Y axis. And then the other one is going to be 30 pixels more and 30 pixels less. Okay, so this is going to be X minus 30 and this is well, is going to be why minus 30. This is going to be wine minus 30. And this is mirror, so it's going to be X plus 30. And now we have to correct the error and add our arguments tonight. I want the 1st 1 to be a 202 100. So it's going to be the big circle is going to be at that position, which is going to be the center. But I want the other one to be on the 00 position. Cool. Now we have to smileys. Let's actually move this one so you can see the eyes that are working for both. So I'm gonna just do 100 in 100 and they might overlap. That's okay. Cool. Now we have to smiley faces, and they both have the eyes at the correct position. And now you can have as many smiles as he want. And now, knowing about loops, we can create many smileys by generating Brandon positioning for them, and you can create a whole page of smiley faces. And if you go to the documentation and check ah, the Ark shape and how it's created, you'll be able to understand that documentation better now because you know all about arguments and how they're actually used because you created your own function. No, let's create another function that returns about this time. So I'm gonna leave just the 100 pixels. Miley, you know, I only have this because I want to print something here that I'm returning from the other function there in creating. You know, let's create an ad function, which is the simplest function that you can create with the return value. Now, an ad function will add two numbers. It's going to be a very, very simple function. It's going, Teoh adds an accident. Why value whatever the user inputs or whatever you want and put inside of your program, and then it's going to return information of those two, it can be an intruder or float. It's up to you how you wanna create this function. I'm going to just create an integer because it's much simpler to deal with. So I'm going to make the return type. And so no, the keyword is avoid anymore because this is going to return something, and I'm going to say and and I'm gonna call it at and and the parentheses and then other brackets. Now, instead of having empty parameters or empty parentheses, I'm going to I'm going to give it an X Value. And White Alley. No, this is going to be a little angry just because this method must return a result of type interview and we still don't have a return value over here. As I said in my explanation video, I can either create a variable in here inside of that called some and let's create that first or it can return it directly. And since this is a small example, we're also going to return it directly. So I'm going to just do it ends. I'm gonna call it some, and then I'm gonna do X plus y. So whatever values inside of X and whatever values inside of why I want to. Some of those and then I can just return some. So now it's happy There are no errors anymore. And it's returning this son. I'm going to show you how this will work with this, and then I'm gonna change it to return the some directly. So let's actually do this inside of the texts function that we used before. And I'm gonna put this at Position 200. Whatever is in here and then I'm gonna call ad. You can give it whatever value you want. You just do 10 and five. And if I'm correct, attrited returned 15. Right? And it's returning the value. 15 grant Incremental text size a little bit just so you can see clearly what is written. Okay, so now it's 15. And let's see if I want to return the values directly. So I'm gonna just return this directly because there's no need to adds more variables to the memory when you don't need to. And if I run it, it's going to be 15. So we know that everything is working great. Now he can keep your coat clean by creating functions and calling them whenever you need them. 21. Classes & objects: classes and objects are the basis of object oriented programming perfect for when you want to create a template for a new object that doesn't exist by default. One of the most known examples is the vehicle class. Let's say we want to create a blueprint for creating vehicle objects. We can write a class called Vehicle and start thinking about what properties and actions all vehicles have. For instance, they all should have a starting position. They all move. They all have a type of engine and so on. This is great. We already have a template that we can customize based on the type of vehicle were creating . However, it makes more sense here to look at a more generative art related topic. Let's look at a random walker, and while we're at it, let's explore the syntax for making classes and objects. Every class starts with a class keyword, followed by a name, for example, a call it walker. Unlike functions, a class name is directly followed with curly braces as opposed to parentheses because they come later when creating the constructor. The constructor is the name of the class, followed by parentheses in which we can add parameters to allow input if needed. Now it's time for some properties and methods. A property is a variable in a method is a function, but the terminology is different because they belong to a class. So we already know how to create those. Just know that properties go before the constructor and methods go after now to create an instance of this class, we used the new class we created as we used data types for variables continuing with their Walker example. This is how our instance will look like. We can also create an array of objects if we add brackets after the Walker keyword, like so now to actually create the instance, we assigned this variable with the Walker type to the value of new walker. For this, the constructor is empty. But if we defined parameters, we have to pass in. Arguments like we did with functions and example will help us get more practice with classes and objects 22. Example: Classes & objects: this example is just gonna be me demonstrating how classes air used or how I personally use classes. I'm gonna create them in the same file because we'll talk about multiple files later, and I don't want incorporate way too many stuff that I haven't talked about yet. Okay, before I start going through the example I want to talk about why would use a class Sometimes, instead of just using the regular shapes or using an array or a for loop is a lesson. I want to create a circle on the page, but I also want to move it. So the whole program is all about animating those. Maybe it's a still image. In the end, I want to create by making those shapes move and drawing on the screen. Or maybe I just I want them to move because I want to share in the animation itself. So a circle, if I want to drive it, has an X and Y position, and it has size. But if I want to move it, the only way to do that is using variables and incremental the accent y based on whatever I want to do with. But now If I want to create an array of circles to move them across the screen, I don't necessarily have a method that would move them. I don't have a method that would, um, update the screen every time there was a movement or those shapes are moving. So I'm just going to create a classroom as the thought process makes. You know that. Okay. You need to create a class because there is no object already existing that has all of these features that you need because all of the data types that we talked about are actually objects that have classes. So the methods that are used with the string, for instance, are all defined inside of the string class. So you didn't do the same thing. So I'm gonna create a class gold circle, and we're gonna have properties four movement, and for size and even for color, let's start by reading the class, we're going to just call it circle. And we said that it doesn't have parentheses over here. A class has a constructor inside of it. It's kind of like the function of the class. So it it looks the same as a function, but without any keywords before that. So it's the same name and then the parentheses, and then inside it, you initialized variables that unique for some other languages. It's called in it because it's an initial Isar. So you initialize everything you need over here and before it. We said the properties go here, which is the same as variable differ created if you created them before all of the functions that we have. So I'm gonna just do float ex and why? And then I'm gonna also give them the size it can be. They can all have the same size, or they can have random sizes. It's up to you how we want to create them. This is just creating the template. The circle is going to be the template that we're going to create many circles out of. So this is basically the shape of the circle or how it's been a look or what kind of properties it's gonna half. And then I'm gonna also give it a color, so we'll just do random. I know we haven't introduced randomness, but this is what this is one of the things that I'm going to use over here just to show you how I would normally use it. I don't want this example to be an example, just to show you how classes are created without showing you exactly how I would use them. I want them to be realistic, even if I'm going to introduce something that I haven't talked to. Probably. Okay, so if you want it to make the user set the position the X on my position, all size or color, then you would have to assign parameters over here. So if I want it, let's say if I want the user to input the X and Y position, then I will have to say float and I will give it a different name. So I'm going to just do underscore acts, just associate it with X and then float. Why, you can call them X X Y. Why is just easier if it's different from this one? It's not confusing. And then you would assign them here. So this is the initial Isar. So I would say this X equals this X, so whatever the input here is going to be assigned two X and then I will do the same for why But right now I just want them to emerged from the center. So I'm going to just say 200. So I'm gonna just type 200 then lie is going to be 200 as well. And then I'm gonna give them all the same size for now. So it's going to be good pixels, and then this is just arbitrary. It's not important what size you put. It's up to you and then I'm going to do color. Let's actually make it just one color. For now, I'm going to just make it blue. After that, I'm going to write a method. So the main two methods that you will see a lot of generative artists use, including me, is the display and update method. You can call the update method move. It's up to you how you wanna call these methods. But this is the convention that you would see a lot. I'm just call the 1st 1 display and display is basically the draw method. But I called him. I call it display. Just because there is a draw method natively and then avoid up big is going to move the circles. So here you're going to draw whatever you want to draw. So whatever you want to display, you just write it here. I'm gonna give it a fill of color, and you could have just not used call over here are the variable color over here and just do fill directly. But I just wanted to put it here and here just to show you that you can add it as a property and you can even have to use your input. The color. Maybe they want to randomize the color. Maybe they won't have the same color. And then I'm going Teoh actually draw a circle. So the circle is going to have the exposition of the Y position and you guys okay, I'm gonna leave the update method MT. For now, and I'm gonna show you how this will look like. Okay, so you said that if we want to initialize or declare an object from the circle class, we're gonna call it as if it's the data type, just like strings and introduce and floats in all of these other data types, and then I'm going to just call it whatever. So I'm just going to call it sir and then I'm going to initialize them inside of this center function circle's gonna equal amused your cool, because now I'm creating a new instance of circle class. So now this holds an instance of the class? No. If I want to create another instance, I will just do Cirque two vehicles, new circle. And these two will have different settings if I initialize them with with arguments. If I ever have parameters here and initialize them, And if this has, like, has to emerge from the center and I made this emerge from the corner, then these were different objects. When I have to initialize to serve two over here is Well, okay, now I'm gonna just set the background so it doesn't dry because I wanted to just move again to White, And now I'm gonna call this Cirque, and I'm going to call its method to display. We're not gonna call update right now because it doesn't have anything. And even if I call, it's not gonna show me anything but display because it's implemented. It's going to show me the circle. No, this is how you would call methods and properties inside of your class so they are defined as variables and functions because they are the same. But because they belong to a class, you have to use dot notation to connects or to call them because they only belonged to the closets. And Cirque is an instance of that class. It can access all of the properties and methods using dot notation. So if I want to access X, since it's not private then or the value of acts that I can do this and I can set value to it, too, if I want to make it zero instead, I can do that. But right now we're only going to display. Okay, now we can play and you can see our circle. We can make it a little bit bigger, so I'm gonna make it 20 and then we can see our circle despite. And if I remove this, you can see that it's not there anymore. And this is just a way to common things, any Commons or anything that has double slashes before it. It doesn't work or doesn't show. And now it shows. Now let's actually with it. So do you Move it? I'm just gonna do X plus equal. I'm going to just do 1/2 half that pixel. So it's gonna move slowly because I only did have a pixel it each ring. And now if I want to move it, I have to call it. But you have to call the method that has the movement so served on update and it's now moving. You see that it's very similar to creating just circle with normal variables or normal floats of X and y as positions, and then changing that inside of the draw function and animating it. But if you wanted to create an array of those circles moving with random speeds, random sizes, you won't be able to do it unless you create a class. So now it looks very similar. But if we want to create an array of this, I'm gonna just do brackets to change it into an array, gonna call it Surks instead because I wanted to keep loyal, and then I'm going to initialize the array first. So we're not initializing the class were actually initializing the array this time at the beginning, I'm gonna just new Cirque circle and then I'm going to give it a size of 10. So let's say 1/2 10 circles. Okay. Now, to initialize each instance or to create each instance of the circle have to use a for loop . The reason for this is because if I want to initialize everyone now, this Cirque doesn't exist. Anyways, I'm gonna just call it Surks. And now it says that this doesn't match with an array. So I need to credit No right. To do this, you would have to do zero until nine just to make 10 circles. So the a good way to do this is using, uh, I'm going to just do a for loop and gonna given into because for a raise, we have to count. So we have to use integers and is going to start with zero. And then I have to be less than Surks Don't length because they only needed to go through the array until the length of that array. Or I could just do 10. It's the same thing and then, But if I ever expand this, it's better to use thumb the property from the array, then to change these two every time. And then I is going to be implemented for every aeration once and now to tap into every cell or every every element in the array. I'm gonna have to do I for the brackets. So the 1st 1 is going to be easier. The 2nd 1 is going to be one until features nine and then it stops. And now I'm gonna have to use a for loop is well for display and the update function in These are actually surks another in a race. I'm gonna have to and the brackets. Now, if I run this, we actually have 10 circles, but they're all on top of each other. So the power of this class now is that we can choose random positions random starting position for each one, and then they will all move the same step, which is half a pixel. So I'm gonna just change this into random position. I'm gonna make it a position from zero to 400 and then for this one as well, I'm gonna make it from 0 to 400. You don't need to know much about the random function right now, but just so you follow along with me, the random function takes a minimum value in a maximum value. So this is going to give me a number from 0 to 400. So any number from there, So it's gonna be and the reason why it chose for hundreds of because my canvas size is 400 by 400. So I wanted to go from zero, which is the left side of the canvas to 400 which is the right side of the canvas. And same goes for wife from top to bottom. And now, if a run does, we're going to see that we have plenty of circles in different positions moving all the same way. We can also render my as the step size. So let's say I want random value from 0.5 to 3, so they will have different speeds. Some will be very slow and some will be very fast. No, if I run it, you can see that they're moving in in a very random away. I think, however, is that you can see that each one of them is actually changing speed. The reason for that is because we're changing it in the update function inside of the draw functions, so every frame is actually getting a new random value. But you can change that to have each circle have when random SBI and sticks with it through the period of the whole program. Then you'll make to initialize it here because of the initialization of our circles. Objects is is here in the set up function, which runs only once. So I'm going to add another variable called step size, and I'm gonna get the same value, like get there. So 0.5 to 3, input this step size. Now, if I run this, each circle is gonna be assigned a random value from 0.5 to 3, and it will stick with it as they moved through the screen. You can see that some are very slow and some are very fast and already left the screen. We can also do lie, but this time, step size is going to be the same for accent in life. But it's going to be there are enough to make it a bit. Are random I can do. We can do a random value from negative 3 to 3 this way, even if, like adding and negative value will actually move in the opposite side. You can see that summer actually going this way and some are actually. And if you want to randomize it even further, you can create a step size for accident. Step size for why? So it will be a different value for each. So now we have circles moving around this creek. You can do a lot of cool stuff over here just using properties and methods thinks that you cannot do with whatever you have already in processing. So, yeah, you basically make them interact with each other just because they're your objects. So other objects they're created by processing cannot necessarily interact with each other , for instance, and making it your own allows you to create that. So that's pretty powerful. And I think if you perfect this, you can do anything, injure native art, anyone todo 23. System variables & methods: so far. We learned how to create everything from variables to classes. But there are some system variables and methods that we can use without needing to create them. The 1st 2 methods used every time I start a sketch are the size and the background methods , the size methods, that's the size of the canvas and the background methods. That's the canvases background color associated with the size function are the width and height variables that hold the values of the canvas size, those air helpful. When you want to divide your screen into a grid, for example, you won't have to make a wits variable. You just use the default next or two variables that are suitable for testing. Physicians are drawing sketches, and there are the Mouse X and mouse y variables, which started the life accent. Why position values of the mouse? Meaning as you move the mouse. If you print the values to the consul, you can see where they're at on the canvas. Speaking of printing to the consul, the Pentland method is incredibly useful for debugging your code. In other words, finding false in your program to fix them, we'll see how that works in the following example. Lastly, the mouse breast and keep rest events are great for when you're programme relies on the user's mouse or keyboard input. You can, for instance, start the animation when the mouse or keyboard repressed so the user don't miss anything. These are the few variables and methods I use the most, but there are more that you confined in documentation, so be sure to check that out. Now let's head onto processing to see how those work. 24. Example: System variables & methods: you've seen me used the size and background function over and over again in every example. So usually start this size method by giving it two arguments. The 1st 1 is the width, and the 2nd 1 is the height of the canvas. Throughout the examples, I've only used 404 100 but he can use whatever you want. I usually use a square canvas, however big or small, because I put my work a lot on Instagram, and that's the most suitable resolution for me. But you can do an HD resolution to put it in a movie like a 1920 by 10 80 accessibility or any other size that you want. But I'm going to stick with 400 by 400 for the whole course just to be consistent, and so you can see all of the work in the same size as for the background function. We talked about it when we talked about the color data type, so you just type backgrounds, and then you give it either one parameter for hex code or for a grayscale value or three parameters for R G and B. I'm going to just give it a 255. That's usually what I start with. Offer a background of white. And then once I established the color palette, I choose a different color to shoot my design. Okay, so throughout the program, I used 202 100 for X and y to position circle in the center this time not going to do that because it's better to use the width and height that is native to the program, since it's connected to the size method. Because every time I change this, these will change automatically if I used the width and height variables. But if I used 202 100 like I used to do before, it's not gonna work, because this is not gonna always be 400. And I'm not gonna change all of these values every time I change the size of my campus. So this time I'm gonna draw the circle at the center. But instead of putting 200 by 200 I'm going to use with divided by two and height divided by two that I'm gonna give it a size of 100 if we run this, we're going to see the circle in the center of the screen. Now, if I want to change this to, let's say, 200 by 200 then it's still gonna be in the center of the screen because now it's not just 200 by 200. Because if I were to leave this at 200 for ex and why it's gonna be over here because for a canvas of size 200 that's the bottom right corner. So it's much better to just do what's divided by two in height, Divided by two would stick its value from the first argument, and High takes its value from the second arguments of the size method. Now everything works perfectly. Let's go back, Teoh our previous canvas size and let's see our next variables. So this time, instead of drawing a static circle, I want toe move the circle, and I want to check the values off the X and Y position of that circle. So this time we're gonna draw the circle, but I'm going to use the mouse X and mouse y. We're gonna leave it the same size, and now if I run this, you're going to see a circle at the top left corner, but it's not actually there. It's just there because Mouse, X and mouse why will start at zero when you run the program, But as you move it, you're going to see that it's the circles are actually moving with the mouse. But the reason why this is drawing is because we don't have a background function side of the draw. So every time the circle is drying, it's drawing another one on top of the canvas and what's gone in it. So if I want to reset every frame, I'm going to just do background located before I'm gonna give it the same value that we started with. So 255 4 white. And now remove this. It's going to move and not just draw, because every time it's resetting with the background and then with circle that is in the center and then with a circle that has a mouse X and mouse. Wife for X in my position, know this is very helpful because now you can use the print line function to print the mouse X and mouse y position. This is gonna help you understand your campus better if you look at the values. So if a print line house X in my house, why we can see the value in the consul down here. So every time you move it so if I go into center, it's going to be 200 by 200. Well, almost 200 by 200. Ah, and then if I go to the top left corner is going to be zero a zero again, almost just because I'm getting off the screen before it reaches zero a zero. And then if I go over here, it's going to be almost 400 before 100 which is the width and height of our canvas. Now you can also print the width and height just to see the values of them, and you're gonna see that it's 404 100. And if I trained to this 2 200 you'll see that it changed to 200. You can print anything in here that is variable. Also note that there is another print function that is called the print function and not print Lynn. The difference between the two is that print is gonna print everything next to each other, so It's not going to give you a new line every time so you can see that it's going to print everything next to each other and there isn't going to be spaces between them. But the reason why there are species over here is because of this comma, and I'm gonna show you one of the values on me, and now you can see that there is no space. The only reason there was a space is because I'm asking print to output to values instead of one. So, yeah, I prefer the front line function, which is short for print line. So every time it prints, it will create a new line and then open the new value. So every time it'll prints the width and then it'll return to the new line and inside of the print one function. You can have one argument or multiple. Usually I use multiple and you can also do, and I have seen a lot of people do this in other programming languages. You can also do a string saying with and then it plus, so you're adding this value to the string because print Lynn are puts a string, so you can just add it like that. And now you concede says width and then plus the value in here. So the value is kind of like being put inside of the stream, and you can do another one called height and then the plus sign height. So you're contaminating two strings basically or any value to this string, and I can see width and height. And if you want a comma in between them, you'll have to add it. Either here or you can at it. After the width. She'll add another string, like so you can see that it has a car, you know. So yeah, that's basically called Strengthen Cat Nation so you can add keywords using strings just to understand what values you're looking for. Just in case you have a bigger program and you want this print land function to stick their until you've finished the program, it's easier if you know what values readies instead of going back and forth to the Pentland function. Okay, the next key words there are native to processing are the mouse pressed and keep rest. So these air called events because they happen when the user does something so Either the user presses the mouse or presses the keyboard. I usually use this with an f conditional. If I do f and then I do mouse pressed and in here I'm going to print line this. You're going to see that Only if the mouse's pressed this is going to be printed so you won't see this every frame inside of the draw function. You only see it if I click. So every time I click, the reason why you're seeing a lot is because if mouse press is actually out putting a value as long as you're pressing, we're gonna show you this, um, in a much easy to view example. So instead of printing, we're going to draw every time the mouth is pressed and I'm going to remove the background to function for now. Okay. And now you can see I drew a circle where it clicked with the mouse. And if I wanna keep pressing, it'll draw a bunch of circles. So this is great if you want to draw something, if you want to create a drawing application, you can create any shapes, and we're going to create an example doing that in the upcoming chapter. So this is a fun way to let the user explore the shapes that you have. You can also do. If Kee's press, then I want you to change the shape. Okay, So to show you keep rest, I'm gonna do something. I'm going to create a Boolean, and I'm gonna call it small and I'm gonna give it a value of false right now. And I'm gonna say if key press, I want small, equal, true. And then I'm gonna do another is conditional Checking if small is true. So it's small. Small is true that I'm gonna check of the mouse's pressed inside their or now knowing about the conditional That can say, if small and mouse Chris so we don't need to. Message of conditional is and we try to avoid nesting stuff as much as possible. We're gonna drive at 50 pixels instead of 100 pixels. Okay, so now if I press now, it's drawing a big circle. And if it press any of the keys, it's going to draw the small circle as well. The reason why it's drawing the big circle and this month circle on top of it is because I didn't put this inside of the false value, so I'm gonna just do else. But this is not gonna work right now because here it's checking if small and the mouse's depressed. So here else is gonna check of the mouse is impressed. So I either can do else if and you not small and his mouse pressed where I can dio a nesting example where I can say, if mouse's breast and then inside of Moses breast contract, if small and then else. But I think that's better just because it makes more sense and you're had to track it that way. So I'm gonna do that instead. Okay? And now any of the keys are pressed. It's going to be a small circle. So this is how you can use keep rest in your program. You can also have other uses. I'm just going to show you one of them carefully to be creative. I don't really have all the ideas. I just give you the keys, and you can be as creative as you want in creating your final project. Okay, so this is all I have today for a system variables and methods, Of course, you have to go and check the documentation for a lot more that you can use in processing and we'll see more examples and we'll see more uses for some of these and the upcoming chapter. 25. Events: for this module will talk about mass and keyboard events, which are pretty useful for different user inputs are there, then mouse and keyboard pressed. I like to use thes inputs for multiple purposes, but my most used ones are the key pressed or key released for saving images of my artwork. The differences subtle. The first does the action. As soon as the kee's press the second waits for the release of the key. The same goes for mouse click that mouse released. There are a bunch of other events in processing is Documentation Page, so head on there to check them out. We'll get two examples of events in the design output chapter when we export our designs. 26. Randomness: in this module discussed randomness. Using two functions random and noise random returns the value for a minimum set value to a maximum. However, noise returns afloat number from 0 to 1 that you can scale to fit your needs. Almost every artwork I create these randomness, and it's one of my favorite tools in generative art. If I want to randomize the color, for instance, I use the random function. However, if I want to randomize smooth movements, I used a noise function. Let's see an example to figure out the difference between the random function and the noise function. 27. Example: Randomness: okay for random and noise. I want to show you an example that Everton beforehand that I want to show you how these two functions differ. And I'm going to explain the example and go through it step by step. So the first thing I created are to float values X and Y position. And then, as always, I did a size in the background of white And then I started Why at high divided by two. Okay, so I have implemented X and it starts with zero, right? If also as it increments, it will be in commenting by one. If I comment this one right now and I put X instead over here, it's going to be a normal example where the X or where the circle is moving to the right. No, Instead of implementing X, I created float value gold are, and I gave it a random value from zero to width. So this is gonna give me an exposition from zero to what's so floating exposition from zero to it so it can be the middle. It can be on the right side. It can be on the left side. It could be any value and we can print line this values well so you can see it if you want . Before I apply it to the Ellipse. I'm going to just to show you the values. So it's gonna give me a value from zero to what? And if I apply this to the Ellipse instead of our instead of ex, I'm gonna put our and now because we don't have a background function is going to draw, okay? And you can't see it exactly because it's drawing on top of each other, so you don't know. It feels like there are a multitude of circles, although it's just one circle jumping from one position to another firm zero to the way I'm gonna show the background. But if you feel dizzy just looking at a circle going crazy, I would recommend not watching this section, um, or maybe slowing it down. But usually what is gonna happen is that circle is gonna go crazy from zero to wit at random physicians. So if I run this right now, you can see that the circle is going crazy. It's going from left to right at Brandon positions and we can slow down by changing the frame rate. So I'm going to put the frame rate at 12. You can see it's much slower. I'm gonna slow down even further. Make it three and you can see the circle jumping from one place to another. And if we remove the background, you can see that it's going to draw. But now it's trying it different positions. Now I'm gonna show the same example with noise. Okay, Now, seeing in the noise example, we have the same things. We have true floats, ex and why we have white height divided by two. And again if I increment X and put it over here is gonna move from left to right. And he wanted us to see it. Just a check. It's moving from left to right? Yeah, I'm removing X and, um, replacing it with n so and right now is taking a noise function. No noise returns the value from 0 to 1. But now to see it moving in a very smooth way, we're gonna have to zoom in into the noise wave. No noise. Being from 0 to 1 is extremely small. But if we just multiply it by with its not going to give us a very smooth movement just because it's a very long wait. So we have we wanted just get a chunk of it, so I'm gonna have to skillet by a value. So now I'm scaling it by 300 by dividing it by 300. And this way, I'm only getting a very small chunk of the wave, which is gonna give me a very smooth movement. And then I'm multiplying it by the wit to scale it up. So I'm zooming into it by dividing it by 300 the value in certain ways. And then I'm Skilling up that trunk of the wave by the wits. So now it's moving from zero to the wit, and I'm gonna have to increment extras because it's being used over here. So I needed to increment to get the values. No, If I run this one over here, you can see that the movement is very, very smooth as opposed to randomness. And if I actually removed the background to see it trying the drawing is much smoother and you can do a lot with the noise function. I'm gonna show you a few examples using noisy and randomness there have created beforehand just so he can see the same example using randomness and noise and how these two can differ . Okay, now that we have the random art project opened, I'm gonna just run it so you can see how random moves. It's very arbitrary. It's very crazy. And movement, it's still giving great results. But now, if you see the noise functioning, going to see a much different result cannot. This is the same example using noise and you can see that the movement is much smoother and it gives you nicer curves. So as you play around with the scale and the strength of the noise, you're gonna get different floated in the movement. You're gonna get even more rotations just because we're using the randomness and noise and deportation of these circles, and it's gonna give you a different result. And it's one of the reasons why I like noise. Much better for creating Pink Charlie Art instead of using the random function is because it gives you those soothe movements and it gives you brush strokes as opposed to the random function which gives you a very crazy looking at work. It can work if that's what you're going for. But usually when I used random, it's just to choose maybe different colors or to two different shapes like I used in my other projects. But usually when it comes to simulations or art and painting, it's better to use, then race function because it gives you much smoother route mints. For now, that's all that I'm going to talk about when it comes to the noise function and random function. But we're gonna deal with them later in the next chapter, and I'm going to make more classes on them in the future, especially the noise function, because there's a lot that you can do with that, and you can produce a very incredible artwork just using the noise function now on to the next module. 28. Structure: this last module in Chapter two is going to be all about organization instructor. This is very important to know, because a rookie mistake is to just write code in a very unorganized matter, because you're only making it difficult for yourself in the long run, For instance, comments are key to understanding why a line of code is written. I've struggled with this when I started up. Sometimes you know how the code functions, but he don't know why I used it. Here's an example. I have the same four loop with two different comments. The first tells me I'm mapping the Y values to the angle values, but the map function is already saying that. So here I'm only being repetitive. What I need to know is why I'm mapping the Y values to the angles. By the way, don't worry about the example of themselves. This is just a comments example. In this other example, I want to show you how declaring your variables and functions with descriptive names can help you understand what they do in the long run, rather than adding extra comments show. Note that sometimes if you need to annotate your code than Maybe the solution is to rename your variable or function on the left side. I had to add a comment to understand the coat when on the right side, the functions name explains it better. The point is to be descriptive enough to make sense of your code later on going back to our classes and objects. Example. We created the class at the bottom of her file, but that was a very small example. In regular projects, classes take up a trunk of your file, which means you'll scroll up and down to navigate between your class and your project. That's why multiple files are more practical. Usually I create a file for my main project and a file for my class. And if I have multiple classes that I separate them into their own files. Last but not least in this section will talk about naming conventions. I don't know if you have noticed, but whenever I declare the class, I started with a capital letter, and when I created variables or functions, I started with a small letter. This is called a naming convention. They help you mostly when you're working with teams or sharing your code online or to just keep our code consistent. I haven't showed an example with a multi word variable or function name. But if you need to do that, you'll have to use lower camel case. You start with a small letter for the first word, Then for every word after you'll have a capital letter. It's called that because it looks like a camel's back. That's pretty much it for the second chapter. I hope you learned a lot and found the examples helpful. Now it's time for some artistic tools. 29. Chapter 3: Design basics: it was fun learning about programming concepts. But how can we create art? We'll start with chief functions and transformation. Then we'll start implementing color into our examples. Once we're familiar with that, we can start diving into images and processing how they're loaded into the canvas and how we can manipulate them. Last, but not least, will tap into type a bit, learning how to use the string and charge data types and how to load text from a file well working examples together for every section to understand the concepts better. 30. Shape: Example 1: Let's start with the first example of the shape section will be creating something similar to this Since it's going to be random, it's not gonna exactly look like that, but we're going to go for the same look. For this example, one changed the size of each circle based on their positions on the X axis. Now that should help us start planning. So we need to know where those circles of positioned on the X axis and we need to know their sizes or we need to change their sizes. Therefore, I'm going to need two variables to float numbers because I wanted to be a little bit more precise than integer, since we're going to check for its position across two lines because we want three different sizes based on their positions on the X axis. So the first thing we need is the exposition, and then we need Sorry. No, I like to start my designs by turning off the stroke, and then I'm gonna change to fill to Black because the default is white. And let's start just with that for now and then inside of the draw function, I want to give the circles a random exposition and I'm gonna do from 0 to 400 since we're doing from zero. I don't need to write the zero because of the fault. Is starting from zero something you just do for 100. For now, it's exactly the same as writing 0 to 400 I'm going to draw my circle a Position X And then instead of creating another variable for why I'm gonna just directly do it over here. So I'm going to do height because I want it from zero to height. So I want all the circles to have a random positioning on the Y access from zero to hype, and then I'm going to give them the size variable because I want their size to change based on their position on the X axis before running it. Let's give it an initial size. I'm gonna just to 10 and if we run it, we can see that we have random circles on random positions. Now I want to section off my canvas into three sections. And if the circles exposition is on the left side, for instance, when the first section then I wanted to be of a certain size. And then if it's in the middle section, I want to be a certain size. And lastly, if it's on the left section, I wanted to be a different size. Now we can do this using an F conditional weaken section off. I can't this using one F one else f and then or else condemn. So I'm going to say if X is less than hundreds. So that's my first section. So now if X is less than 100 so it's in the if it's in the first section, I want the size to be a value 10 a. Leave it at that and then and then before I do the else. If I'm just gonna do in else and put the size to 30 let's see what happens. Now we can see everything that is in this section, which is less than 100 pixels, is going to be 10 and then everything else is going to be 30. I'm gonna also else's, and I'm going to check if X is greater than 100 because we already checked. If it's less than 100 I want to check if it's greater than 100 if X is less than 100 and I want the size 3 20 Now we have three sections the size of 10 size of 20 and size of 30. To make this more interesting, I'm going to add an Alfa value to the Phil. I'm gonna leave. It is black, but I'm gonna add an Alfa value of the 100. So from 0 to 5500 is quite nice. It's not that transparent and no, that pink. So it's gonna give us a good visual. So now when they overlap, they give me a different color. Now, to make this even more interesting, instead of giving a size of a static value, I'm gonna give it a random value. I want to give it a random daily from 1 to 10 for this one, um around him value from 11 to 20 for this one, and finally random value from 21 to 30. This way it will feel like it's more transitioning from one size to another. We created a design that you can add color to, that you can play around with even further. Maybe you want to make it diagonals or you want to play with the ex positioning in the UAE positioning instead of just X. Or maybe you want to make it vertical instead of horizontal like we did here. Um, yeah. Feel free, Teoh, Create on this one and me to play around with it to see what you can come up with. 31. Shape: Example 2: for the next example in the shape section, we are going to create something like this. Now this looks like a star and it can be added into bigger illustration, so let's see how we can create it. As always, I like to start. We have no stroke just because it gives me a softer look. I know a lot of people use stroke as well, and it can add a very cartoony element to your design. So feel free to do what you like to do. But for me, I like to start with no stroke and then at a stroke later. If I feel like the design needs OK for this, one will have to start with a rectangle. And I know I've only introduced circle before, maybe with stumbled upon a lips in the randomness section, but I haven't really talked about it. The Ellipse function is similar to the circle function. However, you can have a different with from the height, so we won't look like a circle. It will look basically like an ellipse, and you can make a circle out of it if you give it. It's the same width and height and the same goes for rectangle and square. So there is a different function called Square that will allow you to greatest square with less arguments. But I like to use the wreck too, just because I end up changing the wits from the height and it gives it a different look. And this is what we're going to do here is well, so I'm going to create the rectangle at position 00 and I'm going to give the width a random value. So I'm gonna give it a Random Valley from 10 to 300 because I wanted I wanna have a gap on each side and then I'm going Teoh, give it a height of 20 Now for on this is going to be at the same position at 00 And every time it's going, Teoh have a different with. But they're gonna have all the same height, so they're gonna look like different sized rectangles now, since we have no stroke and the default Phyllis White, I'm gonna have to change. The default fell to black. If I run this, it's going to look like it's one rectangle, but you can see that it's expanding. Its actually drawing on top of each other. So let's give it an Alfa value of 10. Now we can see it actually changing, and we can see that there are a multitude of rectangles on top of each other. Now I need to move this to the center. So if I do what's divided by two height divided by two, then they move it to the center. It's going to start from the center, but then it's going to expand to the right. The reason for that is because for rectangle, it's drying from the top left corner. But we wanted to draw from the central X circles, so I'm going to change the rectangle mode using the Rex mode function Teoh Center. This way it's going to draw from the center, and you can see it's a much nicer look. In order to make it look like a star, I'm going to have to rotate it. There is a rotate function that takes in a value and radiance. You can use degrees and then convert them using the radiance function. But I'm going to just directly use radiance and I'm going Teoh use random value from zero to two pi so two pi is equivalent to 316 degrees, so this is going to give me a full circle. However, if I run this, we're going to run into a problem because rotate is rotating around 00 point of the canvas , which is on the top left corner of the canvas. Now we can fix this by using translate to translate the whole canvas or the zeros. Your appointed the canvas to the middle of the canvas, which is what divided by two and height divided by two. So translate is going to move the whole screen or the hole's yours, your point to whatever you give it, so I'm gonna give it with Divided by two divided by two. Okay, and now it's working. It's actually rotating around the 00 point, which is moved to the center. But now I need the rectangles to be in the center. Since we moved zeros your point to the center, and now I can redraw the rectangles at 00 because now they're actually in the middle of the campus. Do 00 Now we have a rectangles rotating around the middle point of the canvas, and they have different widths to make this more like a star. I'm going to change the background toe black and the filter white. Now this gives it a very different look and it looks like a tunnel or a star emerging from the center, which can be added to any illustration and making it awesome. Next really use functions with shapes to create a different look. 32. Shape: Example 3: For her 1st 2 examples, we created an animated design, but this time we're going to create a static design using for loops and function. For this design, it created a row of beads, and then I used those to create my final look because this allows me to color every set of beads a different color. So it'll give it a different visual from drawing random circles on the screen with random colors. Because then I'm gonna have a different color for each circle. When here, I can have a different color for a set of shapes. So let's create one row of seats for this. We're gonna do exactly with it with a smiley face and the functions example. I'm going to create a function called Vidro, and here they want to use any parameters for now. But we're going to later implement that for now, are just going to create the row and then we'll see what we can do next to create a row of beads. I'm gonna use the for loop inside of my function. Now I can create three different Eclipsys, maybe using the alevis function, and let's do that first, just so we practice a little bit more with shapes, and then we'll implement the for loop and see how we can create the whole row of circles or Philip sees next to each other for the first lips. I'm going to put it at 00 and then I'm gonna give it a size. And I want this to be a variable because I'm gonna use the same size for all the circles. I'm gonna just create a local variable in here, and then I'm gonna use it for the size. First. I wanted to just do you know, look, because I want this to be static, So there's no need for an animation because it's only going to draw circles on top of each other ends. I'm going to change the filter zero and the background to 2 55 and then I'm going to call the dro over here. So if any of this right now, we can see that we have just one circle on the top left corner. Now let's ask the other circles for the next circle to be next to the first circle. We need to move it by the size of it. Now, a circle or in the lips are drawn from the center. And so if I want to move it next to the other one, I'm gonna have to move it by two radio I. So that basically means the size. Because theologians function takes in a width and hike. It doesn't take a radius. It takes the whole diameter. So I'll be using that for the X axis of the second circle and then on the Y axis is going to be on the same level. So is getting to be zero, and then they're going to have the same size. If I run this, we can see that they're next to each other after. Let's make this a little bit bigger so we can see, and then we can change it back. No. If I want to draw third circle, it's going to be size multiplied by two zero on the Y axis and then getting to have the same size. Now, every time I want to move a new circle, it's going to be size multiplied by the position of that, so the 1st 1 is going to be size multiplied by zero. The 2nd 1 is actually size multiplied by one and the 3rd 1 is size multiplied by two. So everything after is going to increments the multiplier. So here it 0123 The thing that could do that for us is a for loop, so we can start at zero, and then we can move it up. And we can use Thean decks for that for loop as a multiplier. So let's create that for and I equals zero eyes less than three and then right place device . So now only needs is just one ellipse function. And instead of this, I'm going to do size multiplied by and it should give us the same results. It gets us exam result Now what if I want Teoh change the count to any number? I can do that by adding in parameter and I'm gonna call it count. And then I was substituted over here. So now anything that I write in here is going to be drawn over here. So if I do five we're going to have five circles and if I wanted Teoh eight, then we'll have eight circles. Now our function is ready for our next four loop which is going in the draw function. Now this for a loop is going to draw a multitude of rows of beads. I'm gonna started with a regular loop, going from zero to any arbitrary number that you want. I'm going to start with 100 and in here can just put my function. Now if I run it, we're going to see that we have actually 100 rows of beads of eight beads. But they're on top feature there. And you can know that if they're on top of each other because you can see that the address of the circles are pixelated. If I change this to one so we can just have one, you can see that it's much smoother. And now you know that you only have one now, as opposed to what we did in the smiley example that we added an accent y position. I'm going to just use the translate function instead. So translate is going to move this to wherever I want on the screen. So basically, it's going to move the whole campus where that rove beads going to be instead of moving the rows of beads themselves. So I'm going to just give it a random position from zero. So we're not gonna write zero from zero to Wick and then for the y axis, we're going through the same but with heights. But now, if I run this, it's actually moving the same canvas to random positions because each of these rows of beads are being drawn on the same campus. So what I need to do is creates new canvases for each row feats. And to do that, you can use the push matrix in pop matrix functions. But these were going to do is create a new canvas or a new layer for that functional for that shape that you're creating. So now I'm creating a new layer, and then I'm translating it to a random position across the screen. And then I'm going Teoh, draw the ellipse, seize on that canvas, and then I'm going to close that layer. I want to just create one row feeds on that canvas, and then I want to close it Anyone? Then, in the second ah, iteration of the loop, I want to create a different layer, and I want to create a new function of Vidro and then I'm going to close that layer again. So that basically is allowing us toe have a multitude of layers instead of playing around with the positioning of each ellipse inside of the road beats. So that makes the calculation much easier. And now, if I run this, we're going to see that we have a lot. Now we can see anything because the size of the circles air huge. So I'm gonna just change it back to 10 and instead of having eight, could just do five to make it smaller so we can see now this is already interesting. If you add color to it, if you change, the capacity of each of the circles is going to give you a very, very interesting look. And if you actually made this random, so I'm going to give it a random value from 1 to 5, it can be just one circle or five circles on. This is going to be angry because it needs an integer and random returns afloat so we can just convert this into an end by putting it inside of an integer function or an in function . Now, this is converting the float to an integer. So it's going to agree with it, and it's going to work. So now if we do this, we can see that some are one summer three and summer five. Now to make it even more interesting, let's rotate those rows of beads, so I'm going to rotate each canvas by arranging value like we did before. Random, some 0 to 2 pi. There's also pie and quarter pie and half pie so you can play around with your values over here in the rotation, you can get different results, but I'm going to stick with two pi because I want a rotation from zero Teoh 3 60 Now you can see that it's much nicer. You can also create a random Phil for these circles. So over here inside of my for loop, going to make each collection of the ellipses that are created by B dro a different color. But I'm going to keep a grayscale until we reach the color module. So it's going to just be random, and I want it from 0 to 55 because the lowest value is zero and the highest value in the grace callus to 55 which is white. I'm going just to 2 55 and now every row of beads is going to have a different color. It's pretty cool. Even with the stroke, it's nice that you can do, you know, stroke and they will give you the exact same thing that I showed you in the beginning. 33. Shape: Example 4: time for one of my favorite examples and one of the examples I actually created when I first started generative art. And it's a canvas of random lines. In this fourth example of the shape module, we are going to look at Nested Loops. This is the first time that we're gonna tackle nested loops. But since you understand for loops pretty well by now, then you'll be able to understand nested for loops as well. For this example, we are going to create a grid and for a grid, we need a few components. So the first thing that we need to know about a great is how many cells we're gonna have. So how many rows and how many calls? This is where our four loops come in. So let's actually start with the for loop before anything I'm going to just okay, stop the looping of the program because I want this to be a static design. Let's start with a nested for loops first so we can figure out what we need in terms of variables for the 1st 4 Loop is going to be our normal loop, and we're gonna call the initialize er I and that is going to be less than 10. So I'll make it 10 rows. Let's draw a rectangle first so you can see the grid visually. And then we can add lines after we're going to do what we did with the Rove beads in the previous example I'm going to do wrecked at position, size multiplied by I and then the white is going to be a zero because we still haven't implemented the Rose actually creating the columns first. So we're going horizontally on the axe axis. So I'm gonna leave the Y at zero, and then I'm going to say, size in size for the width and height. So the first thing that we need to create is the size variable. But now, instead of actually giving it static size, I'm going to have to calculate the size by dividing the width by 10. So we cannot really access without here. So I'm going to just do float size over here and then initialize it over here after we set the size of the canvas. So I'm going to just do size and then going to do what's divided by 10 which is the number of columns over here. And now if we run this, we can see that we have a row and 10 columns. So if you count it, it's actually time. Cool. Now we can nest so we can create the other rose for the owner of a for loop. I'm going to create a different initial wiser. And this time I'm gonna call it Jay. It's up to you what you want to call it, But you can call these accent why? It's going to be fine, but I'm going just to go with I N J. Because that's what I'm used to days also less than 10 because I want to create 10 rows since we have a square canvas and then I'm going to include Minjae by one. Now a rectangle is actually going inside of the nested for loops. And now here we have size multiplied by I for each column. I'm gonna do the same thing, but this time I'm going to multiply it by Dre. So it's going to go from top to bottom, and if I run this, we're gonna have a full grid. So that's basically how we create a grid. It's pretty simple now, Let's creator lines inside of the great Now in the design. If you look back at it, you're going to see that we have lions of different rotations. So we have four different rotations. We have one that is vertical. We have another one that is horizontal and we have to die. Are you know, one going from left to right and the other one is going from right to left. We're going to create all of these and then after we see them and after we understand how we created them, I'm going to create an F conditional to create a randomized rotation for the lines. Let's create the first line. So a lion function takes in two expositions and two y position, a starting exposition and ending exposition and then a starting Why position and ending? Why position? So it's basically connecting to different positions on the canvas. Now, in order to make this easier for us, I'm going to store the positioning over here inside of variables. So I'm going to call it position X. This is going to be sorry is multiplied by I, and then the other one going to the position. Why is going to be size multiply by Dre. And now I can use them over here. And if I run this, we're going to see that it's same exactly. Now let's create thieve. Vertical line first. Now that we know rectangles are created from the top left corner. We know that position. Accent position. Why is on the top left corner of each circle. So if I want to draw a vertical line, I'm gonna have to go from physician Axinn. Why the first position x and y of each circle two Position X, because it's not moving on the X axis, but then to position why, plus the size of the rectangle. So its position X, because we're not living on the X axis and then position why, plus the size. Now, if I run it, we're not gonna see anything because the lions are covered by the rectangles. So I can either remove the rectangles and we can see that the lines are actually drawn or I can increase this stroke Weights four lines, 25 But now, since this is a for loop, it's going to increase the stroke rate for the first line. But then every rectangle after inside of the loop when these are one is going to be also stroke way to five. So I'm going to change stroke lead over here to one. So now the rectangles, we're gonna have a stroke weight of one. And the lines are going to have a stroke weight of five, so you can see the lines are actually drawn. Now, we can't see the beginning and the ending of each line. But if I said minus 10 then we can see that they're actually different lines and not one big line. Okay, I'm gonna comment this out, and I'm gonna draw the horizontal line up. So the horizontal line is going to be the opposite of the vertical line. So instead of going from position X and position, wide position, accent, position y plus size, it's going to go from position. Accent position. Why? But this time, position why is going to be the same. But Position X is going to be added to the size. So look, due position X position. Why? So we're moving from the top left corner of each rectangle, and then we're moving on the X axis. So I'm going Position X plus size. Let's do minus 10 just to see it standing and then position. Why I run this. We can see that they are in fact, horizontal lines. The firm of this. We can see that they're perfectly liked. Now let's create our Dagon alliance. So the first diagonal line is going to go from the top left corner to the bottom right corner, so the top left corner is still position X and position. Why? And then the bottom right corner is basically the width and height of each square or each cell of the great. So it's going to be positioned X plus size position. Why plus size Because we're moving from the position. Accent wives eat rectangle to the width and height of a practical. Now I can see that we have them over here. If again, if I do minus 10 for each, we can see that they're actually individual lines. No, for the final Daniel line, we're moving from the top right corner to the bottom left corner. So the top right corner we already created when we created the horizontal lines, which is going to be moving on the X axis, so it's going to be this one. So position X starting position of thes diagonal lines is going to be position X plus the size. And then we're not moving on the Y access. So it's guns to be position. Why? For the starting position, and then we're moving this way. So the bottom left corner is going to be moving on the Y access. So what we did over here and keeping the X axis as its So we're doing position acts because we're keeping it or not moving on that access. But we're moving on the Y access. It's not that complicated if you bid relies it. But for now, just practice it with me, and then you'll be able to understand it on your own. And now we have lines on the opposite side. Okay, now that we have our four different lines, if I actually uncommon all of these, we can see a pretty cool design as well. But I'm not going for that. So we're not going to keep this? Is that I'm going todo a small probability example. Using the random suction l create flowed. I'm gonna call it our for random and then in here I'm going Teoh get a random value from 0 to 1, so it's going to give me a floating valley from 0 to 1, which means we contract for equal probability to create those lines. So it's going to be 25% chance for each of these lines to appear for this to happen. I'm going to do if our is less than or equal 24.25 was just 25%. You can also do, Ah, hundreds and then do 25 over here if that makes it easier for you to understand. But I like to go with one, and I'm gonna show you a different way to do this as well. So if our is lesser equal 25%. So there was a 25% trans of this line to appear, and if I run this right now, you can see that it's actually Hedden at some points. So over here there's no lion here. There is a vertical line. Let's actually do one of theme diagonal lines because it's much simpler to see. You can see that some of them are actually hidden, so there's actually 25% of one of these diagonal line step here. Okay, I'm gonna keep the 1st 1 So we're organized and we don't forget anything. And then for the 2nd 1 I'm gonna do else. If so, we're done with 0 to 25%. Now, we're going to go from 250.26 or anything greater than 0.25 to 50 for the second quarter. So we already checked for less than or equal. I'm going to only check for a greater than because it's going to clash if I do or equal here as well, since I'm using the same number and our is my standard equal 50%. So now, if it's greater than 25% in less than 50% it means still 25% trans. Then it's going to be this line, and then I'm going to do it. Else F R is greater than 50% and our is less than or equal 75%. So it's another 25% chance, and finally else it's going to be the final one. So now I can see that we have a very fun looking design, and if I remove the rectangle, we can see that we have a great design. Now I want to fix one thing because this is a look, but what I created is a little bit different now. If I bring back the rectangles, you're gonna find that the horizontal lines and vertical lines are not in the center of each rectangle there on the edge. So to make this look like the example actually created, I want to move each one of these horizontal and vertical lines to the center off the rectangle. Because, you see, the diagonal lines are actually moving through the center. So it would be nice if the vertical lines and the horizontal lines also move through the center. So to move each of these vertical lines or so horizontal lines, we're gonna have to move them by the size divided by two. So move them by half of the rectangle size. Okay, So if we look at this one, for instance, if you want to move this from Position X and position why of this rectangle, which is a top left corner, Teoh this site, Then we're gonna have to add size divided by two to this position X. And then we also want to move the ending exposition by size, divided by two. So if I go over here, I do plus size divided by two. And for the ending exposition as well and you run it, we can see now that the vertical lines are actually in the center of each rectangle. Let's do the same for the horizontal lines, which are moving on the white access. So we're actually moving each one of these horizontal lines to here. So the why is getting down by size divided by two. So I'm going to do beginning position, position Why, plus sighs divided by two and the ending. Why position to add to it? Size divided by two. So if I go over here position, why starting position is going to be at position. Why plus sized divided by two and then this one as well. The ending position is going to move to the middle of directing, and now it's closer to what we had in the beginning. But since this is random, will not have the same example every time. And if I removed the rectangle now, we can see that it's much nicer. We can also change the background well trained the stroke to white to make her first example. If you want the same design over and over again, you can add to random seeds. You can add any random number over here. Just know that inside of the random seed, every time you put zero is going to be the same exact result. And now if I run this, we're gonna have a random design. But now, if you keep your eye on a section of the design to see that it's going to be the same one over and over again. Although we have a random number over here, it's keeping the same design because you have a random seat for it. So you're saying that I want this design every time. So if you want maybe the design random seat 10 and it's going to be a different design. But if you want to go back to the design that you liked a grand, um, zero, then you can easily go back to it. I like Teoh actually create a random number for this random seed and then print it so I can just run it and see all the designs and then the one I like I just save the number that is printed in the Consul and keep it aside. And then when I want to actually print the design or do something with the design, then I just go back to that random seat. So this is a good way for you. If you're ever commissioned to create a design, to go back to your original design that you want. Okay, there is potentially a different variable that we can create, which is the count or the number of columns and rows. So I'm gonna discreet that so we can see the design pain a different size of rows and columns. I will have the same one for the accent y. So I'll start with 10. And then I'll substituted over here, and then we'll see that we have the same design, especially because we have random seat over here as well. And I'm gonna keep it just so we can see the same design with the same random See, No, if you make this 50 the design is going to change is because the input values are changed. This loop is actually going around 50 times, but the size of each cell is still divided by 10. So it's still 10. Sell 10 rows in turn columns. So I have to substitute this with counts as well. Now you can see that it's very dense. So you either change the stroke, wait to maybe two, or you can change the campus size. Or you can change this maybe 20. So, yeah, play around with it and see what he can create out of it. Now, I told you that I'm going to show you a different example using random to give different probabilities without actually doing percentage, because I'm gonna comment all of this out, and then I'm going to create another random function. But this time I'm actually going to call him and and I'm going to cast it into an integer so you can use the interviewer function to wrap the random around it, to change it into an integer to convert the float into an integer. Or you can just cast it into interest so you can just do parentheses and inside of it integer before the value that you want to cast it into where an inter. So you're basically still converting, and then I'm going to do for because I have. I wanna have four different rotations for the lines. Now, what this is returning is a value from 0 to 3. So it's returning 0123 which are four values was because it's actually flooring. The values were only getting a value from 0 to 3. And if they print this, we're gonna see that we have 01 and then we should have to you in three. But we'll never have four because the numbers air floored. So the rounded down okay, we can use this now in, if conditional. So, Aiken Dio, if are, is equal to zero. I'm gonna do one thing and then all served r equals one, but also are equals two. And lastly, you can either do else if r equals three or because we know that there are only four values . I can just feel else because I know that the fourth values always going to be three, and then you can put all of your line functions over here. So let's do that and I'm gonna go back to 10 so we can see designed better. And if I run this right now, it's the same one and I'm going to uncommon to stroke. Wait. And we have the same exact design that we had before. So you can either choose percentage. And for this one, it's always going to be an equal probability. Unless you say if r equals 011 that I want this line. If R equals 12 maybe you wanna have a trances and then you give three trances for this to appear. And then, ah, third of the Trans is for this step your and Kurt. For this and them, the rest will have the third. So it's up to you what you want to use, but I'm gonna give you both of the options and feel free. Teoh Just the one that is easy used for You are the one that makes more sense for you now on to the next example to learn more about shape functions 34. Shape: Example 5: for this next example. We're learning about the point function, which is another shape function, and we're going to demonstrate classes as well. So we're going to create this random walker. So we're going back to animated design this time before I create the class, I want to create what the class is going to do. Okay, so we're going to reiterate on what we did and the introduce and floats example to start work an ax in my position and then, inside of the draw functions, I'm going to drop points instead of an ellipse or a circle. And the point takes only two arguments, and you can see it over here expects parameters like float and float. But there is going to the accent y and then I'm going to use X by a random value, some negative sweet to three, because I wanted to go back and forth, and then I'm going to do the same thing for why now, if I run this, we'll see a random walker moving, but it's very small, so let's increase the stroke size because point only has a stroke. It doesn't have any Phil, so I'm going to just do stroke Wait of three. I'm going to start Accent. Why? And the center of the screen. So we concede her So now I can see a random locker. Now, this is already cool, but we want to create an array of this. We don't have a data type called point, so we can create an array out of it to create a multitude of random walkers. So we have to create that data type in order to create that we are going to create a class instead of creating the clause in the same file like we did before. I'm going to just create a new tap since we learned about multiple files and this is what I do. Usually you can call the class points or you can call it Walker. I'm going to call it Walker because we're actually creating a walker and then for the class , I'm going to just call her, walk her, and we're going to do exactly what we did over here. But now we're going to put it inside of the class. So we initialized an accent y position, so I'm going to do that. Would be here is well, and then inside of the constructor. I actually want to input the value. I don't want it. Teoh, just be over here. Although I can. But I'm gonna just do float, underscore X for a different, very bony and float Underscore. Why? So we don't confuse yourselves. Then I'm going to say X equals underscore X. So whatever I input over here. When I called the class later, I want to put inside of this native X to the class and then the same for why and now what I did exactly over here displaying it with stroke weight and the point over here I'm going to do inside of my explain function. Feel free to call this function whatever you want. But I usually go with this by I'm going to take the stroke. Wait. And I'm going to do point at X and y as well. But this time the X and Y is actually taken from the local properties and not from outside . No, have an update, function or remove function. And in here I'm going Teoh increment. The accent y values. So that's my movement. So I'm going to put it inside of the update. And now I will remove all of this and will recreate it, using Walker to know that I have a locker I'm gonna just call it will be here as a data type. And because my walker is actually point, I'm going to just call it No. Inside of the set of function, I'm going to initialize my point. Walker. We said Teoh create an instance. We can just call point and say new walker. Now we have arguments. So again tapped, initialize it. I'm gonna finish wise it in the center. I'm going to say what Divided by two divided by two. So this is my initial value for X and Y inside of my walker. So this is going to be with divine Erbitux. This is high divided by two. So this is basically where this is going to start, and then I'm going to increment for every frame. So I'm going to have to call points over here, so I'm going to display it like we did before. We actually draw the point, and then we're going tol feed it solely after moved the point. So I'm basically calling all of this where I called the display function and I'm calling all of this where I called the update function. And now if I run, it should do the same exact thing. So it's still walking randomly across the screen, starting from with divided by two and hard divided by two. So the center of my canvas No, let's create an array of points. I'm going to create an array. And now I'm gonna change this two points. And before I can initialize my instances, I have to initialize my array. I'm going to call it Neil Walker, and then you start with 100. No, inside A for loop. I'll go from zero to the length of points. It is 100 and I'm going Teoh, create an instance for each point in the array. And then I'll do the same thing when I call it. No. If I run it, I have a lot of random lockers now to make it even more interesting, I'm going to make the stroke color a faded black. So I'm going to change the transparency, too. Maybe 100. What's Trey 100? For now, it's much nicer. And now, if I do even 10 it's more blurry, and it looks more like a painting than just random points moving across the screen. And if you want to see it not trying. So if you I want to see those points moving, you can just reset the background over here and maybe removed the transparency so you can see it. So this is a cool simulation that maybe you can change the randomness or use noise to create a flock. And that's something that's an example that you can see in one of the references that I'm gonna talk about later, which is the nature of code book by Daniel Shipman. Okay, let's go back to you, for example. I'm going to actually make this 30 and then I mean to prove the background. Great. Now I can do more with this. Of course, you can give them random starting positions. So since you have this inside of a for loop, you can substitute this with a random X and Y position, and so each one will start at a different random position. That could also give it a different look. In my opinion, this is the biggest step. Once you reach creating your own classes, you already opened a lot of doors for yourself, and you can create a lot of different designs just with classes alone. So you have feel free to reiterate on this to create your final project now on to the next shape example. 35. Shape: Example 6: for this example, we're going to create a custom shape. So we learned all about creating our own classes, but we used the same shapes that are native to processing. This time, we're going to create our own shapes using vergis ease. Now, to create a custom shape. There is a class called P shape and processing and P shape starts this way. So you create the class and then you give it a name just like you did with any data type. So I'm just gonna call it shape, and then you initialize it by calling your variable name and calling the function create shapes, create shape, creates a compartment for your shape. It's going to encompass everything that you're going to create, and then to actually start drawing your shades, they're going to say shape and then begin faith, and you're gonna end it with shape dot and and in between begin shape and and shape, you're going to try or design, and even your fill and stroke are gonna go in here. So let's start with that shape dot Phil going to make me feel black for now. And then we're gonna start using Burgess ease. So over Theses are the dots that you put on your canvas. That processing ends up drawing a line in between. So if I draw the first verdicts at position 00 and then I draw the 2nd 1 at width and height and then run it, we're not going to see anything because we have to drive on the screen. So now we're creating this inside of the compartment shape, but we haven't actually drawn it. So to drive, taken just to use the shape function and then put shape inside of it and then put the starting position. So I'm gonna do the starting position at 00 because our line is going to expand from the 0.2 the width and height. So I'm basically positioning the bigger shape or the rectangle where the shape is going to go inside of it at 00 and I can see the line actually going from stop left corner to the bottom right corner. But this is the shape that we can establish using the line function. So let's create a shape that is a native to process. I'm going to create a bow. You can just copy and paste the exact numbers that I'm writing over here, and I'm going to try to explain what I'm doing. So I'm going to start at 00 because then with the shape function, it can move the shape to any position I want. And let's make this actually mouse X and mouse. All right, so you can see the shape moving. But then most X and most, why only work inside of the draw function? And because I don't want anything to draw, I'm going to leave that the background two white every time. Okay, so if I actually go back to with in height, I can move my shape so I could move the corner of my rectangle where my shape is. No, let's actually start our bow shape. So in order to make our bow shape, I'm going to start at 00 in the campus, and then I'm going to move to the right 30 pixels and down 30 pixels that will create a diagonal line. And if I run this, you can see that I have a small Daniel life. So this is the first line of our boat, and I'm going to just stop this at 00 for now, before we can move it. So you can so I can demonstrate on this there it concedes at 30 the 1st 1 in said 00 and then the 2nd 1 is at 30 and 30. Now I want to go back up to create the other line of my bow. In order to do that, I'm gonna have to move 30 pixels to here and then go back to zero in the white access. So from here to here, it's 30. And then I want to move 30 again to give it the same spacing. So I'm gonna have to go to 60. So it's going to be 60 from the left and zero, So we're going to go up here. So this is 60 and zero. Now you can see that we moved down 30 and then we moved to look to the right 30. And now we're moving back up to zero and to the right by 30 which means it's 60 from the utmost left. Now I want to go down over here to draw the right line off the boat. Now this, we know, is sturdy. It means I want to go down another 30 which means it's 60 and then I want from the X access from the zero point I want to 60 over here. So I'm gonna keep the X axis where it is right now, so it's going to be 60 but then I'm going to go down 60. So that's 60 60. Now, let's run this first before we actually see. Now the fill is actually doing the right direction, because before it thought, I want to go up And so the field was up here. But now that we're going down, it knows that this is where the shape is going. Okay, Now I want to move back here, authority and then up 30. So it's going to be back at 30 30. So now appointed, actually here. Now I'm gonna go back 20 on the X axis and down 60 pixels. Now we have a bullshit. And if I actually went back to most accent knows why you can see my bow moving so I can see that it's actually complete now to draw on the screen. I'm going to remove the background because we are creating a drawing example for this. And now I can draw. Lots of lots of boats were going to change the transparency for this to let's say 50. So now if I draw, I actually see it. No, If you notice over here, you can see that each bow have a missing stroke on the left side. Now, the reason for this is because we haven't closed or shape. We can either close it using going back to 00 with the end, or we can just do close over here and it'll do the job for us. It will go to the first point and close the shape. So now you can see that we actually have the line on the left. So it's working now to make this even more interesting. I'm going to flip the colors, so I'm going to meet the back ground zero and I'm going to make the Phil 2 55 I'm going to add a stroke of white, never run this. We're going to have a drawing program now. Every time I'm going to run this, we're going to see this. Bo over here is going to be very opaque because it's before we're moving the mouse It's actually drawing lots and lots of bows on top of each other because our program is actually at a frame rate of 60 frames per second, So that's quite fast. So it's drawing lots and lots of shapes before we move the Mouse X. And that's why in a second he wanted to change that. I'm going to first move this into a function to clean it up. I'm going to call it Bo, and I'm going to use all of this inside of my bow function. Okay, I'm going to call it over here because we actually created the shape over here. So whatever is in here is going toe act physic. It's here and I'm drawing. So now it's the same program as we had before. But this time, instead of just doing this because if this opaque Bo that is ruining our design, I'll only draw the shapes If the mouse is pressed so it's not pressed, I want to draw the fate. And now we don't have this bo over here and now every time I actually click, we're going to draw. But then I'm gonna have Teoh run the program over and over in order to get the design that I like. So let's say I want to draw a blow out of bows and this is not looking nice for me because it's going down and I wanted to be more in the center, so I'm going to use the keep pressed event. We talked about this before, but we never really used in an example. Whenever we use keep rest, we have to check for what keys, because then any key that you click is going toe work. Let's start with any key and then we'll specify. Now I want to reset the background. Every time a case pressed, I'm going to draw the background and now I'm going to draw my bow. It's not looking nice. Some gun. Just click any key and it's going to work now. What if I just want one key to work with this Now I'm clicking this space far this time. This time I'm actually clicking de Next time I'm actually clicking T. That's not practical, especially if you want to use multiple keys for different functions. That's why I'm going to only use the space bar to remove or to reset the background. But the way you could do this is by using and if conditional, and then there is a native variable inside of processing called Key. So this has any value of the key. So if you print this, you're gonna get the value of the key that you're clicking and then I'm going to track of its equal to space, and then I'm going to reset the background. So now if I click number three, it's not gonna happen, is if I click the letter asks. Not gonna happen, But if it like this face bar, it's going to clear. And now maybe I'm happy with this design. I can use a different key like s, for instance, to save my design, but we're gonna talk about saving in tractor. For now, we've created a design that wanted to create. I know using vortices and using a shape function to draw on the screen without exactly knowing where things are is a little bit difficult. But we're going Teoh later and the type module. Learn more about importing your designs from illustrator or from any vector software that can export in SVG. For now, we're done with the shape module of the design basic section. In just six examples, we learned how to create a variety of shapes so you can create your own shapes. You can create a line circles Lipsky's those alone can create. This alone can create a tremendous amount of designs, and it can't wait to see you use any of these in your final projects. Next, we're going to talk more about color and design. 36. Color: Example 1: In this first color example, we're going to talk about RGB versus it crispy. It will end up creating this design. We'll see the same design in RGB, and then we'll see the design in interest. Bmo. So these air to color modes rgb stand for red, green and blue, as we learned. But then there's a different color mode that we haven't talked about yet, and it's called Address be for hue, saturation and balance. So basically, he goes through the array of colors, and then saturation is how saturated that color is. So if there is no saturation than it's going to be grayscale, if there is high saturation, it's going to be the most saturation of that color. But then, for brightness, it's as if you were adding white and black to your design. So the more black you add, which is lower the value of the brightness it's going, the color is going to be darker. And then the more white you add, or the bigger value the brightness as then you're gonna get a brighter color, which has a little bit more light. Let's first create the design in black and white, and then we'll start coloring it. We're going to need an accent y position because we're going to draw lines randomly on this crane and I'm gonna need for Lupas well, and I'm going to start with 100. So have X at a random position from zero to wit. And then why is going to be at random position? What was your own height? And then I'll do a stroke with the random value from 0 to 2 55 So that's going to be great scale that's going to be random. They can actually see all of the lines that we're trying. Then I'm going to draw the lines at X and Y, and then we're going to give them a length of 10. So it's going to be the UN position is going to be from X plus 10. So it's going to move from the exposition from the starting exposition to 10 plus the X. That's going to be the ending position and then the same for life. So we're going to have a bunch of Dagon Alliance, and I want this to be static, something to stop the loop, and I'm going to increase the stroke. Wait, maybe three. Okay, so we have random lines on the screen with a random color from a grayscale spectra. Now I also want to rotate the's just to get the design that we have and again to rotate it . I'm going to just do push matrix to create and you layer for each one. Now, if I run this without friends, leading were rotating. It's going to be the same exact thing. And if I do Franken seeds just to see the same design, that's actually not changing, so it's actually creating a new layer. But nothing is genuine because every layers on top of the other. But now I want to change the position of each layer and the rotation. So I'm going to change the position based on the accent by get elected translate, actually make the movement of each line betweens. I'm going to leave these at 00 of each of the campus, and then it's going to be 10 because Europe less done is basically 10. Then if I run this, we're going to see that it's the exact same thing. So we haven't changed anything. We still have each of these around in position. You can see that it's the same thing, especially these two lines are the same position because we have random seeds. And now I'm going to rotate. And this is going to change the whole and again around him, barely from 0 to 2 pi betweens, a full circle for a full rotation and that had some more interesting look. If I increase this to 400 it will give me a more interesting look because there is more to play around. But let's actually change the background to White. You see things better and let's introduce color now. So instead of sayings, uh, stroke. So instead of saying a random going from 0 to 55 only for one parameter, let's add the other two parameters. So now we're gonna have R, G and B, and I'm going to do the same thing for both random value from dealers to 55. And if I run this right now, we're going to get a lot of colors, and as you can see, the colors are very bright. But now let's change this. Teoh it just be moat and see how this difference. Now I'm going to change the color melody inside of percent of function. And then just so we don't have to change all of this over here, you can either leave the default values. But I'm going to say that I want the highest value for you to be 255 for saturation to be 255 and for brightness to be 255 minutes for the Alfa Valley. I'm going to just let it be one. So it's going to be from 0 to 1 at a floating belly. Now they changed the color mode, and if I run this, we're gonna have a different color. We have more blacks, we'll be here. Um, and we have some brighter colors now. We can see this better if I use this to full saturation every time and full brightness, every time you can see that it's very, very bright because now it's just looking through the array of colors that it has. But then it's giving it the highest saturation and the highest brightness. Now, if I remove 2 55 over here and put it zero so no, there's no brightness and the colors it's going to be black because there is no white whatsoever now for Bring it back to 255 and I changed it saturation to zero. We're going to see that there is no color at all because 255 is too bright. So now it's white. And because there is a no saturation, there's no color. Let's play around with human brightness. I'm gonna just do brightness it 100. So now we're going to see that it's a little bit grayish. And if I go to zero, of course we're gonna have black. I'm gonna do 100 then I'm going to increase the saturation of a little bit. Going to see a little bit more color, know if increase it to 200 we're gonna have a little bit more more color to I'll do 2 30 But since the brightness is still very dark going to increase this a little bit too. Now we have a kids design color, you know, I'm gonna go back to random, random izing, all of the's, but I'm going to go with Hugh from maybe 100 250. So this is the array of colors. So if I go from 102 150 m only choosing thes colors. If I go from 0 to 55 I'm choosing from the whole array. Let's actually do to 50 and you'll see that it's all going to be read. Okay, so the majority of it is actually right. But if I go even lower, maybe a 20. Yeah, the majority of it now is red, and there's a little bit of orange hearing there. Okay, I'm gonna go to do 255 for both separation and rightness, and then we can see that it's very bright. No. As they increase this, it's going to add more colors from 0 to 100. And I want to do from 100 to 150. Now we're only getting greens and blues because you're only using heart of the arrive colors. Let's see what happens if I go back to RGB, so I'm going to just common this because the fault color mode is our TV, you know, if I run it, you can see it's a very different palette. The reason for this is because it's getting full grain and full blue, But then it's getting around in value from 100 to 150. And if I remove the random seeds and increase this a little bit, we're gonna get a little bit of a different palate just because now we have more red to play with. Let's actually add even more red. So we have from 202 150. So that's a very, very big value to choose from. And if I decrease at least one of these to 10 then we're getting purple and we're getting because we're getting more red than we're getting green and blue. And if I also decreased this to 1 55 we're going to get even more right. Play around with colors to see the difference between RGB and at crispy. A lot of people play around with interest be if they want to change the hue, but they want to keep the saturation and brightness because if you randomize r g and B, you're gonna get a different look from what you're going to get from address be eso. Maybe you want to keep the readiness of your color, but then you're you want to play with the grades of reds so play with the saturation or the brightness, so we're going to get more of a monochrome look. Now, let's see another example for color to understand it a little bit better. 37. Color: Example 2: But if for this example, we're going to talk about color interpolation, So in the other example, we're going to see the difference between again. Audrey Beatrice speak in terms of color. Interpolation. So I said that you're gonna get maybe a monochrome design if you use interest speed. Okay, so let's create this color interpolation example to learn more about colors. For this, I'm going to create a grid of one row and 10 columns. So for the grids, I'm going Teoh need further. And we won't need a nested for a loop because we're only gonna create one row and then 10 calls, because what we added over here and now we're gonna do the same thing that we did before. So the rectangle is going to be at size multiplied by I and then the size and then zero because we're not moving rose wise, and then it's going to be sized in size for here. And the size is going to be it with divided by 10. Because we want 10 call. Never run this. We have a row of 10 columns. Okay. Instead of having a size for the height as well, I'm going to just make this the height of the canvas because you want to see the color interpolation throughout the campus. Now I'm going to give it a fill of color, and I'm going to create color right now, so color is going to be of color data type, or the coal variable is going to be a color data type. And now, instead of just giving it one value or one color, I'm going to interplay between two colors. So in order to interplay between two colors, we're going to use the Lord color function in This will require two colors and then an amount. So the two colors we're going to create appear because it doesn't make any sense to create in memory again and again is two colors because we're going to choose them just once. So I'm going to call the one the 1st 1 call one, and I'm going to give it a value, then a call to, and I'm going to give it a different problem. So I already have two colors ready, so I'm going to just copy and paste them. You're free to choose your own colors to practice with color interpolation and then I'm going to use Coal Juan and call to over here. So I wanna interplay from color one to color, too. Lying amount. So amount. We're going to create it using the grit that we have amount basically goes from 0 to 1. So if I put zero for instance, over here and then run it, you'll see the first color. And then if I put one, you'll see the last color that I chose. So I chose from orange to yellow, but I want the colors to actually create ingredient. So I wanted to move from the orange to the yellow. You wanted to do that? I'm going to use the index variable or the I variable inside of my for loop to create this variable over here. A man could create this variable called amount since it goes from 0 to 1. So that's a floating value. And then I'm gonna use another function called map. So map basically maps a set of values to a different range, so it changes values from one range to another. So now I'm going to change the range of my eye. My index from its original range, which is which is 0 to 10 Teoh the new range, which is 0 to 1. So now every time I zero, it's going to be zero over here on benefits one. It's going to be 10.1 over here for the amount, and then for two it's going to be 20.2 and so on and so forth, said, I'm going to use amount over here instead. And if I run this, we're going to see a Grady int going from orange to yellow. This alone can create a tremendous amount of examples. So using maybe this with one of the designs that we created, like the lines or the random line rotation. Example. You can create a multitude of colors just using the blurb color function. There. You can play around with the colors up here. You can change from maybe blue to green. You can change from red to purple, and you can see the range of colors playing around. You can even increase the count to maybe 20 but then we're gonna have to change it over here as well. So I better create many a variable called count and let's make it 20 and then use it over here and we'll be here. So now we don't have to change the values over and over again everywhere. And then we also have to divide the with by the counts. Show the size of our columns are correct. Now you can see there's more color in here because we have 20 and if I remove my stroke, you can see it more of ingredient. But you can see the rectangles over here, so if you want a very smooth radiant, you can basically make the count the width. So over make the count's 400 then it's going to be a smooth Grady ends because now 400 divided by 400 is one. So each rectangle is just one pixels wide, and therefore it's going to be much smoother. And now we can see that we created a greedy int. Next, we'll see how this works. If we changed it into a trust fecal amount 38. Color: Example 3: in our final color example. We're going to explore it. Trust me. Color mode. A little bit more. I got this time I'm going to create a grid of three columns and multiple rows, and I'm gonna show you how to do that now. So we're going to have nested loops from a previous examples. We know that we are gonna need account variable for this time. I created count. Accent counts. Why? So because I want a different value for the Rose from the columns. Since I want three columns, I'm going to say Count X is gonna equal to three. Then I'm going to create 10 rows for each. So now that we have Count X is different from counts. Why? I'm going to also have his ex in a size. Why so Size X is going to equal what's divided by Count X guys. Why is going to equal height divided by count way? Now I'm going to create the rectangle that I'm multiplied by size. X J multiplies by size. Why members were going to be size sex. This is going to be size. Why? If I read this, you can see that we have three columns and turn rose. Now we can create the coloring. I copied and pasted the same thing that we did before. But this time, instead of going from one color to another from two variables over here, I just went from 0 to 255. And this time I'm going from zero to come. Why? So I want the interpolation to happen on the white access I'm using J and I said that I want to go from it zero value to count y value. So that's from the top to the bottom. And then I want to map that value from 0 to 1 for the amount in the interpolation. And then I said, the fill to call, which is our color variable, and it's going to color my rectangles now. As you can see, it goes from black to white. Now, for this example, and wanna look at it just me and not RGB. Actually, I'm going to just change the color mode to interest me, and I'm going to do the same thing for etch or hue, saturation and brightness to go from 0 to 50 to 55. I'm not going to bother with the Alfa value because for now, this is all we need. If I run this right now, we're going to see a weird looking thing. That's because we change the color mode from RGB. So now what? It's actually checking or what's actually doing. It's going from Hugh of 0 to 255 which is the lowest to the highest. But there is actually no brightness and no saturation. Therefore, for hue, saturation and balance toe work, I'm going to use a different function. I'm going to use the alert function and I'm only going to learn for the hue ones and then for the saturation next and then for the brightness next. So I'm going to call this value instead. And this is going to return afloat value and I'm going to just cool it thou for value. And then the brightness and saturation are going to be the highest. So now I'm Lor Ping from 0 to 255 on Lee for the hue. So this time I'm not just lumping using the blurb color function, I'm using the alert function because I only want to interplay between two value you can also use the Lord function to interplay between two positions. A swell. But I'm using it here for he situation and balance and see how this actually looks and you can see the whole array of color is actually on the campus. Now. The reason why I created three columns because I want to show you Hugh in the first column and then I want to show you saturation in the next column. And then I wanted to review the change and brightness in the third column. So let's actually use a conditional and, if conditional, I'm gonna check if I is gonna equal to zero, which is the first column. I want the value trains to be in the hue Mendel's If I equals one. Just the second column I want to fill to have any Hugh. I'm gonna just use zero for Red, and then I'm going to have the value in the saturation. This time I'm going to have the highest brightness, and finally else we're going to be, too. But I don't need to write it because the last one going to change the brightness going to have the highest sexual ation and then Val for the brightness. Now, if I run this, you're going to see that the first column is going to have huge changing. And then the second column is going to have the saturation from 0 to 255 and then the last one is going to be the brightness from 0 to 255. And if you change the hue for any of these, so let's do 150 for this one. It's going to go from the least saturated to the most separated in the hue of 150 which is here blue. So it's up to you. What color you want to choose. Ikan. Also, it maybe choose a different color for this one as well. So let's do 200. It's going to be a purple color and going to go from the least brightest to the highest brightness. So this is another way for you to play with color, interpolation and color modes. Maybe you want to stick with the same Hugh like over here, but you want to vary the brightness. Maybe you want to stick with one. Hugh over here is well and maybe play around with the situation. You can also create a different value. Are a different blerp or interpellation for each of these? So for maybe he when secretary in brightness and then you can have a different amount. So maybe use I Teoh Triple eight in terms of brightness and then use J to intra plate Hugh . This will also give you a different look. Play around with it in. Let me know what happens with you. Show me it in your projects. I'd love to see what you create with golden tribulation and ships. Next, we'll talk about images. 39. Image: Example 1: We've been creating shapes and choosing colors for the past few examples. But this time we're going to talk more about images and how you can import whatever images you took maybe or whatever images you find online into your designs. For this, we're going to get more into how the sketch files are actually created. So for my example, I have a file called image. This is actually created once you save your sketch. So whenever you save your sketch is going to create a folder with the same name of the sketch. If you change the folder name, this sketch won't open. You have to have the sketch name same as the folder name. Then to add images inside of your folder, you're going to have to add a folder called data. Now in this data folder, you're going to have any files, then you will import into the sketch. So if you have a text file or an image file or some SVG files that we're going to talk about later in the type section. You're going to have to put it in here. This is not created by default. You're going to have to go into your sketch folder. And this is why, when you're kidding, image related sketches or anything that you require to import or load something into the sketch, then you're going to have to save your sketch and creates a data file in which you are going to add whatever you're going to import into your sketch. Here I have this image. You can download this image from unsplash.com. I'm going to have the link to that exact image in the notes section of the video. Feel free to go through the website and choosing the image that you like best. So I'm going to choose this image and we'll see it now once we loaded into our sketch. So in order for this to work, I'm going to have to save this sketch. Now if I open this folder, you can see that it's called image1 and inside of it, there's the sketch file. Now I need to create a new folder over here. Let's call it data. Inside of it, I'm going to copy and paste the image that I have. So now inside of my data folder I have this image file. Now I can close my folder and now we can work with the image. For image, It's kind of similar to P shape. So I'm going to just use PPI image like I use any datatype. And then I'm going to call it just image or shorthand of the word image. And then inside of my setup function, I'm going to load my image. I'm going to say Load image, and now I'm going to use the file name. The file name is a string that you're going to use inside of load image. This is why, when I said, one of the reasons why you would use a string is to use it inside of load image or while loading a text file. You can also put this inside of a variable called filename or whatever name you want to call it. But I think it's fine to just add it over here because it's a short name. You can also change your file name and then change it over here if it's easier for you. But I'm gonna keep the original lame. If I run this right now, you're not gonna see anything. The reason for this is because again, image is very similar to shape when we created the custom shape. So I'm going to call it inside of an image function. Then I'm going to put it at 00. But now if I run it, you're going to see part of the image, because the image is incredibly huge, we're going to have to resize it to the canvas. We can do this by using image dot resize. This is in the PPI image class that resizes your image to whatever you specify. So I'm going to do width and height. It's actually going to stretch your image or obscura image if used resize with whatever resolution. If your image has a different resolution than a square, then maybe you can cut it or maybe just resize it to a point to the same resolution, but to a point where you can see the majority of the image on your canvas. So I can do whatever size over here, maybe I want to do 200 by 400. This is going to be a rectangular shape and it's going to actually women my image a little bit. But I just wanted to show you that you can do whatever size you want. I'm going to just stick with what width, width, and height. Now that we have our image, we can actually play around with it. One of my favorite ways to play with images is using the copy function. The copy function basically takes an image and copies section or a rectangle of the image and paste it on a different place or where you want to paste it. The first argument that it takes is the image. So I'm going to just say image. Let's first take a section from the zero-zero point. I'm going to say from 00. Then I'm going to choose a width and height. Imagine is if I'm using the rectangle function inside of the copy function, the rectangle function takes x and y position, which is the starting position, which is the top-left corner of the rectangle. And then it takes a width and a height. I'm going to do maybe a 100 by a 100. And then we're going to position it at a different place. I'm going to choose the middle of the screen. So let's say 200 by 200. And then I'm going to have the same size. I don't want to resize it. You can resize it. Maybe you want to make it bigger, but I'm gonna keep it the same size. So now you can see that I take this chunk over here and put it over here. It's now at the position of 200 by 200, but it's taken from a position of 0 by 0 values. Instead of having a set of values, I'm going to choose a random value every time. For this, it's going to be a random value from 0 to width. For this, I want a random value from 0 to height. Then I want to position it also at a random value from 0 to width and random value from 0 to height. This is going to go off the screen, so I'm going to hit Enter on this function. So now I have separated my starting x and y position, my width and height, and then my ending x and y position and my ending height. You can hit Command T or control T on Windows to fix the alignment. This is going to complain because the function copy expects parameters that are integers. And I have implemented floats. So I can only cast interests. So now I'm converting all of these float values into integers. Now it's going to work. So if I hit Play, we're going to see random squares across the screen. So it's copying from a random position and then pasting it at another random position and it stings same thing over and over again. And it's taking its cutouts from the image. I'm going to change the design to be ten by height. So now each rectangle is actually going to be very thin lines. This will give me a better visual. But instead of having them go from 00, from 0 to width, I want to add margin to my design. I'm going to create an integer called margins. And I'm gonna give it 50 pixels because I want the cutouts to only be in the center and I want the border to have this still image of the original image. In order to do this, I need to set the position of the rectangles that I'm creating, not from 0, but from the margin. So if I run this, I want there to be a border on the right side, on the right side, and left side. To get a border on the left side, I'm going to get a random number, not from 0 to wet, but from margin, which is 50 pixels to width minus the margin. So we'll do that. If I run this, you can see that there is a 50 pixels over here where there are no lines and there's a pixel over here where there are no lines. Now for the height to work, I'm not going to make it random. I'm going to make the random positioning only from right to left, but from top to bottom. I'm going to push this down by the margin. So the y position for the starting Y position is going to be margin. And then the ending Y position is also going to be margin. Now we have a border on the top. If I run this right now, we have a very clear border on the top. We have clear borders on the left side and the right side, but we don't have one at the bottom. The reason for this is because we're actually taking the height as a whole. We need to subtract the margins from the height. So we have two margins, meaning that we have to subtract margin multiplied by two because we have two. I'm gonna do the same for both. Now if I run it, you can see that we have a very nice border of the original image. And this gives it a much nicer look at. It also makes it nicer because now the height is in, moving randomly, which means the blues are going to stick at the top the majority of the time. The only reason why there is a little bit of pink is because this isn't all blue, like the center. And because of this as well. But the majority of the lines are blue and then down here it's going to be pink and a darker pink. So there are multiple hues of pink. Now, the last thing that I wanna do for this example is to check if the frame count is greater than 120 or any number. This is just what I found my design looked best at. I want to stop the loop. You'll notice that the loop actually stops. It stopped after a 120 frames. Now if I print frameCount, you're going to see that it will go from one to a 120 and then it'll stop. Because the loop has stopped. Actually went to one-to-one because we're checking if it's greater than one twenty one, twenty one is greater. And that's when the loop actually stopped. So it stopped after 121 frames. So that's also a good way to stop your design. So you can maybe print it or you can save it for later use. You can also use random seed with any number that you want. I usually start with 0. Then every time this runs, it's going to have the same random values. So it's going to have the same ending results. In the next example, we'll create a collage of multiple images. 40. Image: Example 2: In this example, create a collage. For a collage, we need multiple images inside of our data folder. And I've created, I've saved this file, the sketch file, and I've created a data folder. And inside of it, I have all of these shapes. So you can have any random shapes. I created some hexagon, octagon, also, some flowers, and some triangles. Then this is very important. I'm going to link to this folder in the project section. But if you want to create your own shapes, just make sure that you are creating them in PNG and they have a transparent background. If you want the background, then feel free to use JPEG or PNG with a white background. And then you have to name them with numbers. For the first one, I added the keyword blue, just to indicate that it's a blue color. And then I started counting. So for this one it's 0102, add up to 06, actually up to 09. I included these turquoise into the blue. And then the same for green, same for orange and pink and red. They all have nine images. They all have to have consistent numbering for this example because we're going to use a for loop that counts from 0 to nine, actually from one to nine. So once you have your folder ready, Let's hop into the example. For this, the first thing that we need are the keywords in your files. So for me it's blue, green, orange, red, and pink. I'm going to create the image names. And I'm going to put them inside of a string array. And I'm going to just call them image names. I'll put them over here directly inside of the array, because I only have five keywords. There is no need to initialize it and generate using a for-loop. And now I'm going to initialize the count for the images. For that, I'm going to need an integer and I'm going to call it image counts. And I'll put nine because I have nine emitters. And since we're going to load an array of images and then position them on the screen. I'm going to create a class because that's going to be much easier for us to navigate. And I'm going to call it a large image. And inside of here, I'm going to need a filename. So whenever I load an image, I'm going to need that input. So I'll put that over here. String filename. Then of course I'm going to need the PPI image because I'm loading the image with that filename. Then I'm going to need an x and y position and a width and height. Sometimes I like to add these, the position and the size of shapes or images in here as variables. And then if I don't need them or if I find that I don't need those variables, I'm just going to change them then. Because it's much easier to start with variables in case you are going to change stuff in multiple places. And then if you find that you're only using it once, you can just remove the variable. That's another way or another approach to creating variables. Then I'm going to create the constructor. Then I'm going to call the parameter string underscore file name. Just so we, just, so it's easier for us to know that it's going to be associated with this string over here. And in here, of course, I'm going to write filename is going to equal to whatever is inputted into this class. Then my image, I'm going to load image. I'm going to use the filename. Then the file name isn't going to have PNG or JPEG. You can have the user input the file with the extension. But for now, because I know all of my images are PNG's, I'm just going to stick with PNG, especially if you want your program to only have PNG with a transparent background for it to work, then it's better that you initialize the extension and ask user to input the image name. I'm going to give it a width and a height. I'll do 120 by 120 just because I tested it before. And I know that 120 is going to work. Then for x or for the position, I'm going to give it a random value from 0 to one. Then for y from 0 to height. And after that, I resize the images because my images are a little bit. Because I don't want any pixelation, although my canvas is 400 by 400, i'm, I always create as if I'm going to create a bigger Canvas just in case one day I want to go back to that and maybe save some of the images. I'm going to resize it to 120 by 120. I know this seems like it's not needed over here because we're only using it once. So why use 120 by 120? Then resizing it here by the variables when I can just do resize by one twenty, one-twenty. But I'm gonna do something later. You will see that now I'm going to load all of the images using that class. I'm going to create an array of that class called images. Then I'm going to initialize the array first. Neil collage image. The length of the collage image array is going to be the image name is multiplied by the image count because we have nine images of each of these image names multiplied by image count. And now we're going to accommodate the whole list of images. Next I'm going to create the instances of the collage image array, so only the for-loop. And it's going to expand until image names, dot length and increments by one. This array is going to iterate five times because we're only expanding it to the image names dot length. So here inside of the collage images, only the first five are going to have values. I need to nest another loop that is going to iterate nine times based on the image count for each one of the names inside of this array, I'm going to loop nine times to get the names for the images correctly. So now my second loop is going to go through the image count. Now we have the length of the collage image. However, I can't just do images right now and then just go I, because I is only going from 0 to four. But this image array is much bigger. It's actually five multiplied by nine. So I need to do the index over here using I and j. That's where AI comes in. And then we're going to multiply it by image count. Now before I do anything, I want to print the values down here in the console so you can see what I multiplied by image counties during the first one is going from 0. So 0 multiplied by nine, which is the image count, is going to be 0. And then for the second one, it's going to be one multiplied by nine, which is gonna give us nine. And then nine multiplied by two because I is going to be two. And the same will go for all of them. And then the final one is going to be four multiplied by nine, which is gonna give us 36. So this is not giving us from 0 to the last value that we need. Nine multiplied by five is 45. We'll need this to go up to 45. What you'll notice over here is that this goes from 0 and then jumps to nine. But where's my 128128 is basically the first nine, which is where the blue. So I'm only getting the first one for blue and then I'm getting the ninth index inside of my collage image, and that's the green, that's the start of the green. And then 18 is going to be the start of the orange. But I need to add nine images of each of these. That's where J comes in. I'm going to add j to that. Because for the first nine positions, where it's 0 over here, we're going to add j to it. So the first one is going to be 0, the second one is going to be one, the third one is going to be two, and so on. Then for here when we're nine, when this is going to be one, all of these are going to be nine. And then when we add j to it, they're going to be instead of just 99101112 because nine plus 0, which is the first iteration of the j, is going to be nine and then nine plus one is going to be ten. So we're going to have the whole array. So let's actually print this and see what happens. We have our whole array. So we have from 0 up to Friday five, or actually 44 because we're going from 0, but we have 45 positions, which is going to cover our collage image array. I'm going to remove this and uncommon this one active j over here. It's a little complicated just to start doing it. But once you understand the concept and once you go through it using print line and seeing how things are actually working, you can even substitute i with j and see what works and what doesn't. I think making mistakes helps you in understanding what's happening better. For me. I like to not just follow tutorials, but I actually like to make mistakes and try different things even if they told me that it's not going to produce the right result, I just want to see what happens if it goes wrong. So I understand what is happening when it goes right. Now we have the values for our images array over here. And I'm going to give it values. Now we can create the instances of the collage image class. I'm going to just say new and then collaged image. This is why I created this parameter over here, because I want to generate filenames inside of the for loop. And if I had to do all of this inside of my for loop, it's going to be very long. So it's much easier to create a class here. We know that the names of each images start with the image names. So I'm going to start with image names. And they're going to have AI because AI goes through in the image names dot length, then I'm going to add to that string underscore 0 because I know my files have the image name and then an underscore 0, and then the iteration or the number of the image count. And then I'm going to concatenate another value to the string. And it's going to be j plus one. I have j plus one inside of parentheses because I want this to be much stronger and I want it to happen first. If I remove this, then this is going to concatenate j and then it's going to add a one to it. Just to see this better, let's print it. I'm going to comment this, so nothing happens. If I print this. You'll see that we'll have blue and then 001 because j is 0, it'll be one. Then for the next one is going to be 0 and then 11. So it's looking at this one as if it's a concatenation to the string and it's not looking at it as if we're adding it to j. But I want to add it to j because j starts with 0 and I want to start with one. So I'm going to add parentheses to make this calculation stronger than the rest. So this will happen first and then I'll go got made that number to the string. Now, if you look at this, we have the right numbers. Now for blue, it's underscore 0. This is an underscore 0. And then this is the one. So now it works. I'll add the parentheses over here. And all of my images are actually inside of my array. If I want to check, I can print array. You can see that now we have a lot of different classes or instances of the class inside of my images array. You're not going to see what's inside of it unless you go into that. So if you want to go into that, you're going to have to print it inside of the loop. So we can use this index. Because these variables are only local to the for-loops. Then I'm going to print the file names. I can see all of the filenames are actually added inside of the array. Next, we're going to actually draw the images on the screen. Since this is going to be a static design, I'm going to just do a loop over here. Feel free to make it an animated design. But from my design I'm going to make it static. Okay, now to position the images that are stored in the images array, I'm going to also create another for loop, but this time the for-loop is actually going from 0 to the length of this gloss image instance array. And to actually show the image or the images, I'm going to do image. And then inside of it, I'm going to use the images array and the index value. And because this is only going to give me the instances of this class, I'm going to have to actually go in here and get the image. So this is going to give me an instance of the class, and I'm going to need the property image in order to actually look at the image that is loaded inside of that class. Let's first start by positioning it at the center. Just to see that it's working. Now I have all my images, but they're not actually in the center because images are drawn from the top left corner like rectangles. We can change that by using Image Mode. I'm going to make it center. Now it's actually drawing from the center. That's great. Now instead of drawing all of the images on top of each other in the center of the screen, I'm going to use the x and y positioning over here. So I have a random width and a random height. We can do that by going into each of the instances. Then going into x. So if I do this, I can see that we'll have random X positioning or because we haven't changed the y position, it's still in the center of the screen on the y-axis. Now, in order to change that, I'm going to create a variable called position. Why? Because this is gonna get a little bit long and makes no sense to put it over here and it won't be legible anymore. So now I need rows or five rows for each of the colors. Now to create a row for each of the image names or PTH of the colors. I'm going to have to divide height by image names. So now I will have five rows of equal height, but now they're all at the same place. So I'm going to need to multiply it by eye. But now this is not going to work again because we have different array length. What we did here is change the way we write the index for the images to actually work with both of these arrays length. But now we have the opposite. We have images that length. So now we have 45 here. So it's going to go from 0 to 45, which means going to put each of these images on a different row. So only this number will fit on here. Instead, I'm going to divide the height by images that length. Now we have all of the images and we still have the blue on the top, and then the green over here, and then orange, red, and pink, which is in this order over here. If you want to change the order, you can change it over here. And just note that the first one will always be at the bottom. So you can maybe change them up. You can sort your array using any of the sorting functions, or you can create your own sorting where you can just jumble it all up so you can have a different color on top of a different color. Now in my original image, I actually had a background of black, which will make the colors pop a little bit more. Now, instead of dividing by the height, I'm going to divide it by the height minus the height of the images, just to avoid these cutouts over here. Now if I run this, I can see that it's actually subtracting the height from the actual height and then dividing by images dot length and creating the rows. Now I need to add half of that so I can push all of these down to my wife position of the images. And if I run this now we don't have any cutouts on the top or on the bottom. And I can do the same thing for the x. So I'm going to create the position x instead of putting it all over here. And in here I'm going to call position x. And adding to it images I dot divided by two, so half of the width of the images. And now they're not cut out over here, but they're cut out over here because we are actually getting a random value from 0 to width. And I need to get a random value from 0 to minus the width. And that's why I'm actually using variables over here because I knew I would have needed this over here. We can do the same thing for height as well by getting a random value. But because we're not actually using the y over here, only be using the exposition. We cannot really do it over here unless we're using the randomized positioning. So I'm doing it over here instead. Now we have them all in the center. There's no cutouts. You can run this over and over again. And you'll see different variations and you can add a random seeds over here to get the same results over and over again. If I just run this, it should be the same every time. You need to put the random seed before you randomness. But because of randomness is actually inside of this class, you can either put random seed in here or you can just put it before you create the instances of the class. If you put it over here, it's not going to work. It's going to create the randomness and then it'll say the random seed. So your computer will only look at your codes in chronological order. So it'll go from line one down here. Unless there's a function, then it's gonna go to the function and call everything in there. And then it's going to go back to everything below that call of the function. That's all we need to know about colliders or loading multiple images into our canvas. Next, we'll talk about a different topic, which is topography. 41. Type: Example 1: we're almost done with. The examples were at the final section of the design basics. And for this section of the examples, we're going to talk about typography or typography specifically in process. We learned how Teoh create shapes in a previous section using the P shape class, and we learn how to load images in the image of section of the design basics Example. We're going to combine these two with type to create something like this. No, this is a typing program. So whatever you're seeing right now in this design is actually letters turned into shapes that I imported using SP. Jeez, you not to do that, we're going to start with a string of alphabets that we're going to break into characters that we can then use with the keyboard in order to input these designs. Also, I saved this sketch file because I need a data file in order to put my SCG files. And so I have my data folder in here inside of my sketch folder. And then if I click it, you're going to see that I have all of my SPG files from A to Z. You can also add spaces and commas and dots bird for this simple example. I only did from a to Z and I'm going toe linked to this wilder as well and the project section below. Also, when you're naming your finally have to be consistent to you either use all lower case or all capital letters, and then it created a different shape for every letter based on the shape of the letter itself. But you can create any shapes that you want. Maybe you want to create a bunch of flowers or a bunch of rectangles with different colors . So you want to maybe substitute the letter with colors instead of shakes. But I'm going to dio shapes and then for color, I'm going to use a color palette. Okay, I'll start with a string of the else a bit, and I'm going to load a shape for each of the alphabet. So I'm going to create P shape array. I'm gonna call it trips. Inside of that, I will initialize the array, and I will give it a length of the alphabet string using the length method and the reason why I'm using the length and not saying 28 instead because Sometimes maybe you want to add Coghlan's You want ads, commas and dots and all these other characters, and it's much easier if you just say alphabet dealt Link. So whatever you add in here, it's much easier to calculate the length, then assuming or counting every time. For now, I'm not going to create a color palette. I'll do it and black and white until it works. And then we'll do a color palette. And that's usually what I do when I great my designs. Okay, now I can use the alphabet length over here inside of my loop that I'm gonna create where I'm gonna load all of the shapes into the P shape, right. But instead I'm going to just create a constant, because if I have any other characters other than the alphabet, it's going to be a different array for those to load them. We're going to do in alphabet and for Constant, usually use old caps. And it's 26. I think I said 28 before, but that's Ah, the Arabic alphabet. I It confuses me sometimes. So yeah, it's 26 then I'll do four integer I equals zero and then I is going to be less than the alphabet ling. Okay, and inside of here, we're going to load the shapes into the shape of race. So it's going to be shapes I and then we're using load shape this time because we're not creating a shape before we used create shape. And then we did begin shape and end tripping in between. We used the Vergis ease, but for this example, we're only going to load shapes that we already created before. And I created all my STD's an illustrator, but you can do it online or in any other software. Okay, now I'm going to load shape, using the names off the files. Now my files are named a dot sgb don't SPD and so on. So I need each character in this string to get each character. There is a function called char at or car at for strings, and it takes each character using an index. So for this, it's exactly like a raise for the 1st 1 It's at Index zero for the 2nd 1 it's one, and then until the length minus one. So this is going to be 25. So if I do I? It's going to give me the character at that point. And then I'm going to Captain eight the extension, which is dot svg. Now, this is my final name. It's going to be every character in this train and then dot SPD Does he know that they're loaded? I'm going, Teoh put them at random. Physician. So I'm going to use shape like we used before when we created our custom shape and then I'll have to create an array again. We've been in here. I'm going to do shapes I at a random position so you can see them all from the ER to it confers here to height for why? And if I run this, we're going to see all of them all over the place. Now they're extremely big. If I change the Phil 20 but with an Alfa value, nothing is gonna work. The reason for this is because we haven't disabled SPG or the shapes styles. After you load the shapes, you just use, not disable styles, which is a function with the pea shaped class. No, it's going to apply the styles to it. So we have a stroke If I remove this stroke. We have a different problem as well. Which is the size all our SVG Zahra. Huge. You can change the size inside of your shape function by adding two parameters to this or two or more arguments which is going to be the width and height are going to do 100 by 100 . No, I can see there are plenty of small shapes and we can see it better if I slow it down. So I'm going to slow down to three frames per second and I can see the shapes. And if I actually increase or remove the transparency, we can see the shapes now finally working. OK, but what we needs isn't just drawing them on the screen. Every frame I need to create a typewriter to make your ships appear. As you type the letters on the keyboard. I'm going to use the key released function now inside of the key released function. If I print the key key word, we'll see that every time I type you actually see the letters that I type in the council over here. I'm going to use this keyword to grab the shapes from the P shape array, using the character associated with the key clicked. No, If I draw the shapes over here and I'm going to put them at the center for now, I'm going to resize them because they're huge. This is not going to go inside of a for loop. The eye is going to be created as a variable where the position is going to be the index of the key inside of that array key being the key pressed or released on the keyboard. To get that, there's another function in strings called index of. So if I do alphabet and then I get the index off the character being clicked, which is the key, it's going to give me the position of it over here, which I can also use over here. Since we pushed or loaded the shapes inside of this array based on the same positions of this string or of these characters in this string, this is the same thing, so it's actually going to look for the key in that string, the alphabet string, and if it finds it, it'll return the index or its position for you, and then you can use that position to grab the same character of the same shape from the Shapes array at the same position. Know index Off is going to return negative one if it doesn't find any of the keys. So if I pressed space, for instance, it will return a negative one, and then it will look for it over here and it won't find it, so this won't work. So it has to be one of the house a bit in here that you click on the keyboard. Now, if I click on the keyboard, you're going to see the shapes working. But now the shapes are actually not in the center, because again they're drawn from the top left corner. If I use shape Military for and put in a center, and now I click on the keyboard is going to be on the set, and I have to make sure that if this returns negative one that this doesn't work, because then it'll say that that index isn't available in the array and it going to throw an error. So if I actually now click on space, it's going to say array index out of bound exception because there is no negative what So I have to assure that if the index of the key doesn't actually equal negative one, then do that, because if it equals negative one, then it didn't find the key industry. It can easily do that by using an if conditional, using index of key doesn't equal negative one, and I can do all of this. And if you had command T or controlled T on Windows, then you can fix the indentation. Now. If I click on the space bar because it's not existing and the alphabets drink, then it nothing will happen. No error will be thrown. But if I click on the other letters than they're drawn to see this actually changing, let's add the color palette. So I already have a color palette that I'm young to copy and paste into my file. Feel free to choose the same colors or choose your own. Now, instead of using the Phils euro Every here, I'm going to remove it. I'm going to leave no stroke, and here, inside of my conditional, I'm going to add a filled from the colors array. As you can see here, there's Ah, color array that I called calls it has five colors, and I want to use a random color, so I don't really care about the coloring. I just care about the shapes being associated with the keys. In order to get a random index inside of my square brackets, I'm going to use the random function inside of the random function. I'm going to use the length of the array as my maximum. In case I wanted to add colors later, and now it's going to complain because an array or positions in the array house to be integers. So I'm going to cast this into an intruder, so this will convert it and it'll work. Now. If I click on play and type, we're going to get random colors so you can see that. Okay, we're getting different shapes based on when I'm typing. It's time to fix the position of these trips because putting them on top of each other is not gonna work. It's time to create an ax in life position, and in here I'm going to put X and why Why is going to be a random value from zero to height, But I'm actually going to dio from zero to height minus 100 which is the size or the heights of each shape. And I'm going to remove shape load for now because I wanted to draw from the top left corner. If you want to draw it from the center, feel free to do this. But then you're gonna have to fix the positioning to not get out the shapes from the top and left tied. Because when you're drawing from the center, you're gonna have to accommodate for that section on the top and left tight. But it's much easier if you just remove this and let it draw from the top left, meaning that I'm always knowing that my shape is safe from the top side and from the left side. But then I have toe only work on the right side in the bottom side. So this way I know that if I do from zero to height minus the 100 I know that even the shapes that are going to be at the lower part of the canvas they're not going to be cut out because I know that I've removed or subtracted 100 which is the size the height of these shapes from the height of the canvas, meaning I'm safe the whole time Now if I run, this X will be at zero each time. But then they're going to have random height and you can see that they always are on the edge of the bottom side and on the top side as well. If I remove this, if you want to test, it can remove it and you can see that they're cut out over here. I'm going to return it back to negative 100 or height minus the 100. And now we're safe. I know. Let's work on the X for it to draw from here or from the left side of the canvas to the right side of the canvas. Now, in order to do this, I need to offsets by 100 each time. So I'm going to create another variable called offsets, and I'm going to add it to the exposition. And then I have to give it a value. So if I say ah 100 over here and I run this, you'll see that you're gonna get only one offset every time you type, because this is a static value. But if I start initially with zero. And every time the shape draws, I want to increase the offset. So Officer is going to increase by, Let's say 50 for now and see what happens. We can see that it works. No, it's a random position that heights, and then it's offsetting by 50 every time. And if I change the offset value and USC, it's much bigger. So 50 years, good size, the reason why I'm using 15 instead of 100 because ah, 100 is encompassing the margins on the right and left side of my STD's. So if you look at the files over here, you're gonna see that there is margin over here, and I created emergent of 25 25 pixels. So there is 50 pixels, so the actual image is 50 pixels white. So if I want to offset, I'm gonna offset by 50 to get the shapes to stick to each other. But if I'm offsetting by 100 than I'm keeping the margins, so it's going to look as if there is a lot of space in between them. If you want to add current ing to your ships as if you are working with type then for sure . Use the 100. That's up to you. Now to you remove this part drum of this margin on the left side. For the 1st 1 I'm going to start X at minus 25. But instead of doing it inside of key released to avoid resetting every time to minus 25 I'm going to set it over here. So acts is going to be minus 25. The reason why Why is in here? Because I want to get a random height every time the keys is collect or released. But I don't want it. Teoh. What? I don't want the X to be reset to minus 25 every time the keys released. Now it works better now you can see there is no margin on the left side for the 1st 1 and everyone after is only 50 pixels offset to the right. Now, when I wanted to reset every time I had to click the play button again and then stop it and played again together y screen one of reset instead. By using a backspace. I can easily do that by doing an else. If now, if this equals negative one, then it doesn't exist in the alphabet, which means that it's a different letter meaning backspace, a return button, a space bar button. So I'm going Teoh, check if the key is a backspace. When it's none of the characters, there's, ah constant value called backspace native to processing. There's also on enter that we're going to use in order to get a new line instead of just getting a random value every time. So if the key is backspace, then I want to reset. If I want to reset, meaning I want X to go back to here, meaning minus 25. So I'm going to do X equals minus 25. And then I also want the offset to be back to zero, cause if we don't offset zero if it's now 100. When I decided, Teoh resets and then I started writing again. It's going to start from 100 pixels and not from zero now. If I run this and I start typing, if I hit backspace, it's going back from the beginning. But it's not removing the background, so I also have to reset the background to White because this is the initial background, no If I start writing and then I hit backspace, you're going to see that it's a clean slate and if I write all over again, it's going to start from X minus 25. Now let's see what happens if I don't reset the offsets going to be run this so this works . And now if I type now, this is 250 so offset is 250. And if I hit backspace, the 1st 1 is going to be over here because Offset was 250 then increased by 50. So now it's 300 so it's going to be a 300. I only moved back 25 because of Ex being minus 25. So I need to reset the offset to zero every time. Okay, we run this, and if I hit, Backspace is getting back from the beginning, so it's working perfectly now. I like that. Why has random values? But I don't want it to be every time I type to get random value. I wanted to only get a random value if I enter, or if it gets out of this great, so I'll check if the key equals enter and only then will I get a random value for the height. So I'll get a new lines. Anyone when you lying to be in any position. I don't really care about it being at a certain position, so I'm going to just keep it at random. But this time it's only going to get a new line when I hit enter. No, If I click this and I start typing and then I had enter, it's going to get a new line. But there's another problem. S is not going back to minus 25 the offset is not going back to zero. So I have to repeat this again. Now if I run this and then hit enter now we have a different problem this time. If I head back space, we're going to stay at the same line that we were at before we hit backspace. So I'm going toe. Also put the y positioning in here and let's organize this to have X before why just so we can read it better? And if I run this right now and I start typing and I had enter every time I had enter, I get a new line and then if I hit backspace on, I start typing. It's going to start from the beginning, so everything is reset. Everything is fine now. This is not ideal to repeat the same code, but we learn something that we can use in order to avoid redundancy. And that's functions. So all creates a reset function. And in here I'm going to take the repeating code caught in pasted RV here and then instead , I'll just use the function, call or be here and over here. No, if I run it, everything works the same. I had anger is going to do and you line, but if it hit backspace, it's going to go to a different position. The last thing that we need to Dio is to avoid going outside of the width of the canvas. Now, if I continue, typing is going to type and I was still typing, but we don't see it anymore because I didn't add a limit to the width of the screen. We could easily do this by using this. We sit function again inside of the different of conditional inside here, so as I'm typing, going to say if X plus offset is greater than the width, then please reset and go to a new wine. So it's checking if the exposition is going off the screen. One stock left corner of every shape is greater than the wit. Then we need to reset it to here. Now we're run it for the last time, and now if I go off screen is actually creating a new line. I'm not heading. Enter anything but it's still going to anyone. And if I want to go to when you line before I finished the first line, then I can do that with me. Just reset. I can still go to a new lion before I hit the width. But then, if I want to go off to the west, is going to create a random your life for me number. Learning this example. We will be able to import S P. G's to your files, not necessarily using it with a typewriter like the one I created, You can just use SPG es as random shapes to put on your screen. This is another way to customize your shapes without creating custom shapes inside of processing, using Burgess ease so you can now create your shapes as a vector filed and converted to SVG and important instead of blindly drawing shapes that you don't know the result of unless you run the program over and over again in the next example of the type section we're going to look at loading, taxed from a file. 42. Type: Example 2: for a final example in the design basic section, we're going to talk about loading text from a file. So what if you have files of texts that you may be exported from your messaging up or or from your emails or anything like that, and you want to do some analysis with it? So I'm going to show you how to load text from a file so you can use it in processing. Now I've created a product before where I had to load lyrics into my project to create a design with shapes, drinker the lyrics into shapes and create some album art with paying on large. To that, I'm going to import lyrics of a song that has been stuck in high had since I started watching Zoey's extraordinary playlist. Is there going to use that and create jumble text on a canvas? No. To load text from a file, we're gonna have to use load strings just like we use load, shape and load image. We're going to also use loads strings to low text from text file. So I'm going to create a string called Text, and in that I'm going to load the streams from my crazy text file. But if you can see over here, it says type mismatch because load strings actually loads on array of strengths because every line inside of that file is going to be a string or an element inside of an array of strength. So I'm going to just do an array of strings. And now, if I prince text, we'll see the content of the file. I'm just to compare. I have my folder or be here and inside of my data file again, I have my crazy text file skin separate each line as a single object inside of the string, and if I actually print just is your position, I'm going to get the first line. So it says, I remember when and over here it's I remember when. So now we know that every line is actually it's own element inside of the strings, Ray, if I do one, then we're going to have the second line you can see over here so you can see that same exact line. The only problem with this is that now, if I want Teoh disconnect each words on its own in order to plot it on the screen. I won't be able to do that easily. So instead I actually created just a string for text, and I'm going to use a function called Join. Join basically joins an array of strings into one line of string using a character. So if you want to join with a comma than each element in the string, Array is going to have a common after it. But it will be joined into one string. So let's try it out with a weird, maybe looking characters, or you can actually see it joined. No join requires a string array and a character. Now the string array is going to be returned to buy loads strings. And then the character is what you give it over here and for characters. I'm going to maybe used this character so we can see it. And then if I plant line text and it's going to be a very long string joined by this character. So if you can see here, I remember when and then we get this line and then I remember. I remember when I lost my mind and then it's another line, so we know it's working so instead of this, I'm going to make it a space. I want to join all of these. He's in his space. So all of this is one string right now and now we want to separate each words into an array of words. So I'm going to create another array where I'm going to create another string and it's going to be an array, this kind. And I'm gonna call it words. Words is basically splitting that long text using every space in that text. So not only the space that we joined the strings with, but even the space between each word. You can do that. Using this clip function and split takes into arguments a strength and the character that you want to split by. So if you choose to split by the letter T than every letter, T will be splitting whatever is in between them. So I'm going to just use the text string and then for a character, I'm going to use space. Now. If you print the first value of words, then we get I. If I print second value, it's going to be remember. So now I know that every word is inside of the string right gold words, and now I can use it in order to plot it into my screen. We can do that using a for loop. I'm going to create a static design. So stop the loop and then inside of the drawer function are going to create for a loop. And the for loop is going to be less band, the words arrayed out length so I can use the text function that we've used before several times and inside of the text function. We know that it takes a word or a strength, and the words are actually a bunch of strings, and I'm going to use the index to get every word inside of the words, all right, And then I'll quote them ads. What's divided by two in height, divided by two and again because the default value for Phil is whites were going to have to change back into lack, you know, to see it. And if you want the text to be aligned to the center, I'm going to use text align. It's to center, and I can see that the words are actually in the center. No. Instead, I'm going to use a random value for each word. So I'm going to put the fill inside of my array so I can get a random Phil for every word. And we used the actress Be color mode was because it's much easier for me to randomize mm for hue and saturation. I'm just going to do 60 for sexual ation and 100 for brightness and for he was going to be randomized. So now if I run this, we're going to see a bunch of colors. I can also leave it at the highest saturation and brightness. Can we have a rainbow of color? Now we know that all of the words are actually on top of each other, so we need to randomize the position for those from zero to width and from Zeros Heights for X and y. Now I can see that we have screen filled with all of the words of the lyrics from The Crazy song, in my example, actually rotated each one of them. So I used push matrix and pop me tricks again to create a different layer for each of the text. And then I used translate to move the text to random position instead of moving them themselves because I want to rotate the canvas. No, this can be at 00 point of each of these layers that I'm going to. So now I can rotate without it breaking anything for me. And it's going to be a rotation of friend, Um, from zero to a full circle. So two pi now I can see them rotated. You can also add margins to it. So if I want to randomize the position, maybe I want to add Arjun. So I'll do from margin to with minus margin. So I'm basically saying from the margin that I create, I haven't still created it, but maybe I wanted to be 50 pixels. That is going to be to here and then 50 pixels from this science going t to here. So I'm going to do 50 and then with minus 50 and then I will do the same for height. So from the margin, which is going to be 50 until heights minus the margin, which was going to be 50 again, let's create margins. Make it 50 pixels. Now you can see that it's pushed to the center and now we have 50 pixels borders on all sides. Right now, you have a lot of information to process and a lot of examples to practice in order to create your final projects. I'm not expecting big projects. Only wanted to create something that shows what you learned from this class. Don't be intimidated by the amount of information that you get from this class. I know the example started easy, and then they started to become more intermediate and its fans. But I wanted to be this way because I don't want to assume that you won't be able to understand any of this because I know it's easy. It takes a lot of practice just to understand how things work. But once you figure it all out, you're gonna be able to do all of this in no time. I haven't really memorized all of these functions just in one sitting. I did a lot of different products that were broken that made me memorize and understand all of these functions and properties that I'm using over and over again. So for the joint and split functions, for instance, in this example, I didn't know In just one night, I actually had to look at the documentation, look at other people's examples and find out How can I maybe approach this example? Also, planning is a good way to start your project. I always planned my project, especially on a piece of paper or sketching it on and iPad or on my computer. It just makes it easier for me to realize the project that I'm creating. So once I visualize it, or once I see it on a piece of paper, I am able to understand what I need exactly. So I don't just create the variables right out of the backed when I start my project. It's definitely not how the process works, even for these projects that I created for the design basics I had to test out over and over again in order to make them simple yet effective for you to be able to expand your knowledge in this realm of generative art. For the next chapter, we're going to export some of these designs based on what you're creating. So if it's an animation, we're going to save frames to create a movie out of them. Also, we're going to save static images and We're going to also save vector images so you can use them an illustrator or any vector software later on. So if you wanna learn that, let's get on to the next chapter. 43. Chapter 4: Design output: Now that we have all these fun examples, the next step would be exporting. These designs in this tractor will talk a little about the ways we can export our work. Whether it's a still or an animation, this will heavily depend on the type of work you're creating, so let's hop into the next video to learn more. 44. Save & export: OK, continue with their last example. I'm going Teoh, teach me how to export a PNG or just a static image. Whether it's a great big, ropy injury doesn't matter. But I usually save my images as PNG just because it's what I use the most. Now you don't need anything fancy in order to save your images and the majority of the time . This is why actually Dio Now, if you run this program right now, you're gonna have a static image. So this is the most easy way to save your images if you have static image that you want to save, the only problem with this is that it's going to save the resolution that you created. That means that my image is going to stake at 400 by 400 pixels wherever I take it. So if I take it to Instagram, for instance, I don't know if it's gonna work. But if it works, the resolution isn't gonna be great because it's a very small image. And for this small oven image, we won't be able to save it for a dust stop background, for instance, because it's going to be pixelated and stretched out. The first thing that you need to note whenever you want to save your image is toe have the correct size over here. So if you want to save an image of 1920 by 10 80 for maybe a movie or to save it as a thumbnail for a video, then I'm going to have to change it over here to 19 by 1920 by 10 80. But now, if I run it, it can actually go off my screen. It's not off my screen because I have a big screen but for you right now, because I only screen record part of my screen is going to be out of proportion. However, sometimes when I want Teoh save images that are huge, even bigger than 1910 by 10 80 I do set the size to that, and I don't care if it actually goes outside of my screen because I only want to save the image and then check it. And also be aware that if you design on 400 by 400 then creates the same design and a bigger screen, you're going to see that there are more spaces in between the words that we create it say can maybe scale it up by changing the text size, using the text size function where you can maybe create more lyrics or adds more lyrics to your text file. Ah, four shapes than you can maybe resize them or increase the number of them. For now, I'm going to just save it at 400 by 400 because I won't care about the resolution for now. And I just want you to see where it's going to be saved and how so. If I run this, we're going to see our design back to normal. And after everything is run so inside of my draw function after every piece of code I'm going to write a function called Safe Save only saves an image to the file name of the file path you created, so it expects a string and inside of my string. What I usually do if I know I'm going to save a lot of images is created a folder called Output. And inside of that I'm going to save my images. So the way I can create the folder from inside of this sketch file is by writing an inside of my string as a pack. So I write output and then the slashes going to indicate that this is a folder that I want you to create. And then inside of that, I can just do imagine dot p m. D or doctor a peg. Whatever extension you want to create for an image, I think there are multiple extensions that are supported. You can check in the documentation, but I know for sure that J. Paige and PNG are supported, and he can create whatever name you want over here. Just note that if you run the image or every time you run the image, it's going to override because the same image or the same name for the image. If you don't want it to be in a separate folder than you can just remove this part and it's going to save it in the same file, something to save it in the same sketch file. And this is my folder over here, and now if I save it, it's going to the output over here. I'm going to run, and after I created my say function, sometimes it's going to be much slower if you want to save, and then if I look at my folder now, I have my image, Safed. But he can see that it's very small, and if I want to increase the size, it's actually very pixelated. Now I'm going to show you what happens if I actually save it at a bigger size. So let's say 800 by 800. Now it's going to override the old image, and this is our new image. It's less pixelated than the previous one if I increase the size or Zuman is going to be less pixelated than the previous one. So that's why you have to know that the size of re canvass going to affect your output, going back to the rotation example where we created the star. We're going to save this as an animation, so we're going to save each frame of the animation Now. We can do this also the same way that we did say function. But instead of writing a safe function, I'm going to use the safe frame functions and it goes like this and it requires a string as well. On this file isn't saved are now, So this is not gonna work, so I have to save my file. No, I have my file saved, and inside of it because I'm going to save each frame is going to be a lot of images inside of my father's. It's much nicer and cleaner if you put it inside of a fuller. So I'm going to create the folder, this time called Output. And in here I'm going to add hashes for the number of frames. So usually I add four hashes and then the extension. So I created P and G's. No, the hashes are going to be substituted with numbers or with counting of the frame. So the 1st 1 is going to be 0001 and then the 2nd 1 is going to be three zeros and 2/3 1 is going to be framed threes, and it's gonna go on and on and on. If you reach a frame that has more than four digits, it'll adds 1/5 digit to it, so don't worry about it. So if you want your friends to actually start with just one digit, it'll add to the other digits to it. But I like to start with for hashes because the majority of the time I'm going to reach 1000. And now if I save this, we can go to our file and we can see that now we have an output folder, and inside of it we can see each frame printed or saved into this folder. So if I reach a position and the animation where I'm happy with, I'm going to stop this and look at my final PNG if it's broken and not saved yet, so I'm going to just live this so it doesn't break my animation when I want to create it inside of processing. If you go to tools and then you go to movie Maker, an inside of moviemaker, you're going to choose the folder where you have all of your image is going to go to desktop because that's where I have my rotation file. And then I'm choosing output. And now if I open it, it's going to change the path over here and now for width and height, I'm going to check. Same size is original. If you don't want to check this and you want to change the size you can, but it's better to use the same size so we don't ruin your animation. And then I'm going to choose the same frame rate as my friend right in the design. So I'll do 60 and I'll leave the compression as animation. And if you want to drag a sound file into this, you can ah, you can add one so you can add may be music to your design. And then I'm going to say, Create movie and then it will ask me where to save it. I'm going to save it at the same folder of my sketch Nikkan. Name it Whatever you Want, So I'm gonna call it Rotation Movie. And now, if I run the movie that I create it, I'll get the same animation that I saved from my sketch. I had a problem opening this movie file in quick time player, but you can open an envy Elsie or any other. You can also convert your movie to MP four and uploaded to any of your social media platform. Now, for a last way to save, we're going to save a vector file. No, I'll go back to my first example and the typographer section to show you how to save vector files or a Pdf files that you can open an illustrator and manipulate even further. No, this type of saving is a little bit more complicated than the other ones, but it's still very easy to accomplish. The first thing that you need is the pdf library from processing. In order to import a library into processing, you can just use the import keyword and the processing library or the pdf library inside of processing is inside of this. So if you type processing dot pdf and then dots and then a star, which means every class or every function and side of pdf now he can have access to saving PDS and then to save PDS, you have to encompass everything that you've created. So if you put the saving methods over here, then your file is going to have strokes because it didn't see no stroke. So he doesn't understand that you don't want the strokes, so you have to put it before everything. You're gonna have to put it before the background unless you change the background color. So I'm going to just put it over here for now, and it goes like this begin record because it records the screen until you stop the recording. So I'm going to begin the recording when I first start my sketch so inside of my set up function, and then the arguments that you use inside of begin record is the type of graphic that you're going to use. So here it's going to keep pdf and then the other argument is going to be the name of your file. So I'm going to just call it factor dot pdf. Now, this is going to begin the recording, so they're grinding will begin, and it will never stop. So if I run this right now and I start typing inside of my file, you're going to see a vector file that has zero kilobytes. So it doesn't have anything because the recording never really ended. So I have to adds a condition or a place where I can end the recording. Now you can end the recording at the end of your draw function if you had stuff going on over here. But since I'm actively working on my canvas, I cannot end the recording just arbitrarily anywhere. For that, I will have to adds another if condition that checks for one of the keys on my keyboard that ends the recording. So I'm going to use an F conditional. And then instead of key, I'm going to use key coat key code has some of the keys on the keyboard, like up, down and right and left arrows. So in order to track and for it to work, I cannot use key. I'll have to use key code. So I'm going to trek if key code equals, Uh, and all of this you can find in the documentation and then if key code is also if it hit the up arrow. The reason why I didn't use any of the alphabet is because they're used to type the shapes , but usually I use us to begin the record and e. T. And the recording. But for this example, I'm going to just use one of the key codes I have that I haven't really used inside of my program. I'm going to type and record. So now if I run this again and I start typing and then I hit the top arrow and go back to my file, it can see that I have my design state now. What's cool about Pdf's is that you can see them in any size, but they will be crisp, so they're vector files and they won't Pixel ate and you can open them. An illustrator. You can find all of these actually sectioned off, so each of these shapes are going to be their own shape, and you can also re color them. You can rearrange them however you want. So even if you create designs inside of processing and you want to export them to later use thumb in a vector file or in a vector software, then you can do that easily with PDS. And now, if I go right, click on it and you open with I can easily open it with Illustrator. But just know that if you open it an illustrator, it'll have a mask, so you'll have to unclip the mask or release the mask and then use the shapes inside. This is, of course, only gonna work with some designs because if we did this with our star designed, for instance, or one of our crazy circles designs, then it won't work because the file is going to be very happy for Illustrator, for instance, to open it because it will find a lot of shapes on that file, and it will be very slow for you to navigate through the file. And it doesn't make any sense to rearrange stuff like that anyways. So even the noise and randomness where we used points and we use the random walker that for processing to open is extremely, extremely heavy. So it's not a good idea to save it as a PdF to open it an illustrator. But he conceive it as a PdF and then convert the PdF to PNG so you can use a very high quality image. That would be a very good idea. You know, that we actually finished everything related to designing and exporting our designs. You're ready for some inspiration. So in the next chapter, I'm going to talk all about inspiration where you can get more to toils for generative art or from where you can get more practice so head on to the next chapter to learn more about that 45. Chapter 5: Final thoughts: congratulations for making it this far. It's time to find out where to go from here. Final Tractor is all about understanding how to code on your own by reading the documentation and going through examples, finding tutorials and feeding your eyes with plenty of inspiration. I can't stress enough how important the documentation. As for a programmer, it's basically you're amenable to everything you need to know. We're lucky that process ings reference page is extremely helpful. With the surplus of examples throughout, I highly recommend you start there and explore the possibilities provided by them. Once you feel like you're ready to tackle some more advanced projects, you can try. The challenges by Daniel Schiffman on YouTube were even visit his nature of code page, where you can learn all about simulation physics and my favorite Rickard agents. And if you're a book person than the book tentative design written by four artists whose names I'm not going to try to pronounce is incredible and dives into a lot of more advanced topics than this class. There's also a section on data visualization. If you're into that also here on skill share, if you search generative art or creative coding, you can find some artists whose classes are fun to take agenda. Artist named Melissa is one of my favorites now, for some inspiration, Instagram is definitely the way to go, Dr Hashtags generative or creative coding. And for some specific people to follow, I recommend these amazing accounts. 46. Final project: Now it's your turn for your project. Our money to include at least two concepts from the design Basics tractor. For example. In this project, I used shape and color. And for this one, I s shaped and image. It's up to you how you want to combine these as long as you're being creative with it. This is a basic score, so I don't expect you to make huge projects. It's merely a demonstration of your understanding of this course. Also not all great project has an array of colors. Black and white are still considered part of the color module. Some great artists, like a tan Jacob used black and white in their animations. So if you feel like you want to create an artwork with shapes in black and white, then do so your project has to be true to you.