Hey! Processing!

A simple primer, Prepared by Zoe F
General Reference found HERE

Creating basic geometry

• Create a new canvas of size 600px by 200 px
• Create an ellipse. Make it appear at x=50, y=100, and make the width 25 and the height both 25. The final function will look like this: ellipse(50, 100, 25, 25);
• Create another ellipse. This one will be an oval. Make it apear at x = 100, y = 100, and make the width 25 and the height 10.
• Create a line. It should start at x=150, y=100, and it should end at x=200, y=120
• Create a Rectangle using the rect() function. The top left corner should start at x=250, y= 50. It should be 100px wide and 75px tall
• In the processing reference page, choose a shape you havn't used yet from the list of "2D primitive" shapes, and draw it to the right of the rectangle. You can make a triangle, arc, point, or quad.
  

References:

size()
ellipse()
line()
rect()

triangle()
arc()
point()
quad()

Making it look pretty

• Add a smooth() function call after you create your canvas, but before your very first ellipse. It will look like this: smooth();
• Use noStroke() to remove the outline on both ellipses.
• Use strokeWeight() to make the outline on the of the line you made 3px wide. Then use it again to make the outline of the rectangle 10px
• Use stroke() to change the color of all the outlines to an orange color. Then use stroke() again to change the outline of just the the last shape you made to a blue
• Use fill() to change the color of all the shapes to a the simple gray color of 100. The command will look like this: fill(100). Note that the line won't change color because it has no width. Its just a line.
• Use noFill() to remove the color from just the rectangle . That means you'll need to call fill() again after you have drawn the rectangle, otherwise every shape afterwords will have no fill too.

smooth()
noStroke()
stokeWeight()
stroke()
fill()
noFill()

Giving it structure

• Place the size() function inside a setup code block. the completed code block will look like this:
  
  void setup() {
      size (500, 200);
  }
• Place the rest of the code you've made so far inside of a draw() code block. the completed code block will look like this:void
  
  void draw() {
     The rest of your code
  }
• Use the background() function to make the entire background of the canvas a nice light yellow color. Place the background function just after the size function in setup. Make sure it's working correctly.
• Now, change that background color so that every time you run the program it will be a different random color. Use this code:
  
  background(int(random(0, 255),int(random(0, 255),int(random(0, 255)));
  
  This will generate three new random numbers to fill our RGB values every time you run the program. Try running it a couple times to make sure it's working right.
  
• Now, set a second background function at the beginning of your draw loop. Make that background color a grey color, and test it. The canvas is grey because each time through the loop it's being colored grey, even though it was originally yellow.
• Now, set the background color in the draw loop to random. Use the same code you used before:
  
  background(int(random(0, 255),int(random(0, 255),int(random(0, 255)));
  
  Because the program is choosing a new random color every time through, we have a crazy psychadelic experience!
• Qick, turn off the background command in the draw loop before it gives us a seizure. Comment that line out by putting "//" in front of it. Test it again to make sure it's gone.

setup()
draw()

background()
random()
println()
int()

System Variables

• Create a new ellipse inside the draw loop, at the very end of the loop. it should be 50px wide and 50px tall, and it should be located right in the center of the canvas. You can find the center of the canvas without doing any math: because of the built in system variables processing does it for you! Use this code:
  
  ellipse(width/2, height/2, 50, 50);
• Create another ellipes, but this time we're going to set the X and Y location to the mouse's location. Use this code:
  
  ellipse(mouseX, mouseY, 50, 50);
• Oh no, it looks like we're drawing all over the background! That's because our background is only being set in setup, since we commented out the background call in our draw loop. Try replacing the commented out background function call inside of draw with this new set of instructions:
  
  noStroke();
  fill(255, 5);
  rect(0,0,width, height);
  
  Can you guess why we're getting the "Comet" effect here?
• We're tired of guessing at the X and Y coordinates for our shapes. at the very end of our code, inside our Draw code block, insert this:
  
  println("X-coordinate is " + mouseX + " and my Y coordinate is " + mouseY);
  
  See what happens in the black information debugging area below your code when you move your mouse around in the canvas area.
  

User-defined variables

• Let's define a user variable. Well define it before our setup block. Variables don't have to be in either setup or draw. Add this just before we open our setup block:
  
  int zoeRocks = 0;
• Now, let's use our variable! Let's take our first ellipse and make it grow like a balloon. Replace the line that said:
  
  ellipse(50, 100, 25, 25); with ellipse(50, 100, zoeRocks, zoeRocks);
  zoeRocks=zoeRocks+1;
  
  That second line means that every time we go through the draw loop, Processing will add 1 to the variable we have created. We can access this inside of our draw block because we made this variable "global" by not putting it inside any particular code block

Exporting an applet

• In processing, go to File and then select Export.
• In the folder that gets created, open the file called index. Thsi is just a simple html page with your processing applet embedded. You can now modify this page just like any othe html page. if you upload this folder to a server the world will be able to see your creation.