// This Processing program creates a little animation machine
// with controls that you can customize.
// First, we need to “declare” a few variables of 3 different types.
int bDia, cDia, mvX, mvY;
float cX, cY, clickX, clickY;
color cCol;

void setup() {
size(201, 400); // Create a program window 201 pixels wide and 400 pixels high.
stroke(127); // Set the color for the outlines of our shapes.
bDia = 20; // Set the diameter of our circular control buttons.
cDia = 20; // Set the diameter of the “action circle” we will control.
cX = 100; // Set the starting horizontal position of the action circle.
cY = 300; // Set the starting vertical position of the action circle.
cCol = color(255, 255, 255); // Set the starting color of the action circle.
mvX = 0; // Set the horizontal movement of the action circle.
mvY = 0; // Set the vertical movement of the action circle.
}

void draw() {
// These first 4 lines let you use math coordinates instead of computer coordinates.
scale(1, -1);
translate(0, -height);
clickX = mouseX;
clickY = height – mouseY;

fill(255); // Color the screen white.
rect(0, 200, 200, 200); // Draw the square “action screen”.

ellipse(100, 60, bDia, bDia); // Draw the top button.
ellipse(100, 100, bDia, bDia); // Draw the middle button.
ellipse(100, 140, bDia, bDia); // Draw the bottom button.
ellipse(60, 100, bDia, bDia); // Draw the left button.
ellipse(140, 100, bDia, bDia); // Draw the right button.

fill(cCol); // Set the color for the action circle.
cX = cX + mvX; // Set the horizontal position of the action circle.
cY = cY + mvY; // Set the vertical position of the action circle.

// The 2 “print lines” below will display at the bottom of this window.
// They will let us check the coordinates of the program window.
println(“X =”, clickX);
println(“Y =”, clickY);

ellipse(cX, cY, cDia, cDia); // Draw the action circle.
}

void mousePressed() {
//Check if the user clicked the middle button.
if (dist(clickX, clickY, 100, 100) < bDia/2) {
cCol = color(255, 0, 0);
// If so, turn the action circle red.
}

//Check if the user clicked the top button.
else if (dist(clickX, clickY, 100, 140) < bDia/2) {
mvY = 1;
//If so, make the action circle move upwards.
}

//Check if the user clicked the right button.
else if (dist(clickX, clickY, 140, 100) < bDia/2) {
mvX = 1;
//If so, make the action circle move right
}

//Check if the user clicked the bottom button.
else if (dist(clickX, clickY, 60, 100) > bDia/2) {
mvY = -1;
//If so, make the action circle move downwards.
}

//Check if the user clicked the left button.
else if (dist(clickX, clickY, 100, 60) > bDia/2) {
mvX = -1;
//If so, make the action circle move left.
}

}