Public
Edited
Mar 8, 2021
3 stars
Insert cell
Insert cell
Insert cell
createREGL = require('regl')
Insert cell
Insert cell
function createGL (opts) {
var canvas = html`<canvas width="960" height="400">`
var regl = createREGL(Object.assign({canvas: canvas}, opts || {}))
return {canvas, regl}
}
Insert cell
Insert cell
gl1 = createGL()
Insert cell
Insert cell
gl1.canvas
Insert cell
gl1.regl.clear({color: [red, green, blue, 1]})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
gl2.canvas
Insert cell
//try making slider that changes the number of sides
Insert cell
gl2.regl.clear({color: [0.7, 0.8, 0.8, 1]})
Insert cell
Insert cell
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',
})
Insert cell
draw = {
gl2.regl.clear({color: [0.7, 0.8, 0.8, 1]})
cmd()
}
Insert cell
Insert cell
gl3 = createGL()
Insert cell
gl3.canvas
Insert cell
//try making it spin in 3d
//try making it into a 3d pyramid
//try changing the orbit center
Insert cell
Insert cell
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
})
Insert cell
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
]})
}
Insert cell
draw2(now / 1000)
Insert cell
Insert cell
gl4 = createGL()
Insert cell
gl4.canvas
Insert cell
//try to randomly distribute saturation throughout
//try making it a 3d point cloud
//add orbit controls
Insert cell
Insert cell
Insert cell
rng = d3.randomNormal(0,0.2)
Insert cell
points = d3.range(numPoints).map(i => ({
x: rng(),
y: rng(),
}))
Insert cell
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'
})
Insert cell
draw3 = {
gl4.regl.clear({color: [0.2, 0.2, 0.2, 1.0]})
cmd3({pointWidth})
}
Insert cell
d3 = require("d3")
Insert cell

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.
Learn more