Lagrange interpolation by JS

A simple curve demo Lagrange interpolating by JS.

by Tinytsunami

HTML

<div id="demo">
  <div>
    <label>
      <input type="file" accept="image/*" />
      <canvas width="10px" height="10px"></canvas>
    </label>
  </div>
  <canvas width="256px" height="256px"></canvas>
  <br />
  <input type="checkbox" checked /> Red
  <input type="checkbox" checked /> Green
  <input type="checkbox" checked /> Blue <br />
  <button>reset color curve</button>
</div>

CSS

body {
      color: #ffffff;
      background: #20262e;
      font-family: monospace, sans-serif;
    }

    #demo {
      padding: 5px;
    }

    #demo canvas {
      border: solid 1px #ffffff;
    }

    #demo>div {
      margin-top: 5px;
    }

    #demo label input {
      color: #ffffff;
      background: #20262e;
      outline: none;
      display: none;
    }

    #demo label:hover{
      cursor: pointer;
    }

    #demo label div {
      float: left;
      font-weight: bold;
      font-size: 13.3333px;
      text-align: center;
      padding: 1px 6px;
      margin-right: 10px;
      color: #ffffff;
      background: #20262e;
      border: 1px solid #ffffff;
      outline: none;
    }

    #demo label div:hover {
      color: #20262e;
      background: #ffffff;
      border: 1px solid #ffffff;
    }

    #demo button {
      font-weight: bold;
      float: left;
      color: #ffffff;
      background: #20262e;
      border: 1px solid #ffffff;
      outline: none;
      margin-right: 10px;
      margin-top: 3px;
      cursor: pointer;
    }

    #demo button:hover {
      color: #20262e;
      background: #ffffff;
      border: 1px solid #ffffff;
    }

JavaScript

(function() {
  /* get elements */
  let root = document.getElementById("demo");
  let inputNode = root.getElementsByTagName("input")[0];
  let imageCanvasNode = root.getElementsByTagName("canvas")[0];
  let curveCanvasNode = root.getElementsByTagName("canvas")[1];
  let imageContext = imageCanvasNode.getContext("2d");
  let curveContext = curveCanvasNode.getContext("2d");
  let resetNode = root.getElementsByTagName("button")[0];
  let imgData = null;

  // upload image
  inputNode.onchange = function() {
    let file = inputNode.files[0];
    if (file) {
      createImage(URL.createObjectURL(file));
    }
  };

  // create image to canvas
  let createImage = function(url) {
    let img = new Image();
    img.onload = function() {
      imageCanvasNode.width = img.width;
      imageCanvasNode.height = img.height;
      imageContext.drawImage(img, 0, 0);
      imgData = imageContext.getImageData(0, 0, img.width, img.height);
      draw();
    };
    img.src = url;
  }

  // get color checked (0: red, 1: green, 2: blue)
  let getCheck = function(color) {
    return root.getElementsByTagName("input")[color + 1].checked;
  };

  //main process
  let point = (x, y, c) => {
    return {
      x: x,
      y: y,
      color: c
    }
  };
  let points = [point(0, 0, 0), point(255, 255, 0),
    point(0, 0, 1), point(255, 255, 1),
    point(0, 0, 2), point(255, 255, 2)
  ];

  let distance = function(ax, ay, bx, by) {
    return Math.sqrt(Math.pow(ax - bx, 2) + Math.pow(ay - by, 2));
  };

  // reset
  let reset = function() {
    points = [point(0, 0, 0), point(255, 255, 0),
      point(0, 0, 1), point(255, 255, 1),
      point(0, 0, 2), point(255, 255, 2)
    ];
    if (imgData)
      imageContext.putImageData(imgData, 0, 0);
    draw();
  };

  resetNode.onclick = reset;

  // add point to canvas
  curveCanvasNode.onmousedown = function(e) {
    let x = e.offsetX;
    let y = 255 - e.offsetY;
    points = points.filter(function(p) {
      return !(x == p.x &&...