p5 - Linear Regression

by stevenkaspar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>

JavaScript

var data = [];

var width  = 400;
var height = 400;

var m = 1;
var b = 0;
  
var s = function(p) {

  p.setup = function() {
    p.createCanvas(width, height);
  }

  function gradientDescent() {
    var learning_rate = 0.05;
    for (var i = 0; i < data.length; i++) {
      var x = data[i].x;
      var y = data[i].y;
      var guess = m * x + b;
      var error = y - guess;
      m = m + error * x * learning_rate;
      b = b + error * learning_rate;
    }



  }

  function drawLine() {
    var x1 = 0;
    var y1 = m * x1 + b;
    var x2 = 1;
    var y2 = m * x2 + b;

    x1 = p.map(x1, 0, 1, 0, width);
    y1 = p.map(y1, 0, 1, height, 0);
    x2 = p.map(x2, 0, 1, 0, width);
    y2 = p.map(y2, 0, 1, height, 0);

    p.stroke(255);
    p.strokeWeight(2);
    p.line(x1, y1, x2, y2);
		
    console.log('drawLine', x1, y1, x2, y2);

  }


  p.mousePressed = function() {
    var x = p.map(p.mouseX, 0, width, 0, 1);
    var y = p.map(p.mouseY, 0, height, 1, 0);
    var point = p.createVector(x, y);
    data.push(point);
  }

  p.draw = function() {
    p.background(51);
    for (var i = 0; i < data.length; i++) {
      var x = p.map(data[i].x, 0, 1, 0, width);
      var y = p.map(data[i].y, 0, 1, height, 0);
      p.fill(255);
      p.stroke(255);
      p.ellipse(x, y, 8, 8);
    }

    if (data.length > 1) {
      gradientDescent();
      drawLine();
    }

  }
}

var myp5 = new p5(s);