JSFiddle - React, Tailwind, and code Playground
by Darby Rathbone
HTML
<canvas id="canvas" width=128 height=128></canvas>
CSS
canvas{
width:100%;
height:100%;
}
JavaScript
var Vector = (function () {
function Vector(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
}
Vector.times = function (k, v) {
return new Vector(k * v.x, k * v.y, k * v.z);
};
Vector.minus = function (v1, v2) {
return new Vector(v1.x - v2.x, v1.y - v2.y, v1.z - v2.z);
};
Vector.plus = function (v1, v2) {
return new Vector(v1.x + v2.x, v1.y + v2.y, v1.z + v2.z);
};
Vector.dot = function (v1, v2) {
return v1.x * v2.x + v1.y * v2.y + v1.z * v2.z;
};
Vector.mag = function (v) {
return Math.sqrt(v.x * v.x + v.y * v.y + v.z * v.z);
};
Vector.norm = function (v) {
var mag = Vector.mag(v);
var div = (mag === 0) ? Infinity : 1.0 / mag;
return Vector.times(div, v);
};
Vector.cross = function (v1, v2) {
return new Vector(v1.y * v2.z - v1.z * v2.y, v1.z * v2.x - v1.x * v2.z, v1.x * v2.y - v1.y * v2.x);
};
return Vector;
})();
var Color = (function () {
function Color(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}
Color.scale = function (k, v) {
return new Color(k * v.r, k * v.g, k * v.b);
};
Color.plus = function (v1, v2) {
return new Color(v1.r + v2.r, v1.g + v2.g, v1.b + v2.b);
};
Color.times = function (v1, v2) {
return new Color(v1.r * v2.r, v1.g * v2.g, v1.b * v2.b);
};
Color.toDrawingColor = function (c) {
var legalize = function (d) {
return d > 1 ? 1 : d;
};
return {
r: Math.floor(legalize(c.r) * 255),
g: Math.floor(legalize(c.g) * 255),
b: Math.floor(legalize(c.b) * 255)
};
};
Color.blue = new Color(0,0,1.0);
Color.white = new Color(1.0, 1.0, 1.0);
Color.grey = new Color(0.5, 0.5, 0.5);
Color.black = new Color(0.0, 0.0, 0.0);
Color.background = Color.black;
Color.defaultColor = Color.black;
return...