# Calculator program, how to make it function

**URL:** <https://discourse.processing.org/t/calculator-program-how-to-make-it-function/19713>\
**Category:** Coding Questions\
**Created:** [April 12, 2020, 10:31pm UTC](https://discourse.processing.org/t/calculator-program-how-to-make-it-function/19713 "2020-04-12T22:31:53Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![WeeBoEtte](https://avatars.discourse-cdn.com/v4/letter/w/e47c2d/32.png) [@WeeBoEtte](https://discourse.processing.org/u/WeeBoEtte)\
**Post date:** [April 12, 2020, 10:31pm UTC](https://discourse.processing.org/t/calculator-program-how-to-make-it-function/19713/1 "2020-04-12T22:31:53Z")

</div>

I am trying to make a calculator program in processing, but I’m not sure where to go from here, I’ve got how I want the calculator to look, but as for how to make it function, I’m pulling up a blank. If the mouse presses the key, I want the number or symbol corresponding to it to appear in the display screen. If the equal sign is hit, I want the answer of the problem placed into the display be shown in the display. I know I need to make a mousePressed function, and I feel like I need to use booleans, but I can’t seem to figure it out, Any suggestions are welcome!

Calculator Tab:

```auto
Keypad keyPad;

color backgroundC = color(200);

String entery_text="0";

void setup(){
  size(400, 500);
    background(backgroundC);
  noStroke();
  textSize(60);
  
  keyPad = new Keypad();
}

void draw(){

  keyPad.Display();
}

```

Keypad tab:

```auto
class Keypad {
color backgroundC = color(200);
color entryC = color(242,244,255);
color entryTC = color(0);
color buttonC = color(255);
color buttonTC = color(93, 67, 247);

  Keypad() {
    
  }
    void Display(){
      
      
 //making the background behind the keys gray     
  background(backgroundC);
  
  //making the screen display background slightly purple
  fill(entryC);
  rect(10, 10, 380, 70);
  
  fill(entryTC);
  text(entery_text, 20, 67);
  
  //making the background of the button's white
  fill(buttonC);
  
  //The square for 7
  rect(10, 100, 80, 80, 20);
  
  //the square for 8
  rect(110, 100, 80, 80, 20);
  
  //the square for 9
  rect(210, 100, 80, 80, 20);
  
    //the square for /
  rect(310, 100, 80, 80, 20);
  
    //the square for 4
  rect(10, 200, 80, 80, 20);
  
    //the square for 5
  rect(110, 200, 80, 80, 20);
  
    //the square for 6
  rect(210, 200, 80, 80, 20);
  
    //the square for x
  rect(310, 200, 80, 80, 20);
  
    //the square for 1
  rect(10, 300, 80, 80, 20);
  
    //the square for 2
  rect(110, 300, 80, 80, 20);
  
    //the square for 3
  rect(210, 300, 80, 80, 20);
  
    //the square for -
  rect(310, 300, 80, 80, 20);
  
    //the square for C
  rect(10, 400, 80, 80, 20);
  
    //the square for 0
  rect(110, 400, 80, 80, 20);
  
    //the square for =
  rect(210, 400, 80, 80, 20);
  
    //the square for +
  rect(310, 400, 80, 80, 20);
  
  fill(buttonTC);
  
  text("7", 27, 162);
  text("8", 127, 162);
  text("9", 227, 162);
  text("/", 333, 155);
  
  text("4", 27, 262);
  text("5", 127, 262);
  text("6", 227, 262);
  text("x", 327, 262);
  
  text("1", 27, 362);
  text("2", 127, 362);
  text("3", 227, 362);
  text("-", 327, 362);
  
  text("C", 27, 462);
  text("0", 127, 462);
  text("=", 227, 462);
  text("+", 327, 462);

    

}

void Input(){

  
}
  }

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 12, 2020, 11:00pm UTC](https://discourse.processing.org/t/calculator-program-how-to-make-it-function/19713/2 "2020-04-12T23:00:08Z")

</div>

It would be easier when you had an array of your buttons and a class Button to hold the values.

Anyway.

Principle is this: try to make 1+1=2 work, okay?

In mousePressed () function  
check if the mouse is inside the 1

if ( mouseX \> (pos of the 1) && mouseX \< pos+80…

say firstNumber=1;

In draw  
Show text(firstNumber,… in the display)

In mousePressed

Check the + sign button

say operation = “+”; to store this information  
set a boolean isReadingFirstNumber to false

Delete the display

These are not new lines but also in mousePressed():  
Now when the button 1 is clicked again, you evaluate isReadingFirstNumber and because it is now false you say: secondNumber=1;  
(make this a nice if (isReadingFirstNumber)  
firstNumber =1; else secondNumber=1;  
)

(Please note that the code for both numbers is later written only once, you just store the result in different numbers)

Now when = is hit :

You check operation Variable

if(operation.equals("+"))  
result = firstNumber+secondNumber;

((You cannot use == on Strings!!!))

display result

set isReadingFirstNumber = true;

* * *

_ **WHEN You got this** _: try 11+1= 12

This requires a counter for the first number

if counter == 0 the number is just 1

increase counter to 1 : Now the old number you have gets multiplied by 10 and you add 1.  
so you get 11 for the first number.

(you probably need a buffer for this and only when + is clicked copy buffer to firstNumber or secondNumber respectively. We come to this later; just work up to here for now)

Proceed with 111+1=112

Then 1+11

Then 11+111 etc.

12+1

12\*2 etc.

Test frequently

Chrisir

---

<div class="post-metadata">

**Author:** ![WeeBoEtte](https://avatars.discourse-cdn.com/v4/letter/w/e47c2d/32.png) [@WeeBoEtte](https://discourse.processing.org/u/WeeBoEtte)\
**Post date:** [April 13, 2020, 2:28am UTC](https://discourse.processing.org/t/calculator-program-how-to-make-it-function/19713/3 "2020-04-13T02:28:46Z")

</div>

Thanks for this! I am still figuring it out, but this definitely helps!

---

<div class="post-metadata">

**Author:** ![WeeBoEtte](https://avatars.discourse-cdn.com/v4/letter/w/e47c2d/32.png) [@WeeBoEtte](https://discourse.processing.org/u/WeeBoEtte)\
**Post date:** [April 15, 2020, 1:41am UTC](https://discourse.processing.org/t/calculator-program-how-to-make-it-function/19713/4 "2020-04-15T01:41:57Z")

</div>

I got stuck at the + operation

```auto
Keypad keyPad;

color backgroundC = color(200);
String entery_text="Calculator";
float firstNumber;
boolean isReadingFirstNumber =false;
String operation ="";

void setup(){
  size(400, 500);
    background(backgroundC);
  noStroke();
  textSize(60);
  
  keyPad = new Keypad();
}

void draw(){

  keyPad.Display();
  text(operation,10,70);
 
 
 
}
void mousePressed(){
  if( mouseX > 10 && mouseX < 80){
    if(mouseY > 80 && mouseX < 300){
    
   firstNumber=1;
if( mouseY > 400 && mouseY < 480){
if(mouseX > 310 && mouseX < 390){
   operation = "+";

    
  }
  }
}
  }
}

```

---

<div class="post-metadata">

**Author:** ![WeeBoEtte](https://avatars.discourse-cdn.com/v4/letter/w/e47c2d/32.png) [@WeeBoEtte](https://discourse.processing.org/u/WeeBoEtte)\
**Post date:** [April 15, 2020, 1:42am UTC](https://discourse.processing.org/t/calculator-program-how-to-make-it-function/19713/5 "2020-04-15T01:42:51Z")

</div>

I’m trying to see if I can get the plus to appear but it doesn’t.

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [April 15, 2020, 1:55am UTC](https://discourse.processing.org/t/calculator-program-how-to-make-it-function/19713/6 "2020-04-15T01:55:41Z")

</div>

@WeeBoEtte, this looks like a very similar topic – building a calculator – you have currently posted. Please keep a single topic to a single thread. Redundancy becomes confusing…  
🤓

---

<div class="post-metadata">

**Author:** ![WeeBoEtte](https://avatars.discourse-cdn.com/v4/letter/w/e47c2d/32.png) [@WeeBoEtte](https://discourse.processing.org/u/WeeBoEtte)\
**Post date:** [April 15, 2020, 2:17am UTC](https://discourse.processing.org/t/calculator-program-how-to-make-it-function/19713/7 "2020-04-15T02:17:54Z")

</div>

Sorry about that! Will keep that in mind!

---

<div class="post-metadata">

**Author:** ![WeeBoEtte](https://avatars.discourse-cdn.com/v4/letter/w/e47c2d/32.png) [@WeeBoEtte](https://discourse.processing.org/u/WeeBoEtte)\
**Post date:** [April 15, 2020, 2:48am UTC](https://discourse.processing.org/t/calculator-program-how-to-make-it-function/19713/8 "2020-04-15T02:48:26Z")

</div>

Actually I got it, thanks!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 16, 2020, 12:59pm UTC](https://discourse.processing.org/t/calculator-program-how-to-make-it-function/19713/9 "2020-04-16T12:59:59Z")

</div>

Is your Calculator finished, can you show the result?