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")
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.