Creative Generative Art: How to Easily Code Impressionistic Paintings from Photos With Processing | Melissa Wiederrecht Generative Art | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Creative Generative Art: How to Easily Code Impressionistic Paintings from Photos With Processing

teacher avatar Melissa Wiederrecht Generative Art, Generative Design, Creative Code

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

12 Lessons (53m)
    • 1. Introduction

    • 2. You Got This

    • 3. Import the Image and Test It

    • 4. Paint the Image With Basic Shapes

    • 5. Paint with Brush Strokes

    • 6. Save Frames

    • 7. Rotate Brush Strokes Randomly

    • 8. Decrease Brush Size Over Time

    • 9. Color (Tints and Gradient Maps)

    • 10. Paint in One Go

    • 11. Export a High Res Image

    • 12. Thank You

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class



Did you ever imagine you could create a painting like this in code?  No?  Well, you can, and it is actually not too hard to do.  I would LOVE to show you how.

In this class we will be writing code to generate digital paintings based on reference images.  We will...

  • Discuss how to pull colors out of a reference image
  • Randomly throw brush strokes around the canvas in the correct colors
  • Give the brush strokes random rotation
  • Make the strokes decrease over time like an artist who starts with big strokes and then proceeds to add smaller details
  • Add tints and gradient maps to adjust the colors of the painting


  • Learn how to export high resolution paintings for printing!

This class is a perfect follow up to my first generative art class "Coding Easy Generative Art With Processing: The Basics".  If you have taken that class then you are more than ready for this one!  If you have not, you can either check that one out first for a more gentle introduction, or just jump in right here.

I know you can do it!  You got this.

Meet Your Teacher

Teacher Profile Image

Melissa Wiederrecht Generative Art

Generative Design, Creative Code




Have you ever thought generative art and creative coding looked like a fascinating thing to try, but you wanted someone to explain it in an easy way for absolute beginners?

I’m here to help. Nice to meet you! I am Melissa Wiederrecht. I am obsessed with art, mathematics, computer science and most especially anything that combines the three together.

My online graphic design classes will take you step by step through the process of how to make art with code, how to use the Processing language, and how to easily make beautiful digital pattern designs.

Interested to see more of my personal generative art work, progress shots, and pattern design collections?  I post regularly on See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hey, everybody, Welcome to this class Encoding. Impressionistic art. Generative art with processing. My name is Melissa. We direct and I'm a computer scientist and an artist and a homeschooling mother of five kids. I'm from Wyoming originally, but I currently live in Mecca in Saudi Arabia. Now, if you watched my previous classes on generative art, you've heard me rant about all the reasons I love generative art. Well, today it's all about laziness because, seriously, who would take a brush and touch the canvas 15,000 times when you can write code to make computer do it for you like instantaneously? Well, not me anyway. In this class, we're going to be making impressionistic paintings only without paint and, you know, well, paper or brushes. Basically, we're going to go with brush strokes and of ritual canvas and a little bit of code and a reference image and get a painting sound cool. Then let's do this 2. You Got This: First of all, I am so glad to see you in this class. You are so welcome to be here most especially if you're scared of code. See, I happen to know that everybody can write code even if they don't think they can. And even if they have never had before And yes, I know it can be scary, and sometimes you may feel like you have no idea what's going on, but that's OK. It actually doesn't matter if you understand completely. 100% everything that I say. I don't expect you to it all. I mean, of course, Do try. And I hope you understand. And that's awesome if you dio. But even if you don't just type in what I type, that act of typing it in is actually a lot more educational than you can imagine. And I bet you understand a lot more than you think you dio and then once you have it typed in, you can play with the numbers which first of all, helps you understand it more. And second of all, allows you to create original art with the code, even if you don't understand every aspect of it. So the moral of this story is just keep going. Even when you're lost. Just keep typing in the code, and you can release into the video if you want Teoh and together we'll make something beautiful. All that being said, if you'd like a slightly more gentle introduction to processing will check out my first class first coding Easy generative art with processing the basics. The result won't be is cool, but it's a little bit more gentle oven introduction. But even without having taken that class, I know you can do this. Oh, and if you ever really are completely lost and you cannot get the code to work, just drop me a message in the discussion section of this website, and I'll try to get back to you as soon as I can. 3. Import the Image and Test It: All right, so we're going to be basing these paintings on photographs. So the first thing you need to do is go pick out an awesome photograph that you would like to paint with code. Any photograph will work. You can use your own photographs. Or you can pull one off of a Web page on the Internet like on splash. Um, but try to pick something that you think would look good. Impressionistic li like You don't want to have people's faces and they're probably and something that requires too much detail. To even tell what it is is probably not a good choice. Um, but it doesn't matter. Go for whatever you want and grab some pictures and save them on your computer. And then the next thing you need to do is make a copy of them. That's small enough to work with. To start with a to end of this class, I'll teach you how to make a painting in high resolution using like a full resolution image . But for now, we need a small image. So I'm using preview here. I'm just going to say tools just size and I'm going for no whiter than like 1000 pixels just because I wanted to fit really neatly on my screen. Um, as I'm working on processing, so just go ahead and re size your images and then let's go get started in processing. Processing is always releasing updates. So even if you used it before, it's a good idea to go download a fresh version of processing. And if you haven't just go down there from processing dot org's slash download. So let's go ahead and jump straight into the code. Um, we need first to define two functions called set up and draw whatever could be put inside. The curly braces of set Up will be running the beginning to set up our sketch and whatever could we put inside. The curly braces of Draw will be run once every frame, so whatever we want toe happen over and over. In our case, drawing brushstrokes to the screen will put in draw. Now, if we just run this right now, we'll get 100 by 100 canvas with a great background. So the first thing we need to do is six that he can change this size and are set up function by typing in size and giving it a pixel with the night. And here is where you want to pick out the dimensions of your image. When I resize mine, it was 1000 pixels by 667 pixels and put the dimensions of your image into size. Now I'm just gonna change the background color of my canvas to be white for now. I'm gonna choose that later. But if I type in background into my set up function and give it RGB values to 55 to 50 rack to 55 I'll get white. And with that, it's time to import our image into processing. So we're going to make a variable toe. Hold this image now. You may have seen variables that hold into Juries variables. The whole decimal point number is called floats. You may not have seen a variable that holds an image. It's just a variable like any other variable, but has a different type. And that type is called P image. So to make a variable toe hold on image, you just type P image and give it a name. This one I'll just call Main Image. Now what we've done so far here is declare a variable, which is basically like saying this is a box is going to hold an image but we haven't actually put the image in it yet. So in order to do that, inside the set up function, we will say main image equals load image and then we'll give the name of our image. But right here actually need to posit a second. And before we can put in the name of our image, we need to save our sketch somewhere so that we can put the image in the same folder as the sketch so that we can refer to it easily. So I'm just going to save this on my desktop in a new folder. Um, I'll call it impressionistic generative art, and I'll save my sketch in there. So now if I open up that folder and opened up the sketch folder, I'm gonna drag my image that I'm gonna paint into their and also you might want to make sure it has a really simple name, like river or something, so that when you come into your sketch now and you want to refer to it, you just say whatever it is River Dodge, a pig like mine and these quotes, and that's it. It's really easy to get your AM included in. So now our main image variable, which remember, is it was just a box before, you know, it actually has an image in it. The river that J Peg and much has been loaded into it. And now we can use that image in our code. Now, of course, we haven't told it to draw it to the screen or anything like that. So in order to test us and make sure it's actually been loaded incorrectly, we need to write another line of code, um, which we're gonna delete in a minute. But we'll just use this to check it if you type in image and then the name of the variable main image and then where you want to put it. I'll put mine at the origin 00 which is the top left, and it played. And it seems everything is working correctly. It printed out my image into my canvas, which is great. Um, now, of course, I don't actually want to print out the image on, um, a canvas. I want to paint it on, so I'm going to delete this line. Image. Veneman 00 um, so that we can get started painting in the next video. 4. Paint the Image With Basic Shapes: let's talk about pixels so, as you're probably well aware, in which is on a computer are saved as matrixes of pixels. So if I open up this Emerson of leading on drawing and zoom in really close, you can see the pixels. They're like tiny little boxes where each one has its own color. But of course, when you zoom out, you can't see each individual pixel. You see a beautiful in much of a river, right? Okay, well, and this guy's we're gonna care about the pixels because we're going to be picking out colors out of injury. Individual pixels. Now, unfortunately, it's not quite as simple as just telling processing. I want the pixel at, say, 101 100 it gives you the color. But it's actually not very hard, either. We just have to talk about it for a second to understand how we do this. So for the sake of simplicity, let's pretend that days area and this rectangle here is our entire image, and that this pixel right here is the one. We're trying to get its color basically processing stores the whole image in a list, Um, where each pixel has a number starting a 00123456789 ton, Um, all the way up. And then when you get to the end of a row, the road after it is just right after it. Like so if the last pixel in the first time was 17 the first pixel on the next row was 18 and they just keep going in one big long list. So if the coordinates of this pixel are random X and random, why then to get the number for that pixel, all we have to do is figure out the width of the image times random. Why plus random X with times or in the morning. Gives is the last pixel of this area up here, and Random X gives us this area here. So adding them together gives us the number of our pixel. So let's get back to the code now and in our draw function here, every time we want to draw brushstroke, we need to select a random X location at a random like right location for that stroke. So we'll make a variable, which is an inter jur, and we'll call it random X and fill it with a random number between zero and the width of the canvas. Which, of course, we specified that with as 1000 up here. But using this with variable down here in the code makes it not break. If we were to change the size of the canvas, so it's a much better thing to do. And then, of course, we also need a random. Why variable into Jerry random Y equals a random number between zero and the height of the campus. Now, before we start pulling pixel colors out of our image, let's just draw random circles all over the screen. They'll be our first dummy breast strokes. To do that, we type in a lips, and then we give it a location on screen, which is random X and random. Why, that's what we're gonna draw the center of our lips, and then we need to give it a width and a height, and so I'll just pick randomly like 20 and 20. So if I hit play, whoops. Ah, processing is complaining because actually, these should be floats because random returns a flow and you can't stick a float into an energy afloat is the number that has a decimal point and an energy. The number that doesn't and you just can't stake dust important points into a whole number of variables. Anyway. If we hit play now, it's working just fine. We're getting our circles randomly all over the campus. So now let's change their color so we can change two different colors about the circle. We can change the fill color in the middle by typing and Phil before we do our lips and then give it an RGB value. Or we could also do a stroke. But actually here I want to have no stroke. So I'm just going to type in the function. No stroke. So with how I have it typed in right now, I'm getting red circles with no stroke. I can also add an Alfa value at the end of my fill function. This also works on the stroke, um, to specify the transparency zero being completely transparent to 55 being completely opaque . So if I hit 50 and hit play now, I'm getting transparent circles. All right, so now I think we are ready to go pick our actual color from our image finally the moment of truth. So let's make a new variable called pixel Index, in which we will calculate that random expose random white times. With that, I explained, This is the number of the pixel that we've randomly picked from the whole list of all the pixels. So now we'll ask processing what is the color at that number of pixels? So we'll have a new variable of type. Color will call it see and then if we type in main image, which was remember our image, variable that pixels and give it the pixel index after pixels in square brackets. It will give us back the color at that pixel, and it'll stick it in, see, so we can use it. Now we can tell processing to change our fill color to see with an Alfa of 50. We could just replace the RGB values with C, and it should work just fine. Okay, so here I go, mixing floats. And once again we need to make a few changes at sea. Let's make pixel index being end on our random was make him being end. What will do to make it stick a random number in an end is just casts the random number. Internet. If you put into in parentheses in front of the random, it will just change the float into an ant. It'll chop off any dismal bites. No to work. So you to make you have to go through that with me. But I guess it's educational to know that no matter how long you been programming, you'll still screws stuff like that up all the time. So anyway, all right, it's kind of working, um, going really slow, though, and you can hardly see it. So I'm gonna up my Alfa 200 make it a little bit more opaque, and then I'll actually make my circles a little bit bigger, maybe 30 by 30 and then I'm gonna throw frame rate. 1000 appear in my set up function. Probably my computer can't actually draw 1000 frames per second, but if I say 1000 then it'll just go as fast as it can, right? That's my theory, anyway. So now it's drawing a lot faster, and if we hang out and watch for a little bit, it should start to sort of kind of look like our picture sort of right. From here on out, everything we do is just going to try to make this look more beautiful and more like our picture and more like a painting. You know, we have the basic outline of this working already. If I open up the original picture here and my sketch, you can see they've got the, you know, this orange blob at the top and kind of sort of of everything at the bottom. And these kind of grayish areas in the middle, you really can't tell what it is on its own. But that's OK. We'll work on that. Some pictures, though. I mean, probably this picture is one of them. We probably won't ever be able to tell what it is if we keep trying to dry it. We're processing, but, um, that's okay. I mean, it looks really awesome like this to write looks abstract. Some pictures will have a lot easier time telling what they are. Which reminds me this is actually a really great time to go. Try this out on another image. We can switch out our image at any time, and the code should still work as long as as long as we change the size of the cameras to fit the image. So I pulled a couple more images over here into my sketch folder, and I made sure they're all the right size and I'm gonna try painting this one. Turns out it's exactly the same. Size is my other image. 1000 by 667. Get that? So all I have to do is switch out the name to field dot j peg and it should just work it. Play now. Obviously, if your image is not the same size, change the size up where it says size 6 1067 Whenever you change the image now, it did not waste your time. I'm totally speeding up some of these animations in my video, so don't expect years to go that fast. All right, so let's play around with some more really simple types of brush Stokes. Like, for example, instead of a circle, we can just use a rectangle just type wrecked instead of a lips, and now little paint with squares instead. And while we're at it, why not try just lines? Ah, lines are a little bit different. We need to give it a starting point in the ending point, so the starting point is the same. But then how about for unending point? We do random X plus 30 100 why, plus 30. So they'll just be like little diagonal lines. Oh, nothing. That's because I said no stroke and lines are only stroke. So let's cross out no stroke and put in stroke instead of Phil. Now it should work kind of pretty if I do say so myself. So let's do one more variation with simple shapes before we go get some real brushstrokes. And this is random lines in every direction, so our starting place will still be random X and random. Why? But then, instead of just adding 32 it to get the end location, it's at a random number to it. And this random number can be between negative 30 and 30 which we can get my finding a random number to a chain zero and 60 and then subjecting 30 from that 5. Paint with Brush Strokes: All right. Now we're going to start using images as breast strokes, as in images of actual brushstrokes as our brush strokes. Now, you can go ahead and make your own if you like, and if you know how, Um But if you don't, you can go ahead and download mine from the class Web page. You have to be on the actual skill share website and then under this video, if you go down in a taboo called I think it's your project, then on the right, there should be a link to download these restaurants. But if you want to make your own, the important thing is that they be a transparent PNG, as in the background, is transparent on the breast. Stroke is white, um, which makes them hard to kind of hard to see here and the finder. But if you open one in preview, you can see these things. They're just a little brush stroke actually made mine and procreate and then sent him over to my computer and just saved each one. As a PNG. You can take a few minutes to look around at these brush strokes. My favorite is number six, so for most of these videos, I'm gonna be using number six, but you can use whatever you like, and by all means would be super awesome if you made your own. So once you picked a breaststroke, let's imported into processing. We'll have another P image variable. This one is called Brushstroke and then again and set up here, where we loaded our main M I. Let's load are breaststroke into our breastroke Variable breaststroke eagles load image and then, in quotes, put brush space strokes slash the name of the image. I forgot to tell you. Make sure that your brush strokes are in a folder inside your sketch folder. Now that we've loaded in our image our breastroke image instead of writing line down here, we're going to erase all of this stuff, the line, the stroke or no stroke. And if you have any fills or is all of that everything after when you pick your color? And so we're going to draw out our breast joke by typing image, and then we will give it breaststroke as the image to draw out and then random X and random . Why as the location. So, since these are images instead of shapes. We're gonna color them differently. We won't use fill or stroke will use tint. If we just put tint before the image, then it will basically apply what seems to me to be a multiply filter to the image. If you know that is from Photoshopped, that's great. If you don't whatever, it doesn't matter. So if we play, this will get a ton of crazy and rather large breast strokes in colors. That's a great start, but there's a couple things we need to fix. First of all, if you notice the top left is stayed pretty much white, that's because when we place our images, um, at any point that we've selected, we're placing the top left of the image at that point. So the top left of the breast stroke, which is actually even outside the breastroke itself, is going in that point, so we need to move it. We need to place the breast jokes that its center goes in the point we've selected. So here, where we tell the image to go at Random X and random, why, instead of random X and random, why, what we can do is move it up and left by half of the breast stroke size. So random X minus the brush strokes with divided by two. So half of the brushstrokes with will go left and half of its height will go up. So that's Reina y minus brushstroke dot height, divided by two. So now if we play, this will see that our restaurants are covering the whole campus, which is a good thing now there, so quite large. So let's resize them right here. After we lived in the image, we can just say breast stroked out resize and give it a wits. I'll go with 40 and you could give it a height as well. But then that would stretch the image. If you wanted to stay proportional, just put a zero as its height. It won't make it zero high it it'll make it stay proportional, and you could do it the other way around. You could put the number in height and then put a zero and with, and it would stay proportional as well. Now it might make it look a little more soft. If we added an Alfa value, which we can do, we can add that to our tent. If we had an Alfa value to the tint, it actually makes the whole image p like, more transparent. Now, back in the day, I actually took an oil painting class, and one thing the teacher taught us is something called Toning the canvas, which basically means that you lay down a kind of neutral color on your campus. Before you start painting anything, discover the whole canvas in it so that you're not painting on white. Um, and one of the main functions of this is that it would bring kind of some continuity to the painting because there's a good chance that you're not going to cover the entire canvas with breast jokes. So whatever kind of pokes through between your breasts jokes would end up with that color. And it really brings continuity to your painting, which totally applies here, too. Like if you've been watching, there seems to always be a little bit of white left, right? So I think it's a great idea if we change the background color to something kind of neutral , like I'm gonna choose this warm brown here, and you may have noticed when I put in the brown color. I put in a color in another way. You can do RGB values. You can dio, um, on actual color object, which you can get from a pixel of an image. Here I used a pound sign and then a hex value, which I just copied out of the color picker and Photoshopped. There's so many ways to put in colors, so this is just another one. But doesn't that look pretty great? I think adding that brown color to the background really makes a painting look a little bit more legit. So this would be really fun time to play around with just switching out the brushstrokes. Um, so instead of stroke six, how about if we try stroke, say one and just see what it looks like I have to do? Switch out the number and you'll get tons of completely different paintings. You can also adjust the size of the breast stroke, just picked different numbers and see what it looks like and see what you like. And you can pick different Alfa values here in your tent function, make it more transparent or less transparent. How about if we try? Um, maybe way opaque but a really small brush. So how about like a 200 also in like 20 size 20 brush trying another brush again? Already so many options, and it's already started. Look so pretty, but joining the next video to take this to the next level yet again. 6. Save Frames: All right, guys, if you've made it this far, you're doing awesome. And I'm really proud of you. And my guess is, by now you're wondering how do I export an image of what I've made? Like besides just taking a screenshot right? It's actually pretty easy. We can come down here under set up and draw and at another function called Void Mouse released. So basically, whenever you click the mouse on the canvas and release it, whatever is in these curly braces will happen, so we'll just save frame. So now if I run this and then click on the canvas while it's running, watch over here in the window. Any new image appears every time I click, So whenever you're watching and you like what you see, you just click on it and you'll get a saved image. 7. Rotate Brush Strokes Randomly: Let's take this thing to the next level yet again on Let's rotate our breast strokes randomly. Now it is one of my major pet, Pedes, that processing does not have an actual just rotate this image function. So the way we have to do this is a little twisted. Don't mind the pun. Um, but yet it's it's all right, just type of the type, and I'll explain it, but yeah, here we go. So instead of actually rotating the image itself and just throwing it on the screen, I could be logical. What you have to do is rotate the coordinate system of the canvas, and on top of that, the coordinate system of the canvas always rotates around its own origin. So what we have to do is move the origin of the coordinate system to the point where they were gonna put this breastroke at and then rotate it and then put our breast stroke down. If you have no idea what the heck I'm talking about, that's okay. Just type this in and you'll be golden and you'll get rotated restaurants. So toe move the coordinate system to the correct point. We type in translate and we want to move it to random acts and random Why? Which is where we're gonna put our breast joke. And then we say, rotate. Rotate is also a little bit weird because we have to use read Ian's. So we're gonna pick a random number between zero and two pi, which basically means between zero and 360 degrees, right, and rotate it like that and then we can put our brushstroke down and we're basically putting our breaststroke down at the origin. But remember, we don't want to put the top left of the brush stroke at the origin. We want to put the middle of the breaststroke at the origin. So that's why here we're putting down the image we're having at negative breast stroked out with divided by two. Remember, that's how we find the middle of the breast stroke. So this all looks a little bit crazy, but this works. So type this in and you should get rotated breast strokes 8. Decrease Brush Size Over Time: you've probably noticed that an artist typically starts with big breast strokes and fills in a large area and then goes in with details on top of that. Yeah, well, why don't we try to simulate that with processing? There's no reason why we can't start out with big brush strokes and then over time, just like change the size smaller and smaller. And I details. So let's do that. Let's jump in at the beginning of the draw function here and make a new variable, an integer called Ah, stroke size. And let's say we want to start out with our stroke size big right, like maybe it should be 100 pixels wide. And then, depending on how long we've gone through this, how many frames we've shown, we're going to subtract more and more from it. So let's start by just taking away the frame count from 100. So remember the frame count is the number of thief frame that were on the first time we ran . Draw it zero, the second time frame kind of one, and then it's too. And then it's three. So every time this runs, frame count will be a little bit bigger are stroke size will be a tiny but smaller right. And then, of course, we need to actually resize our stroke to be that size. So instead of picking the size of our rest stroke up inthe e said it function. Let's move that resize down here after pick our stroke size will be sizer brushstroke to be the correct size, which is, of course, stroke size. And remember, this zero over here just keeps the image proportional as we re size. So let's see what this looks like. Okay, so it kind of worked if you'll notice we have big brush drugs and we have little breast drugs and they appear to have decreased right, as we said. But then we got a big old error. So as soon as frame count got 200 or, you know, maybe 100 and one, whatever it is. Then we tried to tell our rush stroke to resize to negative something, and it didn't like that very much. So we need a way toe, ask it to decrease until it gets to a certain point and then just hang out there. Don't decrease any further. So in the next line here after we resized our stroke size will say if the stroke size is smaller than whatever a minimum is, we'll try 20 then put the strokes eyes back at 20. So basically, as soon as the frame count is big enough that these jokes I'd would be less than 20. We'll just leave the stroke size at 20 forever more after that. And if we run this, you see, that's what happens now. Of course, I'd really like my breast strokes to stay bigger a lot longer than they are. So let's adjust this a little bit. If I divide my frame count by something, Um, then the amount that my stroke size goes down every time will be a lot smaller, meaning it will shrink a lot slower, right? So if I divided by 100 technically frame can't is an integer, and if I divided by 100 it won't be until frame count is at least 100 that it will even go down. So in a weird sort of way, basically, this is saying that I would like 100 brushstrokes of each size before it shrinks to the next ice. It's a little counterintuitive, but if you think about it for a little bit, it works, and it makes my heart look even cooler. But if you look really closely at the image, you might notice that is getting blurry over time. Like my brush strokes, the smaller they get, the blurrier they're getting. And that's because here the beginning, I loaded my image one time. And then as this thing runs, I'm re sizing at Lake over and over and over and over and over, and that's bad. All it means is that I'm going to get a really blurry image. So instead of loading at once and resizing it every time, I'm going to do something that seems to me perfectly crazy, and I'm going to reload it every time and resize it every time. And even though it sounds to me perfectly crazy, it totally fixes the problem. So all we have to do is move this line that loads the breaststroke into the brush stroke variable down into draw right before we resize it, and now we won't have blurry restaurants anymore. Now I'm feeling like they're shrinking a little bit too slowly now, so I'm gonna try 20 instead of 100 you can. This is yet another number that you can totally play within your own artwork. Just have at it. Try different numbers and see what you like. And there's no wrong here, and I really like and how that's turning out. Look at that sky. How cool is that? And finally, you might also like to try adjusting how big the brushes restricts. Start with in the beginning. So if I change it to hunt 150 in the beginning, they started a lot bigger. 9. Color (Tints and Gradient Maps): All right. So I hope you agree that by now our paintings are starting to look pretty darn awesome. Pretty darn. Lynch it. Why don't we take this yet? Another step further. How about if we mess with the color a little bit? Um, I'm not gonna be too complicated about this. I just think it be fun if we apply a little bit of a tent or even maybe, uh like a greedy it map on top of it. Basically, it's not too hard, so it shut out. So our first version of this will be basically a tent, like basically as if we were in photo shop and we put a layer on top of some color, and then we decrease the opacity on it. That's basically the effect I'm going for here. So pick a color that you feel like tinting your image as unless go to the code. All right, so down here, remember this line that says tint. We're tenting our image by the colors. See, And remember see is the color that we pulled straight out of our original image for the pixel at the place. We're putting the breaststroke. Well, how bout between when we pick out the color and when we tend to it, let's mess with it a little bit. Let's just make another color valuable. Call it new color and then let's mix. See are color straight out of the image with our color that we want to tent with. And processing gives us this great function for mixing colors. It's called lip color, and you give it to colors so we'll give it see, and then the color that I picked in Photoshopped, that bright pink color. I just took it with the, um, with the hex value straight out of the color picker here. And then, if I put it with a pound sign into this little color function, I'll get a mix of those two colors, and then I need to give lip color one more value. I need to give it how much of the first color I want and how much of the second color I want. So if this is between zero and one, if I give it zero, I'll get completely see. And if I give it one, I would get completely my tent color. And if I gave it like 0.5 I would get completely half in half. So I think I'll try 0.5 1st and then in the next line instead of tenting by sea, attend by new color. So that's a super fun way to get some interesting effects, although I'm thinking 0.5 is giving me way too much pink, so I'll try something a little bit smaller. Maybe 0.3. Yep, that's way better. Now that's try greedy it map. If you go into a photo shop here, let's talk about what a great map is. First, you can come down here and select an adjustment layer for agreement. Basically, um, it looks at each pixel, and based on its brightness, it picks a spot on disk radiant. So the least right, the closest to black. They'll end up this pink and the brightest. They'll end up this white, and then you can choose any ingredient. Of course, Um, so I can choose my colors and in processing were really only going to do two colors. I can choose any color for my brightest and any color for my darkest, and I'm thinking I kind of like these colors. So when processing weaken Dio a plane ingredient bump like this, and we can also mix it with our original kind of like this back to the code. So the first thing we're gonna need over here is to take a look at the pixel that we pulled out of our original image and check its brightness. So let's make a new variable to hold. The brightness will call it into brightness, and it's really easy to get the brightness. Actually scratch that. Let's make it afloat. Okay, So to get the brightness we say brightness of see today and this value will be between zero and 2 55 zero being closer to black and 2 55 being closer to white. Now we can pick our color between the two colors that we picked him Photo shop based on the brightness. So let's make a new color called ingredient map color and just use a little color to mix between our two colors. I'm gonna come grab him over here and phone shop really quick. Don't forget to put a pound sign in front of them, all right? And then the tricky part here is to pick how much of one of the other we have based on the brightness. So whatever brightness are pixel, waas is going to tell us how much of one or the other of the color we should have now. But remember, brightness was between 0 to 55 lip color once a number between zero and one. So to make that work, we just have to divide brightness by 255 and then we can use our greedy it map color. Two tents are breast stroke. Now, just like this are paintings. You look pretty intensely unrecognizable, but it's cool, I have to say. Now that's mix between whatever color we came up in our Grady at map with our original color seat. So let's bring back new color here, and we'll mix between C and ingredient map color. And if we leave, the last value here, at 0.3 will get more of sea than we do. Greedy amount color, which sounds pretty reasonable to me. And then we can change our tint on the next line to be new color. Yet another thing for you to play with have at it with the colors. Different images, different radiant maps. Different tents have some 10. Paint in One Go: all right, We're getting pretty close to being done here. I'm really liking how this is turning out. And really, I'd like to be able to export a high resolution image. So there's two parts to this. First, I'm going to switch around my code so that it doesn't draw brushstrokes to the screen one by one. What I wanted to do is drop to memory and then show it to me. Kaboom! All at once. The final image. That's mostly because in a minute we're not gonna be drawing to the screen it all. We're gonna go straight to a file in one go. And also because it's getting kind of tedious sitting here and watching it like over and over. Sometimes it takes a while. And then in the next video, we'll actually make it go to the file. Okay, but for now, let's switch this around ready for this. We're going, Teoh, get read of our set up function and our draw function altogether. So let's just come up and delete the void set up and the curly braces and void draw, and it's curly braces and the mouse release function altogether. And then if I just select all of this stuff and hit shift tab. It'll scoot it back over to the left. And I also don't need the frame rate thing up here because I don't have any frames. It's just gonna throw it out all at once. So let's delete that now. If I ran this right now, it would actually work. It wouldn't crash or anything, but I would get like one restaurant because remember this stuff that was in draw? Onley draws one brush stroke. It was counting on draw to run it over and over and over so that you get more brush strokes . So now we need to make it draw over and over and over without draw. We need a different way to loop. Basically, Um, and we'll do that with something called a four loop. Let me type this out and then I'll explain to you what this does. So make sure you copy this exactly with the curly races before and after all this code, and when you want to indented, you can highlight all that stuff in the middle and hit tab and it'll go off to the right. So this is called a four loop And first of all, what I do is I created a variable called I, and it's initially set to zero. And then basically eyes kind of like my frame count. Its job is to keep track of which breast stroke I'm drawing, so it'll start at a zero, and then when it runs the code again, it'll be want. And then it'll be two. It'll be three, just like the frame count. Um, so in I go zero, that's when I'm making the variable over on the right Word says I Plus Plus, that means every time I run through this code, make eye bigger by one. And then this piece in the middle means keep going. Keep repeating This, as long is, I is less than 1000. So this code will be run 1000 times. And then after that, I could just run, save frame and output an image. Now remember, we're using I instead of frame count here. So when we're selecting our stroke size based on how many times we have drawn a frame instead of frame count, we need to put in eye right here. All right, now we've almost got it. If we around this. It's going to look crazy. Let's try it down. Why? Oh, why does it appear that it's only doing this five times? We're only getting five breast trucks. This is one of those errors that it would take you forever to figure out. Like, yeah, how would you even think of this? But it turns out that this crazy way of rotating are brushstrokes is acting up on us. So before, when we had this all inside the drawer function, remember, what we're doing is we were moving the coordinate system and then rotating it for each breast joke. When you're inside draw, every time you run, draw, it resets the coordinate system, and then you come down here and you move into a place and rotating. But here, in a for loop, that coordinate system is not getting reset to its original position. It's being cumulative. So it translates and rotates and translates and rotates from wherever it was for the last bro stroke every time. And it's gonna go crazy and way off. So we have to manually tell it to reset the coordinate system in a really weird way, ready for this before we translate we type in push Matrix, and after we do our image, we type in Pop matrix. How's that for cool and intuitive, right? Yeah, not so much. But basically, Push Matrix is like a way of saying Here's some translations I'm going to dio when I pop, undo them so that should fix the problem. And if we run this now, we should get everything in one go. But, um, it'll go a little bit slow. I mean, it's not gonna show up immediately, right? But hopefully it should be faster, then sitting there on washing it. Draw every frame to the screen, should hopefully be faster than that. And now we need to adjust our numbers a little bit to get the same effect. Because who knows how many frames who were showing before It must have been more than 1000 . Because I'm not getting any details here, so I need up my numbers a little bit, and I can also change how quickly stuff is shrinking Change how big my stroke starts. All of these numbers I need to adjust now that it's coming in all in one go like this. I need to mess with my numbers until it looks right. So I'll try 3000 breast strokes. And again, I'm speeding up this video so years will not come as fast as you see mine coming. All right, so we're getting there. Actually want even more brush strokes? Because remember, when we get down to the smallest brushstrokes, it's gonna take a lot more small brush strokes to add details than it does the big breastroke. So I wanna hang out on those small brush strokes for Well, so we'll try 5000. Yes, There we go. I like that. So the moral of the story here is you got to play with those numbers and you got to know what the numbers mean in order to play with them, correct? Just to get that out. But that you want. All right. So in that video, we made everything output in one go, and in the last video, we will export it as a high resolution image 11. Export a High Res Image: here we go with the last video. Um, so this is where we're going to actually output this as a high resolution image. So in the last video, we made everything export or not, Export limit. Everything draw in one girl, right? Just Coble onto the screen. Um, but it's still drying it to the screen. In this video, we need to actually dropped to just memory, not on the screen at all, and then go straight to a file. So to do that, we need to give it a place to draw in memory. And that's gonna be a place called P Graphics. It's a variable called P graphics, which basically is like a virtual canvas that you don't see a canvas and marry me to draw on, and we'll call it big because word's gonna draw bake. And now everything that we're gonna draw. We're going to draw on big instead of drawing to the campus. So we made the variable called Big, but we need to actually stick a new canvas in it. So we'll say big equals create graphics. And this is where we're going to give the size of our high resolution image. I downloaded this thing from unspool ash, and I'm just gonna open it up and preview really quick the check its dimensions because I need those in my processing. So here, when I'm making my big old canvas, I need to put that in 3373 by 50 59. And then just after that type in job A to D. Who cares what it means? It doesn't matter. We're just making an object to drawn. After we make that, we say big debt begin draw so we can start drawing on this thing. This size function was for drawing on the regular cameras. We don't need that. All we can just delete that, Um, And now when we set the background, we need to set the background of our big canvas not of the regular campus. To do that, we say big Dutch background and in the same way everything we're drawing or doing to the canvas. Now we're gonna say big dot in front of it to do it to the big campus instead of to the normal campus. So all of this is dealing with variables. None of that counts. Um, I think the next time we need a big is when we set the tent was a big dark tint and then big dots push matrix big dot translate big dot rotate big dot john image big dot dot matrix Also up here we were referring to the canvas wit. We need to refer to the big campus with so big dot with big dot height and big dot with. And hopefully we didn't miss anything. So now done here. Instead of saying save frame, we have to type in big dot and draw and then big dot save and will give it a name. I'll call it high rez dot Now I'm gonna add one more line of code here to print out something to the consul to tell me that it's actually done saving because since we're not actually printing anything to the canvas, you could, like, totally miss it, right? It could save a file over there. You could never know it's done. So print line will print something to the consul here, and it'll just print out saved, and that's our signal that it's done making the file especially says we're giving it a name , right? If we ran this more than once it's gonna overwrite the same file. And, like, how would you ever know that it's that is redone it. And it's not the old one that we're looking at. Saved tells us that is done. All right, so let's start running this thing. How much you wanna bet that I didn't miss anything? Here we go. Oh, Okay. Uh, okay, here's what I missed. I put in the dimensions of my large image, but I forgot to change the name of the image. It's still thinks it's looking at field dot j peg my old little image. So it's what in the name of the big image I'm trying to dio tee times Dodge a pick. Here we go. Let's try it again. Now, remember how in the last video I was telling it was gonna take a while and we weren't doing high resolution images yet? Um, yeah, it's going to take even longer now, so just be patient, right? Patient and win saved Finally appears down in your consul like that. You go check out your image in the same folder as your sketch. Now, since we're drawing so huge and we haven't changed anything yet about our numbers. Look at that. 5000 breast drugs is on Lee that much, Um, partially because they're so small, like our biggest brush jokes are way smaller than our image now, so that would probably a good place to start adjusting. Numbers would start out a lot bigger. Let's start out. Let's try 300. And it also seems logical to me that since we need to cover more area, we should have more brush strokes of each size. It's a teary anyway, so I'm gonna try changing that number 2 50 and let's try 10,000 restaurants. So let's run it again. According to Premier Pro, this is taking about two minutes of real time. Um, there is, Let's check it out way better. That's pretty cool. I made for this one. Taken with a tent. Who knows? Um, but, yeah, you are on your own now, playing with this code and every single number you see in it. Just go for it. Change your image. Pick a different breast joke. Pick a different size of breast stroke. Start with a different size start with a different number of brushstrokes. Keep on the same size longer or shorter have a different minimum brush size. You just got to go crazy with your image and the effect that you want. And while you're at it, make yourself some of your own breast strokes. You might as well try something crazy to Doesn't have to look like a breaststroke. Why don't you paint with bicycles or something or faces, like anything you want to paint with? You could make a brushstroke for it and have at it cool, geometric shapes, whatever. It's yours have at it. Have some fun. And I'm really excited to see what you come up with. Me creative and, yeah, thanks for watching. 12. Thank You: Thank you so much for watching this class. I hope you learn a lot and had a good time. Please don't forget to review my class and post projects on skill share. And also please follow me on skill share and instagram so you can hear about my new classes Almost so we can keep in touch. Thank you.