angleMode = "degrees";

var maxD = dist(0, 0, width/2, height/2);

var px = 150;
var py = 100;
var mx = -6;
var my = 1;
var vx = mx*mx;
var vy = my*my;

var mx = 0;
var my = 0;
var vx = mx*mx;
var vy = my*my;

frameRate(30);
var alph = 5;
var beta1 = 0.9;
var beta2 = 0.99;

// L = ((x-200)^2 + (y-200)^2)^0.5
// dL/dX = 0.5 * (((x-200)^2 + (y-200)^2) ^ -0.5) * 2 * (x-200)
//       = (x - 200) / sqrt((x-200)^2 + (y-200)^2)
//       = (x - 200) / dist(x, y, 200, 200)
// dL/dY = (y - 200) / dist(x, y, 200, 200)

var draw = function() {
    background(255, 255, 255);
    
    
    for (var y=0; y<=height; y += 20) {
        for (var x=0; x<=width; x += 20) {
            var d = dist(x, y, width/2, height/2);
            strokeWeight(2);
            stroke(map(d, 0, maxD, 225, 0));
            point(x, y);
            
            var d = dist(x, y, width/2, height/2);
            if (d > 0.1) {
                strokeWeight(0.5);
                var dLdX = (x - width/2) / d;
                var dLdY = (y - height/2) / d;
                line(x, y, x - dLdX * 6, y - dLdY * 6);
                var theta = atan2(-dLdY, -dLdX);
                
                var mag = dist(0, 0, dLdX*6, dLdY*6);
                line(
                    x - dLdX*6,
                    y - dLdY*6,
                    x + cos(theta+45) * mag/2,
                    y + sin(theta+45) * mag/2
                );
            }
        }
    }
    
    var d = dist(px, py, width/2, height/2);
    var dLdX = (px - width/2) / d;
    var dLdY = (py - height/2) / d;

    strokeWeight(0.5);
    fill(255, 0, 0);
    ellipse(px, py, 4, 4);
    strokeWeight(1);
    stroke(35, 176, 84);
    line(px, py, px-mx*15, py-my*15);
    stroke(62, 36, 255);
    line(px, py, px-dLdX*15, py-dLdY*15);
    
    // stroke(0, 0, 0);
    // line(px, py, px-vx*3, py-vy*3);

    // m ← β1m + (1 − β1)∇θJminibatch(θ)
    // θ ← θ − αm
    // mx = beta1 * mx + (1-beta1) * dLdX;
    // my = beta1 * my + (1-beta1) * dLdY;
    // px = px - alph * mx;
    // py = py - alph * my;
    
    // m ← β1m + (1 − β1)∇θJminibatch(θ)
    // v ← β2v + (1 − β2)(∇θ Jminibatch(θ) • ∇θ Jminibatch(θ))
    // θ ← θ − α • m/ √ v
    mx = beta1 * mx + (1-beta1) * dLdX;
    my = beta1 * my + (1-beta1) * dLdY;
    vx = beta2 * vx + (1-beta2) * dLdX * dLdX;
    vy = beta2 * vy + (1-beta2) * dLdY * dLdY;
    px = px - alph * mx / sqrt(vx);
    py = py - alph * my / sqrt(vy);

    // if (dist(px, py, width/2, height/2) < 1) {
    //     noLoop();
    // }
};