Creative Coding (01): Introduction to Processing

hey everyone my name is stephen lee and i'm a designer based in portland oregon currently i teach at portland state university where one of the classes i teach is called creative coding in this class we use processing to explore different ways to generate visuals create interactive experiences and maybe think about design problems in a different way i'm creating these videos for students in my class but also for people who might be interested in learning processing i know that i've learned a lot about processing um from online resources especially people like daniel schiffman who has a youtube channel called codingtrain and these videos and this course is actually slightly modeled around the structure of his book learning processing and for those of you who want a good book to start with i highly recommend this book in my own work i've been using processing to create a lot of different types of visuals i use it again as a way to think about design problems differently here's some work that was created by previous students in my class hopefully this lets you see kind of a range of possibilities the first thing we're going to need to do is download processing from the processing website that website is processing.org and you can just go inside of here and download either windows linux or mac version and i would also bookmark this website because there's a lot of good examples and tutorials and reference if you're curious about how to how to do things [Music] and you want to see some code samples this is a really great place to go so um keep that in mind and once you install that we're gonna we're gonna talk about kind of getting started uh understanding the way processing works and then writing some code the first thing we need to understand when we're trying to plot uh items in space and processing is that we're going to use a coordinate system similar to maybe something you learned in high school math we're going to use x and y coordinates x is going to be horizontal and y is going to be vertical this looks like maybe something you've seen in math class and in this diagram you can see that these four quadrants um you can see have positive x or positive positive or negative x and also a positive or negative y um and you can see that the top right usually is where positive values go um but the thing about processing is that we're actually uh when we use positive y values we're actually going to be going in and maybe what we're used to calling a negative direction we're actually going from top to bottom and so it's a little bit of a an adjustment so here is that that kind of quadrant that we're used to seeing zero zero is as at the top and the positive y like i said is going to be going down uh positive x is going to be going uh from left to right um and maybe one thing that you could do to kind of like remember this this flip is to maybe think about the show stranger things um and if you remember the upside down uh it's this kind of mirrored world and you can see that uh you know where even though we're going downwards it's it's actually kind of like an increase um in the value so if if that helps you at all um you know go for it if not um you can remember hopefully that it's it's flipped for maybe what you remember it to be and before we get into coding uh just a few quick tips spelling is super important here if you misspell the name of something a function or some other command it's going to break the code case matters as well so this is uppercase and lowercase the way i type things generally like it has to be that way you shouldn't be making things all caps unless they need to be um or all lowercase you might you might see sometimes where uh camel case comes into play spaces do not matter as much so you might have extra line breaks or you might even have a space um inside of parentheses and that generally is okay um you want to end your function calls with the semicolon uh and it's almost like ending a sentence with a period um hopefully you'll get in the habit of doing it of doing it if you haven't coded before and then another really important thing is to use the processing ide to help you identify errors in your code so your [Music] the code editor will show you where the errors are and use that to help you kind of narrow down your focus on what to look for started with processing here's the processing ide this is what you get when you download the program and we're going to start coding in here you can see that there's a run button at the top and a stop button if you've run the program and you want to stop it you can press this button you could also hit command r to run it now let's let's just start with let's see what happens when we press this button we're going to get a default sketch running this is just the default size so this this is a sketch but it's probably not what we want let's let's start um by specifying how large you want this to be we're going to write some code uh we're going to call this uh size here and then we're going to write the x and the y uh size so that's horizontal and vertical let's say 500 and we'll separate by comma 500 and we want to end these calls with a semicolon here because it's like a period you want to get in the habit of doing that let's press play and this is a 500 by 500 pixel sketch okay the next thing we might want to do is change the color of this uh we can use background to just change the background color and we're going to use numbers here to specify color um let's start with just black and white um colors uh we can think of as running from a range of 0 to 255. 0 is going to be completely black and 255 is going to be white in this case so let's say we want it to be a black background we'll just say zero make sure you put that semicolon there let's run it command r and that's a black screen so uh if you only give one color um value it's going to think it's grayscale black and white so we can go to white and that's going to look like this now if you give it three values it's going to think that you're using red green and blue values so rgb so let's say we wanted a red background again the range is going to be 0 the 255 so let's go 255 0 0 so r g b completely red in this case right and if we want to go to something or let's say we want to go to blue that's going to look like this or sorry this is going to be green uh yeah r g b so you get the idea um okay and from here let's maybe start with some really basic shapes uh we have we can use something called a rectangle which probably are familiar with um erect is going to take four values one is the x position the y position uh the width and the height in that order so let's say we want to start from the upper left corner zero zero and let's say we want this to be 100 by 100 oops make sure i put a comma there let's run that and let's see what happens uh okay so you can see that it created this square um it drew it from zero zero uh the default mode for rectangles to draw in the upper left hand corner so you can see it's connected to the upper left and from there it went over 100 pixels horizontally and 100 pixels vertically you can see that the default styling has been applied a black uh stroke and the white fill so we can go in and change those things we could target stroke like this and let's say we want it to be red let's do that so rgb that's going to be completely red and let's change the fill to 0 0 let's make it blue right and let's play that see what that looks like all right so you can see there's a red stroke and a blue fill now let's try another shape we're going to use an ellipse which is like a circle this takes four values again it's going to take the x position the y position and the width and height so you could have a circle if they have the same width and height or you could have an ellipse you could have something that's longer or wider let's start uh let's let's do the same thing here and i just want to show you one difference in the way that this gets drawn so you can see that the rectangle starts from the upper left but the ellipse actually starts uh from the center point and you can see that this is the center point up here so if we wanted this to let's say be in the center of the square we would have to do a little bit of math probably it's going to be 50 50. and you can see that that's now in the center of that because ellipse is by default we'll use the center mode and you know if we wanted to change the color in here let's let's mix a color that's going to be yellow if you want to mix yellow you can mix red and green and sort of equal proportions um okay so that's that's some basic drawing i guess i want to show one other one other thing that we could do um let's say we wanted a rectangle or a square in the center of this sketch um we could we could use um instead of doing the math to figure out what the center of this is we could use uh width divided by 2. so width is sort of a system variable that gets created when we specify the size and i can say height divided by 2 let's say 100 by 100 um but if i ran this you'll probably see again um it's using the left upper left corner as the center point right and you can see that the fill color kind of cascaded down so whatever was last specified is going to going to be inherited down here let's say we wanted this to be moved to the center we could actually we could do the math again we could probably say minus 50 minus 50. [Music] or let me undo that there is something we could write called wreck mode and notice it's in camel case this is a capital m and you could change it by writing center in all caps and if you did that so this should apply to just this one let's see if that's the case yeah it applied to this one it didn't apply to the one up here because every the code is is reading from the top to the bottom and it's it's being inherited um so that's that's what's happening in that case that's just a quick overview of some some things you can do with drawing uh i should probably do one last one which is let's just draw a line because a line could be helpful um let's just draw a line and a half halfway through uh the composition line takes four values the x and y uh position of one point and the x and y position of the second point so let's do um zero for the x let's do height divided by two uh then let's do with that's going to go all the way to the outside and then we'll do like divide by two and let's let's create let's make this a dark stroke and we can also uh change the width of this stroke stroke weight uh and we can make it really thick let's make it 10 and let's see what that looks like okay so that just draws a line so just this is just some basic drawing um uh here so shapes a line and uh we've gone over some basic ways to style this using fills um and colors and strokes here i want to get started drawing something uh that's really intentional a good place to start off is looking at an existing piece of art and try to recreate it in code this is a piece by joseph albers he's done a bunch of these basically squares inside squares with different colors and i think this is a good first step into coding so what we're going to do is use this as the inspiration for a sketch that we're going to create we're going to try to get close to this it might not be exact but we're just trying to um you know make sure that these squares are generally positioned where it's in a similar fashion and the colors are generally the same you know one one way to to get the color for this is um if you're in photoshop like i am you can use the eyedropper tool click on an area and if you uh take a look at that color you should be able to see the red green and blue values there's also a hex code value here which uh processing will take but uh let's kind of stick with rgb values which we did earlier um all right so why don't we open up processing and uh in the past we had just written uh just started writing code saying you know rect and giving it values from there like let's say we wanted to do this larger square you know one way to do that i was saying rect we'll start at 0 0 because rectangles start in the upper left-hand corner by default um you know and we could you know set the size for that you know we actually haven't set the size yet so let me set the size at 800 by 800 pixels and so if i wanted to color this or get the setup i would do the width and height of 800 and for the fill let me set that it's mostly green and so these are numbers that i've uh i took notes on this should just give me whoops this is a good example of using processing ide to kind of tell you when you've made a mistake this tells you hey you're missing a semicolon and it actually highlighted the line so can't get much easier than that let's press play and run this and you'll see we have a sketch that's roughly the same color there is a black outline on this because that's the default so we want to turn that off and we can do that by saying no stroke all right um so this is kind of how we got started last uh the last sketch um but i want us to also start to think about writing more complex sketches and one one way to do that is to write larger blocks of code um in processing one uh one good structure to work with is uh is avoid setup um whoops which uh what this does is it runs once uh the beginning of the sketch and this is where you wanna put things like size um and settings that you want to apply to the sketch um the syntax here is a little bit different than these lines what we're going to do is is say void setup and we're going to use these curly braces and this is going to create a larger block of code and you're going to see later on we'll have other functions or things structures that will be within these larger blocks of code within these braces so um if you're getting started with programming the semicolons at the end of these smaller functions here but then sometimes you'll have larger blocks that are inside of these curly braces so let's start writing like this we'll say point setup we set the size we turn the stroke off and again we're running from the top to the bottom fill we've set that color let's go into the next rectangle and if we're looking at this this is kind of a greenish color so it's probably going to be even more green than the other one so um you should see i'm looking at my notes here 165 and 72 so this is going to be more green you can see this value is higher than that one so you can tell that's that's going to be like that so let's make a rectangle here now we'll start with let's say [Music] 75 here uh 75 in that's the x value this space up here looks a little bit bigger than than this space here so we should expect it to be larger in fact let's put in 125. and these are all squares um so we're going to have similar values here let's do 650 and 650. and if you did the math uh what uh if we take 75 plus 650 that's going to be 725 and so you can see that if we were drawing this out this would be about 725 and then we have 75 pixels left over so we're because we're looking at 800 as the size so let's see if that worked out accordingly so this is you know you can see it's it's roughly kind of the what we're trying to get a little bit uh skinnier here a little bit thicker up here and now i'm just going to go through the rest of this you know i'll go and find fill color for this 85 so these are values that i've pulled earlier um but if you want to find the values again you could just go into here and click here and take a look now some of these values are going to be these values might be a little bit different because you know the values here if you look really closely this is kind of a pixelated image these are these values are kind of all over the place so there's some variants there all right so let's go back into here let's rectangle 150 25 500. 63. so again what i want to do here is make sure that the space on one side is is roughly equal on the other side so you know i could do this by taking 800 minus subtracting 225 and i guess i could subtract it again 225 uh and then that would give me what's left over uh 350 in this case um because it would be 800 minus 225 minus 225 is going to be 350. right so just um and the other thing i might want to start doing is uh writing comments to myself uh in the code because it's you know just good notes um to keep track of so if you wanted to say to write a note to yourself maybe it's 800 minus 225 minus 225 is equal to 350. you can see when i want to write a single line comment i can just write two forward slashes and that lets me write a comment and in fact i should probably go up here and say you know write notes to myself this is good when you're learning um so you don't forget you can understand it so accept the size of the sketch um here we are turning off the default stroke [Music] here you might want to remember hey these are red green and blue values and with the rectangle you know i should say maybe i should have done this earlier but uh what's the x start what's the y start uh what's the width and the height that's what these numbers correspond to and if you want to write a longer comment a lot of times you'll see people when they're writing sketches is to write some code at the top if you want to write like a multi-line comment you can use these marks forward slash and asterix start the comment and an asterisk and uh forward slash to end the comment and here you can write things like your name so maybe i'll put my initials here uh and you might leave a note to yourself this is a um sketch to show so um you might want to put the date 2020. it's been a rough year but that all that stuff can go in there so let's go ahead and run this hopefully we're somewhere close to this yep and you can see maybe the colors are a little bit different and obviously this doesn't have the same kind of texture as the original painting but we're just trying to figure out how to draw this to the screen and do it in a really intentional way um now this is how i would do it using the default rect mode but i i did mention and some of you might find it easier to use to set the rec mode to center um like this and let me show you what that does if if i do that and i try to [Music] maybe i'll just grab this one and let me put it i'm going to just put a red fill on this so i can see so in the past this put put a rectangle up in the top left-hand corner but if we change the wreck mode here it's going to apply to everything below below this and you should see i love getting those errors at least seeing the errors i don't love getting them um you can see that what happened here is i set the rec mode to the center so now the center of this shape is up here and you can see it's been shifted over so some of you this might be helpful if you wanted to set this in the center of the um of this canvas you could say width divided by two we can use width and it's going to use whatever values are up here and when we say divided by two we're just cutting in half let's just let's just put this exactly in the center so we'll say height divided by two and you can see what that would look like it should be all red now so there's kind of two ways that you could go about doing this you could use the default uh wrecked mode which is uses the upper left-hand corner or you could change it and you're this might be easier for you to conceptualize or it might be easier for you to center it but i think there's some value in trying to do the math and understanding how this all works all right so if uh if doing something like this is really easy for you uh the next thing you might want to try is a more complex painting here's a painting by mondrian uh you know hopefully you could you can understand maybe how to how to draw this you're going to need to either use strokes to draw these lines or you could draw skinny rectangles right and if this is too easy for you maybe you want to try something like this this could be a real challenge the main idea at this point is to get more comfortable changing colors and drawing things onto the screen okay so i hope that was helpful for you let me know if you have any questions in the comments thanks for watching and i'll see you in the next video

Channel: J. Stephen Lee

Views: 2,607

Keywords:

Id: aGwGHqFgyrI

Length: 26min 12sec (1572 seconds)

Published: Sun Sep 27 2020