Published
Edited
Aug 29, 2019
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 highp float;
uniform vec2 u_resolution;
uniform float u_time;
vec3 rect_fill(vec2 st, vec2 inner, vec2 offset, vec3 color){
float bottom = step(inner.y+offset.y,st.y);
float left = step(inner.x+offset.x,st.x);
float right = step(inner.x-offset.x,1.0-st.x);
float top = step(inner.y-offset.y,1.0-st.y);
float pct = (bottom) * (left) * (right) * (top);
return color * pct;
}
vec3 rectangle(vec2 st, float width, float height, float stroke, float positionX, float positionY, vec3 fill){
vec2 position = vec2(positionX,positionY);
float offsetX = position.x - (0.5 - width / 2.0) - stroke;
float offsetY = position.y - (0.5 - height / 2.0) - stroke;
vec2 offset = vec2(offsetX,offsetY);
float outerX = (1.0 - (width + stroke))/2.0;
float outerY = (1.0 - (height + stroke))/2.0;
vec2 outer = vec2(outerX,outerY);
vec2 inner = outer + stroke;
float bottom = step(inner.y+offset.y,st.y);
float bottom_outer = step(1.0-(outer.y+offset.y),1.0-st.y);
float left = step(inner.x+offset.x,st.x);
float left_outer = step(1.0-(outer.x+offset.x),1.0-st.x);
float right = step(inner.x-offset.x,1.0-st.x);
float right_outer = step(1.0-(outer.x-offset.x),st.x);
float top = step(inner.y-offset.y,1.0-st.y);
float top_outer = step(1.0-(outer.y-offset.y),st.y);
float margin = bottom_outer + left_outer + right_outer + top_outer;
float pct = (bottom + margin) * (left + margin) * (right + margin) * (top + margin);
vec3 fill_computed = rect_fill(st,inner,offset,fill);
vec3 color = clamp((fill_computed + margin),vec3(0.0),vec3(1.0));
return color;
}
void main () {
vec2 st = gl_FragCoord.xy/u_resolution;
vec3 color = vec3(0.0);
vec3 white = vec3(0.94,0.91,0.84);
vec3 red = vec3(0.68,0.13,0.13);
vec3 blue = vec3(0.0,0.37,0.61);
vec3 yellow = vec3(1.0,0.77,0.24);
float stroke = 0.01;
vec3 rect1 = rectangle(st, 0.2, 0.4, stroke, 0.2, 0.5, red);
vec3 rect2 = rectangle(st, 0.4, 0.4, stroke, 0.4, 0.5, white);
vec3 rect3 = rectangle(st, 0.2, 0.2, stroke, 0.7, -0.1, blue);
vec3 rect4 = rectangle(st, 0.3, 0.2, stroke, -0.1, 0.9, yellow);
vec3 rect5 = rectangle(st, 0.2, 0.5, stroke, 0.9, 0.0, white);
vec3 rect6 = rectangle(st, 0.1, 0.4, stroke, 0.8, 0.1, white);
vec3 rect7 = rectangle(st, 0.1, 0.2, stroke, 0.8, 0.5, yellow);
vec3 rect8 = rectangle(st, 0.2, 0.2, stroke, 0.9, 0.5, yellow);
vec3 rect9 = rectangle(st, 0.1, 0.2, stroke, 0.8, 0.7, yellow);
vec3 rect10 = rectangle(st, 0.2, 0.2, stroke, 0.9, 0.7, yellow);
vec3 rect11 = rectangle(st, 0.8, 0.2, stroke, 0.2, 0.9, white);
vec3 rect12 = rectangle(st, 0.4, 0.4, stroke, 0.4, 0.1, white);
gl_FragColor = vec4(rect1 * rect3 * rect2 * rect4 * rect5 * rect6 * rect7 * rect8 * rect9 * rect10 * rect11 * rect12, 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.