import {createCanvas} from "@observablehq/stdlib"
viewof canvas = createCanvas(800, 500)
canvasContext = {
const ctx = canvas.getContext("2d");
const w = canvas.width, h = canvas.height;
const img = ctx.createImageData(w, h);
for (let x = 0; x < w; x++) {
for (let y = 0; y < h; y++) {
const index = (x + y * w) * 4;
const hue = 180 + 80 * Math.sin(x * 0.02 + y * 0.03); // Wavy hue shift
const [r, g, b] = hslToRgb(hue / 360, 1, 0.5);
img.data[index] = r;
img.data[index + 1] = g;
img.data[index + 2] = b;
img.data[index + 3] = 255;
}
}
ctx.putImageData(img, 0, 0);
return ctx;
}
function hslToRgb(h, s, l) {
let r, g, b;
if (s == 0){
r = g = b = l; // achromatic
} else {
const hue2rgb = function(p, q, t){
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t;
if(t < 1/2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
return [r * 255, g * 255, b * 255];
}
import {p5, ParticleSystem} from "@tmcw/p5"
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.
