# Calculator program, how to make it function

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:

``````Keypad keyPad;

color backgroundC = color(200);

String entery_text="0";

void setup(){
size(400, 500);
background(backgroundC);
noStroke();
textSize(60);

}

void draw(){

}
``````

``````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);

}
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(){

}
}
``````

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

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

1 Like

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

1 Like

I got stuck at the + operation

``````Keypad keyPad;

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

void setup(){
size(400, 500);
background(backgroundC);
noStroke();
textSize(60);

}

void draw(){

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 = "+";

}
}
}
}
}
``````

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

@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…

1 Like

Sorry about that! Will keep that in mind!

1 Like

Actually I got it, thanks!

1 Like

Is your Calculator finished, can you show the result?