forked: レイトレーシング練習

jsdoit.css

html {
    height:100%;
}

body {
    background: gray;
    width:100%;
    height:100%;
    overflow : hidden;
}

jsdoit.html

<canvas id="canvas" width="400" height="400"></canvas>

jsdoit.js

function innerProduct(p, q) {
    return p[0]*q[0] + p[1]*q[1] + p[2]*q[2];
}

function norm(p) {
    return Math.sqrt(innerProduct(p, p));
}

function cos(v, w) {
    return innerProduct(v, w)/norm(v)/norm(w);
}

function diffuseReflection(normal, light) {
    return Math.max(-cos(light, normal), 0);
}

function specularReflection(normal, light, eye, n) {
    var m = -2 * innerProduct(light,normal)/innerProduct(normal,normal)
    var light1 = [];
    light1[0] = light[0] + normal[0] * m;
    light1[1] = light[1] + normal[1] * m;
    light1[2] = light[2] + normal[2] * m;

    var c = -cos(light1, eye);
    if (c < 0) {
        return 0;
    }

    return Math.pow(c, n);
}



var r = 200;
var x0 = 200;
var y0 = 200;


function updateData(data, x, y, value) {
    var x1 = x0 + x; // 右が大きくなる方向
    var y1 = y0 - y; // 上が大きくなる方向
    var i = (y1 * canvas.width + x1) * 4;

    var d0 = data[i+0];
    var d1 = data[i+1];
    var d2 = data[i+2];
    var d3 = data[i+3];
    
    data[i+0] = d0/2 + value/2*255;
    data[i+1] = d1/2 + value/2*255;
    data[i+2] = d2/2 + value/2*255;
    data[i+3] = d3;
}

function init(canvas, img) {
    var context = canvas.getContext("2d");

    context.drawImage(img, 0, 0);

    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    var data = imageData.data;

    for (var y = -r; y < r; y += 1) {
        for (var x = -r; x < r; x += 1) {
            var l1 = 10;
            var l2 = 50;
            var normal;
            if (x*x + y*y < l1*l1) {
                normal = [0,0,1];
            } else if (x*x + y*y < (l1+l2)*(l1+l2)) {
                var l = Math.sqrt(x*x + y*y);
                var x2 = x / l;
                var y2 = y / l;
                var p = -Math.pow(Math.sin((l-l1)/l2*Math.PI), 5);
                normal = [x2*p,y2*p,(1-p)];
            } else {
                normal = [0,0,1];
            }

            var light = [-1,-1,-1];
            var eye = [0, 0, -1];

            //var l = Math.sqrt(x*x + y*y);
            //var z = a * Math.log(l / a);
                
            //var normal = [-x*a,-y*a,l];
            
            var c0 = 1;
            var c1 = diffuseReflection(normal, light);
            var c2 = specularReflection(normal, light, eye, 2);
            
            //var c = z > 0 ? 1 : 1 + z/a;
            //updateData(data, x, y, (c1 + c2)/2);
            updateData(data, x, y, (c1 + c2)/2);
        }
    }

    context.putImageData(imageData, 0, 0);
}

$(function() {
    var obj = $('#canvas');

    var img = new Image();
    img.onload = function() { init(obj.get(0), img); };
    img.src = "http://jsrun.it/assets/x/M/T/p/xMTph.png";
});