Processing Tips & Tricks: Useful Snippets

Here are some useful snippets of code that you might often need. You can find some more from here:

1. Fade Out (Feedback)

void setup(){
  size(500,500);
  background(255);
}

void draw(){
  noStroke();
  fill(255,25); //the second value here controls how quickly the image fades
  rect(0,0,width,height);
  
  // draw something
  fill(0,200);
  ellipse(mouseX,mouseY,30,30);
}

2. The settings() Function for Using Variables as the Window Size

If you have to use variables to define the size of the window, you can use the settings() function. It also has other uses. See more from the reference.

int w = 600;
int h = 600;

void settings() {
  size(w, h);
  smooth();
}

void setup(){
  background(255);
}

void draw(){
  fill(0);
  textSize(32);
  text("The window size of this sketch\nis set with variables", 10,100);
}

3. Check if the Mouse is Over a Rectangle

int btnX = 100;
int btnY = 100;
int btnW = 50;
int btnH = 50;

void setup() {
  size(500,500);
  background(80);
}

void draw(){
  background(80);
  // check if mouse is over the button
  if( hitTestRectangle(btnX, btnY, btnW, btnH) ){
    fill(255,0,0);
  }else{
    fill(255,255,255);
  }
  //  draw button
  rect(btnX,btnY,btnW,btnH);
}

boolean hitTestRectangle(int x, int y, int w, int h){
  if(mouseX >= x && mouseX <= x+w && mouseY >= y && mouseY <= y+h){
    return true;
  }else{
    return false;
  }
}

4. Check if the Mouse is Over a Circle

int btnX = 100;
int btnY = 100;
int btnS = 50; //diameter of the circle

void setup() {
  size(500,500);
  background(80);
}

void draw(){
  background(80);
  // check if mouse is over the button
  if( hitTestCircle(btnX, btnY, btnS) ){
    fill(255,0,0);
  }else{
    fill(255,255,255);
  }
  //  draw button
  ellipse(btnX,btnY,btnS,btnS);
}

boolean hitTestCircle(int x, int y, int s){
  if(dist(mouseX, mouseY, x, y) <= s/2 ){
    return true;
  }else{
    return false;
  }
}

5. How to Move Things in a Circle Using sin() and cos()

float cX; // center x for the circle
float cY; // center y for the circle
float x;
float y;
float s=100;
float t=0;

void setup(){
  size(500,500);
  cX = width/2;
  cY = height/2;
}

void draw(){
  background(80);
  x = cX + sin(t) * s;
  y = cY + cos(t) * s;
  t = t + 0.05;
  
  ellipse(x,y,20,20);
  
  if(mousePressed){
    line(0,y,width,y);
    text("y:"+y,10,y);
    line(x,0,x,height);
    text("x:"+x,x,10);
  }
  
  text("click the mouse",10,50);
}

6. Different Screens/Levels/Stages

int level = 0;

void setup(){
  size(600,600);
  background(255);
  textAlign(CENTER);
  fill(0);
}

void draw(){
  background(255);
  switch (level){
    case 0:
      menuScreen();
      break;
    case 1:
      levelOne();
      break;
    case 2:
      levelTwo();
      break;
    case 3:
      gameOver();
      break;
  }
}

void menuScreen(){
  background(130,60,80);
  textSize(50);
  fill(0);
  text("This is the start screen", 300,300);
}

void levelOne(){
  background(40,160,80);
  textSize(50);
  fill(0);
  text("This is the 1st level", 300,300);
}

void levelTwo(){
  background(40,60,180);
  textSize(50);
  fill(0);
  text("This is the 2nd level", 300,300);
}

void gameOver(){
  background(0);
  textSize(50);
  fill(255);
  text("Game Over", 300,300);
}

void mousePressed(){
  level++;
  if(level >= 4){
    level = 0;
  }
}

7. A Simple Toggle

boolean toggle = false;

void setup(){
  size(600,600);
  background(100);
}
void draw(){
  background(100);
  textSize(32);
	text("Click on the window to toggle the value",20,60);
  text(int(toggle),width/2,height/2);
}

void mousePressed(){
  toggle = !toggle;
}