Computer Graphics & Visualization @ufrj.br
Hobby curvesNoise plane partitionRandom shapes in a gridDeformation with RBFsShape-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>Animação com bolasCheap mandalaTruchet Archimedean TilingsWallpaper GroupsSplotchifyColor palettes from one colorFlow fieldsFlow field variationsKinetic typographyDrifting squaresSketch MandalaGlobal mode p5Rosace 3Platonic Solids Playground
Spirograph
class Spirograph {
constructor (center,geom=[[100,1]]) {
// A spirograph centered at center. Gears are defined by the geom array. Each gear is a pair consisting
// of a radius and angular velocity in degrees per step
this.c = center;
this.hands = geom.map(rv => ({radius:rv[0], vel:rv[1], angle:0}));
}
step(dt = 1) {
// Move gears one step. Dt is a speeding up/slowing down factor
for (let h of this.hands) {
h.angle += h.vel*dt;
}
}
get pos () {
// Obtain the position of the "pen", i.e., the position of the last gear in the chain
let {x,y} = this.c;
for (let {radius,vel,angle} of this.hands) {
angle *= Math.PI/180;
x += radius*Math.cos(angle);
y += radius*Math.sin(angle);
}
return ({x:x,y:y});
}
}
viewof clearScreenAlpha = new View(0.5)
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.