1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
function getColors({x, y}, [{x: ax, y: ay}, {x: bx, y: by}, {x: cx, y: cy}]) {
if (x < 50 && y < 50) return {r: 255, g: 255, b: 255};
if (x > 150 && y < 50) return {r: 0, g: 0, b: 0};
var { abs, round, min } = Math,
area = abs((bx - ax) * (cy - ay) - (cx - ax) * (by - ay)),
R = abs((bx - x) * (cy - y) - (cx - x) * (by - y)),
G = abs((ax - x) * (cy - y) - (cx - x) * (ay - y)),
B = abs((ax - x) * (by - y) - (bx - x) * (ay - y));
// Normalize the areas to get the weights
const weights = {
r: round(255 * min(1, R / area)),
g: round(255 * min(1, G / area)),
b: round(255 * min(1, B / area))
};
return weights;
}
var updater = document.querySelector('.updater'),
color = {r: 0, g: 0, b: 0};
updater.addEventListener('mousemove', ({offsetX: x, offsetY: y}) => {
var {r, g, b} = color = getColors(
{x, y},
[{x: 0, y: 200}, {x: 200, y: 200}, {x: 100, y: 0}]
)
updater.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
});
updater.addEventListener('mousedown', () => {
console.log('Adding Color', color);
});
updater.addEventListener('mouseup', () => {
console.log('Stop Adding Color', color);
});
|
