I work on explorable explanations, gamedev tutorials, and gamedev tools.
Published
Edited
Sep 11, 2020
2 stars
viewof PETALS = html`<input type="range" min="1" max="10" value="5">`
viewof NUM_QUADS = html`<input type="range" min="2" max="20" value="5">`
viewof width = html`<input type="range" min="0" max="1" value="0.5" step="0.01">`
viewof power = html`<input type="range" min="0.01" max="10" value="3" step="0.01">`
gl.canvas
cmd = gl.regl({
vert: `
// the vertex shader turns {radius, angle, side} into {x, y}
// the 'side' varies from -1 to +1, and is 0 along the center
// of the petal
precision mediump float;
attribute vec3 ras;
varying vec3 v_ras;
uniform float width, power, phase;
void main () {
float radius = ras.r;
// shape the petal! could be anything, sine waves, exponentials, but it's
// angular width as a function of the radius, ideally 0 at radius 0 and 0 at radius 1
float w = 1.0 - pow(radius, power);
// now that we know the width of the petal, we can use that to shift
// the angle left or right based on the 'side' and the width
float angle = ras.g + width * w * ras.b;
// wave the petal back and forth
angle += phase * 0.2 * radius;
// convert polar to cartesian
vec2 pos = vec2(radius * cos(angle), radius * sin(angle));
gl_Position = vec4(pos, ras.b, 1);
// pass this along for the fragment shader to use in the color
v_ras = ras;
}
`,
frag: `
precision mediump float;
varying vec3 v_ras;
void main () {
// color by how far we are from the center line of the petal
float s = abs(v_ras.b);
gl_FragColor = vec4(0.5 + 0.5*s, 0.3, 0.8 - 0.5*s, 1);
}
`,
attributes: {ras: flowerMesh},
uniforms: {
width: width,
power: power,
phase: gl.regl.prop('phase'),
},
count: flowerMesh.length,
})
function draw (t) {
gl.regl.clear({color: [0.6, 0.8, 0.5, 1]})
cmd({phase: Math.cos(t * 1e-3)})
}
draw(now)
flowerMesh = {
// construct a bunch of triangles that represent *square* petals
// and we'll let the vertex shader make them fancier
const dr = 1 / NUM_QUADS;
let mesh = [];
for (let petal = 0; petal < PETALS; petal++) {
let a = 2 * Math.PI / PETALS * petal;
for (let quad = 0; quad < NUM_QUADS; quad++) {
let r = quad / NUM_QUADS;
// we want four triangles, two on each side
// each list is the [r, a, s] values that go into the 'ras' vec3
// the shader wants arrays, not js objects
mesh.push([r, a, 0], [r+dr, a, 0], [r, a, -1]);
mesh.push([r, a, 0], [r+dr, a, 0], [r, a, +1]);
mesh.push([r+dr, a, 0], [r, a, -1], [r+dr, a, -1]);
mesh.push([r+dr, a, 0], [r, a, +1], [r+dr, a, +1]);
}
}
return mesh;
}
function createGL (opts) {
var canvas = html`<canvas width="400" height="400">`
var regl = createREGL(Object.assign({canvas: canvas}, opts || {}))
return {canvas, regl}
}
gl = createGL()
createREGL = require('https://unpkg.com/regl@1.3.1/dist/regl.min.js')
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.