Interactive data visualization
Public
Edited
Sep 24, 2023
1 star
makeRegl(`
if (t > 0.01) {
bool prevAlive = texture2D(texture, uv).x == 0.;
int neigh = 0;
for (int i=-1; i<=1; i++) {
for (int j=-1; j<=1; j++) {
if (i == 0 && j == 0) continue;
vec2 coords = uv + vec2(i, j) / iResolution;
neigh += int(texture2D(texture, coords).x == 0.);
}
}
if (!prevAlive && neigh == 3 || prevAlive && (neigh == 2 || neigh == 3)) {
gl_FragColor = vec4(0., 0., 0., 1.);
} else {
gl_FragColor = vec4(1., 1., 1., 1.);
}
} else {
bool isBlack = fract(sin(gl_FragCoord.x + gl_FragCoord.y) * 1000.0) < 0.5;
gl_FragColor = vec4(vec3(float(isBlack)), 1.);
}
`)
makeRegl(`
const float pixelSize = 1.0;
const float PI = 3.141592653589793;
vec3 self = tf(0.,0.);
vec2 FC = gl_FragCoord.xy * pixelSize;
float random = fsnoise(FC) * .5 + .5;
float grid = max(
step(0.9, sin(FC.x * PI/4.)),
step(0.9, sin(FC.y * PI/4.))
);
if(t == 0.) {
gl_FragColor = vec4(
step(-1., -length(FC - .5)),
random * grid,
0.0,
1.0
);
return;
}
gl_FragColor = vec4(self, 1.0);
float diff = 0.;
float coeffSum = 0.;
const float rad2 = 5.0;
for(float y=-rad2; y<=rad2; y++) {
for(float x=-rad2; x<=rad2; x++) {
float coeff = exp(-length(vec2(x, y)) * 0.1);
diff += tf(x, y).r == 1. ? coeff : 0.;
coeffSum += coeff;
}
}
diff = diff / coeffSum;
float green = random * grid - clamp(diff, 0.0, 1.0) * 40.0;
gl_FragColor.g = clamp(self.g * 0.99 + green * 0.01, 0.0, 1.0);
vec2 theMostGreenCell;
float theGreenestGreen = 0.0;
const float rad = 4.;
for(float y=-rad; y<=rad; y++) {
for(float x=-rad; x<=rad; x++){
float green = tf(x,y).g;
if(green <= theGreenestGreen) continue;
if(tf(x,y+1.).r < 1. && tf(x+1.,y).r < 1. && tf(x,y-1.).r < 1. && tf(x-1.,y).r< 1.) continue;
if(tf(x,y).r == 1.) continue;
theGreenestGreen = green;
theMostGreenCell = vec2(x,y);
}
}
if(theGreenestGreen == 0.) return;
if(length(theMostGreenCell) == 0.) gl_FragColor.r = 1.;
`, `
vec3 tf(float x, float y) {
return texture2D(texture, mod(gl_FragCoord.xy + vec2(x, y), iResolution) / iResolution).rgb;
}
float fsnoise(vec2 c){
return fract(sin(dot(c, vec2(12.9898, 78.233))) * 43758.5453);
}
`, 100, 500)
makeRegl(`
float dist = length(gl_FragCoord.xy);
vec2 textureCoords = uv + cos(t) * vec2(0.5 - uv.y, uv.x - 0.5) - sin(2.0 * t) * (uv - 0.5);
vec3 textureData = texture2D(texture, textureCoords).rgb;
vec4 addVec = vec4(
1.0 + cos(2.0 * t),
1.0 + cos(2.0 * t + 1.5),
1.0 + cos(2.0 * t + 3.0),
0.0
);
float addVecCoeff = exp(-0.01 * dist);
gl_FragColor = vec4(0.98 * textureData, 1) + addVecCoeff * addVec;
gl_FragColor = vec4(textureCoords, 0., 1.0);
if (clamp(textureCoords, 0., 1.) != textureCoords) {
gl_FragColor = vec4(0., 0., 0., 1.);
} else {
gl_FragColor = vec4(floor(textureCoords * 10.0) / 10.0, 0.0, 1.0);
}
`)
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.
