function setup() {  

  createCanvas(400, 400);  

  fill(0, 102, 153);

  text('x1',10,height+25);

  text('y1',10,50);

  text('x2',10,75);

  text('y2',10,100);

  x1_slider = createSlider(-width/2, width/2, random(-width/2, width/2), 1);

  x1_slider.position(10, height+10);

  y1_slider = createSlider(-height/2, height/2, random(-width/2, width/2), 1);

  y1_slider.position(10, height+30);

  x2_slider = createSlider(-width/2, width/2, random(-width/2, width/2), 1);

  x2_slider.position(width/2+10, height+10);

  y2_slider = createSlider(-height/2, height/2, random(-width/2, width/2), 1);

  y2_slider.position(width/2+10, height+30);

}

​

function draw() {

  background(220);

  grid();

  text('P1', 10, height - 10);

  text('P2', width/2 + 10, height - 10);

  let x1_val = x1_slider.value();

  let y1_val = y1_slider.value();

  let x2_val = x2_slider.value();

  let y2_val = y2_slider.value();

  text(linearEq(x1_val, y1_val, x2_val, y2_val), 10, 20);

  translate(width/2, height/2)

  let p1 = "("+x1_val+" , "+y1_val+")";

  text(p1, x1_val, -y1_val);

  let p2 = "("+x2_val+" , "+y2_val+")";

  text(p2, x2_val, -y2_val);

  stroke(0)

  strokeWeight(5);  

  line(x1_val, -y1_val, x2_val, -y2_val);

  strokeWeight(10); 

  point(x1_val, -y1_val);

  point(x2_val, -y2_val);  

}

​

function linearEq(x1, y1, x2, y2) {

  let m = (y2-y1)/(x2-x1);

  let eq = "y = " + y1 + "+(" + m + ")(x -" + "(" + x1 + ")" + ")";

  console.log("y = " + y1 + "+" + m + "(x -" + "(" + x1 + ")" + ")");

  return eq;

}

​

function grid() {

  strokeWeight(0.25);

  stroke(128)

  y_axis = line(width/2, 0, width/2, height);

  x_axis = line(0, height/2, width, height/2);

  return [y_axis,x_axis];  

}