Making Generative Art | Intro to Processing

processing is a programming language designed for creative coding it's great for beginners who want to learn how programming works but it's also used a lot by designers who create all kinds of artworks with codes in this video i will explain more of what processing is and why you would want to use it then i'll show you all of the important basics then we dive straight in to create an interesting piece of genitive art together it'll be fun and easy and by the end of this video you will know all you need to know to get started with creative coding my name is daniel and welcome to this intro to processing processing is the name of the programming language but also the name of the environment in which we write our codes you'll need the processing software to be able to run the code that we write and you can download this for free it's open source and it's available for windows mac and linux i'll put a link in the description of this video so processing is great for making 2d and 3d visuals and animations and this is also what makes it great for beginners in other programming languages your first program might do a few simple calculations but in processing your first program will draw a rectangle on the screen and this can be much more intuitive so the programs that we make are called sketches and sketches can be super simple just a few lines like this example that draws two ellipses on the screen but they can also be super complicated and consisting of multiple files that are interlinked all together depending on what we need but what i find very interesting is that very often with just very few lines of code you can create effects that look very complex and this is what makes processing so powerful and now with all this info out of the way i will show you some of the basics of how to use processing let's go now if you first open up processing you see what we call the processing environment and this is where we write our sketches if you click the play button you will run your codes right now because we haven't written any code yet it just shows an empty canvas and a sketch is a series of commands that we give to the computer and we call those commands functions and the first function that i will teach you is the function size and size is a function that takes two arguments to two parameters that we need to input to set the width and the height of our canvas i'm going to set the width and height to 800 by 800 pixels and every line of code we write needs to finish with a semicolon behind it this can be a little bit annoying but uh yeah just has to be done all the time otherwise you'll get an error now if i press run we will see a canvas that is 800 pixels wide and 800 pixels tall now the canvas is still empty so let's draw something on it and we will draw a rectangle using another function called rect without the s rect and rect takes four arguments for parameters it's it's the position on the x-axis the position on the y-axis the width and the height that we need to set and then another semicolon let's run this so um there's a coordinate system in in processing that has zero zero on the top corner and then on the x axis i wanted to go 100 pixels to the right and then on the y-axis i want to go 200 pixels down and that's the top left corner of our rectangle and then i gave a width of 300 so that's over here and then a height of 50 pixels so this is 300 this is 50. this is 200 and this is 100 that's how we draw on the canvas all right so size and rect are both functions and maybe we should label them as such functions and to forward slashes signify comment this won't be read by the computer this is just for us to help ourselves not forget what we're doing the next building block besides function that's important to programming is called a variable and those will come in very handy in a variable it's like a box oh that's a really bad box let me grab my pen it's like a box that holds for example a number and it has a label a name my name for example and i can put anything in the box i can put another number in there and every time i ask the computer what's in my name it will tell the number five and you'll see in a second why this is very useful let's create a variable i do this with the keyword int and then my name and then i say is includes it holds 50. now in is a keyword that signifies that creates a variable but it creates a very specific variable it creates an integer a whole number so i can only store numbers that are whole in this type of variable now that i have the variable my name that contains the number 50 i can use my name to replace for example this thing in rectangle say my name and now if i run the code it will place the rectangle at 50 pixels from the edge and 200 down because replace the x position with my name and this can be super useful when you want to reuse a value for example i can make a new rectangle that i call rect and i say my name my name my name is a bit of annoying name my name but it works semicolon and now we have a second rectangle that will be 50 pixels to the left right 50 down 50 wide and 50 tall and if i want to modify this i only need to modify my name and turn it into 350 for example and suddenly everything has shifted because now of course this is the second rectangle that we draw and this is the first one and then the first one has a width there's an exposition of 350 and the second one as well so they're both 350 pixels from the left but this one has drawn 350 pixels down 350 wide 350 tall etc so i can really easily manipulate now everything that happens on canvas just by manipulating one number which is my variable and it's very useful oh and another thing that's useful is that you can change the variable at different moments so for example here if i say my name is my name minus two hundreds what happens over here is uh over here my name is 350 minus 200 of course becomes 150 and therefore my name is 150 but because all of our code is being executed from top to bottom first this rectangle will be drawn and at this point it's still 350 and only afterwards the my name changes to 150 and we get this new rectangle with 150 150 150 so let's let's run that and there we go we have a new rectangle that's 150 and this one is still 350 pixels away from the edge as it was written here now you don't always need to create variables yourself there are some variables that are already built into processing and those can be very useful and to show those i first want to show you a slight different structure of a sketch that we can use and this is a slightly more advanced we're not going to use this in the rest of the tutorial let me comment this out to remove it by pressing ctrl forward slash and the structure is using a setup and a draw loop this looks like this for its setup and then these are special kind of functions that i create that processing calls for me but don't worry too much about it i just want to show this because you will see this in many other sketches so that when you see it you recognize it and the way this works is that whenever a sketch is run everything is set up it's only run once so for example your size you only want to set up one time and then draw as being drawn repeatedly we can say put a rectangle correct and then we use the build in variables mouse x comma mouse y and these are automatically set by processing to the position of your mouse on the canvas so if i run this you will see a square of 50 by 50 that follows my mouse and this draw loop repeats about 60 times per second and tries to keep on drawing the square wherever my mouse is and the reason you see all the other squares that are not being removed is because nowhere i told the computer to remove the other squares so every time every frame a new square is being drawn under my mouse so those are building variables but this construction of the setup and draw we're not going to use it for the rest of the tutorial so don't worry about those probably my favorite building blocks in programming are loops and i will show you how to use a while loop if you already know a little bit of programming you might want to look into for loops they are more useful for most purposes but in this case we will stick to while loops because they are more simple and easier to explain let's remove all this again and the while loop starts like this while something that we fill in later and then uh how do you call these parentheses one to open and want to close the block and this block is going to repeat until as long as the while condition is something um we create a new variable int i and i is just a convention to use as a as a name when something is uh used for a loop and i is going to be zero now we're gonna add a condition here while i is smaller than 10 then this thing has to repeat and then at the beginning here we're going to write i equals i plus 1. so what's going to happen is every time that this loop runs i is going to increase by one um because if i is zero then i zero plus one is one if i have one is one plus one is two etc and then until i reaches 10 because then this is no longer true i is then not smaller than 10 and then it will end the loop and i can show you better how this works by using print print ln which stands for print line parenthesis and print line i'm going to print the value of i so it's going to print whatever i is then whenever you finish we're going to print [Applause] line done all right i run the script and now we have looked through this loop invisibly though it's not happening in the canvas but it's happening here in the console down below and this is where all the print statements are and this is very useful for for debugging if you want to know the value of a variable and you can't figure it out anymore you might want to print it out so that you can see it but we see now it prints out this number because this print statement is being run 10 times and then after it's been finished it jumps out of the loop and prints we are done so we can also use the loop to draw 10 squares let's put the size back in and actually we can remove all this code because we're no longer using it now um i'm gonna put rect and then the hundreds hundreds uh two hundreds two hundreds right and if i now run this we see only one square even though it says here that it looked ten times and of course they're all placed in exactly the same position so we can't see the difference but there's a trick to that actually i'm going to make it a little bit smaller there's a trick we can use the number i to create unique positions for all of our rectangles if i say i times let's do 80 then the first time this will run i is 0 but then our loop starts and i becomes 1 1 times 80 is 80 and then the next time this loops 2 times 80 will be 160 etc and that is how we get the squares lined up in this line and i can also change the y position of course maybe i say i times 5. and there we go we can now draw lines uh using eye it will be all in position different positions but it will always remain a line and what i kind of want is a grid and for that we need to upgrade our loop so we are going to put the loop inside of our loop so it's exactly the same structure as before um let's say int j that's again convention there's no particular reason why you should use a name but i like to do it while j is smaller than 10 and then curly brackets and now this loop i write j equals j plus one and then we put the rectangle drawing we put that in here now we want the x position to update every time i is going up in the y position to update every time j is going up let's say also by 80. and maybe also write a print statement because that will help me explain what's going on print this time without line because i want it to be all in one line print j plus a space so that we have it's easier to see all right let me first comment on that space so now here this prints this just puts a space between every time it prints j so all these lines are the js and then also it doesn't skip a line every time when it prints a number but of course more interesting is the canvas and what happens so the first time this runs so is zero i becomes one and then it prints out this number one that's over here and then it jumps into here j zero and j becomes one two and then it prints out the number j that's over here and then it draws at 8080 which is this one now this loop repeats because we are at the end of the loop and j is still lower than 10 so it becomes plus one again and then we print at 80 160 because now this number is being updated this number is now 2 and 80 160 happens to be here so this is number two that goes on we go to 3 4 5 until we reach number 10 and then of course when j is 10 it skips out of this loop and goes over here and then also this one is finished so it goes out but because i is still smaller than 10 it doesn't continue it jumps back over here and it prints out i again which is now 2 and then because the position is now updated now i is is 2 so 2 times 80 is 160 which is this corner so we have number 11 12 and so on and so forth and that's how it fills this whole grid and you can also see it in the in the console so it writes these 10 positions of j and then it writes next position of i then position j next position of i until it is done that's how you create a loop in a loop and you create a two-dimensional structure with it so it goes in two directions and grids are super powerful i like to use them all the time for all sorts of things okay we are almost ready to start doing something more interesting but before that there's one more function that i need to show you and that function is called random let me remove this and actually comment all this out ctrl forward slash and then random takes one argument let's say 10 and a semicolon actually i want to put this inside a print statement prints line random there we go now this will print out the value that random the function random returns to us and random returns a number that is between 0 and 9.99 not 10 included and if i change it to 5 it will return a number between 0 and 5 of course or 0 to 4.99 and every time we run this it will return a different number now it's 2.6 and now it is 1.9 and we can use a random number to set the size of each of our squares differently so um in here we say instead of 50 we want random 50. and let's also put that's the width and that also put the height of our random 50 and run now we should have a grid with all rectangles that are different that have random width and height but actually i wanted to do all squares and to do so we need the result of the random to be the same for the width and the height so i'm going to create a new variable [Music] in let's say square size is random 50 and then we can use square size and input that here and we can input that there and let's see what happens if we run this we get an error it doesn't run and it says here in the console our error says cannot convert float to ins now what you may remember is that we run random here in the console we saw that it was not a whole number it was not an integer as such and ins can only store whole numbers so it cannot store the two point something something something for example and one way to solve this is to round off the number into a whole number but in our case we are just going to change the data type that we store into and we can also use a float which is short for a floating point number a number with stuff behind the decimal point so a float random should work and because the function rect doesn't care whether you input integers or floats as there are arguments it should still work right now so if we run this we only get squares because every time the value of square size is going to be the same for the width and the height so now we are going to use all that we have learned and put it together to create an interesting work and actually we are going to be creating this and we can do it with mostly the stuff that we've learned so far but in the process i'll also teach some more things about color and what you see here is again a grid of squares in different sizes but you see that there's three squares actually so that's the first thing that we're going to make in every grid there's three squares and we do that just by writing some more squares we copy this rect and every loop we want to create more squares but they have to be a slightly different position to be seen so maybe i can add 10 to the x and y coordinates and 20 to the next one and now we should have three squares stack on top of each other so they're all 10 pixels apart because i update the distance plus 10 and plus 20 for the second triangle now it's good practice whenever you are repeating a a number to make a variable of it so this i times 80. we're repeating it over here and over here and over here so instead of having to type that three times we are going to create an integer and [Music] that's called position x is i times 80 and we can do the same for plus y is j times 80. and then we can insert x in here and then here and in here and this of course being updated still every loop and pause y we can do it instead of j times 80 here and here and here but we also have this distance number this 10 that's being repeated here and it's 20 that's being repeated here we can actually create an integer called dist which is going to be 10 no actually straight away let's make it into a float and do random 10. so we get a random distance and we're going to use that over here and here we do it times two so that the second the third triangle goes a little further away and now we get something that looks slightly different everything has remained the same except for the distance that is now partially random so sometimes they're really close to each other and sometimes they are nearly 10 pixels apart and the next step for me will be to color those shares those and the next step for me would be to color those squares so we can color things by using the fill function fill will set the fill color and fill normally takes three arguments one for the red one for the green and one for the blue component and i want that to be all the way red that is two five five is the highest level can be no green and no blue at all and if i run this we will see all red squares and now i want all squares to be different so the next square is going to be the same but green and no red and the last one is going to be blue so whatever i set the fill color to all the next things that you draw will be using the fill colors until another fill color is set and we reset the fill color after every rectangle so we will have a different fill color for each rectangle let's run this and we see three different colors for the rectangles but you may have noticed 255 is again a value that we reuse so maybe we can set a variable for that again let's say in color now in color color becomes color straight away and this is a way to signify that it's actually a keyword from processing that we can't use because it already means something else let's make up our own name that's called call instead and call is going to be oh let's say random 255 and then of course if it's random it can't be intensity of floats and then use the call keyword to replace these 255s and now they should all have random values now one other thing that you may have noticed is that over here the background is black to set the background we only do this once so we don't need to do it in the loop we go over here and we write background and background you can give it three arguments just like before i can give 10 20 i know it's say now just create a color with a lot of green a little bit of blue and very little red but if you give it only one argument then it becomes kind of like a grayscale so 10 is very dark and 255 is white this is a bit of shorthand when i want to create a black background i just need to type background zero and it will be a black background that's what i wanted now the last final trick that i want to do is i want to change the blend modes and blend modes you might notice from layers in photoshop that can also have different blend modes it works exactly the same here in a normal blend mode everything that's drawn on top of each other will be like i said draw on top of each other and hide what's underneath so the blue square hides the green square underneath but if i change the blend modes so let's say blend mode to add that's a type of blend mode all the different color components will be added to each other i can show you what it looks like it looks like this and the way that it works is because um it will take the color that's in the first part and then the second thing has been drawn on top will be counted on top of what's already underneath it so the red component plus zero is of course remains whatever is in here but then the green component if you add zero plus the green component everything overlaps now becomes both red and green and then everything that overlaps with all three becomes both red and green and blue and of course if we add red and green and blue together we get white so wherever they overlap they create this white shade where only two overlapped becomes this yellow or this blue that's a really easy way to make an interesting effect by playing with the blend modes so there we have it we have created our interesting pattern and because it's all code and based on numbers we can easily change some numbers around and to make something else happen for example if i change the position times 50 here then it will become a smaller grid but i can then change the amount of things that it draws by making it wider again and therefore it will fill up the space again like so or i can change the size of the squares like square size is now random 50 maybe you want it to be random 80. and this is a really quick way to experiment with different types of your pattern and i encourage you to go try and recreate this catch yourself and then to play with the parameters because only through playing you will discover the interesting ways you can stretch all of this and also it's really just important to go over all the steps and do them yourselves because program is really like a skill because you have to understand the structure and internalize it and it's not important to remember all the codes because you can just google those but the structure to be able to create your own structures and not just copy those that you see you need practice and practice and actually with just a little bit more practice you can make interesting stuff like what i did over here um i have a version of the sketch that i added a few sliders too so let's drag it in i'm not going to show you exactly how i did this because it takes some more time but this is done with a library called control p5 and actually i mostly just copied and pasted example code in here to create these sliders but now the parameters that are in here this is the same kind of variables that are in here i can change them with the sliders if i hadn't hidden them there we go so the square size i can create that make it larger smaller and also the amount of randomness so no when this at all is all the same or a little randomness or all the randomness and i can change the grid size i made a slider for that super easy i changed the distance that's between the squares now they're all equal or i can make them all random again let's create a great size i like it when there's loads of squares there is a i can make the colors more random also same as with the distance or with the square size and oh yeah i've added this stroke feature but you can't see it right now if i change the blend mode back to normal and maybe make the border color to white and set the color fill to none then we can see the stroke side really well let's make this a little bit smaller and stroke becomes thicker or thinner or it also becomes random let's make it square size and like this i can create loads of patterns with all the same structure i hardly modified the code the only modification that i made is to add more variables that i can control but the structure is exactly the same as the one that we did and it offers all these possibilities for all these different types of patterns and i think that's quite amazing that you can do so much with just so little i've added one more gimmick in here the blend modes and then let's put the color back why is it not working oh there we go so now it's instead of the blend mode add it's the blend mode subtracts and this creates a different kind of color oh i was going to say illusion but it's not really that it's and then the last button that i added is the subscribe slider and it's kind of similar as in real life if you click the subscribe button then i get to also do a little dance anyway congratulations you now know the basics of processing and if you come across any problems whilst recreating the sketch then just write the message in the comments and i will try to see if i can help you but yes please go and experiment so if you want to learn more the first step would be to go to file and examples there's a lot of example codes that's hidden in here that you can open like this basically they're all sketches that you can open and they give you information about how to use you or brightness or forms or data and all kinds of stuff it's very useful to browse around you can also copy and paste from these and play with these yourself and the other thing would be to go to the documentation if you go to help and then reference this takes you to the processing website and there's a list of all the functions that you can use and it's really not important to memorize the kind of function that exists it's more important to start to understand the structures that you can use to create this code like this kind of loop inside loop structure that's something that you can only learn to internalize through experience through building this a few times and trying to create your own ideas thank you so much for watching that's it from me now go and play which is exactly what i will do with [Music] this [Music]

Channel: Daniel Simu

Views: 6,091

Rating: 4.9748425 out of 5

Keywords:

Id: wghDDYnIFM0

Length: 30min 37sec (1837 seconds)

Published: Mon Jul 12 2021

Reddit Comments

[u/Hapiel]

Hey guys,
Most modern beginner tutorials focus on p5.js, but I thought Processing deserved some love too so I made a 30 minute all round introduction to processing.

It teaches functions, variables, loops, and then we use these to make some generative art.

I might be making more of these tutorials, so I'd love your feedback on it. Thanks for having a look!

[u/oolonthegreat]

really good job! especially the app you made looks so good and it's important to show to beginners that you can make stuff which looks artistic, rather than drawing black squares on white.