Public
Edited
May 6, 2019
md`# Regl Test – v2`
vertexShader = () => `
precision mediump float;
attribute vec2 position;
uniform vec2 effectPosition;
varying vec2 v_pos;
void main() {
float distToCenter = distance(effectPosition, position);
float offset = smoothstep(0.0,2.0,distToCenter) - 0.5;
float strength = 0.2;
vec2 newPosition = position;
newPosition.y = newPosition.y + offset * strength;
newPosition.x = newPosition.x + offset * strength;
// we have to give it the original position
v_pos = position;
gl_Position = vec4(newPosition, 0, 1);
}
`
fragmentShader = () => `
precision mediump float;
uniform vec2 resolution;
uniform vec2 effectPosition;
varying vec2 v_pos;
vec3 rect(vec2 p1, vec2 p2, vec2 st) {
vec2 bl = step(p1,st);
float pct = bl.x * bl.y;
vec2 tr = step(1.0 - p2,1.0-st);
pct *= tr.x * tr.y;
return vec3(pct);
}
void main() {
vec3 color = vec3(0.0);
vec2 st = v_pos / 2.0 + 0.5;
vec2 effectPositionNorm = effectPosition / 2.0 + 0.5;
// effectPositionNorm = vec2(0.5);
float width = 0.05;
vec3 r1 = rect(vec2(0.1, effectPositionNorm.y - width / 2.0), vec2(0.9, effectPositionNorm.y + width / 2.0), st);
vec3 r2 = rect(vec2(effectPositionNorm.x - width / 2.0,0.1), vec2(effectPositionNorm.x + width / 2.0,0.9), st);
color = mod(r1 + r2, vec3(2));
color = mod(color + 1.0, vec3(2));
gl_FragColor = vec4(color,1.0);
}
`
effectPosition = [
Math.sin(now/1000)/2,
Math.cos(now/1000)/2,
]
{
const time = .5
// clear contents of the drawing buffer
regl.clear({
color: [0, 0, 0, 1],
depth: 1
})
// draw a triangle using the command defined above
draw({
effectPosition: effectPosition,
})
return md`Animation`
}
vertices = verticesGen(10, 10)
verticesGen = (xRes, yRes) => {
const width = 1/xRes;
const height = 1/yRes;
const vertices = [];
const xOffset = 0.005;
const yOffset = 0.01;
for(let xi = 0; xi < xRes; xi++) {
for(let yi = 0; yi < yRes; yi++) {
vertices.push([(xi * width) * 2 - 1 + (xi * xOffset), (yi * height) * 2 - 1 + (yi * yOffset)])
vertices.push([(xi * width + width) * 2 - 1 + (xi * xOffset), (yi * height) * 2 - 1 + (yi * yOffset)])
vertices.push([(xi * width) * 2 - 1 + (xi * xOffset), (yi * height + height) * 2 - 1 + (yi * yOffset)])
vertices.push([(xi * width + width) * 2 - 1 + (xi * xOffset), (yi * height) * 2 - 1 + (yi * yOffset)])
vertices.push([(xi * width) * 2 - 1 + (xi * xOffset), (yi * height + height) * 2 - 1 + (yi * yOffset)])
vertices.push([(xi * width + width) * 2 - 1 + (xi * xOffset), (yi * height + height) * 2 - 1 + (yi * yOffset)])
}
}
return vertices;
}
draw = regl({
// Shaders in regl are just strings. You can use glslify or whatever you want
// to define them. No need to manually create shader objects.
frag: fragmentShader(),
vert: vertexShader(),
// Here we define the vertex attributes for the above shader
attributes: {
// regl.buffer creates a new array buffer object
position: regl.buffer(vertices)
// regl automatically infers sane defaults for the vertex attribute pointers
},
uniforms: {
resolution: [width, height],
effectPosition: regl.prop('effectPosition'),
},
// This tells regl the number of vertices to draw in this command
count: vertices.length
})
md`## Imports`
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.
