Published
Edited
1 fork
6 stars
Ueda's AttractorJacobi Elliptic Functions in the Complex PlaneSDF Points with reglClifford and de Jong AttractorsDrawing Instanced Lines with reglInstanced Line RenderingLawson's Klein BottleInteractive Multi-scale Turing PatternsSelecting the Right Opacity for 2D Point CloudsAdaptive Contouring in Fragment ShadersBaker's MapFake Transparency for 3D SurfacesGPU BoidsDouble Compound Pendulums3D Reaction-DiffusionToiletpaperfullerenes and Charmin NanotubesQuasicrystalsObservable + regl2D (Non-physical) N-body Gravity with Poisson's EquationPeriodic Planar Three-Body OrbitsQuick (miterless) Lines in WebGLSpin WebGLicosphereregl-cameraFinding Roots in the Complex Planeglsl-complexglsl-complex-auto-differentiationDomain Coloring with Adaptive Contouringgl-mat3gl-mat4gl-vec4gl-quatgl-mat2gl-vec3gl-vec2Instanced WebGL Circlesregl-toolsDomain Coloring for Complex FunctionsContour Plots with regl Observable PlotDrawing indexed mesh data as screen-space normals without duplicating dataGPUs, FFTs, and the 1-D Schrödinger Equation
Mathematical Easter Egg Coloring
Also listed in…
More or less finished notebooks
drawEgg = regl({
vert: `
precision highp float;
attribute vec3 aPosition, aNormal;
uniform mat4 projectionView;
uniform float time;
varying vec3 position, normal;
void main () {
position = aPosition;
normal = aNormal;
gl_Position = projectionView * vec4(position, 1);
}
`,
frag: `
precision highp float;
varying vec3 position, normal;
uniform vec3 eye; // Position of the camera, for use in lighting
uniform float time;
vec3 applyGamma (vec3 c, float gamma) {
return vec3(pow(c.r, gamma), pow(c.g, gamma), pow(c.b, gamma));
}
void main () {
// Define your coloring function here!
vec3 color = vec3(
0.5 +
0.3 * cos(position * 5.0) *
sin(position * 10.0 - 4.0 * time)
);
gl_FragColor = vec4(applyGamma(color, (1.0 / 2.2)), 1);
}
`,
attributes: {
aPosition: regl.prop('positions'),
aNormal: regl.prop('normals')
},
cull: { enable: true, face: 'back' },
elements: regl.prop('cells')
})
function egg(x, y, z) {
return y * y + Math.pow(1.2, y * 2) * 1.9 * (x * x + z * z) - 1;
}
domain = [[-1, 1], [-1, 1], [-1, 1]]
resolution = [100, 100, 100]
mesh = {
// Precompute the offset and slope so that converting grid coordinates to scalars is a bit faster.
const b = domain.map((b, i) => [b[0], (b[1] - b[0]) / (resolution[i] - 1)]);
// Use ndarray-proxy to create an ndarray that lazily returns the values of the function on a grid
const gridValues = ndarrayProxy(resolution, (i, j, k) =>
egg(b[0][0] + i * b[0][1], b[1][0] + j * b[1][1], b[2][0] + k * b[2][1])
);
const mesh = surfaceNets(gridValues);
// The positions in the mesh above are all in terms of grid coordinates.
// We scale them to our domain.
for (var i = 0; i < mesh.positions.length; i++) {
const p = mesh.positions[i];
p[0] = b[0][0] + b[0][1] * p[0];
p[1] = b[1][0] + b[1][1] * p[1];
p[2] = b[2][0] + b[2][1] * p[2];
}
mesh.normals = angleNormals(mesh.cells, mesh.positions);
return mesh;
}
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.