Here is the other code I am working on to get these arrows working:

I took your second code and made it work

the arrow that's clicked is detected by the color und the mouse (lines 74 till end)

the class you had you didn't use : I use it now as counter. Line 5, 71, 79, 84

scr not needed

Greetings, Chrisir

1. Counter cntr;
2. // int scr = 0;
3. void setup() {
4.   size(800, 800);
5.   cntr=new Counter();
6. }
7. // ====================================================
8. class Counter {
9.   int value=0;
10.   Counter() {
11.   } 
12.   void display() {
13.     stroke(255);                    //a.t
14.     //rect(30, 20, 55, 55);              //a.t
15.     textAlign(CENTER);              // Aligns text centred in x-axis.
16.     textSize(20);                   // Alters size of numbers.
17.     fill(0, 255, 0);
18.     fill(255);
19.     text (""+begin(value), 240, 220);       // Moves location of number on-screen.
20.   }
21.   //
22.   String begin(int a) {
23.     String Buffer;
24.     Buffer=nf(a, 1);
25.     return(Buffer);
26.   }
27. } // class
28. // =========================================
29. void draw() {
30.   background (0);
31.   //  if (mousePressed && (mouseButton == LEFT)) {
32.   //    fill(255);
33.   //  }
34.   //  else if (mousePressed && (mouseButton == RIGHT)) {
35.   //    fill(255);
36.   //  }
37.   //  else {
38.   //    fill(0, 255, 0);
39.   //  }
40.   fill(0, 255, 0);
41.   beginShape();                           // Shape of arrow begin.
42.   vertex(60, 150);                         // Point #1
43.   vertex(50, 150);                         // Point #2
44.   vertex(85, 110);                         // Point #3
45.   vertex(120, 150);                        // Point #4
46.   vertex(110, 150);                        // Point #5
47.   vertex(110, 190);                        // Point #6
48.   vertex(60, 190);                         // Point #7
49.   vertex(60, 150);                         // Point #1
50.   endShape();                             // Shape of arrow end.
51.   //
52.   line(40, 220, 130, 220);                   // Arrow divider line.
53.   //
54.   fill(255, 0, 0);                          // Setting the interior of the arrow to red.
55.   pushMatrix();                           // Used for calling up translate and rotate.
56.   translate(95, 290);                      // Amount of space translatted up/down.
57.   translate(75, 150);                      // Centre of previous arrow.
58.   rotate(PI);                             // Rotate arrow 180 degrees.
59.   beginShape();                           // Shape of arrow begin.
60.   vertex(60, 150);                         // Point #1
61.   vertex(50, 150);                         // Point #2
62.   vertex(85, 110);                         // Point #3
63.   vertex(120, 150);                        // Point #4
64.   vertex(110, 150);                        // Point #5
65.   vertex(110, 190);                        // Point #6
66.   vertex(60, 190);                         // Point #7
67.   vertex(60, 150);                         // Point #1
68.   endShape();                             // Shape of arrow end.
69.   popMatrix();                            // Used for closing the translate/rotate command.
70.   //
71.   cntr.display();
72. }
73. //
74. void mousePressed() {
75.   // If mouse click occurs.
76.   println (get(mouseX, mouseY) );
77.   if (get(mouseX, mouseY) == color (255, 0, 0)  ) {
78.     println("red");
79.     cntr.value--;                             // decrement number on-screen by one.
80.     delay(200);                        // Delay of 200 milliseconds between allowable clicks.
81.   }
82.   else if (get(mouseX, mouseY) == color (0, 255, 0) ) {
83.     println("green");
84.     cntr.value++;                             // Increment number on-screen by one.
85.     delay(200);                        // Delay of 200 milliseconds between allowable clicks.
86.   }
87. }

Ok great, that worked out fine. Thank-you very much!!!

since you have different arrows and my appoach is based on the color, they need to have different colors.

Or you have to check if they are within the arrow (roughly) and the get-color is not the background col.

Of course you need one counter per arrow pair:
 

1. Counter cntrPair1;                           // Declaring counter to be denoted as cntr.
2. Counter cntrPair2;                           // Declaring counter to be denoted as cntr.
3. Counter cntrPair3;                           // Declaring counter to be denoted as cntr.

1. cntrPair1.display();
2. cntrPair2.display();
3. cntrPair3.display();

etc.

Thank-you very much!

I got that working on the single arrow. Then I tried putting it into my entire code but I keep getting errors.


I changed the color of every arrow to 255, 254, 253 etc to keep a similar color but to adhere to the code you had originally.

What could be the problem here? I split it up as its too long.


PFont f;                                // Declaring an object.
Counter cntrPair1;                      // Declaring counter to be denoted as cntrPair1.
Counter cntrPair2;                      // Declaring counter to be denoted as cntrPair2.
Counter cntrPair3;                      // Declaring counter to be denoted as cntrPair3.
Counter cntrPair4;                      // Declaring counter to be denoted as cntrPair4.
Counter cntrPair5;                      // Declaring counter to be denoted as cntrPair5.

void setup(){
 
size (900,550);                         // Setting up tablet screen size.
background(150);                        // Setting the background to grey.
stroke(0);                              // Setting the outline to black.
f = createFont ("Arial",16,false);      // Referencing the font name and function; Arial, 16 pt., anti-aliasing off.
cntr=new Counter();

 class Counter {
  int value=0;
  Counter() {
}

void display() {
 
    stroke(255);                            // Creates outline on arrows.
    textAlign(CENTER);                      // Aligns text centred in x-axis.
    textSize(20);                           // Alters size of numbers.
    fill(255,0,0);                          // Alters color of numbers displayed.
    text (""+begin(value),85,380);          // Moves location of number on-screen.
  }
 
  String begin(int a) {
    String Buffer;
    Buffer=nf(a, 1);
    return(Buffer);
 
}                                        // Class.

void draw(){
 
// *Seperating Lines*

line(170,550,170,280);                  // Parallel Robot Y-Axis Line.
line(170,280,900,280);                  // Parallel Robot X-Axis Line.
line(450,550,450,280);                  // Forward/Reverse & Elevation Divider Line.
line(740,550,740,280);                  // Elevation Divider Line.

// *ROBOT HOME Button*

fill(0,0,255);                          // Sets the blue button color.
rectMode(CORNERS);                      // Initiates rectangle mode.
rect(40,450,120,530);                   // States corner locations of rectangle.

// *Linear X-Slide HOME Button*

fill(0,0,255);                          // Sets the blue button color.
rectMode(CORNERS);                      // Initiates rectangle mode.
rect(250,335,350,370);                  // States corner locations of rectangle.

// *Stepper Motor HOME Button*

fill(0,0,255);                          // Sets the blue button color.
rectMode(CORNERS);                      // Initiates rectangle mode.
rect(550,335,650,370);                  // States corner locations of rectangle.


// *PITCH plus/minus arrows*

fill(0,255,0);                          // Setting the interior of the arrow to green.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.

line(40,220,130,220);                   // Arrow divider line.

fill(255,0,0);                          // Setting the interior of the arrow to red.
pushMatrix();                           // Used for calling up translate and rotate.
translate(95,290);                      // Amount of space translatted up/down.
translate(75,150);                      // Centre of previous arrow.
rotate(PI);                             // Rotate arrow 180 degrees.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.
popMatrix();                            // Used for closing the translate/rotate command.
cntrPair1.display();                    // Displays the counter.


// *ELEVATION plus/minus arrows*

fill(254,0,0);                          // Setting the interior of the arrow to red.
pushMatrix();                           // Used for calling up translate and rotate.
translate(760,590);                     // Amount of space translatted up/down.
rotate(PI);                             // Rotate arrow 180 degrees.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.
popMatrix();                            // Used for closing the translate/rotate command.

line(600,395,600,485);                   // Arrow divider line.

fill(0,254,0);                          // Setting the interior of the arrow to green.
pushMatrix();                           // Used for calling up translate and rotate.
translate(440,290);                     // Amount of space translatted up/down.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.
popMatrix();                            // Used for closing the translate/rotate command.
cntrPair2.display();                    // Displays the counter.

// *YAW plus/minus arrows*

fill(253,0,0);                          // Setting the interior of the arrow to green.
pushMatrix();                           // Used for calling up translate and rotate.
translate(110,245);                     // Amount of space translatted up/down.
rotate(3*PI/2);                         // Rotate 270 degrees.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.
popMatrix();

line(330,120,330,210);                  // Arrow divider line.

fill(0,253,0);                          // Setting the interior of the arrow to red.
pushMatrix();                           // Used for calling up translate and rotate.
translate(550,75);                      // Amount of space translatted up/down.
rotate(PI/2);                           // Rotate arrow 180 degrees.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.
popMatrix();                            // Used for closing the translate/rotate command.
cntrPair3.display();                    // Displays the counter.

// *FORWARD/REVERSE plus/minus arrows*

fill(252,0,0);                          // Setting the interior of the arrow to green.
pushMatrix();                           // Used for calling up translate and rotate.
translate(80,520);                      // Amount of space translated up/down.
rotate(3*PI/2);                         // Rotate 270 degrees.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.
popMatrix();                            // Used for closing the translate/rotate command.

line(300,390,300,490);                  // Arrow divider line.

fill(0,252,0);                          // Setting the interior of the arrow to red.
pushMatrix();                           // Used for calling up translate and rotate.
translate(520,350);                     // Amount of space translatted up/down.
rotate(PI/2);                           // Rotate arrow 180 degrees.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.
popMatrix();                            // Used for closing the translate/rotate command.
cntrPair4.display();                    // Displays the counter.

// *ROLL plus/minus arrows*

fill(0,251,0);                          // Setting the interior of the arrow to green.
pushMatrix();                           // Used for calling up translate and rotate.
translate(500,15);                      // Amount of space translatted up/down.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.
popMatrix();                            // Used for closing the translate/rotate command.

line(650,120,650,210);                  // Arrow divider line.

fill(0,251,0);                          // Setting the interior of the arrow to green.
pushMatrix();                           // Used for calling up translate and rotate.
translate(630,15);                      // Amount of space translatted up/down.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.
popMatrix();                            // Used for closing the translate/rotate command.
cntrPair5.display();                    // Displays the counter.


                            

Thank-you very much!

I got that working on the single arrow. Then I tried putting it into my entire code but I keep getting errors.


I changed the color of every arrow to 255, 254, 253 etc to keep a similar color but to adhere to the code you had originally.

What could be the problem here? I split it up as its too long.


PFont f;                                // Declaring an object.
Counter cntrPair1;                      // Declaring counter to be denoted as cntrPair1.
Counter cntrPair2;                      // Declaring counter to be denoted as cntrPair2.
Counter cntrPair3;                      // Declaring counter to be denoted as cntrPair3.
Counter cntrPair4;                      // Declaring counter to be denoted as cntrPair4.
Counter cntrPair5;                      // Declaring counter to be denoted as cntrPair5.

void setup(){
 
size (900,550);                         // Setting up tablet screen size.
background(150);                        // Setting the background to grey.
stroke(0);                              // Setting the outline to black.
f = createFont ("Arial",16,false);      // Referencing the font name and function; Arial, 16 pt., anti-aliasing off.
cntr=new Counter();

 class Counter {
  int value=0;
  Counter() {
}

void display() {
 
    stroke(255);                            // Creates outline on arrows.
    textAlign(CENTER);                      // Aligns text centred in x-axis.
    textSize(20);                           // Alters size of numbers.
    fill(255,0,0);                          // Alters color of numbers displayed.
    text (""+begin(value),85,380);          // Moves location of number on-screen.
  }
 
  String begin(int a) {
    String Buffer;
    Buffer=nf(a, 1);
    return(Buffer);
 
}                                        // Class.

void draw(){
 
// *Seperating Lines*

line(170,550,170,280);                  // Parallel Robot Y-Axis Line.
line(170,280,900,280);                  // Parallel Robot X-Axis Line.
line(450,550,450,280);                  // Forward/Reverse & Elevation Divider Line.
line(740,550,740,280);                  // Elevation Divider Line.

// *ROBOT HOME Button*

fill(0,0,255);                          // Sets the blue button color.
rectMode(CORNERS);                      // Initiates rectangle mode.
rect(40,450,120,530);                   // States corner locations of rectangle.

// *Linear X-Slide HOME Button*

fill(0,0,255);                          // Sets the blue button color.
rectMode(CORNERS);                      // Initiates rectangle mode.
rect(250,335,350,370);                  // States corner locations of rectangle.

// *Stepper Motor HOME Button*

fill(0,0,255);                          // Sets the blue button color.
rectMode(CORNERS);                      // Initiates rectangle mode.
rect(550,335,650,370);                  // States corner locations of rectangle.


// *PITCH plus/minus arrows*

fill(0,255,0);                          // Setting the interior of the arrow to green.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.

line(40,220,130,220);                   // Arrow divider line.

fill(255,0,0);                          // Setting the interior of the arrow to red.
pushMatrix();                           // Used for calling up translate and rotate.
translate(95,290);                      // Amount of space translatted up/down.
translate(75,150);                      // Centre of previous arrow.
rotate(PI);                             // Rotate arrow 180 degrees.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.
popMatrix();                            // Used for closing the translate/rotate command.
cntrPair1.display();                    // Displays the counter.


// *ELEVATION plus/minus arrows*

fill(254,0,0);                          // Setting the interior of the arrow to red.
pushMatrix();                           // Used for calling up translate and rotate.
translate(760,590);                     // Amount of space translatted up/down.
rotate(PI);                             // Rotate arrow 180 degrees.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.
popMatrix();                            // Used for closing the translate/rotate command.

line(600,395,600,485);                   // Arrow divider line.

fill(0,254,0);                          // Setting the interior of the arrow to green.
pushMatrix();                           // Used for calling up translate and rotate.
translate(440,290);                     // Amount of space translatted up/down.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.
popMatrix();                            // Used for closing the translate/rotate command.
cntrPair2.display();                    // Displays the counter.

// *YAW plus/minus arrows*

fill(253,0,0);                          // Setting the interior of the arrow to green.
pushMatrix();                           // Used for calling up translate and rotate.
translate(110,245);                     // Amount of space translatted up/down.
rotate(3*PI/2);                         // Rotate 270 degrees.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.
popMatrix();

line(330,120,330,210);                  // Arrow divider line.

fill(0,253,0);                          // Setting the interior of the arrow to red.
pushMatrix();                           // Used for calling up translate and rotate.
translate(550,75);                      // Amount of space translatted up/down.
rotate(PI/2);                           // Rotate arrow 180 degrees.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.
popMatrix();                            // Used for closing the translate/rotate command.
cntrPair3.display();                    // Displays the counter.

// *FORWARD/REVERSE plus/minus arrows*

fill(252,0,0);                          // Setting the interior of the arrow to green.
pushMatrix();                           // Used for calling up translate and rotate.
translate(80,520);                      // Amount of space translated up/down.
rotate(3*PI/2);                         // Rotate 270 degrees.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.
popMatrix();                            // Used for closing the translate/rotate command.

line(300,390,300,490);                  // Arrow divider line.

fill(0,252,0);                          // Setting the interior of the arrow to red.
pushMatrix();                           // Used for calling up translate and rotate.
translate(520,350);                     // Amount of space translatted up/down.
rotate(PI/2);                           // Rotate arrow 180 degrees.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.
popMatrix();                            // Used for closing the translate/rotate command.
cntrPair4.display();                    // Displays the counter.

// *ROLL plus/minus arrows*

fill(0,251,0);                          // Setting the interior of the arrow to green.
pushMatrix();                           // Used for calling up translate and rotate.
translate(500,15);                      // Amount of space translatted up/down.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.
popMatrix();                            // Used for closing the translate/rotate command.

line(650,120,650,210);                  // Arrow divider line.

fill(0,251,0);                          // Setting the interior of the arrow to green.
pushMatrix();                           // Used for calling up translate and rotate.
translate(630,15);                      // Amount of space translatted up/down.
beginShape();                           // Shape of arrow begin.
vertex(60,150);                         // Point #1
vertex(50,150);                         // Point #2
vertex(85,110);                         // Point #3
vertex(120,150);                        // Point #4
vertex(110,150);                        // Point #5
vertex(110,190);                        // Point #6
vertex(60,190);                         // Point #7
vertex(60,150);                         // Point #1
endShape();                             // Shape of arrow end.
popMatrix();                            // Used for closing the translate/rotate command.
cntrPair5.display();                    // Displays the counter.


                            

// *Text Identifiers*

// *Title*
textAlign(CENTER);                      // Centres the text in the middle of the screen.
textFont(f,36);                         // Uses text variable and size to specify font being used.
fill(255);                              // Specifies color of letters.
text("THE ROBOGNATHIC",width/2,50);     // Displays text using 3 arguments; the text, x and y location.

// *Pitch*
textAlign(CENTER);
textFont(f,25);                         // Uses text variable and size to specify font being used.
fill(255);                              // Specifies color of letters.
text("PITCH",85,80);                    // Displays text using 3 arguments; the text, x and y location.

// *Mini-Actuator HOME Position Title*
textAlign(CENTER);                      // Centres the text in the middle of the screen.
textFont(f,20);                         // Uses text variable and size to specify font being used.
fill(255);                              // Specifies color of letters.
text("ROBOT HOME",85,425);              // Displays text using 3 arguments; the text, x and y location.

// *Mini-Actuator HOME Button*
textAlign(CENTER);                      // Centres the text in the middle of the screen.
textFont(f,22);                         // Uses text variable and size to specify font being used.
fill(255);                              // Specifies color of letters.
text("HOME",80,500);                    // Displays text using 3 arguments; the text, x and y location.

// *Yaw*
textAlign(CENTER);                      // Centres the text in the middle of the screen.
textFont(f,25);                         // Uses text variable and size to specify font being used.
fill(255);                              // Specifies color of letters.
text("YAW",330,110);                    // Displays text using 3 arguments; the text, x and y location.

// *Roll*
textAlign(CENTER);                      // Centres the text in the middle of the screen.
textFont(f,25);                         // Uses text variable and size to specify font being used.
fill(255);                              // Specifies color of letters.
text("ROLL",650,110);                   // Displays text using 3 arguments; the text, x and y location.

// *Linear X-Slide HOME Button*
textAlign(CENTER);                      // Centres the text in the middle of the screen.
textFont(f,22);                         // Uses text variable and size to specify font being used.
fill(255);                              // Specifies color of letters.
text("HOME",300,360);                   // Displays text using 3 arguments; the text, x and y location.

// *Forward/Reverse*
textAlign(CENTER);                      // Centres the text in the middle of the screen.
textFont(f,25);                         // Uses text variable and size to specify font being used.
fill(255);                              // Specifies color of letters.
text("FORWARD/REVERSE",310,310);        // Displays text using 3 arguments; the text, x and y location.

// *Stepper Motor HOME Button*
textAlign(CENTER);                      // Centres the text in the middle of the screen.
textFont(f,22);                         // Uses text variable and size to specify font being used.
fill(255);                              // Specifies color of letters.
text("HOME",600,360);                   // Displays text using 3 arguments; the text, x and y location.

// *Elevation*
textAlign(CENTER);                      // Centres the text in the middle of the screen.
textFont(f,25);                         // Uses text variable and size to specify font being used.
fill(255);                              // Specifies color of letters.
text("ELEVATION",600,310);              // Displays text using 3 arguments; the text, x and y location.
}

void mousePressed() {
                  
//***PITCH*** 
                                                           // If mouse click occurs over PITCH.
  println (get(mouseX, mouseY) );                          // Print line the location of the mouse on-screen.
  if (get(mouseX, mouseY) == color (255, 0, 0)  ) {        // If it is within a color range of red.
    println("red");                                        // Print line red.
    cntrPair1.value--;                                     // Then decrement number on-screen by one.
    delay(200);                                            // Delay of 200 milliseconds between allowable clicks.
  }
  else if (get(mouseX, mouseY) == color (0, 255, 0) ) {    // Else if it is within a color range of green.
    println("green");                                      // Print line green.
    cntrPair1.value++;                                     // Then increment number on-screen by one.
    delay(200);                                            // Delay of 200 milliseconds between allowable clicks.
  }
 
//***ELEVATION***
                                                           // If mouse click occurs over ELEVATION.
  println (get(mouseX, mouseY) );                          // Print line the location of the mouse on-screen.
  if (get(mouseX, mouseY) == color (254, 0, 0)  ) {        // If it is within a color range of red.
    println("red");                                        // Print line red.
    cntrPair2.value--;                                     // Then decrement number on-screen by one.
    delay(200);                                            // Delay of 200 milliseconds between allowable clicks.
  }
  else if (get(mouseX, mouseY) == color (0, 254, 0) ) {    // Else if it is within a color range of green.
    println("green");                                      // Print line green.
    cntrPair2.value++;                                     // Then increment number on-screen by one.
    delay(200);                                            // Delay of 200 milliseconds between allowable clicks.
  }
 
//***YAW***
                                                           // If mouse click occurs over YAW.
  println (get(mouseX, mouseY) );                          // Print line the location of the mouse on-screen.
  if (get(mouseX, mouseY) == color (253, 0, 0)  ) {        // If it is within a color range of red.
    println("red");                                        // Print line red.
    cntrPair3.value--;                                     // Then decrement number on-screen by one.
    delay(200);                                            // Delay of 200 milliseconds between allowable clicks.
  }
  else if (get(mouseX, mouseY) == color (0, 253, 0) ) {    // Else if it is within a color range of green.
    println("green");                                      // Print line green.
    cntrPair3.value++;                                     // Then increment number on-screen by one.
    delay(200);                                            // Delay of 200 milliseconds between allowable clicks.
  }
 
  //***FORWARD/REVERSE***
                                                           // If mouse click occurs over FORWARD/REVERSE.
  println (get(mouseX, mouseY) );                          // Print line the location of the mouse on-screen.
  if (get(mouseX, mouseY) == color (252, 0, 0)  ) {        // If it is within a color range of red.
    println("red");                                        // Print line red.
    cntrPair4.value--;                                     // Then decrement number on-screen by one.
    delay(200);                                            // Delay of 200 milliseconds between allowable clicks.
  }
  else if (get(mouseX, mouseY) == color (0, 252, 0) ) {    // Else if it is within a color range of green.
    println("green");                                      // Print line green.
    cntrPair4.value++;                                     // Then increment number on-screen by one.
    delay(200);                                            // Delay of 200 milliseconds between allowable clicks.
  }
 
  //***ROLL***
                                                           // If mouse click occurs over ROLL.
  println (get(mouseX, mouseY) );                          // Print line the location of the mouse on-screen.
  if (get(mouseX, mouseY) == color (251, 0, 0)  ) {        // If it is within a color range of red.
    println("red");                                        // Print line red.
    cntrPair5.value--;                                     // Then decrement number on-screen by one.
    delay(200);                                            // Delay of 200 milliseconds between allowable clicks.
  }
  else if (get(mouseX, mouseY) == color (0, 251, 0) ) {    // Else if it is within a color range of green.
    println("green");                                      // Print line green.
    cntrPair5.value++;                                     // Then increment number on-screen by one.
    delay(200);                                            // Delay of 200 milliseconds between allowable clicks.
  }
}
 }
}
 

it works now.

The class is at the end of the sketch now.

We forgot to give each counter a different position on the screen so they were all printing on top of one another...

That position is within the class x,y and given to each in counter in lines 15 to 21 (bold)

It's also splitted over to posts here

1. //
2. PFont f;                                // Declaring an object.
3. //
4. Counter cntrPair1;                      // Declaring counter to be denoted as cntrPair1.
5. Counter cntrPair2;                      // Declaring counter to be denoted as cntrPair2.
6. Counter cntrPair3;                      // Declaring counter to be denoted as cntrPair3.
7. Counter cntrPair4;                      // Declaring counter to be denoted as cntrPair4.
8. Counter cntrPair5;                      // Declaring counter to be denoted as cntrPair5.
9. //
10. void setup() {
11.   size (900, 550);                         // Setting up tablet screen size.
12.   background(150);                        // Setting the background to grey.
13.   stroke(0);                              // Setting the outline to black.
14.   f = createFont ("Arial", 16, false);      // Referencing the font name and function; Arial, 16 pt., anti-aliasing off.
15.   cntrPair1=new Counter( 85, 380 );   // pitch
16.   cntrPair2=new Counter( width - 170, height-140 );   // elevation
17.   cntrPair3=new Counter( 222, 111 );                             // yaw
18.   cntrPair4=new Counter( 333, height-150 );                //  forward / reverse 
19.   cntrPair5=new Counter( width - 120, 111 );
20.   //
21. } // func
22. //
23. void draw() {
24.   background (0);
25.   // *Seperating Lines*
26.   line(170, 550, 170, 280);                  // Parallel Robot Y-Axis Line.
27.   line(170, 280, 900, 280);                  // Parallel Robot X-Axis Line.
28.   line(450, 550, 450, 280);                  // Forward/Reverse & Elevation Divider Line.
29.   line(740, 550, 740, 280);                  // Elevation Divider Line.
30.   // *ROBOT HOME Button*
31.   fill(0, 0, 255);                          // Sets the blue button color.
32.   rectMode(CORNERS);                      // Initiates rectangle mode.
33.   rect(40, 450, 120, 530);                   // States corner locations of rectangle.
34.   // *Linear X-Slide HOME Button*
35.   fill(0, 0, 255);                          // Sets the blue button color.
36.   rectMode(CORNERS);                      // Initiates rectangle mode.
37.   rect(250, 335, 350, 370);                  // States corner locations of rectangle.
38.   // *Stepper Motor HOME Button*
39.   fill(0, 0, 255);                          // Sets the blue button color.
40.   rectMode(CORNERS);                      // Initiates rectangle mode.
41.   rect(550, 335, 650, 370);                  // States corner locations of rectangle.
42.   // *PITCH plus/minus arrows*
43.   fill(0, 255, 0);                          // Setting the interior of the arrow to green.
44.   beginShape();                           // Shape of arrow begin.
45.   vertex(60, 150);                         // Point #1
46.   vertex(50, 150);                         // Point #2
47.   vertex(85, 110);                         // Point #3
48.   vertex(120, 150);                        // Point #4
49.   vertex(110, 150);                        // Point #5
50.   vertex(110, 190);                        // Point #6
51.   vertex(60, 190);                         // Point #7
52.   vertex(60, 150);                         // Point #1
53.   endShape();                             // Shape of arrow end.
54.   line(40, 220, 130, 220);                   // Arrow divider line.
55.   fill(255, 0, 0);                          // Setting the interior of the arrow to red.
56.   pushMatrix();                           // Used for calling up translate and rotate.
57.   translate(95, 290);                      // Amount of space translatted up/down.
58.   translate(75, 150);                      // Centre of previous arrow.
59.   rotate(PI);                             // Rotate arrow 180 degrees.
60.   beginShape();                           // Shape of arrow begin.
61.   vertex(60, 150);                         // Point #1
62.   vertex(50, 150);                         // Point #2
63.   vertex(85, 110);                         // Point #3
64.   vertex(120, 150);                        // Point #4
65.   vertex(110, 150);                        // Point #5
66.   vertex(110, 190);                        // Point #6
67.   vertex(60, 190);                         // Point #7
68.   vertex(60, 150);                         // Point #1
69.   endShape();                             // Shape of arrow end.
70.   popMatrix();                            // Used for closing the translate/rotate command.
71.   cntrPair1.display();                    // Displays the counter.
72.   // *ELEVATION plus/minus arrows*
73.   fill(254, 0, 0);                          // Setting the interior of the arrow to red.
74.   pushMatrix();                           // Used for calling up translate and rotate.
75.   translate(760, 590);                     // Amount of space translatted up/down.
76.   rotate(PI);                             // Rotate arrow 180 degrees.
77.   beginShape();                           // Shape of arrow begin.
78.   vertex(60, 150);                         // Point #1
79.   vertex(50, 150);                         // Point #2
80.   vertex(85, 110);                         // Point #3
81.   vertex(120, 150);                        // Point #4
82.   vertex(110, 150);                        // Point #5
83.   vertex(110, 190);                        // Point #6
84.   vertex(60, 190);                         // Point #7
85.   vertex(60, 150);                         // Point #1
86.   endShape();                             // Shape of arrow end.
87.   popMatrix();                            // Used for closing the translate/rotate command.
88.   line(600, 395, 600, 485);                   // Arrow divider line.
89.   fill(0, 254, 0);                          // Setting the interior of the arrow to green.
90.   pushMatrix();                           // Used for calling up translate and rotate.
91.   translate(440, 290);                     // Amount of space translatted up/down.
92.   beginShape();                           // Shape of arrow begin.
93.   vertex(60, 150);                         // Point #1
94.   vertex(50, 150);                         // Point #2
95.   vertex(85, 110);                         // Point #3
96.   vertex(120, 150);                        // Point #4
97.   vertex(110, 150);                        // Point #5
98.   vertex(110, 190);                        // Point #6
99.   vertex(60, 190);                         // Point #7
100.   vertex(60, 150);                         // Point #1
101.   endShape();                             // Shape of arrow end.
102.   popMatrix();                            // Used for closing the translate/rotate command.
103.   cntrPair2.display();                    // Displays the counter.
104.   // *YAW plus/minus arrows*
105.   fill(253, 0, 0);                          // Setting the interior of the arrow to green.
106.   pushMatrix();                           // Used for calling up translate and rotate.
107.   translate(110, 245);                     // Amount of space translatted up/down.
108.   rotate(3*PI/2);                         // Rotate 270 degrees.
109.   beginShape();                           // Shape of arrow begin.
110.   vertex(60, 150);                         // Point #1
111.   vertex(50, 150);                         // Point #2
112.   vertex(85, 110);                         // Point #3
113.   vertex(120, 150);                        // Point #4
114.   vertex(110, 150);                        // Point #5
115.   vertex(110, 190);                        // Point #6
116.   vertex(60, 190);                         // Point #7
117.   vertex(60, 150);                         // Point #1
118.   endShape();                             // Shape of arrow end.
119.   popMatrix();
120.   line(330, 120, 330, 210);                  // Arrow divider line.
121.   fill(0, 253, 0);                          // Setting the interior of the arrow to red.
122.   pushMatrix();                           // Used for calling up translate and rotate.
123.   translate(550, 75);                      // Amount of space translatted up/down.
124.   rotate(PI/2);                           // Rotate arrow 180 degrees.
125.   beginShape();                           // Shape of arrow begin.
126.   vertex(60, 150);                         // Point #1
127.   vertex(50, 150);                         // Point #2
128.   vertex(85, 110);                         // Point #3
129.   vertex(120, 150);                        // Point #4
130.   vertex(110, 150);                        // Point #5
131.   vertex(110, 190);                        // Point #6
132.   vertex(60, 190);                         // Point #7
133.   vertex(60, 150);                         // Point #1
134.   endShape();                             // Shape of arrow end.
135.   popMatrix();                            // Used for closing the translate/rotate command.
136.   cntrPair3.display();                    // Displays the counter.
137.   // *FORWARD/REVERSE plus/minus arrows*
138.   fill(252, 0, 0);                          // Setting the interior of the arrow to green.
139.   pushMatrix();                           // Used for calling up translate and rotate.
140.   translate(80, 520);                      // Amount of space translated up/down.
141.   rotate(3*PI/2);                         // Rotate 270 degrees.
142.   beginShape();                           // Shape of arrow begin.
143.   vertex(60, 150);                         // Point #1
144.   vertex(50, 150);                         // Point #2
145.   vertex(85, 110);                         // Point #3
146.   vertex(120, 150);                        // Point #4
147.   vertex(110, 150);                        // Point #5
148.   vertex(110, 190);                        // Point #6
149.   vertex(60, 190);                         // Point #7
150.   vertex(60, 150);                         // Point #1
151.   endShape();                             // Shape of arrow end.
152.   popMatrix();                            // Used for closing the translate/rotate command.
153.   line(300, 390, 300, 490);                  // Arrow divider line.
154.   fill(0, 252, 0);                          // Setting the interior of the arrow to red.
155.   pushMatrix();                           // Used for calling up translate and rotate.
156.   translate(520, 350);                     // Amount of space translatted up/down.
157.   rotate(PI/2);                           // Rotate arrow 180 degrees.
158.   beginShape();                           // Shape of arrow begin.
159.   vertex(60, 150);                         // Point #1
160.   vertex(50, 150);                         // Point #2
161.   vertex(85, 110);                         // Point #3
162.   vertex(120, 150);                        // Point #4
163.   vertex(110, 150);                        // Point #5
164.   vertex(110, 190);                        // Point #6
165.   vertex(60, 190);                         // Point #7
166.   vertex(60, 150);                         // Point #1
167.   endShape();                             // Shape of arrow end.
168.   popMatrix();                            // Used for closing the translate/rotate command.
169.   cntrPair4.display();                    // Displays the counter.
170.   // *ROLL plus/minus arrows*
171.   fill(0, 251, 0);                          // Setting the interior of the arrow to green.
172.   pushMatrix();                           // Used for calling up translate and rotate.
173.   translate(500, 15);                      // Amount of space translatted up/down.
174.   beginShape();                           // Shape of arrow begin.
175.   vertex(60, 150);                         // Point #1
176.   vertex(50, 150);                         // Point #2
177.   vertex(85, 110);                         // Point #3
178.   vertex(120, 150);                        // Point #4
179.   vertex(110, 150);                        // Point #5
180.   vertex(110, 190);                        // Point #6
181.   vertex(60, 190);                         // Point #7
182.   vertex(60, 150);                         // Point #1
183.   endShape();                             // Shape of arrow end.
184.   popMatrix();                            // Used for closing the translate/rotate command.
185.   line(650, 120, 650, 210);                  // Arrow divider line.
186.   fill(0, 251, 0);                          // Setting the interior of the arrow to green.
187.   pushMatrix();                           // Used for calling up translate and rotate.
188.   translate(630, 15);                      // Amount of space translatted up/down.
189.   beginShape();                           // Shape of arrow begin.
190.   vertex(60, 150);                         // Point #1
191.   vertex(50, 150);                         // Point #2
192.   vertex(85, 110);                         // Point #3
193.   vertex(120, 150);                        // Point #4
194.   vertex(110, 150);                        // Point #5
195.   vertex(110, 190);                        // Point #6
196.   vertex(60, 190);                         // Point #7
197.   vertex(60, 150);                         // Point #1
198.   endShape();                             // Shape of arrow end.
199.   popMatrix();                            // Used for closing the translate/rotate command.
200.   cntrPair5.display();                    // Displays the counter.
201.   // *Text Identifiers*
202.   // *Title*
203.   textAlign(CENTER);                      // Centres the text in the middle of the screen.
204.   textFont(f, 36);                         // Uses text variable and size to specify font being used.
205.   fill(255);                              // Specifies color of letters.
206.   text("THE ROBOGNATHIC", width/2, 50);     // Displays text using 3 arguments; the text, x and y location.
207.   // *Pitch*
208.   textAlign(CENTER);
209.   textFont(f, 25);                         // Uses text variable and size to specify font being used.
210.   fill(255);                              // Specifies color of letters.
211.   text("PITCH", 85, 80);                    // Displays text using 3 arguments; the text, x and y location.
212.   // *Mini-Actuator HOME Position Title*
213.   textAlign(CENTER);                      // Centres the text in the middle of the screen.
214.   textFont(f, 20);                         // Uses text variable and size to specify font being used.
215.   fill(255);                              // Specifies color of letters.
216.   text("ROBOT HOME", 85, 425);              // Displays text using 3 arguments; the text, x and y location.
217.   // *Mini-Actuator HOME Button*
218.   textAlign(CENTER);                      // Centres the text in the middle of the screen.
219.   textFont(f, 22);                         // Uses text variable and size to specify font being used.
220.   fill(255);                              // Specifies color of letters.
221.   text("HOME", 80, 500);                    // Displays text using 3 arguments; the text, x and y location.
222.   // *Yaw*
223.   textAlign(CENTER);                      // Centres the text in the middle of the screen.
224.   textFont(f, 25);                         // Uses text variable and size to specify font being used.
225.   fill(255);                              // Specifies color of letters.
226.   text("YAW", 330, 110);                    // Displays text using 3 arguments; the text, x and y location.
227.   // *Roll*
228.   textAlign(CENTER);                      // Centres the text in the middle of the screen.
229.   textFont(f, 25);                         // Uses text variable and size to specify font being used.
230.   fill(255);                              // Specifies color of letters.
231.   text("ROLL", 650, 110);                   // Displays text using 3 arguments; the text, x and y location.
232.   // *Linear X-Slide HOME Button*
233.   textAlign(CENTER);                      // Centres the text in the middle of the screen.
234.   textFont(f, 22);                         // Uses text variable and size to specify font being used.
235.   fill(255);                              // Specifies color of letters.
236.   text("HOME", 300, 360);                   // Displays text using 3 arguments; the text, x and y location.
237.   // *Forward/Reverse*
238.   textAlign(CENTER);                      // Centres the text in the middle of the screen.
239.   textFont(f, 25);                         // Uses text variable and size to specify font being used.
240.   fill(255);                              // Specifies color of letters.
241.   text("FORWARD/REVERSE", 310, 310);        // Displays text using 3 arguments; the text, x and y location.
242.   // *Stepper Motor HOME Button*
243.   textAlign(CENTER);                      // Centres the text in the middle of the screen.
244.   textFont(f, 22);                         // Uses text variable and size to specify font being used.
245.   fill(255);                              // Specifies color of letters.
246.   text("HOME", 600, 360);                   // Displays text using 3 arguments; the text, x and y location.
247.   // *Elevation*
248.   textAlign(CENTER);                      // Centres the text in the middle of the screen.
249.   textFont(f, 25);                         // Uses text variable and size to specify font being used.
250.   fill(255);                              // Specifies color of letters.
251.   text("ELEVATION", 600, 310);              // Displays text using 3 arguments; the text, x and y location.
252. }

Thank you so much!!!!