Beyond Illustrator & Photoshop: Start Learning How to Code | Jerome Herr | Skillshare

Playback Speed

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

Beyond Illustrator & Photoshop: Start Learning How to Code

teacher avatar Jerome Herr, Code Weaver

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

14 Lessons (1h 20m)
    • 1. What this course is about

    • 2. Why should you learn creative coding? Here's why!

    • 3. Install Processing on a Mac

    • 4. Install Processing on a PC

    • 5. Discover the Processing user interface

    • 6. Prepare your 'drawing board'

    • 7. Use different basic shapes

    • 8. One additional shape, and greyscales

    • 9. Improve the setup and act random

    • 10. Create moving laser beams!

    • 11. More fun with lines

    • 12. Write your own little drawing program

    • 13. Enhance your program with mouse events

    • 14. Enhance your program with keystroke events

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

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

Are you an artist who's been thinking about integrating coding into your artistic workflow but you've not yet dared to dip your feet into the vast ocean of bits and bytes? Then you've come to the right place! This course will allow you to get a sense of it all and to then decide if you want to go further down that road or not.

Have you been bored to death by traditional programming courses, either in school or online, yet you are still interested in programming because you think this stuff is still kinda important to know and could, maybe, even, actually be fun after all? Well, in that case you've come to the right place as well as I'm going to try to give you a fresh view on programming!

And just to be clear: this introductory course requires NO previous programming knowledge at all. It starts from zero. And there are no stupid questions so ask them in the course forum and I'll address them there.

Meet Your Teacher

Teacher Profile Image

Jerome Herr

Code Weaver


Having been involved with IT for 20 years, but with a deep yearning for more art and design in my life, I've discovered creative coding, by chance, a couple of years ago. That was a revelation to me! I had finally found my tool for creating, what I think is, beautiful stuff. I had finally found a way to turn the ideas in my head into something visible on a screen!

I immediately then started a Tumblr with the results (and often the source code) of my coding experiments. Its follower size has steadily increased over time and stands at 13'000+ right now. Recently I have also launched an ello page and it has 2000+ followers, which is not bad for ello standards ;) And I've curated some of my works on my website:

Very recently I've also been an online 'crea... See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
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. What this course is about: have you been wondering how animations and pictures like these have been created? Or have you heard about creating coding and want to know if it's for you? Then you've come to the right place. I'll show you how to get started with the programming language that has been developed, especially for artists that's being used by critics, people all over the world right now on the best party set. This course is for total coding beginners, so you do not need to have any previous experience with programming. This course will help you to make your first step in this new world without getting frustrated. Lectures are also complemented with exercises Quintus and the recap at the end to reinforce what you have alone and do not be afraid to ask questions in the message board. I will do my best to answer them there. As for me, I started just like you from scratch, and now I have over 13 7 followers on my creative coding tumbler and over two celled on my yellow page. So join this introductory course right now and start weaving with Coto C inside 2. Why should you learn creative coding? Here's why!: 3. Install Processing on a Mac: just a small heads up. This video is for people who are not familiar with installing programs on their computers. So if you are for me always installing improvements by itself, you might want to skip this video. See you in the next. Okay, so open a browser window and goto processing dot or they are click on download processing. Decide whether or not you already want to make a donation. Then click on download and shoes diversion of processing that you need. In my case, it is the medicals expression note. By default. This downloads the 2.2 point one version, the most current stable release off processing. And also there are already LF abortions off the certain edition of processing would suggest that you stay with the 2nd 1 For now, until the search warrants officially released, I will update these videos at that point. Okay, once the download has finished, you can open your download folder and drop the processing Aiken onto your applications folder. Then click on the application's liken to access this folder, double play processing and accept the resulting warning, which in any case should only appeared first time once the application has loaded. You should see the processing Aiken in your door in order to be able to quickly start processing from there in the future. Simply right, click on the icon and select. Keep in Doc before going on with processing itself. It might now be a good idea to create Holder for your sketches inside of your documents folder. Click on your hard disk as an on documents. Now double click on the processing folder. You know this we already existing produce and right Click somewhere around select new folder and call it sketches. Close the window. 4. Install Processing on a PC: So let's install processing on the windows, open your browser and go to www, processing the cork click on download. Decide whether or not to make a donation click on download, but said Wait a second. Since very recently, the default download on this page has become the better version off processing three. But this course uses the stable 2.2 point one version of processing. So scroll down the page and downloaded there Truth easily your 30 bit or the 64 bit first, depending on your computer, wait until the download has finished an open desert fire. Direct the processing folder to the desktop. Wait until the files have been expanded. Now direct the processing folder to my program files until the processing folder. Direct processing application filed with the right mouse button to the desktop and choose Create shortcut DoubleClick The shortcut de select and accept the warning right, You're ready to go now 5. Discover the Processing user interface: Okay, Back to processing. Let's now have a quick look. The user interface in the first button in the menu is the run, but you need to click it in order to have your code executed. So just click it. Yes, even though we've not yet written any code, a couple of things have happened. Now a. The run button has turned yellow, indicating that coat is being executed. Be the small display window has popped up, which shows that processing run some default code when no actual code has been entered yet And see a Java Aiken has appeared in your dog. This is actually the program, or sketch that produces the small display window. But all of this is not that impressive and also notes that useful. So let's click the second button to stop the current sketch notice. The run button is not yellow anymore. The small display window has closed and the Java Aiken has disappeared from your dog. Now click on the next button. This will create a new processing window in which you could actually write a new sketch, but you do not need this right now, so simply close that window again. Click on the next button, you can choose to either open an existing file, a recent file or an example five that's go through them one by one. The first option opens a dialog window. You should see your personal processing folders there. Double click it. You see the street mysterious filled us again, and the sketch folder you've just created double click it now. Now, if you already had safe some sketches before, you could open them from here, since that's not decay, so simply close to dialog window by clicking with cancer, the second option is quite self explanatory. You could quickly reopen recently closed sketches from there. The search option is a really interesting one, since it gives you access to all kinds of example sketches, and you should definitely explore those example later on in the course on your own. But for now, let's simply open this one basic input mouth to the So this is an actual processing sketch that you can run to see what it will do. So do it. Click on the yes, the run button to execute the coat. Now move your mouse around the display window from left to right up and down and see how you can influence what happens in it. Yes, I know you want to do this for hours now, but let's stop the sketch anyway. Done. Let's also close the actual file itself and the examples menu back to all buttons, so the next in line is the safe button. Click it. You could now simply save your sketch there in the default location. But that would get messy quickly, and we just took some pains to create a Sketches folder. So let's make use of it. Click on the arrow to get the advanced view and then double click on the Sketches folder to enter it. Now, you could either simply hit safe to safe to sketch under a default name. Or you could first give it a more descriptive name in the safe. As textbooks, I'll call it First test and then click safe, Brilliant with safety Empty sketch. Since that's how to top, we will rock up things here then, and yes, we can safely ignore the last button. For now, it's not really that important. See you in the next video, where you will finally start to write some code, your stuff 6. Prepare your 'drawing board': hello again. Now that you consult processing and know a little bit about it, she's interface. It's about time you start writing some code yourself, so start processing again. If you haven't already done so. And by the way, you can off course. Also used the menu to create new files. Open Safed ones, etcetera. Okay, so as we have seen before, if we simply click the run button processing will create this default display window. A tiny one, actually. So let's start by making this window bigger for now, simply copy what I am writing. Just make sure you copy it correctly. Otherwise you will probably end up with a narrow message and then click Run. Ah, that's already much nicer. Just look at the size of that displaying window and think about all the possible ways in which you could feel it. But first, let's look at what we've actually done here. You have issued a command to processing. In this case, it's something like create a drawing board. But that comment alone would not be enough since processing with wonder and say fine, But what size do you want exactly? Well, actually, it wouldn't say that it would just roll it's non existent ice and use the default various again. So has just delete the numbers and confirmed this. That's why we released 500 twice. We told it to create a drawing boats that's 500 pixels wide and 500 pixels. I now change the numbers and run the sketch again. Try really big numbers and try really smaller numbers, and you don't need to always use the same number twice. Of course. Try something like 800 times 200. Just play around with it. So post the video on Play Around With It. Okay, some observations. Now, as you might have noticed, person processing is really into precise and correct syntax to a slight mistake, and it will crash and be set. Luckily, it's not very resentful. The size message. For example, Christ, exactly two numbers. But let's nevertheless delete one of the numbers and run the sketch descent results in an error message in the dark red strip below the editor process ings. Aero messages will always try to identify the actual problem and just help you to correct your mistake. But especially in the beginning, the messages he might seem quite cryptic and not very helpful at all. That's why I will in your them for now. And instead I'll show you another neat way to figure out what went wrong. So go to the help menu and click on the reference Your default brother will open the reference page off the processing website. This page is a treasure trove. It contains all the definitions off all the message that you can use in processing. Let's no do a quick command f to search for a specific word on the weapons in this case size Syria. This click on the hyperlink. This will lead you to the description of the size method. It shows you some example uses and a detailed description. Scroll down a little further, although until you see this in text section there, you can see the exact definition off the seismicity sighs, plus an open parentheses, plus a parameter called W plus a comma. Very important, too, on the perimeter called H and the close parenthesis. Now, as for W and H, you will find the explanations a little lower under parameters, with W being the with off the display window in units off pixels and H being the height off the display window in units off pictures. There is even more information here, but we'll come back to that later on. So let's close the browser window and return to our editors in series. One more very important detail on the reference page, we saw that correct syntax is, for example, size 600 by 400. So let's write and execute this sighs. 604 100 and the run. Oops! Processing did not like this, and it's error message is, unfortunately, not very helpful. You might be able to guess what went wrong, but I'll point out the problem anyway. We did not type the semi colon at the end off the message, yet it is mandatory after the message, so we'll just add it and around the sketch again. Walla. No problem. If you set was a lot well done for following alone in the next video, you will explore some of the shapes that you can actually use to draw something on your display window. See, was there 7. Use different basic shapes: onto shapes in first to be sure that you create a nice big drawing board, you could, for example, right size 600 come up 400 then go to the next line and right point. But as you probably suspect, it is not enough in itself to create a point on the screen. So let's quickly look up the definition of a point. Go to help and click on the reference search for point. You'll see it's right next to a bunch of other basic shapes that are called Pootie primitives in processing. Click on the Link for more info, as always, very some example code. But again, Lex, let's focus on the description. The point message draws a point. Coordinate in space at the dimension off one pixel. The first parameter is the horizontal value for the point. The second value is the vertical, very for the point, And this in taxes point open parents is his ex comma. Why close parenthesis? Good. Let's use this in our sketch point x. Why? But you can't just use X and while except, of course, so change them to numbers like 100 and 250 now around this sketch, Ah said Result. In an era, can you identify the problem? Yes, indeed, There has to be a semi colon at the end of the statement and run the sketch again. This time it works. Can you see the point? It's their 100 picks is to the right 250 pixels? No, but it's very small, since it's indeed just one picture. Okay, close the window that stops the sketch, just like clicking on the stop. But note, one point is a little bit boring, so let's try to create a line. Copy the point statement you just wrote and paste it like five times one too sweet for then at one to each x value. And try to figure out if the resulting line will be horizontal over to kill to for five. Now run the sketch, either by clicking on the start button or simply using command. Are and behold, there is a tiny line close the window again and returned to the editor. Well, that's very nice, but it's also a very tedious way to create a line. Luckily, the creators of processing have defined another method called Yes, you guessed it line So let's look it up in the reference Here is a lying So what does the line comment to? It draws a line direct passed between two points to the screen. This in text for this is line X one. Why want X two y two, with the first pair being the coordinates off the first point, the second pair being the coordinates of the second point. So copy this again and paste it into the editor off course. You could also just write it yourself if you want to. Now, as before, simply changed the access and wise to numbers like 50 50 400 and 200. And do not forget cynical. Run the sketch. I switch up, close the window again. Copy that line and change some Or all off the varies. Run the sketch again, both the video and play around with different numbers. To get a feel for this. Another shape we can use is called Ellipse, which means circle more or less. So let's return to our good friend the reference page and look up ellipse. It tells us that the Ellipse message draws an oval too discreet and the lips with equal with and height is a circle. It also tells us that the Ellipse message requires four parameters value for the X coordinate value for the Y. Coordinate value for the Wisoff, the lips and value for the height off the lips. Copy the exact syntax to the editor again. Replace the letters by numbers again. You could, for example, use 100 and 150 for the X and Y coordinates and two times 50 for the wishes and highs off the Ellipse To create a nice circle. Don't forget to add the semicolon at the end and Iran the sketch. Good. Stop the sketch now change the less value to the double off the one before it. So instead, off 50 years, 100 run it. Now the circle has transformed into an egg magic. This might also be a good opportunity to stop the video again and to just play around with different numbers. The next shape in line is directing. It works similar to the Ellipse, so we won't look it up in the reference right now. Also, you could of course, do that. There are always interesting details waiting to be discovered in the official description. Okay, So copy one of your ellipse statements to a new line and replace a lips with direct. Do not change any of the other numbers for now, since this will show us an import difference between lips and erect. Run the sketch. Was this what you expected? When I first learned this, I expected the rectangle to cover the lips. But it does not. And why not? Well, the reason. It said, the X and Y coordinates of the Ellipse refer to its center by default, while the X and the Y coordinate off directing er refer to its upper left corner. In a lot of situations, this makes sense, but it would also be great if we were able to center direct angle as well. Luckily for us, as a method to do this cold wrecked moat centre, put it in the line above the rectangle. Right boat and center has to be capitalized on. Don't forget semi colon. Run this sketch again. Gula, now directing Galis covering the Ellipse. This might also be a good time now to point out something else about the processing editor . As you might have noticed, the methods get displayed in blue. This means that those words are specially reserved words attributed to specific pretty find methods. Try deleting the last see from a lips. The world turns from blue to black, indicating that it's not one off the pre defined methods. If you would know, run the sketch, it would crash, since it would be looking for a method off function called a lips, which does not exist. Okay, at the E. Again, it will turn blue again. It might also be a good time to introduce another concept, namely the one off commenting inside a sketch. All lines, starting with two slashes will be ignored by processing. This comes in very handy if you want to comment on what your sketches actually doing at a certain point like this, for example, slash slash the next line create and Phillips. This might not make much sense here right now, but imagine writing some long and complex code and then looking at it again a couple of weeks later and wondering, Why did I write this? What is this good for again? An additional benefit off comments such kind Quickly disable certain parts of your coat without having to immediately delete them in the case. You just want to test something or when you're trying to find the reason for a buck so you would do something like this. Now the X and the Y coordinates off directing. Refer to the default top left corner again and not center anymore. One last thing I'd like to mention in this lecture is the order off. Execution processing executes your code line by line, starting at the 1st 1 obviously, and then applying each statement on top off the previous one, imagining it like layering a cake. Now look at your coat. You should have something like this. The lips, then direct if you tell processing to run this and it would look at the first statement drawn a lips. So it does. This senate will look at the next statement through a rectangle So it does this, but on top off the already existing ellipse. Now I'll select and cut the line with direct statement and paste it above the line. Real lips Run the sketch again. You can see that the ellipses now on top, off direct angle since the order of execution has changed. Okay, that's it for this lecture. See you next One 8. One additional shape, and greyscales: in the last video, You fluent ho to you. Some basic shapes. Sarah. Three More Triangle Court, an ark. We'll just focus on triangle right now. The other two are a bit more complex and will be addressed later on. So since a triangle isn't such a hard concept, we don't really need to look at the reference right now. Let's just start coding initialize your sketch by first defining the size off your drawing board again. In my case, I lose size 806 100. Then move to the next line and type of triangle, plus an open princesses. It's briefly Posten and think about what we need to draw a triangle. We will need well, three points, and each point has an X coordinate Onda y coordinate, right? So our triangle method will have three paths off coordinates, meaning six parameters in all. Continue writing your triangle statements, and I lose 50 50 for the first point and 702 100 for the second and 305 100 for the search . One. You can use this or select your own. Run the sketch nice. That looks indeed like a triangle. So post the video now and experiment with some more numbers off your own and see if you can discover something maybe unexpected. So I hope you had fun creating a bunch of different triangles, and maybe you've discovered something we're doing. So namely, that you can also use numbers smaller than zero and bigger than the with or the heights off your display window. In this case, the triangle will be only partially visible in your display window. Let's see what this looks like by adding an additional try anger on a new line. But before we do this, let us remind ourselves what maximum values are drawing. Both are by using a comment. In my case, this means slash less current wizards is 800 pixels, and the current status 600 picks is onto the triangles. That triangle minus 104 100 502 100 601,000. Run the sketch and look at your result. Great on the inside. To be taken from this is you should experiment. Try using big numbers, small numbers, positive numbers, negative numbers, a combination of all other Be creative. Let yourself be surprised by the results and tried to discover visually interesting combinations. So, no, you know most off the basic shapes. How about giving some some character and individuality? Well, you've got a couple of tools at your disposal. Let's look at five foot same stroke stroke. Wait. No stroke, Phil. No feeling Stroke said. Stick color used to draw lines and borders around shapes. Colors can be expressed in multiple ways in processing, and there will be a whole section on Collis later on. So we limit ourselves to Grace skates right now. What this means is that you can use a number from zero black to 255 white as an argument in your stroke message. So in certain empty line above the second triangle, for example, Stroke 150 and run the sketch you can see now is that the border off the second triangle. In my case, it's not black anymore, but great. The border off the 1st 1 is still black, So since that's the default, colorful strokes try some other values now and don't forget to experiment. Okay, so did you try using negative numbers and numbers greater than 2 55? Good, even though it is not very useful in this case since Callas start behaving weirdly so bad I stay between zero and 2 55 for grayscale Very set one can actually predict. Wouldn't it be nicer to define the sickness off such a stroke as well? Of course it would be. That's why processing has to stroke ways. Method that misses has one argument. The Wisoff. The stroke in picks is so Ed, for example, Stroke. Wait 10 above your first try anger and won the sketch. The triangles have nice sikota lands now. But what if we want the second triangle to have a difference work with in the 1st 1? No problem. Just at another stroke with statement in your code Is this time just above the second triangle Stroke. Wait 50 and run the sketch. Okay, borders are nice, but what if you want the first triangle to have no border at all? No problem. Just at a no stroke statement above the first, try anger, run the sketch Notice that if we hadn't already specified a different stroke for the second trying, then this statement would have resulted in the second triangle. Having nobler either you can easily very fight is by commenting out a stroke statement. But let's turn it on again for now, by removing the comment again. Borders aren't everything. That surface is a fun, too, and they feel message lets you define the feel color on the surface. Phil uses the same kind of arguments that stroked us. So let's simply use one number between zero and 2 55 since we're staying in grayscale for now at a new line to your coat, maybe above the second triangle, Phil 50 and run the sketch. Yet sometimes you might want to have no surface feel at all and just have a border. In that case, at a no field statement where we wanted, like above the first triangle, run it. Oops, what has happened? The triangle has disappeared. Well, that's because refused booth, no stroke and no feel on it. That's there for comment. Out in no stroke. As you can see by commenting out the no feel statement, the default color for the film is it is white. Feel free to play around and experiment with your new knowledge, but before you do, let me just quickly mention one additional very useful thing. You can use magic words like with and height in your coat in order to automatically refer to the width and the height off your display window as they find in your thighs. Statement at the beginning of your sketch. Whatever the values with and height are, in this case, pre defined system variables, which store the values you entered in your size. Statement. So at the following a lips at the bottom of your existing coat and will also use a difference to acquit stroke. Wait five Ellipse with divided by two height divided by 2 202 100 Notice that the system variables will be displayed in pink and one this sketch sweet. The circle is exactly in the middle of the screen, and you didn't even need to calculate anything yourself. What you told processing in this case is draw an ellipse with an X value at half the ways to display window and a Y value at half the height of the display window and give thistle lips and equal with and height off. 200 pics is now. Use different values in your size statement and run the sketch again. The circle will remain in the middle of the display window independently off the values that you have entered. Additionally, you could also try something like lips with divided by three Hide defined it by four, 202 100 to deepen your understanding about how to use the system variables. Okay, that's enough for now. See you in the next video where we will start tackling animation. 9. Improve the setup and act random: we'll come back and kudos for hanging in here at the beginning. All of this might seem kind of dry and complicated, but it is really worth it in the long haul to keep at it. Okay to now you have only been creating static circles, rectangles or triangles, says Scoot, and it was necessary. But you can do so much more with processing, like creating cool and fun animations. We laid the foundations for animating thing in this lecture and then really get things moving in the next one. Let's start again with that one now well known and beloved size function. I use 500 by 500. This time this will off course result in a square display window. But in order to progress from this very basic coat, we've got to write some code ourselves Now that processing has been writing by default and behind the scenes for us. The whole time when you were hitting the run button and this coat is the set up function, we've got to add it to our sketch, and it looks like this. Avoid set up open parenthesis is closing parentheses. Open curly bracket, closing curly brackets. I do notice that the set of function has no arguments. Unlike, for example, the size function, which requires two arguments. The within the height you also notice is that the set up function requires to curly brackets. It is inside of this curly brackets is that we write our set up coat. This isn't also a good time to return to our good friend the reference page. In order to learn more about the celeb function, let's just focus on the description for an hour. The set up function is called once when the program starts. It's used to define initial environment properties such as screen size and background color and to load media such as images and fonts. As the program starts. That can only be one set up function for each program, and it shouldn't be called again after its initial execution. The important bits here for us right now are cold ones when the program starts and used to define initial properties such a screen size. So this is where we will put all the stuff that processing needs to know at the beginning to set up your sketch correctly, stuff like this screen size, so switch back to the editor and move your size statement inside off the set up function, either by cutting and pasting or by deleting the line and rewarding the statement inside of the function. Good. Now click the run button or use command are Wow, that waas not said. Impressive agreed. But it's a good idea to regularly check if your program is still working. After you have changed your coat. And in case you got an error message, it's most probably because of the missing. Parenthesis is probably break. It's a semi colon closely to identify what's wrong and corrected and run the sketch again now at an Ellipse story coat. But be careful now it has to be inside off the celeb fucked Ellipse with divided by two height divided by 2 101 100 Putting it outside of the set up function, which result in an error message. Feel free to try this later for yourself. For now, quickly run this sketch just a PSA test. Good. It's working, but it's still a bit boring and too predictable. Therefore, let's introduce the random function. But in order to illustrate the random function, I'll introduce another function first background what Dysfunction does, said it sets the background color off the display window. In that sense, it works like stroke and fiddle. You just need to give it a number between zero and 2 55 for processing to paint the background off the display window in that shade of gray. So at the following, to your coat below the Ellipse background parenthesis 50 Prentice's and run the sketch. Okay, the background has a nice dark gray color, but the circle is not visible. Why not? Yes, indeed. Because of the order of execution I mentioned in an earlier letter. So what processing did hear WAAS? It created the drawing boat. It painted a circle in the middle of it and then put the gray color all over it. Good shop or not. So let's put the background statement above the Ellipse statement and run the sketch again . Nice says much better. And now we can finally turn to the random function according to the reference it generates random numbers. Each time the number function is called, It returns an unexpected value within the specified range. For example, random five returns values between zero and five, starting at zero and up to, but not including five. So if you wanted five to be among the random numbers that would show up, then you would have to use six parameter. So much for the description for your sketch. It will currently always use 50 as the background color but Sarah, 255 shades of gray that it could actually choose from. Therefore, let's tweak our program so that it will select a random color each time it is being executed. All we have to do is replace the 50 inside of the background function with random 256 and it has to be 256 because we want 255 which represents White as a potential color as well. So delete the 50 and then enter some empty spaces to make some room. Since start writing, random open parenthesis is 256. Closing parenthesis is the empty space is not really necessary, but multiple Prentice's are less confusing. Then I'll run the sketch and then click inside of the editor window and type command are to start to sketch again. Look at the result. It should be a slightly different gray click inside of the editor window again followed by command. Our repeated. Until you get bored, all this clicking and typing is exhaust. Sounds like a joke that computer should do. And indeed, that's what you're going to do in the next video. Teach your sketch to continually change the background color on its own. 10. Create moving laser beams!: Okay, so let's start with the code from the previous lecture. Yes, we have seen the sketch will randomly truth the background color each time we run it. But this will always only happen once because everything inside of the set up is only executed ones right at the start. So in order to get change or movement in the sketch, we need something new. The draw function. Let's have a look at the references description of dysfunctions in called directly after set up. The draw function continuously executes the line of code contained in its block until the program is stopped, or something called no loop is called. Okay, So what this means is that while the code inside the set of function is only executed once the coat inside the drawer function is executed over and over again until the world ends, or well, until you stop it. So at this function to your codes and switch to your editor and at the following beneath the syrup function, avoid draw open princesses closing parentheses, open curly brackets, closing Tony brassicas. Then run it just to see what happens. Okay, nothing seems to be happening. At least not to our eyes. Now move the Ellipse statement from the set up function to the draw function and run the sketch again. Yeah, it still looks like nothing is happening, but what processing is actually doing is painting the same circle again and again. But since they're all exactly one on top of the other, you don't see any change or movement. So what you need is a statement there that's not constantly doing the same thing with the same values. Something like our background function, which is a random color each time it is called. Therefore, cut and paste that function from the set up section to the draw section. A small warnings, though epileptic people should probably not execute his coaches like that and instead wait for the next function that will soon after the coat. But all the orders can run the sketch and then quickly stop it again. So whatever that Wasit was definitely changing the background colors, and it did so with a mind blowing speed. And that's because processing by default executes the code in the drove function 60 times a second. Luckily, you can slow down that frame rate if you want simply at the frame rate function to the set up coat. I will put it there and not intro because the frame rate is defined once per sketch. Write something like frame rate Prentice's, too, which means that processing will now execute the code twice protected by the way. Typing command T will nicely auto. Format your coat, or at least to a certain degree. So do this from time to time. Okay, run the sketch. That's somewhat better. What stopped to sketch again anyway? Now it's also finally about time to bring some color into this great gray world. Let's therefore have a look at the description off the stroke function, since it's through the stroke functions that we set the color of a line or a border. The reference tells us that the stroke function sets the color used to draw lines and borders around shapes. This color is easier specified in terms off the RGB or HCP, color, depending on the current column. The default color spaces RGB with each value in the range from 0 to 255. Let's stay with the different color space and for now, RGB in case you're not familiar with color spaces, you need to know that RGB stands for red, green and blue. The three based currents are at the root off all the other colors that we can use in processing. Note that these three components can each have a very between zero and 2 55 just like our grace before we can actually check the RGB values off some colors right now, in order to make this RGB seeing easier to grasp, go to the Tools menu and click on color Selector. Here you can see the RGB values off the colors like this. Brownish color, for example, has read value off 222 a green value off 172 and the blue Value off 34. I'll click on this blue range, and here this bluish color has a red value off 85 a green value off 102 and the blue value off 160. So, if you know, wanted to use this color, you could simply copy these three values into your stroke statement. Okay, back to our sketch Jill et Ellipse and the background statements in the drawer function. We don't need him right now. Let's instead draw a diagonal line from the top left corner to the bottom right corner. A quick reminder how processing sees the world at the top left corner. The X and Y values about zero, while at the bottom right corner X equals to the with value from the size statement. And why to the hide value off the sides state. So in order to make processing draw such a diagonal line, you need to tell it a following line 00 with height. And while we're at it, let's use a nice black background for our sketch. So at back ground zero to the set up, that's one. The sketch, though it's all black. Why send no line? Well, since we did not define a color for the stroke, processing simply used to default again. Which four strokes is black? So put the stroke statement above your line. Statements and stroke open parenthesis is you know what? As we have seen before, the RGB color space requires the stroke method to have three values between zero and 25 so you could write 000 but that would just result in a black line but they used a Carlos that you can actually see on a black background, something like Red. In order to get the brightest right, we would write to 55 00 meaning the maximum amount possible off rat and no amount of green and blue at all. That's from this. Okay, nice, but not good enough. It would be better if processing, which randomly choose one of the 255 possible Retz. To achieve this, you simply replace 2 55 with random to 55 on this sketch. So what you get is a diagonal line is changing hues of red. That's better, but still not too exciting. So let's spice things up a little bit. But introducing yet more end of this, namely by making the second pair of coordinates of our line random in order to do, is simply replace with with random with and height with random head. What this means is that processing will choose a random number between zero and the West off our display window for the X value off the second point and a random number between zero and the height off our display window for why value off our second point before running the sketch. That's better. First, coming out the frame rate function in order to avoid the sketch being super slow. Okay, now run the sketch and behold this beauty. Now let's tweak it a little bit more. Let's move to start off the line from the top left corner to the middle of the screen. How do you do? It is yes, indeed. You change the 1st 02 with divided by two in the 2nd 0 to hide divided by two. I'll run the sketch again. Very cool one last week. Before we go, let's change the course. So how would we get green laser beams instead of red ones? Well, you we set our value to zero again since you don't want any Red States style and instead set the G value to rent them to 55 from the sketch, and it should be obvious now how to create blue laser beams. Yes, you reset the G value to zero and change the B value to run them to 55. Run it again. Okay, that's it for now. See you in the next lecture where we will have some more fun with animated lines 11. More fun with lines: So let's start with setting up our base sketch. Boy. It set up size 606 100. And since we want to create an animation that's also already right, the draw function for it. Draw open. Parents is closing parentheses, actually, braces open, curly braces closed. And let's issue ourselves the following little challenge on a white background. Create black lines from somewhere on the left border off the display window to somewhere on the right border off the display window. How would you do with it? Well, the white background part seems easy, So start with that one. Put a background statement inside of the set of function like this background to 55 with 2 55 representing White Off course. Do not forget semi Cohen at the end. Good on two lines, and they should be black. Remember that the color of a stroke is set by the stroke function, so at stroke zero to the set up a swells. And as for the coordinates off those lines, that's a little bit tougher. That's therefore just used a symbolic aligned statement for now. But let's put it in draw, since we want a lot off lines to be generated and not just one line x one y one x two white . So the lines should start somewhere on the left border. But what exactly doesn't mean? Let's look at our display window. Yes, the X axis from zero to with was with being the first value indicated in your size 606 100 statement. And here's the Y axis from zero to hate, with height being the second value indicated in the size 606 100 statement. So what can we say about the coordinates off the first point off our line functions then, namely the X one on the Y one. Well, since the line should start exactly at the left bowler, X one has to be zero. Otherwise, the point is not at the left border off the display window. If X was 50 for example, it would start here, which would not be what we want. Okay, So if x one has to be zero and simply replace X one by zero in your symbolical line statement, what about why ones that the line could start here or here or here anyway, on this line, which means that why one can be any value between the top zero and the bottom for high value. So let's make processing. Choose value between zero and hide each times and by writing at the y, coordinate random open parenthesis. Zero comma height closing perent is's note, since zero is the default value. If no minimal value is given inside of the random function, we can also abbreviate the coat and simply write random height. Since this means the same a random value between zero and height. Okay, so now we figured out how to get the coordinates off the point on the left. What about the point on the rights and well, let's look at the picture again. All the lines must end somewhere on this border. This means that the X coordinate off this point has to always be equal to our wishes value , because if it was smaller than the line might already and here, for example, so replace x two by the system variable with this leaves us with y two and us with our Why one before why two can be anywhere on this line, for example, here, here or here, anyway, between the top zero and the bottom, our height value, which means that processing should again simply choose a random number between those two extremes. In order to achieve this, you simply have to change. Why to also to rent them zero height, which again can be abbreviated to random height and now run the coat It works, turns off white lines that start on the left side and end on the right side. But the screen is filling up quickly. Maybe it would look nicer if only the most current line would be displayed. Let's try this by moving the background function from the set up to draw above our line. Statement. Run the sketch now nice, but that's moving a bit fast. Let's slow it down, using the frame rate function we've already seen before at the following to the celeb function. Freeing rate one. And on this sketch again, yes, that's better. And what's really important to realize here, he said, putting a background statement in the drawer function is like telling processing to erase the whole screen with that color each frame and only then execute the rest of the coat. Okay, you can stop the sketch that's speak our challenge a little bit we still want black lines from the left to the right, starting at random on the left border. But this time we want him to end up horizontally on the right. So if the line starts at a certain height on the left, send, it should also end at the same height on the right. How could we do that? If we look at the coat, it might seem like both y values are already referring to the same value, since both consists off random height. But that is not actually the case, since each random is executed independently, thus resulting in two different values. So what we need is a way to use a randomly generated number twice in our coat, and that's what variables are for. Variable is a kind of the box that we can use to store a value in in programming is there are different kinds of boxes for different kinds of things. Some off these things could be numbers, and the random function does generate the number, so that's good. But to make things slightly more complicated, there are also different kinds of numbers for our purposes. I'll just mention to inter just and floats. Inter just are whole numbers, like 12345 etcetera while floats our numbers with the decimal point like 0.5 minus 10.2 33.25 etcetera. Let's quickly check what kind of numbers random actually generates. So open a new processing window and simply type print Ln open Prentice's rend them 10. Closing parenthesis is semi colon, for example, and click the run button. So what we did here was tell processing that it should print something to the console, the black area below. The editor in this case, a random number between zero and 10. Ignore the default display window and let's have a look at the consul. So whatever random numbers that you see there, it definitely has a decimal point with a lot of teaches behind it. So the number generated by the random fraction is afloat, which means that we have to create a box off the float kind good. You can close this window again with this insight, we can then now create a variable or box. If you prefer off the flow time you do. These are starting to declare the kind of books that you want, So just write. Float in a new line above your line. Statement float, notice it turns orange. Now you have to give the books and name. How about why position, since this is about the Y coordinate. Okay, type y position. Now you have to tell processing to put something into this variable or books and you duties by using the equal sign. Good. Now you need to tell processing what exactly it should put in there. Well, in our case, there should be what we used for the Y position in our line statement. So far. Meaning random height so copied from the line statement or simply write it by hand. Good. And don't forget to put a semi colon attend our on it. Nothing has changed. Why not? Yes, indeed. Even though we have created a box to store of value in, we have not actually used the box in our line statement. So let's put it there now. Simply replaced the two random height statements in your line Statement with the word Y position ensures that you write it in exactly the same way as above when you declared it. Okay, Now run it perfect. And now, just for fun. Let's see what visual result we get when we don't refresh the background each time. So comment out the back ground zero statement in the drawer function. Increased the frame rate to 10 in the set up function and run the sketch again. Not bad either. 12. Write your own little drawing program: Welcome to Section five. It's about time now to add some interactivity to your sketches. Up until now, you've generated drawings and animations by giving processing specific clear commands before running the coat, and you then watch the results. But you were not able to influence the sketch in any way anymore while it was running. So let's change this and give you more power over what's happening on the screen. One tool that can be used to influence the output in the display window is a tool that you're using all the time, the mouse and what is need about the mouse, it said. It gives you two different ways of interacting with the sketch. A via the Most movement and B Liar, the so called most events. Let's have a quick look at the reference. Under input, you can see a whole bunch off mouse related functions. The 1st 8 are most events won, the last four out related to most movements. We'll start with mouse movements, so click on most extra Rita description. The system variable. Most ex always contains the current horizontal coordinate off the mouse, and although you can probably already guess what the description off mouse. Why will say, Well, just confirm this by clicking on mouth by under related and yes, indeed, the system variable amounts. Why always contains the current vertical coordinate off the mouse? So most X and most yr system variables Just like with and height, which have already been using in earlier sketches, they are in need an easy way to refer to the current mouse position in the sketch. Okay, close the browser window and switch back to your editor. So what you will be creating this time around It's your own personal small drawing program . Let's start by typing our now familiar to functions. Avoid set up open parenthesis. Closing perent is's open. Curly braces closing curly braces and avoid draw open. Prentice's closing parenthesis is open. Curly braces closing curly braces. Then let's define what we want. In this case, I think that the display when though our drawing both should start as a white square off 800 pixels. So let's add the following to this set up function. Size 808 100. Background to 55. Done. As for our paintbrush, it should be an ellipse because why not? So let's use a generic Ellipse statement for now. And let's put it in the drawer function, since we want to draw more than just one ellipse Ellipse X. Why W. H with X and y being the coordinates off the Ellipse and with W and H being the width and the height off the lips? Good. So where do we want a lips to be drawn, then? Well, right where all Mosses and how do we do this by using the two need system variables that processing provides most X and most y. So let's replace X with mouse x and y With mouse y notices, they turn pink, just like system variables in processing do. As for W and H, we can use whatever we want. I would suggest using 40 pixels for both who have a nicely circle as a brush. Okay, so now I'll run the sketch and move the mouse over the display window. Need I like this so much? The first time I saw it, and I could still play around with it for Alice today, notice that the circus will be drawn very close to each other if you move the mouse very slowly and that they will be drawn further apart if you move the mouse rapidly. This is related to the frame rate. But we can in your that for now. Okay, So much for now in the next lecture will make our little drawing program even better. By adding Imo servant, see, was there. 13. Enhance your program with mouse events: okay, Before we can actually tackle most events, I have to introduce a new kind of variable. Remember that variables are these kind of boxes in which we can store certain kinds of values. In a previous lecture, I have already mentioned to such kinds of variables in Tages whole numbers and Floats numbers with the decimal point. Let's add a new kind of variable to the list. A Boolean. Yes, I know it looks funny and it sounds funny, but it is a really useful kind of variable because a boolean variable can only hold one off two values. True or false. So let's say we don't want our painting programme toe constantly paint when we move the mouse. We wanted to paint only when we tell it to How could we do this? Well, we would need a way to track whether or not we have click the left mouse button. And luckily for us, we can do this quite easily by creating a bowline variable and calling it painting, for example. So let's do that notice. It is that we have to create this variable even before the set up function, because we want to be able to reference it anywhere in our coat and not just inside of the drawer function. For example, by declaring it this way, the variable becomes what is called a global variable. Unlike the local variables that can only be accessed inside of the function that they have been created in the Float Variables exposition and why position from a previous lecture have been local variables because they have been created insight off the drawer function. Okay, so let's finally at bullion painting toe our coat and let's set it to false, since we don't want to sketch to immediately start rolling when we run it. And don't forget to semi colon at the end. Good. So now we have a way to track our most clicks about time we create a most events. Let's quickly check what the reference tells us about. Most Click. The most clicked function is called after Most Button has been pressed and then released. Okay, that doesn't sound too complicated. Notices that mouse click is a function similar to our set up and drove functions, so it has to be created in a similar way. Let's return to the editors and and at dysfunction, Rohit most clicked open parenthesis is closing parentheses. Open curly braces closing curly braces. Watch out to spell. Most clicked correctly. It starts with a lower case M, but Sin has an upper Casey in the middle. That's because of a programming convention, and it has to be spelled exactly like set or otherwise. It won't work. You will notice that it will turn blue if you have written it correctly, just like draw and set up good. So what do we want its function to do? Then? What should happen if we click the mouse? Well, since our Boolean variable painting starts out as false when we run the sketch, we wanted to switch to True when the mouth is clicked for the first time. So we wanted to switch from its current state, in this case, false to its opposite. In this case, true, it would be nice if we were able to write something like painting equals two minus painting . But that's not how Boolean variables work. In the case of Boolean Variables, we have to write painting equal sign exclamation point painting to make the values switch. That might seem weird, but that's the way it is and don't worry, you got used to it. So what we're telling processing here is whatever the current state of our painting variable turn it into its opposite. So if it's false Santoni to true and if it's true that attorney toe false, this might seem complicated right now, but once you see it in action, you'll understand it immediately. Therefore, simply at a print. Ln painting command to the most clicked event, a scene before the print Alan Command will output. It's result in the console the black rectangle beneath the editor, and the result in this case is the value off the painting variable. So run the sketch now, and while you move the mouse who also click it a couple of times, this will not yet change anything visually. But have a look at the concert. You should see their succession off to unfold. Statements. Now look at the last line in your council and click the mouse while it's inside of the discipline window. The last line should change to the opposite off the previous one. Okay, on to the final step for now, telling processing when it should be painting and when it should not be painting for this, we will use what is called an if statement. Let's therefore at a generic if statement toe our draw function. If open Prentice's Something closing perent is's open curly brackets, then do this closing curly brackets translated to our drawing apparatus results, too. If our painting variable equates to true than painting ellipse, otherwise do nothing, so let's start with the letter. Easier part Replace. Sen. Do this with your lips statement. As for something, since we want to know whether or not our painting variable currently equates to true, let's replace something with painting equates to true. Yes, you have to use to equal size here, since in this case we do not want to set painting to true, we simply want to check if painting is true and this happens to require to equal sites. Okay, run the coat. So at first nothing happens when you move your mouth says because we have told the painting variable to start with false Now click the most but the ones and move your mouth, your painting. No. Click your most again the ones and move it to some other place. No ellipses should be drawn right now, then click. Once again, you're back to painting mode. Play around with this a little bit. Great. I hope you like this as much as I did in the next and final lecture of this introductory course will see how to add some color to this. See, Was there? 14. Enhance your program with keystroke events: Okay, so now you know how to use the mouse to influence what happens on your screen. But that's not the only means of direction. Another one is your keyboard. So let's have a quick look at the reference again. There are a couple of different keystroke events, and the differences are quite subtle. I suggest we use key release for our sketch because it will be executed only exactly once. Unlike, for example, keep rest said, can be executed multiple times in a row. If you keep the key press down. As for key release, and it is a function just like our draw and most clicked functions, so it needs to be written in a similar way. First, the reference return to the editor and right following Floyd Key pressed open parenthesis, closing Prentice's open curly braces close in college braces notice against at the first letter off the functions. Name is lower case, while the first letter of the second word is capitalized that the name turned blue if he wrote it correctly. Okay, what could we instruct our drawing program to do? Then, when we click a key, we could, for example, make it repaint the whole screen using a different random background color. So at this background, random to 55 random to 55 run them to 55 and run the coat. Now press any key to get a different pic rat press Any key again. Good that works. But currently all the keys on your keyboard will now do the same thing. Change the background color that's not very efficient and actually a huge waste of possibilities. So let's link one specific key to changing the background. Like, for example, they beak. In order to do this, you'll use constructive already used in a previous lecture that if statement so start again with the generic version of it. If test send, do this isn't do this part is easy. We want the background to change. So move your random background statement into the statement. Okay, and when do we want background to change? Well, when the keys that has been pressed and released corresponds to the Beaky, so did tests and consists off key equals to lower case be or key equals to upper case Be remember that you need to use to equal signs if you want to check whether something is true or not. In this case, were thought. The key that has been pressed and released has been the lower case or the upper case. Be notice that you need to put apostrophes around. B says. That processing knows that you're referring to the B key. Otherwise, it things you're referring to. A non existent variable. Colby. The two vertical lines mean or like in check. If the key cell, lowercase or uppercase be let's try this now, then run the ConEd paid something and then type it be at some point. Boom. The screen gets filled with that color type B again, yet another color. Good. So that works now. It would be need to change the field color off your brush as well, maybe by typing F for Phil. So it another if statement to the key released event if key equals to lower case F or key equals to upper case F sen feel random to 55 random to 55 random to 55. Let's also set our painting variable toe falls, so it does not immediately start going in. The new color painting equals two false. Now run the sketch again type have to get a new feel color like somewhere to start painting . Type F again. Click to paint. Send, maybe click be to get a new canvas in a new color, but she's thesis colors can clash horribly, so in order to paint with colors that fit nicely, it would be great if you were able to see which feel color got selected before actually painting with it. So how could we do this? Well, we could, for example, create stripe along the top off the display window. With that color, try to figure out yourself how to create erecting and starting at the top left with the with off the whole window in the height of 20 picks is yes, indeed wrecked 00 with 20. So answer to your drawer function, Run the coat and play with it. Great, that works. And since this work so nicely, how about saving your artwork by typing the letter s well? In order to achieve this, you simply have to write something like the following. If key equals to lower case as or key equals toe Pakis s Sen Safe open princesses, quotation marks, image minus quotation marks plus frame count plus quotation marks The J Pack quotation marks closing parenthesis is and our beloved to me, Colin here we're using the system variable frame count checks that he turned pink. So our image file gets a different name each time we hit the s key, thus avoiding for the previous image to be ever written. Beware those that you need to safe your sketch first. If you want to be able to actually find your safety image somewhere, namely inside of the corresponding sketch folder my pain sketch in this case. Okay, Run the sketch paint with your mouth and used two different key events that we've created Be to create a new background in their random color. Have to generate a new random feel color for the brush and as to save your artwork. And if you want to late around, check on your saved images. Simply click on your documents folder sketches. My pain sketch. Okay, is that's it for now. You finish this introductory course, I hope you had fun. And don't forget to check out the recap in the next and final video