Award-winning creative focused on data-driven art and visualizations, trying to push the boundaries of the web one visual story at a time ✨
Public
Edited
Feb 23, 2023
2 stars
width = 512
height = 512
vertexSource1 = `
attribute vec4 a_position;
uniform float u_time;
varying vec2 v_position;
void main() {
v_position = a_position.xy;
gl_Position = a_position;
}
`
fragSource1 = glsl(`
precision mediump float;
${await include("glsl-noise/simplex/2d.glsl")}
uniform float u_time;
varying vec2 v_position;
float PI = 3.14;
vec2 center = vec2(0.0, 0.0);
void main() {
// draw wave according to time
// start with radius from center
float r = distance(v_position, center);
// + snoise(0.05 * v_position + (u_time / 100000.0)); // when I add this to r it gets real trippy lol
// use that to calculate color
float color = 0.05 * sin(30.0 * r - (u_time / 400.0));
color += 0.1 * sin(20.0 * r - (u_time / 200.0));
color += 0.01 * sin(10.0 * r - (u_time / 140.0));
// and also add in some noise
color += 0.05 * snoise(70000.0 * v_position - (u_time / 500.0));
color += 0.35 * snoise(0.5 * v_position - (u_time / 10000.0));
gl_FragColor = vec4(0.45 - color, 0.75 - color, 1.0 - color, 1.0);
}
`)
import { vec2, vec3 } from "@sxywu/00-3-nature-of-code-utilities"
import {
initShaderProgram,
initPositionBuffer,
setPositionAttribute
} from "@sxywu/00-webgl-setup"
glsl = require("https://bundle.run/glslify@7.1.1")
import { include } from "@mbostock/pseudo-glslify"
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.
