From a6a71e448b7f88bbf2d00e23a53355777373d3fb Mon Sep 17 00:00:00 2001 From: Ruben Beltran del Rio Date: Thu, 20 Jul 2023 00:13:19 +0200 Subject: Add picker --- js/updater.js | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 js/updater.js (limited to 'js') diff --git a/js/updater.js b/js/updater.js new file mode 100644 index 0000000..91c447e --- /dev/null +++ b/js/updater.js @@ -0,0 +1,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); +}); -- cgit