Header-Processing_1.jpg

Getting Started


Learn some of the basic functions of Processing, and how to implement them properly.
// Change the size of the drawing
size(x, y);
 
// Draw a point
point(x, y);
 
// Draw a line from (x1,y1) to (x2, y2)
line(x1, y1, x2, y2);
 
// Draw an ellipse.
//(To draw a circle, use this function and make the width and height equal.)
ellipse(x, y, width, height);
 
// Rectangle
rect(x, y, width, height);
 
// Triangle
triangle(x1, y1, x2, y2, x3, y3);
 
// Draw a backgrond colour (RGB values)
background(255, 30, 17);
 
// Only entering one colour value will set that as the colour for all three values.
// Draw a black background
background(0);
 
// To add fill and stroke attributes to an object, enter the attributes FIRST followed by the drawing command.
fill(255, 30, 17);
strokeWeight(2);
rect(3, 3, 20, 20);
 
// Fills with transparency: a fourth parameter in the fill function determines the opacity of the fill (called 'alpha')
fill (255, 30, 17, 255)   // 255 means 100% opacity
fill (255, 30, 17, 191)   // 191 means 75% opacity
fill (255, 30, 17, 127)   // 127 means 55% opacity
fill (255, 30, 17, 63)   // 63 means 25% opacity
 
// Yields any random value in the specified range
random();
 
// To use the random(); function in fills, try this:
int r = random(255);
int g = random(255);
int b = random(255);
int a = random(255);
fill (r, g, b, a);
// To set a range of random hues, for example, for red, include two parameters
// In this case, we are limiting the hues that will be outputed to values from 100-150
int r = random(100,150);
 
// How to change the value of a variable whose value has already been declared earlier in the program
x = x + 1
// Here is shorter way to write that calculation
x += 1
// The same applies to any mathematical operation
x -= 1
x *= 2
x /= 4
 
 




Useful Functions

// Takes the stroke off of an object
noStroke();
 
// Takes the fill out of an object
noFill();
 
// Save your image file into the designated sketch folder.
// To have the png file created, you must first run the program and preview the output.
save("file-name.png");
 
// Anti-alias your object (no-jargon: make it smooth)
smooth();

Saving your files


A neat trick to save the image each time you open the program to a different filename:

save ("filename"+month()+day()+hour()+minute()+second()+".png");

this will save your file every time you run the code. They may not be in chronological order however.

Alternatively, this will save your images in chronological order:

save("filename" + nf(month(), 2) + nf(day(), 2) + nf(minute(), 2) + nf(second(), 2) + ".png");

Saving Versions

This code is still being developed, see discussion here.

If you are already working with object-oriented programming, this is another solution for saving versions of your files. It will create files of the form "filename1.png", "filename2.png", etc, in your project directory. In order to get it working, you must first create a text file called position.txt and write the number 1 inside it.

// place this at the end of your code:
 
//===================================
// AUTO INCREMENT SCRIPT
// to use: make a text file 'position.txt' in the folder with
// '1' inside it (ONE, not L). thats it!
//===================================
String[] lines = loadStrings("position.txt");
save("image" + lines[0] + ".png");
lines[0] = nf(int(lines[0]) + 1, 3);
saveStrings("position.txt", lines);
//===================================

Changing the "Mode" of a shape

By changing the mode of a shape, you can change what the attributes of that shape mean. For instance:

// In this set of attributes, the values are (top left x, top left y, width, height)
rect (150,150,55,90);
 
// By changing the mode to "center" it alters the values
 
rectMode (CENTER);
rect (150,150,55,90);
 
// The values are now (center x, center y, width, height) drawing the rectangle from the center point.
You can also alter the mode to "Corners" changes the attributes to define the top left and bottom right corners:

// In this set, the values represent (top left x, top left y, bottom right x, bottom right y)
 
rectMode (CORNERS);
rect (50,50,75,75);
This can be applied to any basic shape including ellipses.



The Importance of Clean Coding


Using clean code is a somewhat foreign, yet very important practice that is vital for all designers to get into the habit of when using programs like Processing, Adobe Flash, HTML and CSS — this programming concept can sometimes be difficult for a creative person like a designer to get their hands on. Here's a few reasons why you should pay attention to the cleanliness of your code:

  • Future-proofing your code.
  • Sharing your code with others.
  • Better for your grades.
  • Feels good.

Future-proofing your code

Code is stupidly complicated. We all know that. Most coding projects require more than a day or one sitting to complete, and one of the hardest parts is picking up your thought processes from the night before, especially when your code is all over the place. Things become easy to lose, errors start popping up, and eventually the code becomes so over-complicated that you have to start over because you can't deal with it any longer.

This is especially important in long-term projects, like websites. I once designed a website for a client who, a year after I was finished, asked me to make some changes. I drudgingly opened up the source code and spent three hours fixing my own mistakes where, if I'd done it right in the first place, it would have ideally taken me 15 minutes. (These things happen in the real world. Start preparing for it now.)

Sharing your code with others

If you think trying to figure out your own thought processes from yesterday is difficult, try doing it with someone else's code. It sucks. Then they have to spend the 3 hours searching for the one line of code that should have been in a different place. (It could happen to you.)

Better for your grades

Picking up from the last point, if your professor can't understand your source code, you're going to lose marks. Plus, it looks bad. Plain and simple.

Quick-And-Easy Coding Practises

Here are some of the most basic and easy ways to make your code more readable and more efficient:

Organize by content/function

It is good practice to keep things need and organized in your code. A good way to do this is by grouping your code into sections. When your code gets long, it might even be useful to have a 'table of contents' or something similar. Lets see an example:
//=======================================
// SETUP
//=======================================
/ canvas attributes: size, colour
size (250, 250);
background (138, 78, 108);
noFill();// no fill to shapes
smooth();//smooth shape
 
//=======================================
// begin drawing first group of shapes
//=======================================
 
//now some attributes of the drawings
stroke (70, 20, 20);// stroke colour
strokeWeight (4);
 
some code here
 
//=======================================
// second group of shapes
//=======================================
 
// different colours etc
stroke (255, 221, 199);// stroke colour
strokeWeight (1);
 
some code here too...
 
 
//=======================================
 
//save file
save("test.png");
 
Now isn't that much cleaner? Organize your code.

Comment EVERYTHING

This is the single most important tool in your coding database. It doesn't have to be elaborate, but use your common sense. Write comments so that your code can be more easily understood later. It will come in handy especially once your files become in excess of 400 lines.

size(250, 250);
 
// Draw a bright red, 100px circle in the centre of the page.
 
fill(255, 0, 0);
noStroke();
smooth();
ellipse(width/2, height/2, 100, 100);

Simple as that. Comment, code, comment, code. If at any time something might be difficult to understand just by looking at your code, comment it. It'll make your life easier later.

// This is a single-line comment.
 
/*
This is a block
of commented space
that you can write anything in.
*/

Use space

As designers, we all know about space and visual hierarchy. Use them to your advantage in your code. Here are two examples:

void setup() { size(400, 400); stroke(255); } void draw() { line(150, 25, mouseX, mouseY); } void mousePressed()
{ background(192, 64, 0); }

     void setup() {
       size(400, 400);
       stroke(255);
     }
 
     void draw() {
       line(150, 25, mouseX, mouseY);
     }
 
     void mousePressed() {
       background(192, 64, 0);
     }

Both of these code blocks to the exact same thing. Use line-breaks, spaces and tabs to your advantage here, and design the design of your code itself.

Consistency

If you develop a specific format for your code, use it in every project, in every line. A quick example —

size(250,250);
 
size (250, 250);
 
size    (250,250);

Feel free to use any of these three formats. If you do, however, stick with the same format throughout your entire project. It'll make it more readable, which, as you've probably figured out, is our final goal.

Tools > Autoformat is a great way to get started on this, although don't be afraid to make it look good yourself!



Intermediate-Level Functions


Loops

Using loops can make your life a lot easier.
for (starting condition; ending condition; increment)
{
  // Do stuff here
}

The starting condition is a variable. For example, int i=0 would set the variable i to 0 to start with.
The ending condition is what is required to make the loop stop. For example, i < 10 would check to see if the variable i is 10, and if it is, it would stop the loop.
The increment is what happens to the variable i after the loop is completed. i = i + 1 (or i++ for short) would add one to the variable i after the loop was completed every time.

for (int i=0; i < 10; i++)
{
  size(250, 250);
 
  // Create a vertical row of squares
  noStroke();
  fill(0);
  rect(10, i*15, 10, 10);
}

In this case, the loop will run through 10 times. Then, inside the loop, we can use the variable i to our advantage — in this case, we've created a vertical row of ten squares spaced 15px apart without actually having to paste the pixel coordinates of each into the code. Try it yourself — paste this code into Processing and fiddle around with it. (Fiddling around aimlessly is the best way to learn things.)

Random

Random() is a function that is in Processing to easily give you a random number. Where would you use this? Imagine you want to plot 100 dots in random positions in your program. Normally, you would have to give various positions manually -- and 100 times. A loop won't work on its own - since then you can only go up by even increments. (new dot is 5px left of old one, and so on..)
This is where the random() comes in. All you have to do is make a variable, and assign it random():
int variable_name = int(random(0,250));
point (50, variable_name);
What this will do is plot a point at x = 50 and a random y value. furthermore, the y will always be greater than 0 and less than 250. (take a look at the numbers inside of random's brackets.



See Also


http://processing.org/learning/basics/ — Beginners tutorials on Processing
http://processing.org/reference/index.html — Processing function reference
http://www.openprocessing.org/ — Examples of Processing work
http://web.njit.edu/~kevin/rgb.txt.html — RGB Colour References
http://www.learningprocessing.com/exercises/ — Practice exercises for Processing