How to Code Creative Generative Art The Easy Way: Processing Basics for Beginners | Melissa Wiederrecht Generative Art | Skillshare

How to Code Creative Generative Art The Easy Way: Processing Basics for Beginners

Melissa Wiederrecht Generative Art, Generative Design, Creative Code

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
12 Lessons (32m)
    • 1. Introduction

      1:35
    • 2. What Is Generative Art?

      0:35
    • 3. What Is Processing?

      1:00
    • 4. If You've Never Written Code Before

      0:59
    • 5. Basic Functions

      3:34
    • 6. setup() And draw()

      4:15
    • 7. Randomness

      6:07
    • 8. Vary Size by Location

      1:49
    • 9. If Statements

      2:24
    • 10. Random Walk

      8:13
    • 11. Export A Still Image

      0:44
    • 12. Your Project

      0:21
13 students are watching this class

About This Class

660324ed

This is a class for people who have never coded before (or have very little) and want to explore the possibilities of generating art with code. You will learn how easy and quick it is to create beautiful generative designs in code using a language called Processing.

If you can type, you can code beautiful images!  Learn the basic building blocks of code and how to apply them to generative art in this class.  We will discuss the following (and much more):

  • What is generative art?
  • What is Processing?  How do I get it and use it?
  • What are the basic building blocks of sketches and animations in Processing?
  • What are some basic functions?
  • How do I use randomness?
  • How do you code a random walk?

Transcripts

1. Introduction: Hi, I'm on Twitter it. I'm a computer scientist and an artist and a homeschooling mother of four kids and from Wyoming originally, but I currently them in Mecca in Saudi Arabia. I've been doing generative art since I was a kid who taught myself to code at age 12 Way before I knew it was a thing. What got me hooked on generative art is that with generative art, you define a system. Some rules, right, a little bit of code, and then you sit back and watch the computer draught in front of your eyes, and I never fail to be amazed at the beauty that can come out of some very simple cold. This is my first class of many, many classes I intend to teach on. Generative art on this class really covers the basics. It'll get you started with processing, which is a language design for artists. It'll cover the basic functions and how to set up a simple animation on. We'll get into randomness and then we'll wrap it all up with a slightly more complicated project called a random walk. You're a project will be to create a piece of art using Onley functions that I have taught you in this class. So go ahead and enroll in this class and let's get started. And don't forget to follow me so that you'll be notified every time I published a new class . 2. What Is Generative Art?: generative art is quite simply making art with coat. There are things that one can achieve with generative art that would be really hard or even impossible to achieve in any other way. Some of the most important tools of a generative artists are randomness, noise and mathematical functions like quit functions and these tools. What they offer an artist is a way for the art to come alive, apart from the artist's conscious direction, you know, for the artist to step back and be surprised by the outcome they allow for really infinite variation. 3. What Is Processing?: processing is a language designed for art. It's simple enough to get started right away, with enough features to be able to make really beautiful, uncomplicated art. Processing could be used in two D or three D. It could make stills or animation. You could make your art interactive with keyboard and mouse input, and you can export your artwork in a variety of formats, including Vector and Raster. Really, the most important thing about processing, though, is how easy it is to get started. It's so simple. Oh, and by the way, it's free to give processing. Head over to processing dot org's and go to download. Choose your operating system. I'm running Mac OS 10. So I clicked that and it downloaded a program. I came into my downloads folder. I just dragged it on the desktop. If I opened that up, I get my editor window. This is where I will type. Code down here is the consul, which is where messages will show up for you. If you have an error in your code or if you write messages for yourself from your coat on, then if I hit play shows me what I have drawn in the campus 4. If You've Never Written Code Before: if you've never written code before. First of all, you should be aware that the computer processes code line by line from top to bottom, usually so it doesnt only matter what you typing and also matters what order you take it in . It's really, really important that you pause the video and you open up processing and you type in exactly what I typed and hit this play button and get the results that I got. If you didn't get the results I got, you need to check it and find out what you're not gonna learn by just watching me type. You have to try it yourself. And also, if I write some code like, for example, if I write the code to make a line, you should not only write the code that I wrote, but you should try changing it. You should try changing these numbers and adjusting this nine so you can understand exactly what it does and how to make your own line later. The last thing you need to know about coding is that the computer is very picky. If I have parentheses in a certain place on a semi colon in a certain place. You have to put it in that exact same place. The computer doesn't understand. If you kind of sort of get it right. You really have to put in exactly what I take. 5. Basic Functions: Let's start by changing the size by type in size could give it pixel width and pixel height . So I'm gonna go 700 by 700. If I hit play again, I get a bigger canvas. I don't like that great background very much so. I'm going to say background and give it RGB values 2 55 to 55 50 55 which is quite really quick aside here for those who might not know what RGB is or how it works. I switched over the photo shop and I opened up the color figure by clicking on this square right here, and you can see the RGB values for any color. So every color has its unique RGB color RGB values. And if you want to use any color, you just copy those numbers into the functions and processing and notably, white is 2 55 55 to 55 and black is 000 Let's head back to the website for a second on the processing website and go to reference, and you can see here is all of the functions that are built into processing lots of cool, interesting stuff. Most of which I have never even touched, most of which you probably never need to touch, but a lot of great stuff if you want to explore its get started with the two D primitives. So if you want to draw a line, you type line and give it starting X and Y coordinates and ending XLR covenants, the canvas has the origin appear. This is 00 and the X increases this way. Why increases this? So I want to draw a line from, say, 101 100 to 606. There you go. Go like OK, if I want to draw, say, a square, I would say rectangle for a rectangle. I give it its starting point, for example, maybe 103 100. And then I give it a height and weight. And then, if I want a circle, I'll say ellipse on. I'll put it at 301 100 its with 100. And when you specify a point for a rectangle, your specifying the top left corner. But when you specify a point for an ellipse, your specifying the center if amid another rectangle and another circle and give them the same points that I gave the original rectangle and circle, but I made them only five by five. Within height, you'll see that the rectangle comes in the top left corner, but the circle comes in the middle of the other circle. If I want to change the line color, I can say it's wrote and give it a color. Maybe I'll do read, and I'm going to give it an outside value 50. This is specified an RGB red, green and blue from 0 to 2 55 and then the alfa is also from 0 to 2 55 Zero would be completely transparent to 55 is completely opaque. So I got a bunch of red lines that air quite transparent, not completely. If I left off the else altogether, I would get completely opaque. And then if I specified a fill color, it's just like stroke. I could say maybe blue alsa media with Phil and stroke once you set them everything after them is said that the same thing until you change it again. So maybe for my lips I want to change it back to stroke of black and fill of white 6. setup() And draw(): in the previous video, I showed you how to type things directly here into the editor window, and it play to see the result, which is great. That works. It's fine and you can do that. But it's actually much more common and much more useful to use two functions called Set up in Draw. First, I'll show you how to type them, and then I'll explain what they do. So two types that up, we say void. Set up opening, closing parentheses, opening, closing curly braces and leave a line between them. Draw looks just like set up, but with the word draw instead of the words that so what? These therefore, is to separate out the code that you want to run at the beginning to set everything up versus the code that you want to rent over and over and over to draw your artwork. Set up is right at the beginning, right when you hit play and sets up your artwork. Draw is run after set up, over and over and over. Now you can imagine this actually makes it really easy to do animation and processing. It may sound counterintuitive, but animation and processing is Justus easy, almost easier than just drawing a still image. In fact, often times when I want to draw still image, I will still animate it being drawn onto the screen because it's just a ZZ sometimes easier and a lot more fun. So from now on in this class, we're gonna always use set a pin drop to demonstrate and set up. We would often put the size of our campus can the background color, and then in draw, we would put our drawing. So if I want to draw a line, I would put it in here. Now. I told you that draw isn't easy with animate things, and I used to draw and you may notice, nothing is animating. Well, that's quite simply because I told Draw to draw the same thing every frame. So it is actually redrawing every frame, probably at least 30 frames per second right now, most boring animation you've ever seen because it's drawing the same thing over and over. If you wanted to do something different on every frame, you need to tell it something different to draw everything. There is tons of different ways you could do that. I'm just going to give you one example. Right now, I'm going to use a variable called frame camped. Now, before I show you how to use frame count, I'm going to have draw actually printed out so that you can see what it is. So there's a variable built into processing called for in town, and it's like us, and what it is is just a number that holds the number of frame that is being displayed when it first draws the screen. The very first time that draws the screen from count is probably one, and then it redraws the screen a frame later and Friend Count holds to. It's just a number. It's very simple, So let me print it out so you can see I can use this function called Print to print out anything done here in the council. If I hit play right now, you won't be able to read it yet because it's printing them stuck together. So if you want to be able to see those numbers better, I'm going to put a new line character. It's just like getting entering after every number draw is going over and over and over. It's not drying anything. What it's doing right now is printing out numbers, every frame. We're already up to the 500 something. So instead of printing out frame count, I'm gonna use it to animate my life. I'm going to tell processing dot on every frame. Every time dries run, it should draw a line. And instead of putting just numbers into the coordinates, I'm going to use that variable the French out variable. Specifically, I'm gonna make the Y coordinate of my end point B frame count. So now you can see the processing is drying the same line over and over with slightly different coordinates, because the Y coordinate of the endpoint is increasing of the frame count increases. But you also may notice that it's not clearing any lines that already drew. Every time it draws a new line, it's drawing it right in the same space as the other line. If we wanted it to look like the line was moving instead of drawing hundreds of different lines we could do is every time it draws a frame, it can cover up everything we already drew with the background again. If I plant called to the background again at the beginning of my draw function. What that does is wipe out the whole screen. Are the whole drawing with the background color again before it does anything else. So now it appears that we have one line that is moving. It's actually a different line every time. It's drawing a brand new line, every frame. But it looks like it's moving because we have the frame count in the Y. Coordinate of the point, and we can only see the most recent line being drawn because we cover up everything else with the background. 7. Randomness: now that we've talked about, set up and draw, let's explore randomness. Randomness is one of the things that makes generative art awesome. Random Mrs something. It's really hard to achieve by hand, but a computer could do so easy and so quick, and it makes just awesome art. So to do randomness, we need to discuss a function called random. Let me take away the drawing from it and just show you what random does by printing out the results of saying random, Random takes a number and gives you back a random number between zero and that number. And then print, as you remember, just prints the result of anything out in the council. So if I hit play, I got the random number 9.998869 If I run it again, I should get a completely different number. I got 7.634116 The random function just picks any random number, including crazy decimal places between zero and the number you give it. You can also give it to numbers, say five and 10 and it would give you a random number between five and 10. You should try this, run it over and over and over and just see the results you get. So instead of printing out my random number, I'm going to draw random lines. I will say lying again. But this time, what I'm gonna do is I'm going to tell processing to pick a completely random starting point and ending point everything. So this is the X coordinate for the starting point of my line between zero and the width of my canvas. Same thing for the y coordinate. And actually, because it's between zero and that never I don't even have to put the zero same thing for the ending point. So this is the same line function as I use before, and I'm just giving it for numbers. But the four numbers I'm giving it our random a random will pick a number and stick it in here and pick a different number and stick it in here, pick a different number and stick it in here. Pick a different number. Instigating line is the same line as we saw before. Just the numbers in an RV. And so if I hit play, I'm getting random lines everywhere. I could wipe out everything with a fresh background every time. And then I would only see my most recent line. That's kind of thick. You know. I really like it when it's not re during the background and I can see all my lands. I think that's actually really pretty. Okay, lets try some more examples of using random. We could do Reina rectangles. I just changed line to rectangle. Remember, Rectangle four takes four numbers as well we could was the same thing. But the 2nd 2 numbers are the width and the height. We don't actually want that to be between 01 700. We want that to be between. I don't know, maybe 0 100 I think I'd like it better if my rectangles weren't filled. So I'm going to say nothing. But, you know, I could do instead of no, Phil, I could do no stroke and I could give it a random feel color. So how about random? Between zero and 2 55 The red, green and blue. And you know what? How about the altitude? How about instead of a random Alfa I want my outfit toe always be approximately 20. I want them all to be really see through, so I can see all of whom piling on top of each other. That's vehicle. Although I don't really like that complete randomness of color, I'd rather have it closer to one end, still kind of random, like maybe I'd like everything to be kind of more blue, less red and less green. So maybe my red should be between zero and 100 and the same thing to my angry what my little be between zero and 2 55 So I will have a lot more blue in general. So as you can see the combination between doing things over and over and over, using the draw function and using random is already getting pretty interesting. Let's try it subsists so instead of rectangle, will say lips. We will have random locations between the width and the height of the screen. And let's do the same thing as the rectangles with a random within height between what if, instead, though I wanted them to be random circles. So right now I'm giving processing a different number for the width of the ellipse and a different number for that in order to make them randomly sized circles. What I would have to do is pick a random number and then give that seem random number for width and height. So to do that, I'm gonna have to make a variable. So variable is basically it's just like an algebra. It's, um, like a box to hold a number to make a variable. You give it a type. It could be an energy er, in which case, I would say int an energy would be a whole number. But in this case, I want a float because it's gonna hold a random number and my random function returns. A float afloat is a number that has distant points. And if you remember, when I printed out my random number, it had decimal points. So I'm going to use a foot. I will call it Random Diameter because it's going to hold the diameter of my circle, and then I will fill this variable with a random number between zero and 100. So all this says is a variable called Random Diameter, which is a float, which means it's a number with decimal points is going to hold a random number between zero and 100. And then I can use this variable down here. When I draw my lips random guy, I'll put the same variable into both the width and the height so that I will get a traffic circle. They're random because every time I run draw, I get a different random diameter. But then when I go to draw my circle, I use the same diameter for the width and the 8. Vary Size by Location: Let's try a fun, simple little project using only what we know so far gonna start by making a very little called X location and sticking your viviendo by innit? Between 7 700 and another one called via location also with a different random value between zero and 700. And then I'm gonna draw the lips at the X location and medication. But I'm gonna do something kind of funny and I'm going to make the size of my lips based on its location. So if the Ellipse is on the left side of the screen, it should be smaller. And as it goes towards the right side of the screen, it should get bigger. All I have to do is make thes size of my lips. Based on my ex location, I don't really want it to range all the way from 0 to $700 so I'm going to divide that number. But I'm also going to put some color in there, and I'll set my stroke to be white and my soul color. I will make very based on the white looking. I'm going to speed up the frame really little bit because I have no idea how fast my computer connection dropped. Gonna throw something crazy out there like 1000 frames per second. And it just goes fast. Is it? Actually Tendo, play around with this concept and see if you can make rectangles that get taller as X increases and thinner as white increases. 9. If Statements: Now let's talk about if statements and if statement as a way to check if something is true . And if it's true, do one thing. And if it's not true, do a different thing. I've returned to my code from the video on randomness where I had a bunch of random circles being displayed on the screen, not varying by their location. So in order to demonstrate if statements, I'm going to make a new variable that will hold my random excitation the number that I was putting here and then I'm gonna check what that number is and based on what it is, I'm going to do a different color. So what I'm doing here is I'm making a new variable called random X location on putting a random number in it between 01 700 and then I'm going to use that variable as the explication of my lips. It does the exact same thing as it did before. If I played this right now, you wouldn't see any difference. But now what I'm going to do is I'm going to check. Yes, my random X location is greater than 3 50 As in if it's on the right half of the screen. Then I'm going to keep my fill color the same. Is it wise? And if it's not greater than 53 30 as in, it's only left side of the screen. I'm going to do a different color. So I copied the same Phil statement from down here and I put it, tumbles in both the top on the bottom here, but in the bottom. When I'm going to change it, I'm gonna change it so that if it's on the left side of the screen, I will get more red on this. So the if statement, you just say if and then in parentheses, you put something you want to test, so you contest anything about any variable. So my random exploration is the variable I'm testing. I'm testing. Is it bigger than 3 50? Which invariable could be because it's between zero and 700? If it iss, I give it this Philip color. If it's not, I give it this week. Play around with if statements see if you could make it so that the top third is green colors. The middle third is red colors, and the bottom third is blue colors 10. Random Walk: So now let's use everything we've learned so far to build something a little bit more complicated. What we're about to build is called a random one. Let me show you what it looks like. First, it starts at a random location and then it draws a line to a new location close to where it waas out a circle. It looks kind of cool. I think I could slow it down a little bit to help you see a little bit easier. Let me walk you through how to build this. So I'm gonna wipe out everything I have so far. Except for the set up and draw and the size in the back room color was we're going to stay the same and I'll start by making variables. Told the location that I was last at in my random look, I'm gonna put them up here outside of set up and draw so that I can use them everywhere and also so that they preserve their value between calls of draw. If I put these variables inside draw, then there would be new fresh variables. Every time draw is ran, which is not what I want. I want them to stay there. But I will tired, float ex location and float. So these variables are just going to hold a location where I last drew a line to so that next time I go to draw a line, I can draw a line starting at that location and then in my set up, I will give them initial values. So X location is some random spot between zero and 700. And why location is also some random spot between zero. In my draw, I need to pick a new location that is very close to where my ex location is and draw a line between my initial X location and my second explication. So I'm gonna make a new float, a new variable called New X location, and I'm going to make it close to my other like X location. I will make it. The previous X location lasts some random number between zero and 50 and then the number between zero and 50. If I only do that, I'm going to be on Lee moving towards the right some random amount, and I want it to be able to move randomly backwards to, So I need my random number between to be negative numbers as well. So I'll do that by subtracting 25. But what? This will end up being instead of a random number between zero and 50 it'll actually be a random number. Between negative 25 25. My new X location will be somewhere between negative 25 25. Away from my previous X location. I'm going to do the same thing for my wild location, and then I will draw in line from my explication and why location to my new Excel. Attention New. Why location. And then after every time I draw, I will set my ex location to be the new X location. And why location To be a new location. I'm doing this because when we go to draw the next line, it's X location. It's starting explication. Needs to be the point that we ended this lineup. So the new X location for this line is the starting point. The explication for the next line. I kept a few things wrong, so I'm just gonna fix that. There we go. We have a simple random walk. Oh, it went off the screen. We're gonna have to use if to check and make sure that our win and walk doesn't completely fall off the street. When we get a new X and Y location, we need to check. It's new. X Location is less than zero. Oops, Weston dio. Then we will put it back to the execution will just make it easier whenever tries to go off the screen. We'll just put it back at the edge of the street. Also, if the new X location is bigger than 700 trustable off the right side of the screen, same thing. New execution. We will set it to be seven years. Same thing for the why if the new why location is less than zero as and it tries to go off the top of the screen and I said it to be zero. And if the new why location is bigger than 700 as it tries to go off the bottom of this three, then we'll send it to these at 100. So all this is doing is checking if we've fallen off the screen. And if we have just shoving the new why location or explication back within the boundaries and it would really help if you type it right. See Iran into the edge twice so far. And it just came. No, it's time to start playing to make this a little bit more pretty. One thing we could do is change how far we randomly walk. Maybe we should try something small a first, like maybe we only want to go five in any direction at a time. That's different. Or maybe we want to try your numbers. And then maybe every time I draw a line, I would actually like to stick a circle at the in Flint. I like the way that looks. So I'm going to do that. I'm going to put any lips at the new X education with machine, and I'm gonna make it. Or I could make its size begin. Um, but I wanted to still always be a circle, so I'm going to use a variable again. I'm using a variable here so I can use the same random number in two places. That's cool. I would like my ellipsis to not be failed, so I would say no, Maybe I do want to. So maybe I want a very light color. How about random run? No green. And I'd like it to be pretty transparent. Maybe 20 out of 2 55 I'm gonna change my line colors to I'm gonna make my stroke. Also, Brendan color between a random lead in a random and nothing And I'll keep my health. That's it. So as you can see these building blocks that we've learned so far, these functions can be added together in more complicated ways to make more interesting things. And at this point, it's time to just play and start exploring and drawing new things with the tools that you 11. Export A Still Image: before I leave you, I'm gonna show you a really quick way to export a still image of your screen. If you come down below your draw function and put in this code, avoid mouse pressed and then inside of the mouse pressed function, you say save frame and give it a U R L, which includes the fuller frames and £4 symbols. Dodge a pig. What will happen is that when you run your sketch, if you click, you will get a still image of your sketch. At that point, if I come out here to the folder that my sketch it is in now I find a folder called Frames and still images from the frames that I clicked. 12. Your Project: it's time for your project. Your project is to create something original using Onley. The functions that I have taught you in this class use randomness if statements the functions set up and draw and lots of creatively and come up with something original. I'm really excited to see what you come up with. Don't forget to follow me on skill share to be notified every time I published new classes .