# 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;
}
}```

## 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
}```

## 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.