Processing+FAQ

If you have a question or concern about anything, post it here! No question is silly! All questions posted here will be considered and answered as it will not only help yourself, but others as well. Do not be shy! If you know the answer to a question, please answer it.toc

**Int and Float**
What the heck is the difference between an int and float? And while we're on the topic, what the heck are they?
 * Question: **

Well, both int and float are __variables__. __Variables__ are used to store information, so you can think of them as __containers__ with names of your choice.
 * Answer: **

We use different containers to hold different kinds of information.

char c = 'A'; Chars are used for storing typographic symbols, note the single quotes float f = 0.0; Floats are decimal numbers int i = 0; Ints are values between 2,147,483,647 and -2147483648 byte b = 0; Bytes are values between -128 and 128 String s = "abc123"; Strings are complex datatypes, which is its own class and has its own methods

Be careful when you declare your variables. Declaring inside a setup or a loop will only allow for its use within those functions, also known as "Local" scope. Declaring them outside of setup (like at the top of your code) allows the variable to be used anywhere in your code, also known as "Global" scope. If a global and local variable share the same name, the local variable will be used for the immediate calculation.

**Redraw Background** **Re**

**Redraw Background**
Why do we need to redraw the background when animating stuff?
 * Question: **

** Answer: ** You can think of your background as a sheet of paper. If you don't set the background every time, you'll be drawing on the same sheet of paper over and over. If you do set the background every time, it's like putting another sheet of paper over top so you can draw on a fresh sheet.

** Processing Images **
How can I put an image into my processing doc?
 * Question: **

** Answer: ** Images can be loaded and displayed to the screen at their actual size or any other size. code format="code" PImage a; // Declare variable "a" of type PImage

void setup { size(200, 200); // The file "jelly.jpg" must be in the data folder // of the current sketch to load successfully a = loadImage("jelly.jpg"); // Load the image into the program noLoop; // Makes draw only run once }

void draw { // Displays the image at its actual size at point (0,0) image(a, 0, 0); // Displays the image at point (100, 0) at half of its size image(a, 100, 0, a.width/2, a.height/2); } code
 * Answer #2: **

There's also a different way to upload an image.

[[image:Screen_Shot_2012-03-07_at_9.22.23_AM.png]]
IF you did want to post your image on open processing, simply add a URL of your image on the web! Because the PShape and loadimage contains an image from a folder, the web will no be able to trace it.

**Draw Rectangle**
Drawing rectangles is really awkward for me. Is there a different way to make it easier?
 * Question: **

** Answer: ** rectMode(CORNER); default the first two values will be the coordinates of the upper left corner, and the next two set the width and height rectMode(CORNERS); uses two sets of coordinates which are opposite corners rectMode(CENTER); first two numbers are the center coordinates, the next two are the width and height rectMode(RADIUS); draws like CENTER, but uses half the width and half the height for the third and fourth values

Depending on which you use, you can get different results when substituting variables in.

Believe it or not, the same can be applied to ellipseMode(MODE) where you replace MODE with any of the same modes as rect(MODE). The CORNER and CORNERS will draw the ellipse using the bounding box, while CENTER is actually the default setting.

Loops
When would I use a for loop and when would I use a while loop?
 * Question: **

You can achieve the same results with both a for and while loop, but given how they are written, each loop is better suited for different situations.
 * Answer: **

A for loop is used when you know the number of iterations the loop will have (ie you know the exact number to repeat).

//for loops are written like this (initial value of counter; continuation check; modification of counter for each iteration)// //for(int i; i < #; i++){// your code here }

A while loop is used when you do not know when the loop will stop. In some cases, you want the while loop to go on indefinitely.

//while loops are written like this (just a starting condition, modification of the counter exists within the scope of the loop)// //while(int i < #){// your code here i++; //change to the counter }

** Project 2B **
I don't know how to do Project 2B! HELP!?!?!?!?!
 * Question: **

** Answer: ** Well, don't fret. There's a wonderful tutorial for the first part over here! Check it out!

** Project 2D **
Examples of a Mouse Interaction with Open Processing

What is an example of mouse interaction in Open Processing?
 * Question: **

Well, lets start with a basic code. It's not that difficult. As a matter of fact, it's simply just like project 2C, except you are experimenting with a much different kind of code.
 * Answer: **

Let's try to achieve a gradient on screen when you move your mouse. Click here for an example.

**Clear Screen Effect**
How to give a 'clear screen' effect with a mouse click?
 * Question: **

A really easy and simple way to clear a screen on Processing is to repeat the background code when the mouse is clicked or released. Here is the code for it!
 * Answer: **

__Ex. Clears the screen when clicked. Background colour: White__

void mousePressed { background (255); }

__Ex 2. Clears the screen when the click is released. Background colour: Black__

void mouseReleased { background (0); }

__Ex. 3 Clears the screen when right-clicked. Background colour: White__

void mousePressed { if ( mouseButton == RIGHT ) { background (255); } }


 * Ex. 4 When mouse is clicked, entire animation starts from frame 1. **

void mouseClicked { setup; }

**Exporting PDF**
What is the code to export my sketch as a PDF file?
 * Question: **

There are many different types of codes used to export a sketch as a PDF. They can all be found here.
 * Answer: **

There are two main types of PDF exports: single file and multiple files. Single files means that only one file is created - either consisting of one frame or multiple frames. Multiple files means that more than one file is created during the export - consisting of one frame per file. Beware of using the multiple files code as it can create hundreds of PDF files.
 * Note: Your PDF file will appear in your sketch's folder.**

Here are two examples of how to export your sketch as a PDF: This code allows you to create a single PDF file by using the beginRecord and endRecord functions. This creates one single frame meaning it will only record one screenshot of your sketch. This is good if your sketch is not animated. code import processing.pdf.*;
 * Example 1:**
 * Replace "filename" with the name of your sketch name

void setup { size(400, 400); noLoop; beginRecord(PDF, "filename.pdf"); }

void draw { // Draw something good here line(0, 0, width/2, height);

endRecord; } code This code allows you to create a single PDF file of multiple frames. This means that everything is recorded while the sketch is running until you hit the "q" key to quit the sketch. This is good if your sketch is animated. The file will appear as if it is moving - however there are glitches in the PDF as it cannot smoothly record every action. code import processing.pdf.*;
 * Example 2:**
 * While the sketch is running, the PDF export is recording. Processing does not allow for a PDF export to become huge files, therefore, you may have to increase the size of PDF exports in the "Preferences" menu under the tab "Processing" and choose to increase maximum memory.
 * The "q" key will stop PDF recording and exit the running sketch.

void setup { size(400, 400); beginRecord(PDF, "everything.pdf"); }

void draw { // Be sure not to call background, otherwise your file // will just accumulate lots of mess, only to become invisible

// Draw something good here line(mouseX, mouseY, width/2, height/2); }

void keyPressed { if (key == 'q') { endRecord; exit; } } code
 * It would be good to try out which PDF export code to find the correct one for your sketch.**

** Collision Detection **
**Question:** How can we detect if two things run into each other?

Let’s have two things run into each other. For this example, I will use a rectangle and my mouse. The rectangle will not move. The code looks like this:
 * Answer: **

void setup{ size(200,200); rectMode(CORNERS); /*we'll draw rectangles using the corner coordinates*/ }

void draw{

background(255); /*redraw the background to animate properly*/

rect(50,50,150,150); /*the coordinates used are (50,50) and (150,150)*/

/*here's where it gets interesting we have to make sure it checks if the mouse is inside the box we need: IF mouseX is between 50 and 150, and mouseY is between 50 and 150 (within the box) we read: IF mouseX is greater than 50 AND less than 150 AND mouseY is greater than 50 AND less than 150*/

if(mouseX>50 && mouseX<150 && mouseY>50 && mouseY<150){ /*we can draw a circle! Feel free to change this action to try it out!*/ ellipse(100,100,100,100); } }

So how does this all work? Well, as long as your mouse coordinates remain inside the coordinates of the box, we draw a circle on top.

You can feel free to change any of this using variables or other conditions! What if you made the box move? Can you draw an ellipse that draws over the moving box?

** Debugging Conditionals **
**Question:** My IF statement is not working! How can I check where it's going wrong?

IF statements can be tricky to debug, especially if you've got multiple conditions, or even nested IFs**.**
 * Answer: **

Here's an easy way to debug...

Remember out old friend println? It can help us out a lot!

For example:

///*Let's say my code looks like this...*/// //if(x > 5){// //-something magical happens here// //}else{// //-something else happens instead if x is less than or equal to 5// //}//

So you're trying to figure out why the "something else" isn't happening?

///*Let's take this code again and add a couple things...*/// //if(x > 5){// //-something magical happens here// //println(x); /*This will print out x each time so we can see what it is!// //The reason it is not going to the other option is because x is ALWAYS bigger than 5!*/// //}else{// //-something else happens instead if x is less than or equal to 5// //println("SUCCESS"); /*added as a dummy, because if you see this then you've probably fixed the issue*/// //}//

So now that we've seen x repeatedly pop up as bigger than 5, we know what the issue is and can modify the rest of your code to compensate.

println; is a super useful tool for fixing bugs!

** Pause Button **
**Question:** Is there a way I can have the sketch stay still until I tell it to go?

There sure is! Let's take a look at some code... Do you remember what the draw function does? It loops over and over again, drawing and drawing to infinity and beyond. We can actually make that stop! In your setup, simply put a noLoop; function in.
 * Answer: **

Example:

void setup{ size(200,200); background(255); textFont(createFont("Arial",16));

noLoop; /*Look! Here it is!*/

fill(0); text("Click to Start!",width/2-50,height/4*3); }

This will ensure that your draw will not start immediately. What I've also done is put instructions on the screen by creating a new text telling the user to click to start it. Therefore, there should probably a mousePressed somewhere...

void mousePressed{

loop; /*This will set it to start looping draw;*/

}

You can use many applications of this! If you want to pause it by pressing a certain key, just include the noLoop in that section of code, then a loop again somewhere to toggle drawing again!

Here's a simple pause button using p...

boolean pause = true;

void keyPressed{

if(key=='p' && pause==true){

pause=false; loop;

}else if(key=='p' && pause==false){

pause=true; noLoop;

}

}