Skip to content

Instantly share code, notes, and snippets.

@rozek
Last active Dec 6, 2019
Embed
What would you like to do?
Bangle.js: fills the display with a color disc
// fills the display of a Bangle.js with a color disc
Bangle.setLCDMode(); // use normal display mode
g.clear();
/**** HSVtoRGB (especially for Bangle.js and its RGB565 encoding) ****/
// see https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB
function HSVtoRGB (h, s, v) {
let c = v*s;
let k = h/60;
let x = c*(1 - Math.abs(k%2 - 1));
let r, g, b;
switch (true) {
case (k >=0) && (k <= 1): r = c; g = x; b = 0; break;
case (k > 1) && (k <= 2): r = x; g = c; b = 0; break;
case (k > 2) && (k <= 3): r = 0; g = c; b = x; break;
case (k > 3) && (k <= 4): r = 0; g = x; b = c; break;
case (k > 4) && (k <= 5): r = x; g = 0; b = c; break;
case (k > 5) && (k <= 6): r = c; g = 0; b = x; break;
}
let m = v-c;
return [
Math.round(31*(r+m)), Math.round(63*(g+m)), Math.round(31*(b+m))
];
}
/**** Rad2Deg ****/
function Rad2Deg (AngleInRad) {
let AngleInDeg = (180*AngleInRad/Math.PI) % 360;
return (AngleInDeg < 0 ? 360+AngleInDeg : AngleInDeg);
}
/**** draw color disc ****/
const Width = g.getWidth(), CenterX = Math.floor(Width)/2;
const Height = g.getHeight(), CenterY = Math.floor(Height)/2;
const Radius = Math.min(CenterX,CenterY), RadiusSquared = Radius*Radius;
const xMin = CenterX-Radius, xMax = CenterX+Radius;
const yMin = CenterY-Radius, yMax = CenterY+Radius;
const Value = 1.0;
for (let yOffset = -Radius; yOffset <= Radius; yOffset++) {
for (let xOffset = -Radius; xOffset <= Radius; xOffset++) {
let OffsetSquared = xOffset*xOffset + yOffset*yOffset;
if (OffsetSquared <= RadiusSquared) {
let Hue = Rad2Deg(Math.atan2(yOffset,xOffset));
let Saturation = Math.sqrt(OffsetSquared)/Radius;
let RGB = HSVtoRGB(Hue, Saturation, Value);
let Color = RGB[0] << 11 | RGB[1] << 5 | RGB[2];
g.setPixel(Radius+xOffset,Radius+yOffset, Color);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment