Computer Graphics & Visualization @ufrj.br
Physical animation with shape matching3D Apollonian Sphere PackingsRandom space-filling curvesSimple Adaptive Mosaic EffectsHexagonal hierarchical cartogram for BrazilPlatonic Solids PlaygroundDynadrawVertex ListsLeast Square MeshesMocap Projection BrowserArchimedean tilingsShape matching2D GJK and EPA algorithmsOmohundro balltree construction algorithmsCatmull Clark SubdivisionThinning
Voronoi mosaics
voronoiCenters = function (w,h,cellSize,jitter) {
let dx = cellSize*2, dy = cellSize/Math.sqrt(3);
let nx = Math.ceil(w/dx), ny=Math.ceil(h/dy)
let points = [];
let flag = false;
for (let y = cellSize; y < h - cellSize; y += dy) {
let x0 = flag ? cellSize : dx;
flag = !flag;
for (let x = x0; x < w - cellSize; x += dx) {
points.push ([x+Math.random()*jitter-jitter/2,y+Math.random()*jitter-jitter/2])
}
}
return points
}
voronoiCells = function (w,h,points) {
let delaunay = d3.Delaunay.from(points)
let voronoi = delaunay.voronoi([-1, -1, w + 1, h + 1])
return points.map((d, i) => [d, voronoi.cellPolygon(i)]);
}
voronoiImage = function (w, h, cells, getPixel, strokeColor = null) {
let ctx = DOM.context2d(w,h,1)
for (let [center,poly] of cells) {
if (!poly) continue;
let [cx,cy] = center;
let {r,g,b,a} = getPixel(~~cx,~~cy);
ctx.fillStyle = ctx.strokeStyle = `rgb(${r},${g},${b})`;
let [x,y] = poly[0];
ctx.beginPath()
ctx.moveTo (x,y)
for (let [x,y] of poly) {
ctx.lineTo(x,y)
}
ctx.fill()
if (strokeColor) ctx.strokeStyle = strokeColor;
ctx.stroke()
}
return ctx.canvas
}
voronoiImageGL = function (w, h, cells, getPixel = null) {
let canvas = DOM.canvas(w,h);
let gl = canvas.getContext('webgl', {antialias:getPixel != null, preserveDrawingBuffer: true});
let regl = createRegl (gl);
let posBuffer = [], colorBuffer = [];
let i = 0;
for (let [center,poly] of cells) {
if (!poly) continue;
let [cx,cy] = center;
let {r,g,b} = getPixel ? getPixel(~~cx,~~cy) : {r : i%256, g:~~(i/256), b: 255};
let [v0,v1] = [poly[0],poly[1]]
for (let v2 of poly.slice(2)) {
for (let [x,y] of [v0,v1,v2]) {
posBuffer.push(x/w*2-1, 1-y/h*2)
colorBuffer.push(r/255,g/255,b/255)
}
v1 = v2;
}
i++;
}
let draw = regl({
frag: `
precision mediump float;
varying vec3 vcolor;
void main () {
gl_FragColor = vec4(vcolor,1.0);
}`,
vert: `
attribute vec2 position;
attribute vec3 color;
varying vec3 vcolor;
void main () {
gl_Position = vec4(position, 0, 1);
vcolor = color;
}`,
attributes: {
position: posBuffer,
color: colorBuffer
},
count: posBuffer.length/2
});
regl.clear({
color: [0, 0, 0, 1]
})
draw()
return canvas
}
optimizeCenters = function (points,imgdata,steps = 1) {
let data = imgdata.data;
let [w,h] = [imgdata.width,imgdata.height]
//let points = voronoiCenters(w,h,cellSize,jitter)
for (let step = 0; step < steps; step++) {
let cells = voronoiCells(w,h,points)
let vimage = voronoiImageGL(w,h,cells);
let vdata = imageData(vimage).data;
function index(x,y) { return (y*w+x)*4; }
function center(x,y) {
let i = index(x,y);
return vdata[i]+vdata[i+1]*256;
}
function getPixel(x,y) {
let i = index(~~x,~~y);
return [data[i],data[i+1],data[i+1]]
}
function pixelError (rgb1,rgb2) {
return (rgb1[0]-rgb2[0])**2+(rgb1[1]-rgb2[1])**2+(rgb1[2]-rgb2[2])**2
}
let error = points.map (p => ({ rgb : getPixel(p[0],p[1]), dir : [0,0,0,0,0,0,0,0] }));
let totalError = 0;
let dir = [[1,0],[-1,0],[1,1],[-1,-1],[0,1],[0,-1],[1,-1],[-1,1]];
for (let x = 1; x+1 < w; x++) {
for (let y = 1; y+1 < h; y++) {
let c = center(x,y);
let rgb = getPixel(x,y);
let curError = pixelError (error[c].rgb, rgb);
totalError += curError;
let count = 0;
for (let idir = 0; idir < 8; idir++) {
let [dx,dy] = dir [idir];
let neighbor = center(x+dx,y+dy);
let opposite = center(x-dx,y-dy);
if (neighbor == opposite) continue;
let dError = pixelError(error[opposite].rgb,rgb)-curError
error[neighbor].dir[idir] += dError
error[opposite].dir[idir] += dError
}
}
}
for (let i = 0; i < points.length; i++) {
let bestdir = -1;
let besterror = 0;
let errdir = error[i].dir;
for (let j = 0; j < 8; j++) {
if (errdir [j] < besterror) {
bestdir = j;
besterror = errdir[j]
}
}
if (bestdir >= 0) {
points [i][0] = Math.min(w-1, Math.max(0, points [i][0] + dir[bestdir][0]));
points [i][1] = Math.min(h-1, Math.max(0, points [i][1] + dir[bestdir][1]));
}
}
}
return points;
}
async function randomImage(sizeOrWidth = null, height = sizeOrWidth, term='flower') {
const size = sizeOrWidth ? `/${+sizeOrWidth}x${+height}` : '';
return (await fetch(`https://source.unsplash.com/${+sizeOrWidth}x${+height}/?${term}`, {
method: 'head',
cache: 'no-store',
})).url;
}
defaultImage = (
{"640x480": await FileAttachment("640x480.jpg").image(),
"800x600": await FileAttachment("800x600.jpg").image(),
"1024x768": await FileAttachment("1024x768.jpg").image(),
}
)
loadImage = {
return function loadImage(src) {
const img = DOM.element('img', {crossorigin: 'anonymous', src});
return img.decode().then(() => img);
};
}
function imageData (image) {
let [w,h] = [image.width, image.height];
let ctx = DOM.context2d(w,h,1)
ctx.imageSmoothingEnabled = false;
ctx.drawImage(image,0,0)
return ctx.getImageData (0,0,w,h)
}
d3 = require("d3@6")
createRegl = require('regl@1.4.2/dist/regl.js')
import {select,number,radio,text,checkbox,button,color} from "@jashkenas/inputs"
import {combo} from "@esperanc/aggregated-inputs"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.