Computer Graphics & Visualization @ufrj.br
Public
Edited
Nov 8, 2023
Importers
4 stars
viewof pal = paletteBuilder({
startColor: "brown",
size: 250,
ncolors: 5,
tension: 0.3,
slSpacing: 0.3,
hueSpacing: 20
})
function peelTransform(start, finish, options = {}) {
const { turns = 2 } = options;
const rand = options.rand || makeRandFunction(Math.random());
const rotAxis = options.rotAxis || [rand(-1, 1), rand(-1, 1), rand(-1, 1)];
vec3.normalize(rotAxis, rotAxis);
const p0 = [...start, 0],
p1 = [...finish, 30];
return (t) => {
let m = mat4.create();
let dest = vec3.lerp([], p0, p1, t);
mat4.translate(m, m, dest);
let ang = t * turns * Math.PI * 2;
mat4.rotate(m, m, ang, rotAxis);
return DOMMatrix.fromFloat32Array(
mat4.translate(m, m, [-p0[0], -p0[1], 0])
);
};
}
function rightHanded(domMatrix) {
return (
vec2.cross([], [domMatrix.a, domMatrix.b], [domMatrix.c, domMatrix.d])[2] >
0
);
}
function backColor(color) {
let hsl = d3.hsl(color);
let l = Math.max(0.1, hsl.l - 0.5); // hsl.l < 0.5 ? hsl.l + 0.5 : hsl.l - 0.45;
return hsl.copy({ l }).formatRgb();
}
import { paletteBuilder } from "@esperanc/color-palettes-from-one-color"
import { mat3, mat4, mat2d, vec2, vec3 } from "@esperanc/vec2-utils"
import {
shapeFunc,
fillWithSquares,
getRandomPalette,
probabilityPick
} from "@esperanc/random-shapes-in-a-grid"
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.
