 Hello, everyone. My name is Eylul Dorel. I'm an artist and open source advocate, and I occasionally, yay. Yeah, there's an obligatory on less tests make sure that voice is working sectional every beginning, so. Thank you very much for letting me know. So I occasionally do art with code, among other things. So, awesome. Thank you. Workshop, don't be scared by the slides. This is not going to be an fully structured thing. I do have my slides here because I'm going to be showing some images, think of it as a whiteboard rather than actual slides. So this is a bit of a weird thing. I'm assuming a lot of people here actually knows coding, so that will be interesting. At the same time, you're going to see a lot of the basics of processing, but this is not exactly a processing workshop. We are going to be doing quite a bit of coding, but it's not exactly a coding workshop. What I hope that you do get from this is less technical stuff. You can do a lot more advanced things with processing than I'm going to show here. What I want to give here is one, it literally just how do you think of programming or code as an artistic medium? This being said, is there anyone here who's actually participating who has never done programming before? Please don't be shy and let me know now because I'm going to adjust the speed of how I'm telling this accordingly. Okay, so we have one person. Okay. All right, so we have several people who are beginners here. I'm going to go accordingly and go with a bit more detail on the basics of coding. So, drawing with code. So what is programming exactly is something that I ask my students often. And I'm going to get back to that slide in a moment. What programming is at the end of the day is a series of instructions. And what we would think about when we talk about code is we always think about computers as smart. They are not really. And what makes programming for making a program, a list of instructions to a computer, a bit trickier is that it is, a computer doesn't speak language and it requires much more strict and determinate items. So programming language is that happy medium between something that we can still understand and something that the computer can understand with a reasonable amount of processing power. Yes, I know, we live in a world where a voice recognition is a thing. All right, so when I'm writing code here, what all I am doing is saying to the computer, do this, do that. The software that we are going to use to do this coding is called processing. There was actually a wonderful talk by Tristan Bunn this morning on the topic. And so I'm not going to go too much into it, but basically it is a language that was created specifically for artists and designers to use. And what makes it unique is that it is actually very easy to pick up and go with it and it is very self-contained, which makes it prototyping very, very fast. Hi, Anna. But yeah, so yeah, there's quite a few of you, so I'm going to go in that speed, it's fine. So yeah, this is what we are going to use. So when we are talking about processing, it's important to note that there is a processing language which is a programming language that is Java-based. So the syntax is Java-like and the underlying structure compiles to Java code. But then we have the IDE. So for example, this is the IDE integrated development environment, I believe there's an opening of it. So it is a software where you write the code. Can you write it without this program? Yes, of course. This just makes it easy to compile and run things easily, quite quickly. So I start writing instructions. I'm going to get this out of the way. Oh yeah, and processing IDE has two parts, one of them is called sketch. Sketch is where I literally write my code and when I run it and show the end result, this is called the canvas. Artists, the terms to make it a bit easier to understand. So the end result shows up in the canvas. What we do is in the sketch. So here I have my canvas, I have my sketch. There is one more term I need to explain and then we are going to start. So we have also something called a function. A function is a series of instructions that you can just put a label on. So let's take it this way. If we wanted to write a program for us humans, think of a food recipe. How do I prepare an egg? How do I boil an egg? You need your oven, you need your pot, you need water, et cetera, you have your ingredients set up and then you have instructions. Pour the water into the pot, put it on the oven, turn on the oven, wait for some amount of time. Well, the egg is inside and then you get off and then your egg is boiled basically. So now if you are doing an egg salad, you don't want to explain every single time this is how you make an egg. So you have the recipe or the knowledge of how to boil an egg and then in the salad it won't tell you how to boil an egg for the recipe for a salad that has eggs in it, you will have the recipe that says three boiled eggs and you can go and look up how to do that. So functions are like that. So if I have a function that says for example, actually let me just start a new code here. So if I have my egg salad item, let me save this as egg salad. No, I'm not gonna actually code this. Save as if I can find a folder. Egg salad. I might have a function that says boil an egg and yes, this is not Java. I'm calling it function by now, I'm gonna change it a bit and then basically here you will have the instructions for it done on your main function. You can say boil egg, add greens, et cetera. You can imagine that's how it's going to work. I'm gonna close this thing because I'm gonna delete this now because yeah. So that's what the function is at the end of the day. No, I don't want to change the changes. So when you write programs function on the Java, you have a particular structure and this structure by the way is gonna change from language to language. So for example, voice setup is how I declare a language and function. So when I write a function, I have the void that means what it returns. Sometimes your function as a result can give you a number, a text, et cetera. Here it doesn't give anything so it is called void. And then the setup and I put things. This is a special function in processing. It is a function that is run once before you show up your canvas. So anytime I press the play button here, it's going to run the setup function once and that is going to show me the canvas. This is my canvas when I, I cannot even, this is so small, I cannot even click on it. So I'm gonna leave that for a moment. What do you do when you want to draw a painting, for example? The first thing that you need to do is, well, probably prepare actually a canvas and to do that, I need to decide the size of it. Same here, I need to start by typing the size. So this is the height, this is the width and this is the height. So here I have 500 and 400, 500 is the width and 400 is the height. Okay, so far, yes, no, maybe. Please sell if there's questions. All right, next thing we need to do is that by the way, the double dash means comment. So basically whenever I say double dash, it means to the computer, this is not for you, this is for me, don't read the rest of it, please. Next thing we do when we are painting on a canvas is to put in a layer of paint on top. So that's what I'm gonna do here. All right, what is happening? So I'm saying background 255, let me show you this code before we put out it. Notice that the canvas actually starts as a gray tone. When I say background 255, it turns into white. This is how we define color in processing. So 255 is white, zero is black. And this is for the grayscale tones, for colors, there's something else we can do. So here is a list of the tones. So now we want to actually draw something on it. A simplest object that we can use is an ellipse. So again, I'm going to have the stroke color, the thickness and the color of the stroke and the fill which is the inside color of the ellipse. So you can kind of think of it as you first dip your brush into the paint and then you take up and then you put the color down. Every single time you change a color, you need to change the paint. Notice that here I have a color that is not a grayscale, it is three channels. This is an RGB color. That's a fancy name to say red, green and blue channels. This is using additive light colors. So if you take, for example, red and green and blue LED lights and shine it together, you are going to see white. That is how our screens work, et cetera. So here I'm actually defining in reddish yellow. This is my red value. This is my, I add a bit of green in twist so that I shift it toward yellow because red plus green is yellow. I don't put any blue in because I want to keep this color highly saturated. And then I draw my ellipse. Sorry. Okay, good to know. This actually scrolls work. So where I position the ellipse is determined by the X and Y thing. So when I type it here, well, first of all, let me determine the color. My fill is, let's make it 255, zero. Let's make it purplish. It's a pinkish purple. Actually, let's make it fully pink. Ellipse, notice that our coordinate system starts from the top left. So when I create a canvas, I cannot just point out the way I would and see where it is pointing. So I need a way to describe to computer how to look at the canvas. So we do that by giving an origin point and X and Y coordinates. X coordinates indicates where in the horizontal line you are at. So which column you are at in the grid of pixels. The Y coordinates indicates where you are in the height line or which row you are at. Whichever way you wanna think about it. So this is the place I'm indicating is the Y coordinates. So in this example, it is 300. And in the horizontal line where I'm at is the X coordinate, in which case that is 450. In this case, I'm going to put my ellipse at 500. So a bit past the middle horizontally and to 300 exactly in the middle vertically. And then the next two values are going to determine what's at my pixel side. What's the size of my ellipse? So I can just create a circle doing this. It's a pink circle. So notice that I don't have to have this be a circle. I can make it into an ellipse. So I can make it a vertical ellipse by making its vertical height a lot longer than the horizontal one. Or similarly, I can make this a horizontal ellipse. I can also make sure that there is no stroke around it. Now it looks a bit more brush-like. So similarly, again here, I am drawing an ellipse in a different canvas. The middle is, it's a circle that is 80 in diameter. And this is actually not exactly correct. This is the Shibuya radius by default. But radius or diameter actually might be diameter. Anyway, one way to test. Let's put this exactly in the middle and then let's make this, it is diameter. If it was radius, it will have covered the whole screen. So similarly, I can draw rectangles. Rectangles start from the top left corner by default. And then you determine the top left. Coordinates and then the height end of it. By the way, the reason I don't remember these off the top of my head is that all of these things you can change in processing. So you can change if you want to use radius rather than diameter. Or if you want to start from the center or the top left, these are things that you can change. It might feel like we haven't really learned anything yet but we just learned enough to be able to code this little cloud. So how do I go about typing something like this? And before you think that, oh, how is she doing this? I have my cheat code here. We are gonna put together circles, yes. So not a loop. Actually, we are gonna do this manually. So I want to start with an ellipse on the center, which is where, let me move this here so that we can actually see what we are doing. I want to actually start by this ellipse on the center. We are gonna get to the loops in a bit, not quite yet. I'm gonna prove you that it is not a fake. So I'm gonna start with a circle in the center. I love these reactions. So the center of the area is 400 to 300. And then I'm going to make this into 100 by 100. So, center circle. So that's the circle over here. This is a bit like playing a 10 gram game. Well, that's done. Well, you can notice that there's another circle here and then there's another circle here. Notice that this one is a bit bigger than the other one. So I'm gonna eyeball it and I'm gonna put, notice that I'm gonna actually adjust this a little bit. It will make a lot more sense why I do this in a moment. Actually, now I'm gonna just put the circle in there. 400 minus, hmm, this is 60 in diameter. So I'm gonna move this 60 to one side and then 60 by 60. This is actually a style that I could go with. Like I can also put the ellipse that is on the right side on here, 400 plus 60, 300, minus 26, 72, 72. Okay, this is not bad. Looking a lot like it, I didn't realize that. Okay, so you can start noticing that there is a bit of a problem here. Oh, that's my mistake actually. I haven't done this correctly. So notice that this could be a good way to do the cloud as well. It does look like H2O, but it doesn't look, it's not like centering on the cloud. And if you think about how the clouds work, they tend to have a, they tend to cluster at the bottom. They don't cluster on the center generally. Depends on the cloud, but generally you have them clustering on the bottom more like this than in the exact center. So how do I do this? One option will be changing the mode to try to get it from, start the position from bottom. But another way to think about it is that I'm aligning along a line on the center here. What I wanna do is align on the bottom. So what I do is I do shift these up as much as their diameter or something that's close, not exactly. So what I'm gonna do here is that I'm going to actually notice that this is, the center one is 60, I'm just gonna lift this up a little bit. And then I'm going to lift this up, wrong line, built a bit as well. I'm gonna also lift this one up a little bit. So I'm just shifting all of them up a little bit so that they are going to be more or less on the same area at the bottom. And I did not do this correctly somehow. Oh, I'm sorry. I was looking at the wrong thing. This is 40. I was wondering why I was doing that. That's not, so it's noticed that 100 divided by two is 50. This is 40. 100 divided by, 60 divided by two is 30. This is 20. That is intentional. I forgot to fix this one. You know, I'm actually not gonna fix this one. This is going to stay as test for now. So also this is where I'm going to start adjusting a little bit where these points are staying. Like, you don't have to do the exact same thing. This is just, when I initially drew this, it was literally by eyeballing it. So now I'm starting to get something that is looking cloud-like. I'm intentionally not keeping it exactly very symmetrical because symmetrical is what computers do. And what we do best is sometimes not being symmetrical, I'm being more organic. Ellipse. Now I'm going to just copy paste the rest of the code. I'm going to add the horizontal, two horizontals on the side, this one. And don't copy the whole thing, please. That's one. This is going to give me a shape that is pretty close. It looks like a hat. Yep. But it is not really filling together. It still looks very circle-ish. I'm just going to add some more circles into it. I'm just going to add four smaller circles. These are very tiny. They're just 40 to 40 pixels in diameter. I'm going to add them in between these other ones. So here, here, here, here. I forgot one of them. Oh, I copy-pasted the same thing twice. It's not the position on the code that affects them. It is actually the positions given the XY coordinates. And this is how I get to the exact same image. So you don't need a lot of coding knowledge to be able to draw in code. And maybe this is one thing that we are sometimes missing that we don't need for an electronic or code-generated art to look like it is code-generated. And we don't need to use the full capability just because we can use it in it. So this being said, this looks awful. This is really confusing when you look at it. What is this 400s? I mean, yes, one thing I can do is I can create a variable. Variable is like a shortcut value that you can create once. So I can say on my integer, it means a whole number. Cloud X is 400. Integer Cloud Y is 300. And then I can just copy, paste, replace all of these with this. This helps a little bit. You get the idea, but this is still a lot of random code. So what else can we do? How can we make this more modular? Processing has this nice option to just move your origin point instead. So rather than changing where you draw, you move your coordinate system so that where you draw is actually more intuitive. Think of this as you might be moving your hand with the brush to do a small shape, but you do move your whole arm to get to a different place in the canvas. This is the same idea. So I do a translate. By the way, you don't have to always use exact numbers. You can just get the width of the canvas and height of the canvas and divide them by two. Processing will calculate it for you. Another nice thing about programming is that this type of small task is easy to just delegate. So here, for example, I can move my coordinate system to the center of the canvas. Then suddenly I can just draw the center. So let's do that. Let's translate to 400 and 300. And then I just, these become the actual values where I draw. This is zero, this is minus. I need to remember to make sure that things are in there. So now notice that when I do this, oh, I forgot one of them. Which one did I forget? On the 400. Oh, I forgot a lot of them. This is the risk, but live coding. All right, let's see. Did I forget anything? There we go. And notice that again, as I said, I can just say width divided by two, height divided by two. By the way, for processing, you can actually look at the reference. You can find a copy of offline copy of the reference as part of the ID. And you can also download it from the website and look it up from the website. You also find a lot of examples there. So, all right. So this is how I can do this. So I can do translates multiple times and they add to each other. So if I made another translate that was going 100 down and 100 left, 100 right, sorry, the cloud is going to move. You can kind of see how this might be actually useful that I can just add translates or change translates and the cloud is going to move. There is a problem with this row. If you have done a lot of movements back and forth, how do you get back to where it was before? And for that, we use this thing called that is push and pop matrixes. So what I do is that, think of them as a save point. One second, please. Looks like I lost that slide. Okay. So think of it as a save point where you can go back to. For example, I want to actually draw another ellipse first that is at 100, 100. So let's say this way. I want to draw and square this at 100, 100 after this. Translate to 100. And then for example, rectangle that is 0, 0, 200. So right now what was going to happen is that the rectangle is going to be lower than the... So I start from the top left, I start from the top left and go to center, draw the cloud and then move 100 pixels down more and right more and then draw the rectangle. What I want to do actually is go to 100 back here. To do this now, what I need to do is that I need to remember what I did before, which is divided by two and height divided by two. Go in opposite direction of them and then add 100. Not only that this is not the easiest thing to do, but also what if I don't know what is up here or what was up here is changing. So this works, but this is not what I'm trying to do. So what pop allows me to do is that it allows me to create and save points. So I say pop matrix. Think of it as a layer of information. You put a new sheet on the new sheet and take notes. So when you take that sheet off, the sheet that's underneath has the information that you need still. Pop matrix, push matrix, sorry, that's the wrong one. I push a new information layer. I do what I need to do with that translate. Then I pop the matrix. I pop and then remove that layer of information. And then now I'm back to the top left as my origin point and I can go 100 from there or do something else. You can see how this would be useful if you are, for example, drawing a stiff figure where you have the head as a central point, body is related to that and arms are related to the body and then you can just do the pop command back up the layers so that you can actually see what is happening. So that everything is modular. You don't have to do that calculation yourself. You just, the calculation is done for you, that translations. Also, pop and push are useful for keeping track of other type of transformations. We are gonna get to them a bit later. Please tell me if there's any questions. I'm going at very fast speed here, so. So another advantage of being able to do push and pops like this is that I can start creating modular elements that can do what I'm doing. So for example, I can just copy paste this into a new function that's called cloud. It is void because it doesn't return any value and we are gonna get back to that parameters in a second. So I can do this. So when I say cloud, it will draw this and it's not gonna affect. So for example, if I'm driving a rectangle at 10, 100, 100, and 50, 100. Later, this is still going to use my normal coordinate system. I don't have to know what happens in this cloud function to be able to do what I'm doing elsewhere. So my code is modular. What is even better is that now I can actually give parameters to my function to say where I want it to be. Here I want it to be in the middle of the screen. So I have two parameters here that are, I can make them floats, for example. Float means number that can have quotients. Like it can have numbers that doesn't have to be whole. The other ones are whole numbers. I'm blanking out on the English word for it right now. They're real numbers basically. Float. Cloud X, float, cloud Y. And I can just translate this to cloud X and cloud Y. So this means that I can have, this is a modular thing. And that means that, for example, I can have two clouds, one of them that is at 300, 300s. Another one that is at 600s. Let's put these if it's 200 and this is 400. So I can have now two clouds. So I can even change the size of the clouds. I can have larger ones and smaller ones. It's my fault for bringing, the comment was, it's not clouds, it's distance storage. And this is my fault for bringing clouds as a drawing example to an open source software conference. So now I can, for example, what I can even do is that I can still use translates outside. So I can translate to position and then I can scale. I need to remember how to use this. Scale this to two. Actually let's scale this to 1.5. Let's be careful here. And then cloud and I can have, still have another cloud elsewhere. Let's keep this at zero, zero. And then I can still draw my second cloud normally. You can see how this actually becomes very useful very quickly. I can make this even bigger. I can make a second one that is smaller. You get the idea. I think I might have drawn the second one. So this is the, this is just a general idea of it. Yes, I know there's a rectangle that is sticking out. Let's get back to our normal. Let's be done with the cloud for now. But you can start seeing how this starts looking like you can create your own stamp brushes and work with them. And this is where the power programming is. You can just modularize an item that you figured out and let that repeat and then use that for something else. So here I'm gonna start with drawing two ellipses in the center. Notice that here these have four values. The fourth value is the transparency. The value is between, all of these values are between zero and 255. This is because eight bits, eight bits, the drill defines 255 as most people here knows between zero and 256 values to the eight power. But by the way, again, in case of processing you can change this values to what you want it to be. So now I can create more transparent colors on top of each other, creating a bit of a gradient, minus the lines, or I can create something like this alternating the colors. Here I'm doing something a bit different. I'm using, you might notice that I'm using this function. Yeah, it was a bit fast. So, oh God, I forgot that we are actually covering two things. I forgot I was already going into four loops here. No, actually I'm going to go over the four loops because that is something that's new. But to go to four loops, I need to first go into the if statements and conditionals. Okay, think that you are in a road and you're on the highway and you are taking a road and then you see a line that says, turn left for city X, otherwise go straight. That's basically what an if statement is. So this is what we can do. And here this is something I can also do. I can say something like, trying to think of an idea. If the, let's stop with the cloud for a moment. I'm going to draw, let's see, is two, I'm going to do something, otherwise I'm going to do something else. Let's make the fill color red, else green. So in this case, my rectangle is going to be red, but otherwise my rectangle can be green. This seems pretty abstract for now, but it's going to be useful for us in a moment. So another thing that we can use is, notice that if I want to write a lot of ellipses, for example, I want to create a line of rectangles here. You can see that this is repeating many times. This is nice, but like, if I want to do 20 of these, this is going to be a lot of code. So how do I do this? I use a structure that is called a while loop. So a loop, loop basically says, keep going. Remember when we were saying, preparing the egg, I said, wait. So wait for four rounds, wait for three minutes, then do what you need to be doing. So I can say, for example, or I can say, while not, this is cooked. This is not cooked, wait, then finish. So here I can say, I want to draw eight of these rectangles in a row. So I can say, while I keep a counter is eight. This is shifting higher and higher. So let's get this back in the screen. My counter is eight. So while counter is bigger than zero, draw a rectangle that is at, it's over, it's going to be at 100. We're not going to change that. But the width is going to start at 100 and that is going to jump by 100 every single time, if you remember. So it's going to be times the counter. And then what I need to do is that I need to update the counter. Now I have a loop that adds eight. It was called rectangles. Now this is a bit cumbersome every single time you need to do because you will need to do a lot of loops like this. One thing that we can do to make this simpler is we can say minus equal one. This is just exactly what it was before. It's just shorter. Or if you are decreasing by one, you can just do minus, minus. Even this is still, you need to remember to make sure you are declaring and counter. You need to make sure that you are updating the counter. There's another syntax that does the exact same thing. This is called a for loop. So I create counter that is in counter. That starts at eight. Make sure that counter is bigger than zero. And counter, I'm going to increase the screen. All right. Let's remove this extra group. Sorry? Yeah, thank you. I will have noticed in five minutes I got warned that I initialized the counter to zero. Here's your proof that I'm actually not doing this. I'm actually writing this in real time. So all right, I need to remove this item as well. So this is exactly what we had before. So declare the counter, reduce the counter at the end and make sure that it is above a certain thing so that it doesn't loop in differently. And then I draw in the middle. There we go. And this is what the for loop is. And getting back on the topic, this is exactly what we are using here. So I'm creating a for loop that is basically the size of the largest circle and I'm reducing the size of the circle every single time until it's bigger than zero. And then I'm drawing that circle at that diameter at the same spot. As it is transparent, it gets add up and gets darker until it's become fully opaque. And then it just continues like that for a while. So here again, we are using the ideas of if statements and for statements together, for loops together. The for loops together. So I actually have this code. If I can find it. This is not the one. Well, I can type it again or I can actually copy paste it. Start a new file here. Okay, this is not copying it now. It was copying earlier. That's because it's PDF. I'll type it again. So here, what I'm doing is, let's see. What's the top size is 600 by 600. Background is 255. It is white. I'm starting with white. And then I'm actually creating an, I'm translating to the middle, same idea. And then basically what I'm doing here is that I'm starting a for loop that draws concentric circles like the previous example. So int diameter is 800. Yes, it is larger than the screen because we want to fill the whole screen up. As long as D is bigger than zero, D is decreased by 20 at each step. So I reduced diameter by 20 at each step. I can write this as D minus 12. That might be a bit easier to see here. I don't understand here. Then I do something weird. If I just left it here and I just said fill width 255, for example, and then drew the ellipse to 00 diameter, diameter. What happens here? I'm missing a part of the for loop. I forgot to complete the for loop. I forgot to complete the setup. So I get an outline of circles. Not very visible, I'm assuming here, but you get the idea. So I get concentric circles. But what I want to do is that I want to color the first one white and then the next one orange and the next one black. How do I do that? We use the operator called modules. This is something we use a lot. It's called basically what it does is that it helps you to alternate things. You can think of modules as think of the way you used to do divisions on a whole number of divisions in primary school. You, for example, divide 32 by three. You have the result and then you have the remain. That module's value is the remaining. So for example, if I said four modules one, let me go up here for a moment. If I did four modules one, that would be a, sorry, four modules three, that would be a one. Four modules, five modules three would be a two. Six, that would be a zero. And seven will be a one. You start seeing the pattern. So if you want three colors to alternate, you divide it by three. If you want even an odd, you divide it by two. If you want something that is more color transitioning from one to another, you put a larger value. And this is something that we can use very easily to create returning loops if we have a value that just keeps increasing. So here I say, if the diameter, this is actually not correct. If the diameter times 20, which is the width of the each change, this is a value. And I want to turn this into a float because otherwise it's gonna give me errors. Basically, one problem is that whenever you go from whole numbers to full numbers like this, you need to make sure that you do change the format. Otherwise you might run into issues. Let's just say my ring ID is D divided by 20. And this is a float. Let's just hope this works. The other code also worked, but if ring ID is modulosity is zero, let's make this one color. Let's make this black. Else if ring ID modulosity is one. By the way, single equal sign as signs, double equal sign means equal to. This again changes from language to language. So you need to check the references, but with processing and Java based languages, this is how you do it normally. Else I'm gonna change the colors in a bit. So it is, I'm gonna cheat a little bit here. So it is black, orange, and white. You're stopping, I wrote this correctly. Let's close a for loop and this is what we have. So this should be drawing ellipses and changing colors. Closing parentheses, I forgot that. And here we go. Does this make sense? Yes, no, maybe. I'm gonna put them up in the GitHub after that. It is overdue, so sorry about that. So then basically what we can do is that, do I have a bit more time to continue this a tiny bit more, 10, 15 minutes? Okay, all right. So until this now we have discussed the idea of setup. There is another special function in processing that is called draw. What draw does is that setup is run once and then the canvas shows the person viewing the canvas. Set draw, draws on that canvas every single frame. So I have, for example, I set up this and I'm drawing this. Before I was drawing this on setup circles, concentric circles, now I'm drawing them during the draw. And what I do is that I keep moving the translates sideways and the end result is a moving circle. And this is how we start animating. Yeah, it is. This is just to give a very simple example of what is happening. We are about to get a bit complicated. I'm trying to find the right code so that, here we go. Here's this exact code that I have written before. The only difference is that I have now moved it to the draw function. Let me remove these for now. This is the function from before. And notice that it is just the same thing. What is happening that we are not seeing, however, is that this is just continue to draw, draw, draw, draw, draw every frame. I'm going to reduce the frame right here a little bit to two, two frames per second. I'm going to do that on the... I'm going to do this in the... Oh, this is already done. Okay. So what I'm going to do here is I'm going to create a new variable that's called loop. And loop is a value I'm going to calculate that is frame count, modulus 40. This means that my... This is just so that I can just... I don't have to do this, but at the same time. Actually, I need to do this because it's going to make sure that the ring changes, remember, was 20 pixels each. So every single time I move these inside by 40, I get to the same layer. I'm going to explain that in a little bit. So what happens is that if I remove the loop out, I make circles that are walking in. I'm going to explain a bit how this is working. So what is happening is that outside of the circle, what we don't see is that I am not starting at 800 diameter. I'm starting at slightly smaller diameter until I get to 760 and then come back. So I'm alternating between three values. I'm alternating between 800 diameter, 760 diameter and sorry, 780 and 760. And every single time as I start from the black circle, what is happening is that black circle starts closer, smaller and that means that I have less space to move in. So what happens is that the inner black circle that was here on frame one is here on the frame two and it's here on the frame three and that it resets, but notice that the next frame, I do come back to what it was before where this black circle here becomes the one that is here. So I can actually start looping. We discussed earlier that you can translate items around but we can also rotate them. And this allows us to draw even more organic shapes. Notice that whenever we use angles we are using radians, not degrees. So we have health pie, quarter pie and pious shortcuts, but it is very easy to calculate the rest of the numbers. Quite honestly, the things that we are going to use anyway is going to be divisions of 90 degrees and 180 degrees. So it works out well. So for example, if I drew an egg shape, I can rotate it and now I can create a shape that is like this. One thing to be careful is that make sure where you rotate from. So notice that I translated first and then rotated. If you don't do that, you might end up with some very confusing and results if you lose track of what you are doing with the translations. And here's a very simple drawing to make. This is the last one I'm going to draw from scratch because time knew. I know I have a processing sketch called egg salad. I'm not going to be uploading that one if you guys don't mind. So let's see. Void setup size is 800 to 600 background is white. I'm going to draw this on the draw. Void draw, actually I'm going to take the background here as well. Let's make the frame rate small. So I'm going to create a for loop of five ellipses I'm going to draw less than five i plus equals one. Or in this case, I can just say plus plus. And for each of these things, I'm going to draw exposition, horizontal position is going to be width divided by five. Let's make this into a float. And I'm going to multiply that by the float version of i. Let me just make this wider. As I was the whole number before, I'm just converting it to a float. Now this is going to almost work. Let's make the size of those things ellipse. These are going to be 0, 0, 200, I believe. No, 100 to 200 or something among those lines. And we will have to, first of all, let's brush into the paint. And then we do translate to, we need to translate after it. Again, remember push matrix, translate, 0, 0, no. To exposition, and then the y is going to be simple. It's going to be just height divided by two. Draw the ellipse and move up. Notice that we almost got the correct solution here, but I'm starting at zero. So I need an offset. So the offset is, easy way to say that is we can eyeball it. The better way to think about it is that we can actually calculate that distance. What we can do even is that we can actually start on the coordinates here, and then we can just do an offset. So I can start at, I can translate to the middle of the screen first, middle of the canvas. And then what this area is, is minus two distances, minus one distance, middle minus plus two distance plus one distance. So what I can do is that I can start at minus two, finish at two, and then I can calculate it this way. And then it should normally give me the same correct value. This is zero. This is almost correct. It's not quite correct. I is equal or same to two. So we want to go from minus two to two. I want to minus two, minus one, zero, plus one, plus two. And then what I can do here is that I can add random rotates each time between pi, actually quarter pi, times the random value between minus one and one. This is even going to be too much rotation. So I might actually divide this by half later. So now we have moving beams. I can make this also be 0.5 so that it is just shifting a little bit less. Then we can of course use the parallel noise which is going to give us continuous values so that we can actually make them move smoothly. Or you can have another way to calculate how they are going to be moving. Another thing we can do is that we can use multiple floats together. So here I created brushes. I'm not going to show the whole quote here for time's sake, but these are basically, think of the cloud example where I was creating different brushes. This is where I did. This is a code I wrote for my students. And this one actually I think already is online on my GitHub. I have different brush sizes, different brushes. I have a dark gray large brush. It is a gray color, the brush size 50. I have another one that is 25. It's smaller. Then I have a brush that uses two brushes together. And then I have one that makes a gradient. So this is the gradient brush that has been indicated. So when I run this, I end up with this value, this result. I can see again how you can create very complicated things out of very little amount of code. Yes, there is a lot of complicated things that you can do, but a lot of the very beautiful generated images are actually very simple. It's all about layering. You create smaller modules and you build on them. I created this individual brush systems. And they are by themselves very simple, but then I made them into a function that I can then use as a brush stroke and then add on top. Similarly, translates by themselves, I can create them, but when I can moderately add translates, I can move to very different directions and angles that I wouldn't be able to calculate on my own. And that's where the computer becomes very useful. You can go far with this. And there's definitely use. This is an, I'm going to very quickly show the code. This is unfortunately still not online. That is my mistake. This is a very, this is a code I actually wrote for an arts project. And this is completely coded. I haven't drawn hand drawn this at all. I had a draft sketch, but like I literally draw this on the code. So I have an function for the eye. This gets very complicated mostly because it is animated, but notice that I'm just thinking, let's look at this color for a moment. What this is doing is that it is moving the eyes, blinking the eyes, moving them side by side. For example, I know that when I'm looking side to side, the iris is going to move slower than the center where the hole, I forget the name. So that gives the illusion that we are moving. The mouths are just a single line and literally I created transparent lines added on top without no stroke to create these gradients. These are busier curves, but again, pretty easy to use. But you can also imagine that you could do this with lines. And I animated it. The reason I made it this way was because this was going to be projected on a skyscraper and I had to be exact. I had exact pixels I had to work and I needed an image that was exactly symmetric so that in two angles of the skyscraper, it will show different facial expressions accurately. So I did bring a video of this, but I'm going to also link this on the chat because this is going to be hard to see here. Yes, I used some objects, but honestly, you could literally create it with what you learned today. You could just draw this with what you learned today. And especially with the animation side, just coding automatized a lot of things and allows you to be very exact. Thank you. It went extremely fast. So if there are any questions, please do ask them. I'm going to put this code up in GitHub, at least some of it, and not the Excel, if you don't mind, again. And I'm going to, a couple of it is already there. It is on my GitHub account, but if you follow me on Master of the Art, I'm going to put the link there as well. I'm going to put the GitHub here as well, but it's not up there yet. Just remember. I normally teach this in about like five and six hours spread out over several weeks to my students. This was fast. We did this in an hour. Yeah, I was hoping that people will take some time to start working with processing and they can ask if they have the questions. I was actually hoping to give more time to that. Well, I have a couple more examples here. A couple of items that are a bit easier to see and if I can find them. For example, I have this sketch here that's called oil painting, posting a very large item. It's basically does a gradient of color and randomly does transparent squares that add on top to get that sort of cloth texture. This is just squares. This is just randomly placed squares. This was in Hong Kong. The skyscraper was on Hong Kong. It was part of the ICL conferences. I see a 2016. Yeah, by the way, if you use the processing version of JavaScript version of processing the P5GS, you see push and pop only. So not push metrics, pop metrics. What happens in processing also has the ability to push on pop style. So fill colors and stroke colors. So think of it as you can store different paint brushes and then you can swap to the previous paint brush. What JavaScript version P5GS does is that it does everything in one stack. So matrices, the transformations and the style elements are hold in the same category and they're removed together. The building in question has a video system in place that basically a light system in place that does view the videos. So we were given very specific dimensions and they did just convert it to the format that they had and uploaded there and showed it. It wasn't projected, yeah. Yeah, of course, hang on. If I didn't close this, I did close it. Okay, doesn't matter. I'll open it again. So let me open this wider so that we can see the code. I can actually go over this a little bit. So by the way, this is already up and this has a lot of comments. So I also put the color indications for students. So what happens that basically I keep an array of a list of various brush styles and I set them as text. This is not a good way to do it but I was mainly coding this to demonstrate arrays lists. And then I prepared size, background is white. I did define the value white so that I could use it more legibly. Then translated to, basically started translating, translated to the beginning. I think I fixed this actually now. This is not in the code. I just put it there so that I centered it manually. So brush changer. What happens is that the brush is changed every single time but we change it every single time that we are moving through. So brush one is dark gray. The brush two is a smaller black one. Brush three is the double one that's combining these two by the way. This thing, this code just simply invokes this function and this function on top of on top. And this one does the blurred circle. And it repeats what happens that there is five rows. So the one, two, three, four, five, it becomes the first one, six, et cetera. And it goes in columns and alternates which is what gives us that alternating pattern because the number of brushes is not a multiple of the number of rows we have. So we have for loop that is going through the X positions and then we have for loop that is going to the Y positions. So it goes one, two, three, four, five, six, seven, eight, nine, et cetera. This type of dual loops is used a lot in visuals because we often do need to create grids for various reasons or you might need to go through and edit on every single pixel. This is how you do it. And then basically what I'm doing is that I am changing the brush based on where I am. Brush changer is, where is the brush changer? Brush changer is increased at the each step basically. Every single time I am in the inner loop. So every single time I draw something, I'm updating, I'm going to the next brush, rotating. And this brush preset length is that, remember the list that had the brushes? The length of it is four. That's the value I'm getting. I could have just written four here but this is nicer in future. If I want to add more brushes, it's going to add it and I'm not going to have an error here. So brush position XY, brush preset. So basically I'm giving my function where I'm supposed to be drawing that brush stroke and which brush I'm going to use. And this, by the way, in this case is a string. Remember that my brush array is a string. In the ideal world, I will create objects with this but we are artists. We are not supposed to optimize our code. It doesn't matter. Do what makes sense to you. So if my brush preset is zero, the same thing as this. So it's a dark gray, dark brush. I do my fill, gray, no stroke. Brush size is 50 and now I draw my ellipse. If I have a small black brush, I just make my brush black, no stroke. Brush size is 25, half of the other one. And then I just draw my ellipse again. If my brush size is brush preset two, which is the big one inside the small one, this one, I invoke the brush function. I don't rewrite the code. I just invoke the brush function with zero and then the one. So I draw the big gray circle and then the small black circle on top of each other. Problem solved. The last one is brush preset three, which is where things get a bit more complicated. And that's not even that complicated. Remember the code we had with the orange one? I basically create an gray that is, I create a gray tone and I just, I increase, I darken the gray tone as I go inside. So I create the biggest circle at 255 diameter and then 254 diameter, 253 diameter and the color is going with the same direction. So I start at white and slightly gray tone and then more gray tone and then more gray tone and then more gray tone all the way to black. And I cheated here by making this ellipse a multiple of the 255. And I'm also changing the values every five steps because I'm changing, I'm going basically, I'm going five tones difference at a time. Doesn't make sense. Thank you very much. And as I said, I'm going to put it on GitHub, but at the same time, feel free to follow me on massive and art. And don't hesitate to ask me questions. I really don't mind. So feel free to ask if you want to ask more questions about the code or you write something and get stuck. Thanks.