Computer Graphics & Visualization @ufrj.br
Public
Edited
May 29, 2020
2 forks
Importers
12 stars
Hobby curvesNoise plane partitionRandom shapes in a gridShape-conforming fibersSynthetic texture algorithmsSimplex noise exerciserNoise LoopsThe Infinity ToyApollonian gasket construction by inversionCircle inversion fractals3D Apollonian Sphere PackingsGPU-IOColor HarmoniesRandom space-filling curvesStyle transfer with magenta-js10 PRINT with SVG and <use>SpirographAnimação com bolasCheap mandalaTruchet Archimedean TilingsWallpaper GroupsSplotchifyColor palettes from one colorFlow fieldsFlow field variationsKinetic typographyDrifting squaresSketch MandalaGlobal mode p5Rosace 3Platonic Solids Playground
Deformation with RBFs
controlPoints = ({
src: [[w*0.2,w*0.2],[w*0.8,w*0.2],[w*0.8,w*0.8],[w*0.2,w*0.8]],
dst: [[w*0.2,w*0.2],[w*0.8,w*0.2],[w*0.8,w*0.8],[w*0.2,w*0.8]]
})
drawgrid = function(ctx, grid, f) {
for (let i = 0; i+1 < grid.length; i++) {
for (let j = 0; j+1 < grid[i].length; j++) {
let p = [grid[i][j],grid[i][j+1],grid[i+1][j+1],grid[i+1][j]];
let q = p.map(f);
ctx.fillStyle = (i+j)%2 ? '#CCC' : '#888';
ctx.beginPath();
ctx.moveTo(q[0][0],q[0][1]);
ctx.lineTo(q[1][0],q[1][1]);
ctx.lineTo(q[2][0],q[2][1]);
ctx.lineTo(q[3][0],q[3][1]);
ctx.fill();
}
}
}
drawpoints = function (ctx, points, radius = 8, color = 'red') {
ctx.fillStyle = color;
for (let [x,y] of points) {
ctx.beginPath();
ctx.arc (x,y, radius, 0, 2 * Math.PI, false);
ctx.fill();
}
}
grid = {
let grid = [];
let d = 32;
let s = w;
for (let x = 0, i = 0; x <= s; i++,x+=d) {
grid[i] = [];
for (let y = 0, j = 0; y <= s; j++,y+=d) {
grid [i][j] = [x,y]
}
}
return grid;
}
import { select } from "@jashkenas/inputs"
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.
