Computer Graphics & Visualization @ufrj.br
Published
Edited
Mar 14, 2021
5 forks
aspect = 4 / 3
height = width / aspect
draw = {
let ctx = canvas.getContext("2d");
let [r, s] = [radius, separation];
let seed = getSeed();
ctx.clearRect(0, 0, width, height);
ctx.lineWidth = linewidth;
for (
let y = r + linewidth, i = 0;
y + r < height;
i++, y += radius * (2 + s)
) {
setSeed(seed + i);
for (let x = r + linewidth; x + r < width; x += radius * (2 + s)) {
ctx.fillStyle = palette[~~(rand() * palette.length)];
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
}
}
setSeed(seed);
}
formatPalette = function(palette) {
let spans = html`<div style="display:inline-block;">`;
for (let color of palette)
spans.append(
html`<span style="color:${color};font-size:20px;letter-spacing:-3px;">■</span>`
);
return spans;
}
import { Range, Select, Radio } from "@observablehq/inputs"
import { colourlovers as palettes } from "@makio135/give-me-colors"
function setSeed(value) {
mutable seed = value;
}
function getSeed() {
return mutable seed;
}
mutable seed = Date.now()
rand = {
return function() {
var t = (mutable seed += 0x6D2B79F5);
t = Math.imul(t ^ (t >>> 15), t | 1);
t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};
}
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.
