Generative artist, sharing my journey in visual experiments.
Published
Edited
May 14, 2020
1 star
p5(s => {
const videoWriter = new WebMWriter({
quality: 0.99, // WebM image quality from 0.01 (worst) to 0.99 (best)
frameDuration: 1000/30, // Duration of frames in milliseconds
})
let sh
s.setup = () => {
s.createCanvas(500, 500, s.WEBGL)
s.frameRate(30)
sh = s.createShader(`
#ifdef GL_ES
precision mediump float;
#endif
attribute vec3 aPosition;
void main() {
gl_Position = vec4(aPosition, 1.0);
}`, `
#ifdef GL_ES
precision mediump float;
#endif
#define TAU ${Math.PI * 2}
vec2 resolution = vec2(${s.width}, ${s.height});
uniform float u_time;
void main() {
vec2 st = gl_FragCoord.xy / resolution;
gl_FragColor = vec4(cos(st.x * TAU * 5.)/2. + .5, cos(st.y * TAU * 5.)/2. + .5, sin(u_time * TAU)/2. + .5, 1.0);
}`)
}
s.draw = () => {
s.background(255)
const t = s.map(s.frameCount, 0, 60, 0, 1)
if (t > 1) {
s.noLoop()
videoWriter.complete().then(webMBlob => {
mutable output = html`<video width="${s.width}" autoplay loop>
<source src="${URL.createObjectURL(webMBlob)}" type="video/webm">
Sorry, your browser doesn't support embedded videos.
</video><br>
${DOM.download(webMBlob)}`
})
}
s.shader(sh)
sh.setUniform('u_time', t)
s.quad(-1, -1, -1, 1, 1, 1, 1, -1)
videoWriter.addFrame(s.canvas)
}
})
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.
