calculate sum button to add them together.

​

    Mouse over the paragraph at the top to change the 

    color of the text in the canvas.

*/

​

let textBoxes = [];

let y = 30

let sum = 0;

let hue = 0

​

function setup() {

    explanation = createP("This program takes the sum of three numbers.");

    explanation.mouseOver(changeColor);

    explanation.mouseOut(changeColor);

​

    createCanvas(300, 175);

​

    for (i = 0; i < 3; i++) {

        y += 25

        textBoxes[i] = createInput("0");

        textBoxes[i].position(20, y);

    }

​

    var button = createButton("Calculate sum");

    button.mousePressed(calculateSum);

}

​

function calculateSum() {

    sum = parseFloat(textBoxes[0].value(), 10) + parseFloat(textBoxes[1].value(), 10) + parseFloat(textBoxes[2].value(), 10);

}

​

function changeColor() {

    if (hue == 255) {

        hue = 0

    } else {

        hue = 255

    }

}

​

function draw() {

    clear();

​

    fill(hue, hue, hue);

​

    textFont("Times New Roman");

    textSize(32);

    text("The sum is " + sum, 20, 125);

}