Introduction to Processing DSDN 142 Creative Coding
WHAT IS PROCESSING? Processing is, at its heart, a tool for drawing 2D and 3D graphics on a computer, as well as other media experiences like playing audio or using webcams. It allows a user to program these actions using the Processing Programming Language. The focus of these tutorials is to teach you the basics of both the Language and how to put it to use to create dynamic media experiences. When you download Processing from www.processing.org, you get enough tools to get it up and running, including an IDE, or Integrated Development Environment. This may sound quite daunting, but all it really means is that you get a text editor that runs the code you write for you. Let’s take a look at this environment now.
Processing makes programming much easier than if you were to use notepad and the command line to write your applications. This method (command line) requires extensive knowledge of computer file systems and command line directives (scary sounding stuff!). Processing packages all that into one nice package with a window to type code into, a play button, a debugging area, exporting buttons, tabs etc... EVERYTHING you need in a nice visual package. This is essentially what an IDE is.
Introduction to Processing DSDN 142 Creative Coding
Introduction to Processing DSDN 142 Creative Coding
THE REFERENCE LIBRARY The Processing Language comes with a lot of functionality built in, but it doesn’t use familiar concepts like buttons to get things done. You’ll need to refer to the Reference a lot while using it. It is an essential programming skill to be able to find answers for yourself. You may be used to being taught everything you’ll need in order to get by, but that’s simply not the case here. If you’re trying to find out how to do something, check the Reference first. If you can’t find it, someone out there’s probably had the same problem, so Google it! It is very unlikely that you’ll end up with a problem no one else has ever solved before.
You don't actually have to remember much at all, if you forget how something works (even those who have been programming for years constantly do) you can simply open up the reference to relearn in a matter of minutes.
Introduction to Processing DSDN 142 Creative Coding
PROGRAMMING – QUESTION ONE There are two key questions you need answered before you can get up and running with your code. Don’t worry, there’s no pop quiz! We’re giving you the answers. The first question is:
How do I tell the computer to do something? We do this with something called a Method. Methods are very, very important in Processing, so it’s essential you grasp this now before moving on. A method is exactly what it sounds like – a way to do something. You can make your own methods, but that’s something we’ll cover later. All of the methods you’ll need for now are built into Processing, and you’ll find them all laid out in the Reference mentioned before.
Note that some people call methods ‘methods’, and though the term is actually a misnomer, you can use it interchangeably with method without causing too much confusion.
Introduction to Processing DSDN 142 Creative Coding
PROGRAMMING – METHODS Methods have two important properties. The first is its name. There are a number of restrictions on the name of a method, but the most important is that it can’t include a space. If a name consists of more than one word, we use capitals to represent where the new word begins. Here are some examples: draw doSomething thisStyleOfCapitalizationIsCalledCamelCase Methods are Invoked in order to make the computer actually perform their actions. In order to invoke a method, you need to open and close parentheses (these round brackets here) after writing the name of the method. If the name of the method was ‘doSomething’ then to tell the computer to run that method, you would write: doSomething()
The other important property that a method can have is Parameters. These are extra bits of information that you give to the method when you call it. Imagine you have a method that draws something on the screen – it would be handy to be able to tell that method where to draw it! You can pass the values you want by putting them inside the open and close you used before. If you have more than one, you’ll need to put commas between. For example: doSomethingThisManyTimes(5) drawSomethingHere(12, 34)
Introduction to Processing DSDN 142 Creative Coding
PROGRAMMING – QUESTION TWO Methods can be a bit tricky, so we’ll move onto some proper examples as soon as possible. Before we can read code, though, we need to answer the second question:
What order does the computer do these in? The answer to this pretty obvious – whatever order you write them in. It works like a book, where the text is read from left to right, top to bottom. However, this isn’t freeform poetry, there are rules about where certain code is allowed to appear. Each method invocation that you write has to appear on its own Line. Each line is ended with the semicolon character, like so: doThis(); thenDoThis(); In order to make the code run, each line must be ended by a semicolon! It would be like leaving off all the full stops in a book – very difficult to read. The computer is lazy, and won’t even try to read what you’ve written if you don’t end your lines. Although they’re called lines, there’s no requirement that each one be one its own line. However, we strongly recommend that you do arrange the lines this way, as it makes it much easier to read.
Introduction to Processing DSDN 142 Creative Coding
SAVING AND EXPORTING Computers crash, and we’re not going to be sympathetic if one crashes on you and you haven’t saved. Get into the habit of pressing ctrl-s every time you stop typing. And every time you finish a chunk of work, save it as a new file. You should be experimenting, branching and breaking your code – having multiple save files for one project should encourage you to do this. This is the last warning you will get about this. Save, save and save again – get a Dropbox and back up your saves, whatever. There is no leniency if you lose your work because of computers crashing. Processing saves its code as a PDE file. The can only be opened by the editor, and will not run the application you have written. The PDE is the most important file, because it contains the code, and you can always rebuild the application from the code. To run your code outside of the editor, you’ll need to export it to a JAR file. You can double click these files and they’ll run your application like you’re used to. To export a JAR, click the Export button, shown on an earlier slide. When you submit, we need the PDE, the JAR, and any data files specific to your project (like sound files you’ll be using later on in the course).
Introduction to Processing DSDN 142 Creative Coding
WELCOME TO CODE As we’ve said, Processing is mostly a drawing application, so imagine you’re drawing on a piece of paper with this code. First of all, we need to tell Processing what kind of paper we want, as well as the colour and size of our pen. EXAMPLE: Take a black paper which is 150x150 pixels big. Use a grey pen which is eight pixels thick. size(150, 150); background(0); stroke(150); strokeWeight(8); Hopefully, with your newfound knowledge of how a computer reads code, you can understand what is going on here. If you want to know what each method does, go look in the Reference. It’s all in there (with examples).
Introduction to Processing DSDN 142 Creative Coding
COORDINATE SYSTEMS One more thing before we keep going. Coordinates are a way of representing position in relation to a Point of Origin. You may remember the X and Y axis from maths – the coordinate system in Processing is very similar. The point of origin in Processing is at the Top Left Corner of the screen. X coordinates are horizontal, and travel from left to right. Y coordinates are vertical, and travel top to bottom. Each increase in number represents one pixel. It’s important to understand this system, because it’s how you tell the computer where to draw things. Say you want to draw at 20 pixels from the left of the screen, and 50 down from the top, you would use the coordinates 20, 50 in that order. The X coordinate always comes first.
The fundamental principals are the same, just a few things change between regular coordinate systems and computer based ones.
Introduction to Processing DSDN 142 Creative Coding
DRAWING Alright, now we know how to say where we want something drawn, here’s how we say the rest of it:
EXAMPLE: Draw a line with our pen we defined earlier (grey and eight pixels thick). Also, draw it in the middle of the paper (which is 150x150 pixels big).
line(75, 0, 75, 150);
If you look up the `line` method in the Reference, you’ll see it takes four numbers – x1, y1, x2, and y2. Here we see these four numbers passed when the method is invoked.
With a bit of maths (primary school level, don’t freak out about it!) you should be able to work out why the numbers we’ve used are the right numbers.
Introduction to Processing DSDN 142 Creative Coding
Code, both parts together: size(150,150); background(0); stroke(150); strokeWeight(8); line(75,0,75,150); Try writing (we don’t recommend copy and paste) this into your Processing editor, and see if it gives you your paper and draws your line, like it has on the left.
Introduction to Processing DSDN 142 Creative Coding
NOW TRY IT FOR YOURSELF By using Processing tutorials and references: Draw a line from the top left of the screen to the right bottom of the screen, with a screen size of 100x100! The next slide of this presentation will give you the answer code. Please only proceed, if you have figured the code out by yourself.
Introduction to Processing DSDN 142 Creative Coding
Please only proceed if you figured out the answer
Introduction to Processing DSDN 142 Creative Coding
SOLUTION 1 size(100,100); line(0, 0, 100, 100);
Introduction to Processing DSDN 142 Creative Coding
PROBLEM 2 Draw a line crossing the last line from the bottom left to the top right. Also increase the stroke weight of the line!
Introduction to Processing DSDN 142 Creative Coding
Please only proceed if you figured out the answer
Introduction to Processing DSDN 142 Creative Coding
SOLUTION 2 size(100,100); strokeWeight(10); line(0, 0, 100, 100); line(0, 100, 100, 0);
Introduction to Processing DSDN 142 Creative Coding
PROBLEM 3 Draw a rectangle in the middle of the screen. The rectangle should be 60 wide and 60 high. Make the fill colour of the rectangle red. Don’t forget to check the reference – you’ll need more methods than we’ve covered so far!
Introduction to Processing DSDN 142 Creative Coding
SOLUTION 3 size(100,100); fill(255,0,0); rect(20,20,60,60);
Introduction to Processing DSDN 142 Creative Coding
PROBLEM 4 Make a “hole” in the shape of circle in the middle of the red rectangle
Introduction to Processing DSDN 142 Creative Coding
Please only proceed if you figured out the answer
Introduction to Processing DSDN 142 Creative Coding
SOLUTION 4 size(100,100); fill(255,0,0); rect(20,20,60,60); fill(200); ellipse(50,50,40,40);
Aside: is redRectangle() a good name for this code?
Introduction to Processing DSDN 142 Creative Coding
PROBLEM 5 Read about the noFill() method. Read about the bezier() method. Make a curved line using the bezier() method. Use the noFill() method to prevent the curve from being filled in! Use the smooth() method to make the smile look less pixelited (put it in setup() and also use noLoop() )
Introduction to Processing DSDN 142 Creative Coding
Please only proceed if you figured out the answer
Introduction to Processing DSDN 142 Creative Coding
SOLUTION 5 smooth(); size(100,100); noFill(); bezier(0,50,25,100,75,100,100,50);
Introduction to Processing DSDN 142 Creative Coding
NOW TRY IT YOURSELF By using Processing tutorials and references: Draw a smiley like the one shown in the middle of a black window, window size is 400 x 400 pixels! There is no answer given for this one! Get creative.