Building a Calculator using p5.js

Question

So I am building a calculator using only p5.js . The problem is that I don't really know how to start to get the input from the user, and how can I make it appear in the display. Any suggestions are highly appreciated, thank you! Here's my JS so far:

function setup() {
    createCanvas(windowWidth, windowHeight);
}

function draw() {
    background(0);
    strokeWeight(5);
    stroke(255);


    let h = windowHeight;
    let w = windowWidth;
    let w1 = w/2.5;
    let w2 = w/10;
    let h1 = h/7.5;
    let h2 = h/13;

    // WHITE BUTTON 0
    if (mouseIsPressed && (mouseX > 0 && mouseX < w/5 && mouseY > h1*6.6 && mouseY < h)) {
        fill(255);
      } else {
        fill(0);
      }
    strokeWeight(0);
    rect(0, h1*6.6, w/5, h);

    // WHITE BUTTON =
    if (mouseIsPressed && (mouseX > w2*2 && mouseX < w/2.5 && mouseY > h1*6.6 && mouseY < h)) {
        fill(255);
      } else {
        fill(0);
      }
    strokeWeight(0);
    rect(w2*2, h1*6.6, w/5, h);

    // WHITE BUTTON 1
    if (mouseIsPressed && (mouseX > 0 && mouseX < w2 && mouseY > h1*5.6 && mouseY < h1*6.6)) {
        fill(255);
      } else {
        fill(0);
      }
    strokeWeight(0);
    rect(0, h1*5.6, w2, h1);

    // WHITE BUTTON 2
    if (mouseIsPressed && (mouseX > w2 && mouseX < w2*2 && mouseY > h1*5.6 && mouseY < h1*6.6)) {
        fill(255);
      } else {
        fill(0);
      }
    strokeWeight(0);
    rect(w2, h1*5.6, w2, h1);

    // WHITE BUTTON 3
    if (mouseIsPressed && (mouseX > w2*2 && mouseX < w2*3 && mouseY > h1*5.6 && mouseY < h1*6.6)) {
        fill(255);
      } else {
        fill(0);
      }
    strokeWeight(0);
    rect(w2*2, h1*5.6, w2, h1);

    // WHITE BUTTON +
    if (mouseIsPressed && (mouseX > w2*3 && mouseX < w2*4 && mouseY > h1*5.6 && mouseY < h1*6.6)) {
        fill(255);
      } else {
        fill(0);
      }
    strokeWeight(0);
    rect(w2*3, h1*5.6, w2, h1);

    // WHITE BUTTON 4
    if (mouseIsPressed && (mouseX > 0 && mouseX < w2 && mouseY > h1*4.6 && mouseY < h1*5.6)) {
        fill(255);
      } else {
        fill(0);
      }
    strokeWeight(0);
    rect(0, h1*4.6, w2, h1);

    // WHITE BUTTON 5
    if (mouseIsPressed && (mouseX > w2 && mouseX < w2*2 && mouseY > h1*4.6 && mouseY < h1*5.6)) {
        fill(255);
      } else {
        fill(0);
      }
    strokeWeight(0);
    rect(w2, h1*4.6, w2, h1);

    // WHITE BUTTON 6
    if (mouseIsPressed && (mouseX > w2*2 && mouseX < w2*3 && mouseY > h1*4.6 && mouseY < h1*5.6)) {
        fill(255);
      } else {
        fill(0);
      }
    strokeWeight(0);
    rect(w2*2, h1*4.6, w2, h1);

    // WHITE BUTTON -
    if (mouseIsPressed && (mouseX > w2*3 && mouseX < w2*4 && mouseY > h1*4.6 && mouseY < h1*5.6)) {
        fill(255);
      } else {
        fill(0);
      }
    strokeWeight(0);
    rect(w2*3, h1*4.6, w2, h1);

    // WHITE BUTTON 7
    if (mouseIsPressed && (mouseX > 0 && mouseX < w2 && mouseY > h1*3.6 && mouseY < h1*4.6)) {
        fill(255);
      } else {
        fill(0);
      }
    strokeWeight(0);
    rect(0, h1*3.6, w2, h1);

    // WHITE BUTTON 8
    if (mouseIsPressed && (mouseX > w2 && mouseX < w2*2 && mouseY > h1*3.6 && mouseY < h1*4.6)) {
        fill(255);
      } else {
        fill(0);
      }
    strokeWeight(0);
    rect(w2, h1*3.6, w2, h1);

    // WHITE BUTTON 9
    if (mouseIsPressed && (mouseX > w2*2 && mouseX < w2*3 && mouseY > h1*3.6 && mouseY < h1*4.6)) {
        fill(255);
      } else {
        fill(0);
      }
    strokeWeight(0);
    rect(w2*2, h1*3.6, w2, h1);

    // WHITE BUTTON x
    if (mouseIsPressed && (mouseX > w2*3 && mouseX < w2*4 && mouseY > h1*3.6 && mouseY < h1*4.6)) {
        fill(255);
      } else {
        fill(0);
      }
    strokeWeight(0);
    rect(w2*3, h1*3.6, w2, h1);

    // WHITE BUTTON AC
    if (mouseIsPressed && (mouseX > 0 && mouseX < w2*3 && mouseY > h1*2.6 && mouseY < h1*3.6)) {
        fill(255);
      } else {
        fill(0);
      }
    strokeWeight(0);
    rect(0, h1*2.6, w2*3, h1);

    // WHITE BUTTON //
    if (mouseIsPressed && (mouseX > w2*3 && mouseX < w2*4 && mouseY > h1*2.6 && mouseY < h1*3.6)) {
        fill(255);
      } else {
        fill(0);
      }
    strokeWeight(0);
    rect(w2*3, h1*2.6, w2, h1);



    strokeWeight(5);
    stroke(255);

    line(0, h/6, w, h/6);
    line(w1, h/6 + 1, w1, h);
    line(w/1.5, h/6 + 1, w/1.5, h);
    line(w/1.5, h/1.25, w, h/1.25);
    line(0, h1*2 + h2, w1, h1*2 + h2);
    line(0, h1*3 + h2, w1, h1*3 + h2);
    line(0, h1*4 + h2, w1, h1*4 + h2);
    line(0, h1*5 + h2, w1, h1*5 + h2);
    line(0, h1*6 + h2, w1, h1*6 + h2);
    line(w2, (h1*3) + h2, w2, h1*6 + h2);
    line(w2*2, (h1*3) + h2, w2*2, h);
    line(w2*3, (h1*2) + h2, w2*3, h1*6 + h2);
    strokeWeight(0);

    fill(255);
    textSize(w/30);
    textFont('Helvetica Bold')
    text('CALCULATOR', (windowWidth/2) - (windowWidth/10), h/12);

    textSize(w/20)
    text('=', w2*2.85, h1*7.25);
    textSize(w/30)
    text('0', w2*0.9, h1*7.25);
    text('1', w2*0.35, h1*6.25);
    text('2', w2*1.4, h1*6.25);
    text('3', w2*2.4, h1*6.25);
    text('4', w2*0.35, h1*5.25);
    text('5', w2*1.4, h1*5.25);
    text('6', w2*2.4, h1*5.25);
    text('7', w2*0.35, h1*4.25);
    text('8', w2*1.4, h1*4.25);
    text('9', w2*2.4, h1*4.25);
    text('AC', w2*0.2, h1*3.25);
    text('\xF7', w2*3.4, h1*3.25);
    text('\xD7', w2*3.4, h1*4.25);
    text('-', w2*3.425, h1*5.25);
    text('+', w2*3.4, h1*6.25);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

I have tried using functions do define the first value, etc. But I really don't know how to use them. I am new to Javascript.

Answer 1

Well a lot of what you need is already in place for you, you already have the click handlers, so when 0 gets clicked:

 if (mouseIsPressed && (mouseX > 0 && mouseX < w/5 && mouseY > h1*6.6 && mouseY < h)) { fill(255); } else { fill(0); } } 

What I would do is create an array for the user input, and each button the user hits just add that to the array

let userInput = []; // declared above the setup function
....

if (mouseIsPressed && (mouseX > 0 && mouseX < w/5 && mouseY > h1*6.6 && mouseY < h)) {
    userInput.push(0); // add the nubmer to the array
    fill(255);
  } else {
    fill(0);
 }

Then you can loop through that array in the draw loop to output it, something like:

let startX = 0;
for (let input of userInput) {
    text(input, startX, 100);
    startX += 10;
}