data journalist, gardener, engineer
createREGL = require('regl')
function createGL (opts) {
var canvas = html`<canvas width="960" height="400">`
var regl = createREGL(Object.assign({canvas: canvas}, opts || {}))
return {canvas, regl}
}
gl1 = createGL()
gl1.canvas
gl1.regl.clear({color: [red, green, blue, 1]})
gl2.canvas
//try making slider that changes the number of sides
gl2.regl.clear({color: [0.7, 0.8, 0.8, 1]})
cmd = gl2.regl({
vert: `
precision mediump float;
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0, 1);
}`,
frag: `
precision mediump float;
uniform vec4 color;
void main() {
gl_FragColor = color;
}`,
attributes: {
position: [
[-0.9, -0.9],
[0.5, -0.6],
[0.9, 0.9],
[-0.5, 0]
]
},
uniforms: {
color: [177/255, 61/255, 20/255, 1]
},
count: 4,
primitive: 'triangle fan',
})
draw = {
gl2.regl.clear({color: [0.7, 0.8, 0.8, 1]})
cmd()
}
gl3 = createGL()
gl3.canvas
//try making it spin in 3d
//try making it into a 3d pyramid
//try changing the orbit center
cmd2 = gl3.regl({
vert: `
precision mediump float;
attribute vec2 xy;
uniform vec2 aspect;
uniform mat3 modelMatrix;
void main() {
vec2 pos = (modelMatrix * vec3(xy, 1)).xy;
gl_Position = vec4(pos / aspect, 0, 1);
}
`,
frag: `
precision mediump float;
void main() {
gl_FragColor = vec4(0.2, 0.3, 0.8, 1);
}
`,
attributes: {
xy: [0, 4, 8].map(i => [Math.cos(Math.PI * i / 6), Math.sin(Math.PI * i / 6)])
},
uniforms: {
aspect: ctx => [ctx.viewportWidth / ctx.viewportHeight, 1],
modelMatrix: gl3.regl.prop('modelMatrix')
},
count: 3
})
function draw2(t) {
gl3.regl.clear({color: [1, 0.8, 0.8, 1]})
cmd2({modelMatrix: [
Math.cos(t), Math.sin(t), 0,
-Math.sin(t), Math.cos(t), 0,
x0, 0, 1
]})
}
draw2(now / 1000)
gl4 = createGL()
gl4.canvas
//try to randomly distribute saturation throughout
//try making it a 3d point cloud
//add orbit controls
rng = d3.randomNormal(0,0.2)
points = d3.range(numPoints).map(i => ({
x: rng(),
y: rng(),
}))
cmd3 = gl4.regl({
vert: `
precision highp float;
// per vertex attributes
attribute vec2 position;
// variables to send to the fragment shader
varying vec3 fragColor;
// values that are the same for all vertices
uniform float pointWidth;
// a helper function to turn HSV colors into RGB
vec3 hsv2rgb(vec3 c)
{
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
void main() {
// update the size of a point based on the prop pointWidth
gl_PointSize = pointWidth;
// send color to the fragment shader
// The H value is calculated based on the angle (as a challenge figure out how)
// The S value depends on the distance from the center
// The V value is always defaulted to 1
fragColor = hsv2rgb(vec3((acos(-1.0) + atan(position.y,position.x))/(acos(-1.0)*2.0),1.0-length(position)/sqrt(2.0),1));
// holds the position of a vertex
gl_Position = vec4(position, 0.0, 1.0);
}
`,
frag: `
precision highp float;
varying vec3 fragColor;
void main() {
// holds the color of a pixel
gl_FragColor = vec4(fragColor, 0.8);
}
`,
attributes: {
position: points.map(d => [d.x, d.y]),
},
uniforms: {
//use 'regl.prop' to pass these in as arguments to the drawPoints function
pointWidth: gl4.regl.prop('pointWidth'),
},
count: points.length,
primitive: 'points'
})
draw3 = {
gl4.regl.clear({color: [0.2, 0.2, 0.2, 1.0]})
cmd3({pointWidth})
}
d3 = require("d3")
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.
