Published
Edited
Aug 30, 2019
1 fork
1 star
draw = regl({
vert:`
precision mediump float;
attribute vec2 position;
void main () {
gl_Position = vec4(position, 0, 1);
}
`,
frag:`
#define PI 3.14159265359
#define TWO_PI 6.28318530718
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
vec3 circle(vec2 st, float radius, float fuzz, float positionX, float positionY,vec3 color){
float fill = step(radius*2.0,distance(st,vec2(positionX,positionY))*2.0);
float edgefuzz = smoothstep(distance(st,vec2(positionX,positionY))*2.0,radius*2.0,radius*2.0+fuzz);
return clamp(vec3(fill * edgefuzz + color),vec3(0),vec3(1));
}
void main () {
vec2 st = gl_FragCoord.xy/u_resolution;
st.x *= u_resolution.x/u_resolution.y;
float pct = 0.0;
vec3 color = circle(st, 0.2,0.001,0.7,0.25,vec3(0.05,0.90,0.91));
vec3 color2 = circle(st, 0.3,0.1,0.3,0.5,vec3(0.80,0.01,0.47));
vec3 color3 = circle(st, 0.0001,0.1,0.545,0.375,vec3(.01,.01,.45));
gl_FragColor = vec4((1.0 - color3) + (color * color2), 1.0);
}
`,
attributes: {
position:[
[-1,-1],
[1,-1],
[1,1],
[1,1],
[-1,1],
[-1,-1]
]
},
uniforms:{
u_resolution: ctx => [ctx.framebufferWidth,ctx.framebufferHeight],
u_time: ctx => ctx.tick/60
},
count:6
})
bounds = {
let bounds = {ymin: -3, ymax: 3};
bounds.xmin = bounds.ymin * aspectRatio;
bounds.xmax = bounds.ymax * aspectRatio;
return bounds;
}
aspectRatio = width/Math.max(width*0.75,minHeight)
width = 800
minHeight = 800
require('regl')
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.