30:T41f,await visibility(), bnb({ record: true, globals: { n: 6, }, draw: (sketch, time, globals) => { const m = globals.n / 2 const w = (sketch.width - 100) / globals.n const arcAngle = sketch.TAU * .5 + sketch.sin(time * sketch.TAU) * sketch.TAU * .25 sketch.background(22) sketch.fill(255) sketch.noStroke() sketch.push() sketch.translate(sketch.width/2, sketch.width/2) for(let k = 0; k < 4; k ++) { sketch.rotate(sketch.PI/2) for(let i = 0; i < m; i ++) { for(let j = 0; j < m; j ++) { let angle = ((i % m)+ (j % m)) / (m - 1) * sketch.PI - time * sketch.TAU + sketch.PI / 2 const cx = i * w + w / 2 const cy = j * w + w / 2 sketch.push() sketch.translate(cx, cy) sketch.rotate(-angle) const r = map(sketch.dist(0, 0, cx, cy), 0, sketch.width / 2, 1, 0, true) * w - 3 sketch.arc(0, 0, r, r, -arcAngle/2, arcAngle/2, sketch.OPEN) sketch.pop() } } } sketch.pop() } })31:T9e2,md`Start by importing the \`bnb\` utility: \`\`\`js import { bnb } from '@makio135/bnb' \`\`\` Then use it this way: \`\`\`js bnb(options) \`\`\` Where \`options\` is an object with the following defaults: \`\`\`js options = { globals: {}, // for global variables preload: (sketch, globals) => {}, setup: (sketch, globals) => {}, draw: (sketch, time, globals) => sketch.background(sketch.sin(time * sketch.TAU) * 255), w: 540, // width of the sketch h: 540, // height of the sketch webgl: false, // for p5js WEBGL sketches: createCanvas(width, height, WEBGL) numFrames: 60, // number of frames for the time to go from 0 to 1 play: true, // should the sketch play (can be started/paused by clicking on it) record: false, // should the loop be recorded fps: 30, // frames per second for the export loops: 1, // number of loops to record video: false, // export a MP4 video if 'true', or WEBM video if set to 'webm' shutterAngle: 0, // amount of motion blur samplesPerFrame: 1, // number of samples between 2 frames for motion blur (1 do nothing) chromaticAberration: 0, // amount of chromatic aberration (RGB shift from center) preview: undefined, // export a preview at [frame = preview] instead of waiting the complete export isReady: true, // can be set to false until the completion of an asynchornous task then set back to true to start the loop } \`\`\` \`setup\` and \`draw\` methods are passed \`sketch\`, a p5 instance, and \`globals\`, an object used to store globals either because they need to be initialized in \`setup\` using p5js methods or could be updated each frame in \`draw\`. \`draw\` is also passed \`time\` that goes from 0 to 1, while frame goes from 1 to \`numFrames\`. When you're satisfied with your sketch, set \`recorded\` to \`true\` and once your loop is completed you'll see your gif with a download button, enjoy 😁 ___ ## Credits: - https://gist.github.com/anonymous/10675250 Motion Blur + Chromatic Aberration Template by [Dave Whyte @beesAndBombs](https://twitter.com/@beesAndBombs) - https://necessarydisorder.wordpress.com/2018/07/02/getting-started-with-making-processing-gifs-and-using-the-beesandbombs-template/ - https://observablehq.com/@motiondesign_01/setting-up-p5js - https://observablehq.com/@mbostock/canvas-to-gif [

](https://twitter.com/makio135) [

](https://instagram.com/makio135)`32:T562,await visibility(), bnb({ w: 540, h: 540, webgl: true, numFrames: 140, record: true, samplesPerFrame: 12, shutterAngle: .8, chromaticAberration: .3, video: true, globals: { n: 15, size: 23, offsets: array(15).map(i => array(15).map(j => array(15).map(k => Math.random()))) }, draw: (sketch, time, globals) => { time = (time + .5) % 1 sketch.background(22) sketch.fill(0) sketch.stroke(255) sketch.strokeWeight(2) sketch.camera(-250, -30, (sketch.height/2) / sketch.tan(PI * 30 / 180), 0, 0, 0, 0, 1, 0) sketch.rotateY(-PI/2 + ease(linearstep(time, 0.2, 1.2), 8) * TAU) for(let i = 0; i < globals.n; i ++) { for(let j = 0; j < globals.n; j ++) { for(let k = 0; k < globals.n; k ++) { if((i === 0 || i === j || k === 0 || k === j) && (i <= j && k <= j)) { const offset = globals.offsets[i][j][k] const x = (i - j / 2) * globals.size const y = (j - globals.n / 2) * globals.size + (1 - (ease(linearstep(time - offset * .10, 0, .3), 5) + ease(linearstep(time - offset * .10, .6, .9), 5))) * sketch.height * 2 const z = (k - j / 2) * globals.size sketch.push() sketch.translate(x, y - 30, z) sketch.box(globals.size) sketch.pop() } } } } } })33:T251e,bnb = async opts => { let { globals = {}, preload: _preload = (sketch, globals) => {}, setup: _setup = (sketch, globals) => {}, draw: _draw = (sketch, time, globals) => sketch.background(sketch.sin(time * sketch.TAU) * 255), w = 540, // width of the sketch h = 540, // height of the sketch webgl = false, // for p5js WEBGL sketches numFrames = 60, // number of frames fps = 30, // frame rate play = true, // play sketch (toggle play/pause with mouse click) record = false, video = false, // record as webm video instead of gif preview = undefined, // export a preview at `frame = preview` instead of waiting the complete export loops = 1, // number of loops to record recordFromFrame = 1, // start recording at frame //post processing shutterAngle = 0, // amount of motion blur samplesPerFrame = 1, // samples for motion blur (1 do nothing) chromaticAberration = 0, // amount of chromatic aberration (RGB shift from center) antiAliasing = 1, shaderPass = undefined, } = opts globals = { // some parameters can be retrieved in the globals Object: w, h, numFrames, fps, loops, shutterAngle, samplesPerFrame, chromaticAberration, antiAliasing, // useful to prevent the sketch starting before async stuff are complete isReady: true, // cutsom globals ...globals, // cannot be overwritten frame: 0 } let recorder = undefined let blob = undefined if (record) { if(video) { if(video === 'webm') { recorder = new WebMWriter({ quality: 0.99, frameRate: fps }) } else { recorder = await HME.createH264MP4Encoder() recorder.width = w recorder.height = h recorder.frameRate = fps recorder.quantizationParameter = 10 recorder.initialize() } } else { recorder = new GIF({ workers: 2, workerScript: gifWorkerScript, quality: 10, }) } } function* p5(sketch) { const container = DOM.element('div') yield container; const instance = new P5(sketch, container) try { while (!blob) yield container if(video) { if(video === 'webm') { yield html`

${DOM.download(blob, `${new Date().toJSON()}.webm`)}` } else { yield html`

${DOM.download(blob, `${new Date().toJSON()}.mp4`)}` } } else { yield html`

${DOM.download(blob, `${new Date().toJSON()}.gif`)}` } } finally { instance.remove() } } return p5(sketch => { const vs = ` precision highp float; attribute vec3 aPosition; void main() { gl_Position = vec4(aPosition, 1.0); }` const fs = ` #define AA ${antiAliasing} precision highp float; uniform vec2 resolution; uniform vec2 mouse; uniform float time; uniform sampler2D sum; uniform sampler2D tex; void main() { vec3 color = vec3(0.); #if AA>1 for(int m = 0; m < AA; m++) for(int n = 0; n < AA; n++) { // pixel coordinates vec2 delta = vec2(float(m), float(n)) / float(AA) - 0.5; vec2 pos = (gl_FragCoord.xy + delta) / resolution.xy; #else vec2 pos = gl_FragCoord.xy / resolution.xy; #endif pos.y = 1. - pos.y; vec3 col = texture2D(sum, pos).rgb; for(int i = 0; i < 3; i ++) { vec2 p = (pos - 0.5) * (1. + 0.008 * float(i) * float(${chromaticAberration})) + 0.5; col[i] += texture2D(tex, p)[i] / ${samplesPerFrame}.; } color += col; #if AA>1 } color /= float(AA*AA); #endif gl_FragColor = vec4(color, 1.0); }` let beesAndBombsShader let sum, tex, shaderPassGraphics const time = [] sketch.preload = () => _preload(sketch, globals) sketch.setup = () => { sketch.createCanvas(w, h, (record || shaderPass) ? sketch.P2D : webgl ? sketch.WEBGL : sketch.P2D) sketch.pixelDensity(1) if(!record) _setup(sketch, globals) sketch.frameRate(fps) if(!play) sketch.noLoop() sketch.canvas.addEventListener('click', () => { play = !play play ? sketch.noLoop() : sketch.loop() }) if(shaderPass) { shaderPassGraphics = sketch.createGraphics(w, h, sketch.WEBGL) shaderPassGraphics.pixelDensity(1) shaderPass = [shaderPass].flat() shaderPassGraphics.sh = shaderPass.map(sh => shaderPassGraphics.createShader(vs, sh)) globals.shaderPass = shaderPassGraphics.sh shaderPassGraphics.shader(shaderPassGraphics.sh[0]) shaderPassGraphics.noStroke() shaderPassGraphics.u_texture = sketch.createGraphics(w, h, webgl ? sketch.WEBGL : sketch.P2D) _setup(shaderPassGraphics.u_texture, globals) } if(record) { for(let frame = 0; frame < numFrames; frame++) { for(let sample = 0; sample < samplesPerFrame; sample++) { time.push((frame + sample * shutterAngle / samplesPerFrame) / numFrames) } } sum = sketch.createGraphics(w, h, sketch.WEBGL) beesAndBombsShader = sum.createShader(vs, fs) sum.shader(beesAndBombsShader) beesAndBombsShader.setUniform('resolution', [w, h]) tex = sketch.createGraphics(w, h, webgl ? sketch.WEBGL : sketch.P2D) _setup(tex, globals) tex.pixelDensity(1) beesAndBombsShader.setUniform(`tex`, tex) tex.createGraphics = sketch.createGraphics } } sketch.draw = () => { if(!globals.isReady) { sketch.frameCount = 0 return } globals.frame = (sketch.frameCount - 1) % numFrames if(!record) { const time = ((sketch.frameCount - 1) / numFrames) % 1 if(shaderPass) { shaderPassGraphics.u_texture.clear() shaderPassGraphics.u_texture.push() _draw(shaderPassGraphics.u_texture, time, globals) shaderPassGraphics.u_texture.pop() shaderPassGraphics.sh.forEach((sh, i) => { shaderPassGraphics.shader(sh) sh.setUniform('u_resolution', [w, h]) sh.setUniform('u_time', time) sh.setUniform('u_mouse', [sketch.mouseX, sketch.mouseY]) sh.setUniform('u_frame', globals.frame) sh.setUniform('u_framebuffer', shaderPassGraphics) sh.setUniform('u_texture', i === 0 ? shaderPassGraphics.u_texture : shaderPassGraphics) shaderPassGraphics.quad(-1, -1, 1, -1, 1, 1, -1, 1) }) sketch.image(shaderPassGraphics, 0, 0) } else { _draw(sketch, time, globals) } } else { sum.clear() beesAndBombsShader.setUniform('sum', sum) for(let i = 0; i < samplesPerFrame; i++) { tex.clear() tex.push() _draw(tex, time[i + ((sketch.frameCount - 1) % numFrames) * samplesPerFrame], globals) tex.pop() if(shaderPass) { shaderPassGraphics.sh.forEach((sh, i) => { shaderPassGraphics.shader(sh) sh.setUniform('u_resolution', [w, h]) sh.setUniform('u_time', time[i + ((sketch.frameCount - 1) % numFrames) * samplesPerFrame]) sh.setUniform('u_mouse', [sketch.mouseX, sketch.mouseY]) sh.setUniform('u_frame', globals.frame) sh.setUniform('u_framebuffer', shaderPassGraphics) sh.setUniform('u_texture', i === 0 ? tex : shaderPassGraphics) shaderPassGraphics.quad(-1, -1, 1, -1, 1, 1, -1, 1) }) beesAndBombsShader.setUniform('tex', shaderPassGraphics) } else { beesAndBombsShader.setUniform('tex', tex) } sum.shader(beesAndBombsShader) sum.quad(-1, -1, 1, -1, 1, 1, -1, 1) } sketch.image(sum, 0, 0) if(sketch.frameCount >= recordFromFrame) { if(video) { if(video === 'webm') { recorder.addFrame(sketch.canvas) } else { recorder.addFrameRgba(sketch.drawingContext.getImageData(0, 0, w, h).data) } } else recorder.addFrame(sketch.canvas, { copy: true, delay: 1000 / fps, quality: 1 }) } if(sketch.frameCount === numFrames * loops || sketch.frameCount === preview) { sketch.noLoop() if(video) { if (video === 'webm') { recorder.complete().then(_blob => blob = _blob) } else { recorder.finalize() const uint8Array = recorder.FS.readFile(recorder.outputFilename) blob = new Blob([uint8Array], { type: "video/mp4" }) } } else { recorder.on('finished', _blob => blob = _blob) recorder.render() } } } } }) }34:[] 2e:{"title":"Beesandbombs utility","cells":[{"id":901,"value":"md`# Beesandbombs utility`","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"md`An utility function to create GIF/WEBM/MP4 loops based on [Dave Whyte (@beesandbombs)](https://twitter.com/beesandbombs)' s [Motion Blur + Chromatic Aberration Template](https://gist.github.com/anonymous/10675250) using [p5js](https://p5js.org/) and GLSL 🎛✨\n\nYou might also be insterested in [@makio135/bnbshader](https://observablehq.com/@makio135/bnbshader) or [@makio135/bnbThree](https://observablehq.com/@makio135/bnbthree) 😉`","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"await visibility(), bnb({\n w: 540,\n h: 540,\n record: true,\n fps: 40,\n chromaticAberration: 1.2,\n shutterAngle: 1,\n samplesPerFrame: 8,\n \n setup: (sketch, globals) => {\n // initialize some globals in setup\n globals.pts = array(800).map((d, i, arr) => ({\n cos: sketch.cos(sketch.PI * 2 * i / arr.length),\n sin: sketch.sin(sketch.PI * 2 * i / arr.length),\n size: sketch.random(1, 5),\n offset: sketch.random(1.6) * sketch.sin( i /arr.length * sketch.TAU * 4)\n }))\n },\n \n draw: (sketch, time, globals) => {\n sketch.background(0)\n sketch.stroke(255, 200)\n \n sketch.push()\n sketch.translate(sketch.width / 2, sketch.height / 2)\n \n // use/update your globals in draw\n globals.pts.forEach(pt => {\n sketch.strokeWeight(pt.size)\n const rad = 160 + 80 * sketch.sin(sketch.TAU * time + pt.offset)\n const x = rad * pt.cos\n const y = rad * pt.sin\n sketch.point(x, y)\n })\n sketch.pop()\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"md`And it can now export MP4 videos as well by adding \\`video: true\\` to the options, or \\`video: 'webm'\\` to export WEBM files:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":958,"value":"md`If you want to see more examples:\n- https://observablehq.com/@makio135/square-noise\n- https://observablehq.com/@makio135/animated-stripes-gifs-from-scalar-fields\n- https://observablehq.com/@makio135/bnb-utility-example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"md`___`","pinned":false,"hidden":false,"mode":"ojs"},{"id":895,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`___\n## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"P5 = require('https://unpkg.com/p5@1.5.0/lib/p5.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1088,"value":"WebMWriter = require('https://bundle.run/webm-writer@0.2.4')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1235,"value":"HME = await require('h264-mp4-encoder@1.0.9/embuild/dist/h264-mp4-encoder.web.js').catch(() => window.HME)","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"import { GIF } from '@mbostock/canvas-to-gif'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1436,"value":"gifWorkerScript = {\n const script = await (await fetch('https://unpkg.com/gif.js@0.2.0/dist/gif.worker.js')).text();\n const blob = new Blob([script], {type: 'application/javascript'});\n return URL.createObjectURL(blob);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1437,"value":"md`\\`gifWorkerScript\\` from [@mootari](https://observablehq.com/@mootari/orientation)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"import { array, map, linearstep, ease, PI, TAU } from '@makio135/utilities' // used in examples","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}