Guide For Processing PDE – Tutorial 2

Today, let us have a look at more functions and code examples. Before Tutorial 2 on Processing, please have a look at the first tutorial : Tutorial 1

Color Me

This code will color the “Hi Sau” text blue as soon as you roll over your mouse in that area. Let us have a look :

int x;
int y;
int z;

void setup()
{
  size(600,340);
  smooth();
  background(204,180,150);
  noStroke();
}

void draw()
{
     rect(30,20,4,60); 
     rect(30,50,50,4); // Print "H"
     rect(80,20,4,60);  
         
     rect(120,20,4,60); // Prints "I"
  
     rect(30,120,50,4); 
     rect(30,120,4,30);
     rect(30,150,50,4); // Prints "S"
     rect(80,150,4,30);
     rect(80,180,-50,-4);        
  
     rect(120,120,4,60); 
     rect(120,120,30,4);
     rect(150,120,4,60); //  Prints "A"
     rect(120,150,30,4);            
  
     rect(180,120,4,60); 
     rect(180,180,40,4); //  Print "U"
     rect(220,120,4,60); 
          
     alpha();
     fill(x,y,z);
}

void alpha()
{
  if(mouseX > 20 && mouseX <180 || mouseY > 20 && mouseY < 180)
   {
     x = 100;
     y = 180;
     z = 180;
   }
  else
   {
     x = 0;
     y = 0;
     z = 0;
   }
}

Output

Mouse Not Over Text

Mouse Over Text

Detailed Explanation

• background( ) : This function sets the color used for background of the processing window. Since I have used this function inside setup( ), hence it cannot be changed again. If you wish to change the background at the beginning of each frame, use it inside draw( ) function. The three parameters are for Red, Green and Blue respectively.

• noStroke( ) : Disables the Stroke or the outline.

• fill( ) : Sets the color used to fill shapes. Similar to background( ) , the three parameters are for Red, Green and Blue respectively.

• mouseX : The current horizontal coordinate of the mouse. It will track the position when mouse is over the current window. Default value of mouseX is 0 and when the  mouse moves away from the window, mouseX will report its recent position.
  

• mouseY : The current vertical coordinate of the mouse. Again, the default value of mouseY is 0 and when the mouse moves away from the window, mouseY will report its recent position.

A Pink Dot That Follow You

void setup()
{
  size(480,120);
  fill(200,150,150);
  smooth();
  noStroke();
}

void draw()
{
  background(220);
  ellipse(mouseX, mouseY, 15, 15); // X and Y coordinates updated with mouseX and mouseY
  println(mousex,mouseY); // Print the coordinates
}

Output

Move a Red Circle With Arrow Keys

int x = 200;

void setup()
 {
   size(480,120);
   fill(255,0,0);
 }

void draw()
{
   if(keyPressed && ( key == CODED ) ) // Check whether the key is coded ( Arrow keys , Shift , etc )
    {
      if ( keyCode == LEFT )
       {
         x--;
       }
      if( keyCode == RIGHT )
       {
         x++;
       }
    }
  ellipse(x,50,80,80);
}

Output

Press the Left and Right arrow keys to move the dot.

Detailed Explanation

• keyPressed : Check if the key is pressed and the key is stored in the ‘key’ variable. It is true if the key is pressed and false if not.

• key : Contains the value of the most recent key pressed.

• keyCode : It is used to detect special keys such as arrow keys , Alt , Control , Shift.

Final Comments

We’ll experiment with more Processing functions in the next tutorial. Meanwhile, explore as much as you can on the IDE . Thank you for visiting the website. In case of any doubt, feel free to ask.

Saumitra Kapoor