// // Continuously updates
// regl.frame(() => {
// camera(function () {
// regl.clear({ color: [0, 0.1, 0.26, 1] });
// // drawBunny();
// drawImage();
// });
// })
{
regl.clear({ color: [0, 0.1, 0.26, 1] });
drawImage();
statsMonitor.update();
yield now;
}
camera = reglCamera(regl, {
element: regl._gl.canvas,
center: [0, 0, 0],
theta: (3.0 * Math.PI) / 4.0,
phi: Math.PI / 6.0,
distance: 20.0,
damping: 0,
noScroll: true,
renderOnDirty: true
})
drawImage = regl({
frag: frag,
vert: vert,
attributes: {
position: new Int8Array([-1, -1, 0, 1, -1, 0, -1, 1, 0, 1, 1, 0])
},
uniforms: {
scaler: scaler,
wireFrameWidth: wireFrameWidth,
wireFrameFeather: wireFrameFeather,
shapeScaler: shapeScaler,
shapeRotation: shapeRotation,
curveColor: [
d3.color(favoriteColor).r / 255,
d3.color(favoriteColor).g / 255,
d3.color(favoriteColor).b / 255,
1.0
]
},
primitive: "triangle strip",
count: 4,
blend: {
enable: true,
// func: {
// srcRGB: "src alpha",
// srcAlpha: 1,
// dstRGB: "one minus src alpha",
// dstAlpha: 1
// },
// funcDisabled: {
// srcRGB: "src alpha",
// srcAlpha: "src alpha",
// dstRGB: "one minus src alpha",
// dstAlpha: "one minus src alpha"
// },
func: {
srcRGB: "one",
srcAlpha: "one",
dstRGB: "one minus src alpha",
dstAlpha: "one minus src alpha"
},
equation: {
rgb: "add",
alpha: "add"
}
}
})
frag = await glsl`
#extension GL_OES_standard_derivatives : enable
${shader}
#pragma glslify: random = require('glsl-random')
float wireframe (float parameter, float width, float feather) {
float w1 = width - feather * 0.5;
float d = fwidth(parameter);
// float looped = 0.5 - abs(mod(parameter, 0.1) - 0.5);
float looped = 0.5 - abs(mod(parameter, 0.5) - 0.5);
// float looped = abs(mod(parameter, 0.5));
return smoothstep(d * w1, d * (w1 + feather), looped);
}
uniform float scaler, shapeScaler, shapeRotation, wireFrameWidth, wireFrameFeather;
uniform vec4 curveColor;
varying vec3 vposition;
void main () {
float d = 0.0;
float x, y;
float a = 0.001 / scaler / sqrt(vposition.x*vposition.x + vposition.y*vposition.y);
// a = 0.0;
for (int i=0; i<100; i++) {
x = a * (random(vposition.xy * 10.0 * float(i))-0.5);
y = a / shapeScaler * (random(vposition.xy * (-10.0) *float(i))-0.5);
d += f1(vposition+vec3(x, y, 0.0), scaler, shapeScaler, shapeRotation);
}
d /= 100.0;
float k = pow(exp(-wireframe(d*1.0, wireFrameWidth, wireFrameFeather)), 4.0);
vec4 c1, c2, rgba;
c1 = vec4(d * 0.0);
c2 = curveColor;
// 0.0 -> c1, 1.0 -> c2
rgba = mix(c1, c2, k);
gl_FragColor = rgba; //vec4(rgb, 1.0);
}`
vert = await glsl`
${shader}
#pragma glslify: random = require('glsl-random')
attribute vec3 position;
varying vec3 vposition;
void main () {
vposition = position;
gl_Position = vec4(position * 0.9, 1.0);
}`
shader = `
precision mediump float;
vec3 scale(vec3 a) {
return (a + 1.0) * 0.5;
}
float f1(vec3 a, float s, float ss, float sr) {
float x = a.x * cos(sr) - a.y * sin(sr);
float y = a.x * sin(sr) + a.y * cos(sr);
float t = pow(s*x, 2.0) + pow(s*y * ss, 2.0);
return 0.5 * (sin(t)+1.0);
}
`
drawBunny = regl({
frag: `
precision mediump float;
varying vec3 vnormal;
void main () {
gl_FragColor = vec4(vnormal * 0.75 + 0.25, 1.0);
}`,
vert: `
precision mediump float;
uniform mat4 projection, view;
attribute vec3 position, normal;
varying vec3 vnormal;
void main () {
vnormal = normal;
gl_Position = projection * view * vec4(position, 1.0);
}`,
attributes: {
position: bunny.positions,
normal: normals(bunny.cells, bunny.positions)
},
elements: bunny.cells
})
bunny = (await import("https://cdn.skypack.dev/bunny@1.0.1")).default
normals = (await import("https://cdn.skypack.dev/angle-normals@1.0.0")).default
// regl = (await import("https://cdn.skypack.dev/regl@2")).default({canvas})
regl = (await import("https://cdn.skypack.dev/regl@2")).default({
canvas,
pixelRatio: 2.0,
extensions: ["oes_standard_derivatives"]
})
reglCamera = (await import("https://cdn.skypack.dev/regl-camera@2.1.1")).default
statsMonitor = {
const stats = new Stats(),
{ dom } = stats;
dom.style.position = "relative";
return stats;
}
d3 = require("d3")
Stats = require("https://cdn.jsdelivr.net/npm/stats-js@1.0.1/build/stats.min.js")
import { glsl, glslify } from "@listenzcc/glslify"
v2Bea99d5232d4437ab7566e42e1db0dc3_720w = FileAttachment("v2-bea99d5232d4437ab7566e42e1db0dc3_720w.webp").image()
snipaste_20240722_163313 = FileAttachment("Snipaste_2024-07-22_16-33-13.png").image()
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.
