lineWidth
drawSprites = regl({
vert: `
precision highp float;
attribute float id ;
varying vec2 uv;
varying float color;
uniform float pointsPerLine;
uniform float linesNumber;
uniform float u_time;
uniform float mouseDist;
uniform vec2 u_mouse;
vec2 polarToDecart(vec2 polar) {
float alpha = polar.x;
float R = polar.y;
float x = sin(alpha) * R;
float y = cos(alpha) * R;
return vec2(x, y);
}
vec2 decartToPolar(vec2 decart) {
float alpha = atan(decart.x, decart.y);
float R = length(decart);
return vec2(alpha, R);
}
//vec2 random2(vec2 st){return -1.0+2.0*fract(sin(vec2( dot(st,vec2(127.1,311.7)),dot(st,vec2(269.5,183.3))))*43758.5453123);}
//float noise(vec2 st) {
// vec2 i = floor(st);
// vec2 f = fract(st);
// vec2 u = f*f*(3.0-2.0*f);
// return mix( mix( dot( random2(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ),
// dot( random2(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x),
// mix( dot( random2(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ),
// dot( random2(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y);
//}
//vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
//vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
//vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }
//float snoise(vec2 v) {
// const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
// vec2 i = floor(v + dot(v, C.yy));
// vec2 x0 = v - i + dot(i, C.xx);
// vec2 i1 = vec2(0.0);
// i1 = (x0.x > x0.y)? vec2(1.0, 0.0):vec2(0.0, 1.0);
// vec2 x1 = x0.xy + C.xx - i1;
// vec2 x2 = x0.xy + C.zz;
// i = mod289(i);
// vec3 p = permute(permute( i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0 ));
// vec3 m = max(0.5 - vec3( dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);
// m = m*m ;
// m = m*m ;
// vec3 x = 2.0 * fract(p * C.www) - 1.0;
// vec3 h = abs(x) - 0.5;
// vec3 ox = floor(x + 0.5);
// vec3 a0 = x - ox;
// m *= 1.79284291400159 - 0.85373472095314 * (a0*a0+h*h);
// vec3 g = vec3(0.0);
// g.x = a0.x * x0.x + h.x * x0.y;
// g.yz = a0.yz * vec2(x1.x,x2.x) + h.yz * vec2(x1.y,x2.y);
// return 130.0 * dot(m, g);
//}
${snoiseTxt}
void main () {
${main}
}
`,
frag: `
precision highp float;
varying vec2 uv;
varying float color;
void main () {
vec3 teal = vec3(0.,165.,186.)/256.;
vec3 yellow = vec3(247.,198.,4.)/256.;
vec3 red = vec3(255.,0.,0.)/256.;
gl_FragColor.rgb = mix(yellow, red, fract(color*2.)) * step(1./2., color);
gl_FragColor.rgb += mix(teal, yellow, fract(color*2.)) * (1.-step(1./2., color));
gl_FragColor.a = 1.;
}
`,
attributes: {
id: Array(linesNumber*pointsPerLine).fill(0).map((d,i)=>i),
},
uniforms: {
linesNumber: linesNumber,
pointsPerLine: pointsPerLine,
u_time: regl.prop('time'),
u_mouse: regl.prop('u_mouse'),
mouseDist: regl.prop('mouseDist'),
},
primitive: 'triangle strip',
// primitive: 'line strip',
elements: null,
count: pointsPerLine * linesNumber,
})
drawLoop = {
let frame = regl.frame(({tick, drawingBufferWidth, drawingBufferHeight, pixelRatio}) => {
let movement = Math.hypot(mouse.x-state.mouseXPrev, mouse.y-state.mouseYPrev)
movement = Math.min(Math.hypot(mouse.x-state.mouseXPrev, mouse.y-state.mouseYPrev), 100.)
state.mouseDist+=movement/width;
state.mouseXPrev = mouse.x
state.mouseYPrev = mouse.y
regl.clear({
color: [1, 1, 1, 1],
depth: 1
})
drawSprites({
count: linesNumber * pointsPerLine,
time: (new Date()/1000)%(3600*24),
u_mouse: [mouse.x/width, mouse.y/500],
mouseDist: state.mouseDist,
})
})
// Stop the current animation when we re-evaluate this cell
invalidation.then(frame.cancel);
return frame;
}
pointsPerLine = 200
linesNumber = 32
state = {
return {mouseXPrev: mouse.x, mouseYPrev: mouse.y, mouseDist: 0}
}
mouse = {
return mouseChange();
}
hsv2rgb = require('https://bundle.run/hsv2rgb@1.1.0')
import {checkbox, slider} from "@jashkenas/inputs"
viewof lineWidth = Range([0.001, .09], {value: .015, label: "lineWidth"})
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.
