Pasted

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>distance estimation</title>
    </head>
    <body>
        <canvas id="canvas"></canvas>
<script>
//distance from a line segment
//this also can be a <canvas> pixel shader boilerplate
 
//plot a pixel on arbitrary image data
//image = ctx.createImageData...
//color = rgba byte array
function plot(image, x, y, color) {
    var inx = (y * image.width * 4) + (x * 4);
    image.data[inx]   = color[0];
    image.data[++inx] = color[1];
    image.data[++inx] = color[2];
    image.data[++inx] = color[3];
    return;
}
 
function sqr(x) {
    return x * x;
}
 
//dist between two coords
function dist(v, w) {
    return Math.sqrt(sqr(v.x - w.x) + sqr(v.y - w.y));
}
 
//clamp val to between min and max
function clamp(val, min, max) {
    return Math.min(Math.max(val, min), max);
}
 
//lerp interp is 0..1
function lerp(binterp, a, b) {
    binterp = clamp(binterp, 0, 1);
    ainterp = 1 - binterp;
    return a * ainterp + b * binterp;
}
 
//like an advanced gray(): instead of mapping a val from black to white,
//colormap() maps it between any two colors of your choice
function colormap(val, a, b) {
    val = clamp(val, 0, 255) / 255;
    return [lerp(val, a[0], b[0]),
        lerp(val, a[1], b[1]),
        lerp(val, a[2], b[2]),
        lerp(val, a[3], b[3])];
}
 
//make gray color from byte
function gray(v) {
    v = clamp(v, 0, 0xff);
    return [v, v, v, 0xff];
}
 
//PUT UR CODE HERE!!!!
//all the arguments of points that contain an x and y coord
//access w/ p.x & p.y etc...
//this must return a color: an array in the format
//[red, green, blue, alpha] where each number is between 0 and 0xff (255)
//the gray() function above converts a value from 0 to 0xff to a gray color
function estimateDistance(p, v, w) {
    period = (dist(p, w) / 20) + 15;
    return gray(0xff
        * Math.sin(p.x / period)
        * Math.cos(p.y / period)
        / (dist(p, v) / 100));
}
 
(function() {
    //initialize cvs, ctx, etc
    var cvs = document.getElementById('canvas'),
    ctx = cvs.getContext('2d'),
    frameWidth = 650,
    frameHeight = 650,
    time = 0;
 
    cvs.setAttribute('height', frameHeight);
    cvs.setAttribute('width', frameWidth);
 
    var render = function(time) {
    //time is waaaaay too big, get it a bit smaller
    time /= 200;
    //set up the end points, make them wiggle with sin/cos
    var v = {
        x: 80  + 15 * Math.cos(time),
        y: 120 + 15 * Math.sin(time)
    };
    //offset so both coordinates aren't on the same cycle
    time += 1;
    var w = {
        x: 375 + 35 * Math.cos(time),
        y: 400 + 35 * Math.sin(time)
    };
 
    var p = {
        x: 0,
        y: 0
    };
 
    //create pixel array
    var image = ctx.createImageData(frameWidth, frameHeight);
    //iterate through the image
    for(var x = 0; x < frameWidth; x++) {
        for(var y = 0; y < frameHeight; y++) {
            p.x = x;
            p.y = y;
            //plot 100/distance as the brightness
            plot(image, x, y, estimateDistance(p, v, w));
            }
        }
    //push array to canvas
    ctx.putImageData(image, 0, 0);
    //update time, push a frame, call render() again
    time = window.requestAnimationFrame(render);
    };
    //first call
    render.call();
}());
</script>
    </body>
</html>