Public
Edited
Oct 24, 2022
1 fork
14 stars
fragmentShader = `
uniform sampler2D u_texture;
uniform vec2 u_size;
uniform float u_time;
void main() {
vec2 position = gl_FragCoord.xy;
vec4 c = texture2D(u_texture, position / u_size);
vec3 stats = vec3(0.0, 0.0, 0.0);
for (int dx = -1; dx <= 1; ++dx) {
for (int dy = -1; dy <= 1; ++dy) {
vec4 n = texture2D(u_texture, (position + vec2(dx,dy)) / u_size);
if (n.r == 1.0) {
stats.x++;
}
if (n.g == 1.0) {
stats.y++;
}
if (n.b == 1.0) {
stats.z++;
}
}
}
vec4 next_col = c;
// rock --> paper
if (c.r == 1.0 && stats.y >= ${n}.0) {
next_col = vec4(0.0, 1.0, 0.0, 1.0);
}
// paper --> scissor
if (c.g == 1.0 && stats.z >= ${n}.0) {
next_col = vec4(0.0, 0.0, 1.0, 1.0);
}
// scissor --> rock
if (c.b == 1.0 && stats.x >= ${n}.0) {
next_col = vec4(1.0, 0.0, 0.0, 1.0);
}
gl_FragColor = next_col;
}
`
seed = {
const seed = new Float32Array(4 * width * height);
for (let i = 0; i < 4 * width * height; i += 4) {
let r = Math.random();
if (r < 0.33) {
seed[i + 0] = 1; // rock
} else if (r < 0.66) {
seed[i + 1] = 1; // paper
} else {
seed[i + 2] = 1; // scissor
}
seed[i + 3] = 1;
}
return seed;
}
dataTexture = createTexture(seed)
height = 900
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.
