JS Temperature Map
by Mert Kalender
HTML
<canvas id='cns0' width='500' height='500' style="height: 500px; width: 500px;"></canvas>
<canvas id='cns1' width='500' height='500' style="height: 500px; width: 500px;"></canvas>
<canvas id='cns2' width='500' height='500' style="height: 500px; width: 500px;"></canvas>
CSS
canvas { width: 100%; height: 100% }
JavaScript
/*global console*/
/*jslint bitwise: true */
var TemperatureMap = function (ctx) {
'use strict';
this.ctx = ctx;
this.points = [];
this.polygon = [];
this.limits = {
xMin: 0,
xMax: 0,
yMin: 0,
yMax: 0
};
};
TemperatureMap.crossProduct = function (o, a, b) {
'use strict';
return (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x);
};
TemperatureMap.pointInPolygon = function (point, vs) {
'use strict';
var x = point.x,
y = point.y,
inside = false,
i = 0,
j = 0,
xi = 0,
xj = 0,
yi = 0,
yj = 0,
intersect = false;
j = vs.length - 1;
for (i = 0; i < vs.length; i = i + 1) {
xi = vs[i].x;
yi = vs[i].y;
xj = vs[j].x;
yj = vs[j].y;
intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
if (intersect) { inside = !inside; }
j = i;
}
return inside;
};
TemperatureMap.squareDistance = function (p0, p1) {
'use strict';
var x = p0.x - p1.x,
y = p0.y - p1.y;
return x * x + y * y;
};
TemperatureMap.hslToRgb = function (h, s, l) {
'use strict';
var r, g, b, hue2rgb, q, p;
if (s === 0) {
r = g = b = l;
} else {
hue2rgb = function hue2rgb(p, q, t) {
if (t < 0) {
t += 1;
} else if (t > 1) {
t -= 1;
}
if (t >= 0.66) {
return p;
} else if (t >= 0.5) {
return p + (q - p) * (0.66 - t) * 6;
} else if (t >= 0.33) {
return q;
} else {
return p + (q - p) * 6 * t;
}
};
q = l < 0.5 ? l * (1 + s) : l + s - l * s;
p = 2 * l - q;
r = hue2rgb(p, q, h + 0.33);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 0.33);
}
return [(r * 255) | 0, (g * 255) | 0,...