You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.5 KiB
113 lines
2.5 KiB
var canvasParams = {
|
|
h: 1000,
|
|
w: 2000,
|
|
lineWidth : 10,
|
|
handleRadius : 40
|
|
};
|
|
|
|
/**
|
|
* An IlluminationPoint is a point on the illumination curve.
|
|
* It both represents a point on the drawn canvas (via x and y getters)
|
|
* and a point on the "illumination curve space" (between 0 and 1, with u and v getters)
|
|
*/
|
|
class IlluminationPoint {
|
|
_u = 0;
|
|
_v = 0;
|
|
|
|
static fromCanvas(x, y) {
|
|
var ret = new IlluminationPoint();
|
|
|
|
ret._u = x/canvasParams.w;
|
|
ret._v = 1 - (y/canvasParams.h);
|
|
|
|
return ret;
|
|
}
|
|
|
|
static fromIllumination(u, v) {
|
|
var ret = new IlluminationPoint();
|
|
|
|
ret._u = u;
|
|
ret._v = v;
|
|
|
|
return ret;
|
|
}
|
|
|
|
get x() {
|
|
return this._u * canvasParams.w;
|
|
}
|
|
|
|
get y() {
|
|
return (1-this._v) * canvasParams.h;
|
|
}
|
|
|
|
get u() {
|
|
return this._u;
|
|
}
|
|
|
|
get v() {
|
|
return this._v;
|
|
}
|
|
}
|
|
|
|
class Drawer {
|
|
constructor(context) {
|
|
this.draw = context;
|
|
this.draw.lineWidth = canvasParams.lineWidth;
|
|
}
|
|
|
|
bezier(p1, c1, c2, p2) {
|
|
this.draw.strokeStyle = "black";
|
|
|
|
this.draw.beginPath();
|
|
this.draw.moveTo(p1.x, p1.y);
|
|
this.draw.bezierCurveTo(c1.x, c1.y, c2.x, c2.y, p2.x, p2.y);
|
|
this.draw.stroke();
|
|
}
|
|
|
|
line(p1, p2) {
|
|
this.draw.beginPath();
|
|
this.draw.moveTo(p1.x, p1.y);
|
|
this.draw.lineTo(p2.x, p2.y);
|
|
this.draw.stroke();
|
|
}
|
|
|
|
circle(c, r) {
|
|
this.draw.beginPath();
|
|
this.draw.arc(c.x, c.y, r, 0, 2*Math.PI);
|
|
this.draw.fill();
|
|
}
|
|
|
|
controlHandle(p, c) {
|
|
//line between p and c
|
|
this.draw.strokeStyle = "grey";
|
|
|
|
this.line(p, c);
|
|
this.circle(c, canvasParams.handleRadius);
|
|
}
|
|
|
|
drawCurve(p1, c1, c2, p2) {
|
|
this.draw.clearRect(0, 0, canvasParams.w, canvasParams.h);
|
|
|
|
this.bezier(p1, c1, c2, p2);
|
|
this.controlHandle(p1, c1);
|
|
this.controlHandle(p2, c2);
|
|
}
|
|
}
|
|
|
|
window.addEventListener("load", function() {
|
|
var canvas = document.getElementById("illuminationCurve");
|
|
canvasParams.h = canvas.height;
|
|
canvasParams.w = canvas.width;
|
|
|
|
var context = canvas.getContext("2d");
|
|
var drawer = new Drawer(context);
|
|
|
|
var p1 = IlluminationPoint.fromIllumination(0,0);
|
|
var p2 = IlluminationPoint.fromIllumination(1,1);
|
|
|
|
var c1 = IlluminationPoint.fromIllumination(0.2, 0);
|
|
var c2 = IlluminationPoint.fromIllumination(0.8, 1);
|
|
|
|
|
|
drawer.drawCurve(p1, c1, c2, p2);
|
|
});
|