canvas = DOM.canvas(width, 500)
{
now;
if (!paused && timer.elapsed() > 20 || onstart[0]) {
onstart[0] = false;
theta[0] += theta[1];
timer.update();
let camera = reglCamera(regl, {
center: [0, 0, 0],
theta: theta[0], //Math.PI * 0.06,
phi: phi * Math.PI,
distance: 30.0,
damping: 1,
noScroll: true,
renderOnDirty: false
});
camera(function () {
regl.clear({ color: [0, 0.1, 0.26, 1] });
drawModel();
});
}
}
onstart = [true]
reglCamera = require("https://bundle.run/regl-camera@2.1.1")
drawModel = regl({
frag: `
#extension GL_OES_standard_derivatives : enable
precision mediump float;
varying vec3 vnormal;
varying vec3 vposition;
// https://github.com/rreusser/glsl-solid-wireframe
float wireframe (vec3 parameter, float width, float feather) {
float w1 = width - feather * 0.5;
vec3 d = fwidth(parameter);
vec3 looped = 0.5 - abs(mod(parameter, 1.0) - 0.5);
vec3 a3 = smoothstep(d * w1, d * (w1 + feather), looped);
return min(a3.x, a3.z);
return min(min(a3.x, a3.y), a3.z);
}
void main () {
float m = wireframe(vposition * 2.0, 0.5, 2.0);
gl_FragColor = mix(vec4(1.0), vec4(abs(vnormal), 0.6), m);
}`,
vert: `
precision mediump float;
uniform mat4 projection, view;
attribute vec3 position, normal;
varying vec3 vnormal;
varying vec3 vposition;
void main () {
vnormal = normal;
vposition = position;
gl_Position = projection * view * vec4(position, 1.0);;
}`,
attributes: {
position: model.positions,
normal: normals(model.cells, model.positions)
},
blend: {
enable: true,
func: {
srcRGB: "src alpha",
srcAlpha: 1,
dstRGB: "one minus src alpha",
dstAlpha: 1
},
equation: {
rgb: "add",
alpha: "add"
}
},
elements: model.cells
})
model = reSurface
normals = require('https://bundle.run/angle-normals@1.0.0')
regl = (await require("regl"))({
canvas: canvas,
pixelRatio: 2,
extensions: ["oes_standard_derivatives"]
})
reSurface = (() => {
const reScaler = d3.scaleLinear().domain([0, reNum]).range([-reMax, reMax]);
const imScaler = d3.scaleLinear().domain([0, imNum]).range([-imMax, imMax]);
const vertex = [];
for (let j = 0; j < reNum; j++) {
for (let k = 0; k < imNum; k++) {
let re = reScaler(j);
let im = imScaler(k);
let c = cosh([re, im]);
vertex.push([re, c[0], im]);
}
}
const meshes = [];
for (let j = 0; j < reNum - 1; j++) {
for (let k = 0; k < imNum - 1; k++) {
meshes.push([k + (j + 1) * reNum, k + j * reNum, k + 1 + j * reNum]);
meshes.push([
k + 1 + (j + 1) * reNum,
k + (j + 1) * reNum,
k + 1 + j * reNum
]);
}
}
return Object.assign({
positions: vertex,
cells: meshes
});
})()
cosh = (z) => {
const re =
(Math.exp(z[0]) * Math.cos(z[1]) + Math.exp(-z[0]) * Math.cos(-z[1])) / 2;
const im =
(Math.exp(z[0]) * Math.sin(z[1]) + Math.exp(-z[0]) * Math.sin(-z[1])) / 2;
return [re, im];
}
timer = (() => {
const timer = Object.create({ t: new Date() });
timer.elapsed = () => {
const t = new Date();
return t - timer.t;
};
timer.update = () => {
timer.t = new Date();
};
return timer;
})()
d3 = require("d3")
gsw = require("https://bundle.run/glsl-solid-wireframe")
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.
