Public
Edited
Feb 27
4 stars
sampleColor = function (i) {
let r =
red.offset +
red.amplitude * Math.sin((red.frequency / 8) * i + red.phase * Math.PI * 2);
let g =
green.offset +
green.amplitude *
Math.sin((green.frequency / 8) * i + green.phase * Math.PI * 2);
let b =
blue.offset +
blue.amplitude *
Math.sin((blue.frequency / 8) * i + blue.phase * Math.PI * 2);
return [
clamp(Math.round(r * 255) & ~0b111, 0, 255),
clamp(Math.round(g * 255) & ~0b11, 0, 255),
clamp(Math.round(b * 255) & ~0b111, 0, 255)
];
}
241 & ~0b111
rgbToHex([255, 200, 0])
swatch565 = function (x, y) {
let red = Math.floor(x / 32) + Math.floor(y / 64) * 8;
let blue = Math.floor(x) % 32;
let green = Math.floor(y) % 64;
return rgbToHex([red * 8, green * 4, blue * 8]);
}
from565toXY = function (arr) {
let r = arr[0];
let g = arr[1];
let b = arr[2];
let x = r + b;
let y = r + g;
return [x, y];
}
viewof redtest = Inputs.range([0, 255], { label: "Y", step: 1 })
getX = function (n) {
return (Math.floor(n / 8) % 8) * 32;
// return Math.floor(n / 64) * 64;
}
getY = function (n) {
// return (Math.floor(n / 32) % 8) * 32;
return Math.floor(n / 64) * 64;
}
[getX(redtest), getY(redtest)]
canvas1 = {
const context = DOM.context2d(width, 200);
context.fillStyle = swatch565(128, redtest);
context.fillRect(0, 0, width, 200);
return context.canvas;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
