let a,b;

let x_1,x_2;

function setup() {

  createCanvas(500, 400);

​

  generateEquation();  

  // GUI 

  let btn;

  x_1 = createInput('1','number');

  x_1.size(50);

  x_1.position(55,84);

  btn = createButton('+');

  btn.position(120,84-4);

  btn.size(30,30);

  btn.mousePressed( (evt)=> {

    changeX1(+1);

    changeX2(-1);

  });

  btn = createButton('-');

  btn.position(120+40,84-4);

  btn.size(30,30);

  btn.mousePressed( (evt)=> {

    changeX1(-1);

    changeX2(+1);

  });

  x_2 = createInput('' + (parseInt(a)-1),'number');

  x_2.size(50);

  x_2.position(55,132);

​

  btn = createButton('+');

  btn.position(120,132-4);

  btn.size(30,30);

  btn.mousePressed( (evt)=> {

    changeX2(+1);

    changeX1(-1);

  });

  btn = createButton('-');

  btn.position(120+40,132-4);

  btn.size(30,30);

  btn.mousePressed( (evt)=> {

    changeX2(-1);

    changeX1(+1);

  });

​

  btn = createButton('New Equation');

  btn.position(200,370);

  btn.mousePressed( (evt)=> {

    generateEquation();  

    x_1.value( 1 );

    x_2.value( (parseInt(a)-1) );

  });

}

​

function draw() {

  background(0);

  noStroke();

  fill("white");

  textSize(24);

  text(equation + ' = 0',20,25);

  text('x1 ? , x2 ?',300,25);

​

  text('x1',10,100);

  text('x2',10,150);

  let x1 = parseInt(x_1.value());

  let x2 = parseInt(x_2.value());

  let error = x1*x2;

  text(`(x${signed(x1)}) * (x${signed(x2)}) = `,20,300);  

  if (error==parseInt(b))

    fill("lightgreen");

  else 

    fill("red");

  text(`x^2 ${a} x ${error==0?'':signed(error)}`,300,300);  

  // product

  let p = abs(x1*x2);

  let M = max(abs(x1),abs(x2));

  text(''+(x1*x2),240,150); 

  push();

    strokeWeight(.2);

    stroke("blue");

    if ((x1*x2)<0)

      fill("darkviolet");

    else

      fill("white");

    translate(280,100);

    scale(100/M);

    rect(0,0,abs(x1),abs(x2));

    strokeWeight(.05);

    stroke("lightblue");

    for (let i=0;i<abs(x2);i++){

      line(0,i,abs(x1),i);

    }

    for (let i=0;i<abs(x1);i++){

      line(i,0,i,abs(x2));

    }

  pop();

}

​

function signed(n){

  return (n<0?"":"+") + n;

}

​

function changeX1(delta){

  let k = ~~(x_1.value());

  x_1.value( k+delta );

}

​

function changeX2(delta){

  let k = ~~(x_2.value());

  x_2.value( k+delta );

}

​

let firstTime = true;

function generateEquation(){

  if (firstTime){

    a = 10; b= 21;

    firstTime = false;

  } else {

​

    let xx1,xx2;

    xx1 = ~~(random(-10,10));

    xx2 = ~~(random(-10,10));

    if ((xx1==xx2) && (xx1==0)){

      xx2 = 1;

    } 

​

    a = xx1+xx2;

    b = xx1*xx2;

  }

  a = signed(a);

  b = signed(b);  

  equation = `x^2 ${a} x ${b}`;  

}