30:T466,{ let imgdata = baseImage(); let [w,h] = [imgdata.width, imgdata.height]; let img = imgdata.canvas; let ctx = DOM.context2d(w,h,1); function computeScale (n=100,m=10,func,xmin,xmax) { let a = [] let total = 0 let delta = [xmax-xmin]/(m-1) for (let i = 0; i < m; i++) { let x = xmin+i*delta; let y = func(x) total += y a.push (y) } let factor = n / total return a.map(x=>x*factor) } let {speed,smoothness,cycles,freq} = slideConfig; let offset = 0; let translate = w/2; let draw = function() { ctx.clearRect(0,0,w,h); let srcx = 0, dstx = translate; let slices = 40, dslice = w/slices; let thick = computeScale (w,slices,(x => Math.sin(x)+smoothness),offset,offset+cycles*Math.PI); for (let s of thick) { ctx.drawImage(img,srcx,0,dslice,h,dstx,0,s,h) srcx += dslice; dstx += s; } offset+=Math.PI/80*freq; translate -= speed; if (translate <= -w) translate = w; } draw() yield ctx.canvas; for (;;) { await visibility(); await Promises.delay(100); draw(); yield ctx.canvas; } }31:T61f,{ let imgdata = baseImage(); let [w,h] = [imgdata.width,imgdata.height] let s = ballConfig.ballSize let r = ~~(s/2*ballConfig.displaceRatio) let centers = new Map() let displacements = [[0,0],[r,0],[r,r],[0,r]] let nmax = 0; for (let k = 0; k < 4; k++) { let pixels = baseImage(...displacements[k]).data for (let x = 0; x < w; x += s) { for (let y = 0; y < h; y += s) { let n = 0; for (let i = -r+1;i0) { let key = `${x},${y}` let count = centers.has(key) ? centers.get(key) : [0,0,0,0] count[k] = n nmax = Math.max(n,nmax) centers.set(key,count) } } } } let data = [] let aten = 2**ballConfig.radiusFactor centers.forEach ((value,key)=> { let [x,y] = key.split(",").map(x=>+x); let R = value.map(x=>s/2*(x/nmax)**aten); data.push ({x,y,r:R}) }) let svgNode = DOM.svg(w,h) let svg = d3.select(svgNode) let circles = svg.selectAll("circle").data(data).join("circle") .attr("cx", d=>d.x) .attr("cy", d=>d.y) .attr("r", d=>d.r[0]); let ang = 0, dang = ballConfig.speed / 100 function animate() { let alpha = ang % 4 let i = ~~alpha; let j = (i+1)%4; let a = alpha%1 ang += dang; circles.attr ("r", d=> (1-a) * d.r[i] + a * d.r[j] ); } animate(); yield svgNode; for (;;) { await visibility(); await Promises.delay(100); animate(); } }32:T5d9,{ let imgdata = baseImage(); let [w,h] = [imgdata.width,imgdata.height] let ctx = DOM.context2d(w,h,1) let ctx2 = DOM.context2d(w,h,1) ctx.putImageData(imgdata,0,0) let smin = stripeConfig.minStripe, smax = stripeConfig.maxStripe, s = (smin+smax)/2; let stripeAng = Math.PI/180*stripeConfig.angle let x0 = -h*Math.tan(stripeAng) let [y0,y1] = [0,h]; if (x0 < 0) { x0 = -x0; [y0,y1] = [h,0]; } let dx = 1; let ang = 0, dang = stripeConfig.speed/180*Math.PI, offset = 0 function paintFrame(ctx) { ctx.globalCompositeOperation = 'source-over' ang = offset; ctx.putImageData(imgdata,0,0) ctx.globalCompositeOperation = 'destination-out' for (let x = -x0; x < w; x+=dx) { let a = (Math.cos(ang)+1)/2 ang += dang let thick = smin*(1-a)+smax*a dx = thick*(1.1+stripeConfig.sep); ctx.lineWidth = thick; ctx.beginPath() ctx.moveTo(x,y0) ctx.lineTo(x+x0,y1) ctx.stroke(); } } let [tx,ty] = [s*Math.cos(stripeAng),s*Math.sin(stripeAng)]; function paint () { ctx2.setTransform(1, 0, 0, 1, 0, 0); paintFrame(ctx2) ctx.setTransform(1, 0, 0, 1, 0, 0); paintFrame(ctx) ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalCompositeOperation = 'source-over' ctx.drawImage(ctx2.canvas,tx,ty) } function animate() { offset += dang; paint() } paint(ctx) yield ctx.canvas; for (;;) { await Promises.delay(100); await visibility() animate() } }33:T472,{ let noise = octave(perlin2,scaleConfig.octaves) function computeScale (n=100,m=10,angle=Math.PI*2,seed=0,min=0.2) { let a = [] let total = 0 for (let i = 0; i < m; i++) { let x = noise(i/m,seed)+0.5 total += x a.push (x) seed+=angle/10/m } let factor = n / total return a.map(x=>x*factor) } let imgdata = baseImage(); let img = imgdata.canvas; let [w,h] = [imgdata.width,imgdata.height] let ctx = DOM.context2d(w,h,1) let s = 10; let [nx,ny] = [~~(w/s),~~(h/s)] let seed = 0; let gap = 0; function draw() { ctx.clearRect(0,0,w,h); seed += Math.PI/10*scaleConfig.speed let [dx,dy] = [computeScale (w,nx,2*Math.PI/ny*nx,seed), computeScale (h,ny,2*Math.PI,seed)]; for (let i = 0, dstx = 0; i < nx ; dstx+= dx[i], i++ ) { let x = i*s; for (let j = 0, dsty = 0; j < ny; dsty+= dy[j], j++) { let y = j*s ctx.drawImage (img, x, y, s, s, dstx, dsty, dx[i]-gap, dy[j]-gap) } } } draw(); yield ctx.canvas; for (;;) { await Promises.delay(100); await visibility() draw() } }34:T800,{ let {margin,ballCount,radius,deformRatio,speed} = ballDeformConfig; let {w,h,positive,negative} = baseCurves() let ctx = DOM.context2d(w+margin*2,h+margin*2,1) ctx.translate(margin,margin) function avg (p) { let n = p.length; let q = [] for (let i = 0; i < n; i++) { let [a,b,c] = [p[(i+n-1)%n],p[i],p[(i+1)%n]]; q.push ({x:(a.x+b.x+c.x)/3,y:(a.y+b.y+c.y)/3}) } return q } let smoothStep = (edge0,edge1) => (x) => { x = Math.min(Math.max((x - edge0) / (edge1 - edge0), 0.0), 1.0); return x * x * (3 - 2 * x); }; let displaceFunc = (center, radius, delta) => { let ss = smoothStep(radius, 0) return (pt) => { let v = { x: pt.x-center.x, y: pt.y-center.y}; let d = Math.sqrt(v.x*v.x+v.y*v.y); if (d == 0) return pt let factor = ss(d)*delta; return { x : v.x/d*factor, y: v.y/d*factor} } } let bb = bouncingballs(w,h,ballCount,speed) //return circ function draw () { let dfs = bb.next().value.map(ball=>displaceFunc(ball.pos, radius, radius*deformRatio)) let move = p => { let v = dfs.map (df => df(p)).reduce ((v1,v2) => ({x: v1.x+v2.x, y:v1.y+v2.y })) return {x:p.x+v.x, y:p.y+v.y} } ctx.clearRect(-margin,-margin,w+margin*2,h+margin*2) ctx.globalCompositeOperation = 'source-over' for (let c0 of positive) { let c = avg(c0.map(move)) ctx.beginPath() let {x,y} = c[0] for (let {x,y} of c) { ctx.lineTo(x,y) } ctx.fill() } ctx.globalCompositeOperation = 'destination-out' for (let c0 of negative) { let c = avg(c0.map(move)) ctx.beginPath() let {x,y} = c[0] for (let {x,y} of c) { ctx.lineTo(x,y) } ctx.fill() } } yield ctx.canvas; draw(); for (;;) { await Promises.delay(100); await visibility() draw() } }35:T661,{ let {margin,octaves,speed,radius,outline} = noiseTransformConfig; let {w,h,positive,negative} = baseCurves() let ctx = DOM.context2d(w+margin*2,h+margin*2,1) ctx.translate(margin,margin) let noise = octave(perlin3,octaves); let zx = Math.random(), zy = Math.random(); function move(p) { let {x,y} = p; let dx = noise(x/w,y/h,zx)*radius let dy = noise(x/w,y/h,zy)*radius return Vec(x+dx,y+dy) } function draw () { if (outline) { ctx.fillStyle = 'rgba(255,255,255,0.2)' ctx.fillRect(-margin,-margin,w+margin*2,h+margin*2) } else { ctx.clearRect(-margin,-margin,w+margin*2,h+margin*2) } zx += speed; zy += speed; ctx.fillStyle = 'black' if (outline) { for (let curve of positive.concat(negative)) { for (let p of curve) { let {x,y} = move(p) ctx.fillRect(x,y,1,1) } } } else { ctx.globalCompositeOperation = 'source-over' for (let curve of positive) { let {x,y} = move(curve[0]) ctx.beginPath() ctx.moveTo(x,y) for (let p of curve) { let {x,y} = move(p); ctx.lineTo(x,y) } ctx.fill() } ctx.globalCompositeOperation = 'destination-out' for (let curve of negative) { let {x,y} = move(curve[0]) ctx.beginPath() ctx.moveTo(x,y) for (let p of curve) { let {x,y} = move(p); ctx.lineTo(x,y) } ctx.fill() } } } draw() yield ctx.canvas; for (;;) { await Promises.delay(100); await visibility() draw() } }36:T746,mosaic = { let imagedata = baseImage() let data = imagedata.data; let [w,h] = [imagedata.width,imagedata.height] function getPixel (x,y) { let i = (y*w+x)*4; return {r:data[i],g:data[i+1],b:data[i+2],a:data[i+3]} } let config = ({ cellSize:8, octaves:2, jitter:4, speed:0.05, radius:15 }) let {cellSize,jitter,octaves,speed,radius,margin} = voronoiConfig; let ctx = DOM.context2d(w+margin*2,h+margin*2,1) let dx = cellSize*2, dy = cellSize/Math.sqrt(3); let nx = Math.ceil(w/dx), ny=Math.ceil(h/dy) let noise = octave(perlin3,octaves); let zx = Math.random(), zy = Math.random(); function move(x,y) { let dx = noise(x,y,zx)*radius let dy = noise(x,y,zy)*radius return [x+dx,y+dy] } let points = []; for (let i = 0, y = 0; i < ny; y += dy, i++) { let x0 = i%2==0 ? 0 : cellSize; for (let j = 0, x = x0; j < nx; j++, x += dx) { points.push ([x+Math.random()*jitter-jitter/2,y+Math.random()*jitter-jitter/2]) } } function draw() { let centers = points.map(p => move(...p)) zx += speed; zy += speed; let delaunay = d3.Delaunay.from(centers) let voronoi = delaunay.voronoi([-1, -1, w + 1, h + 1]) let cells = points.map((d, i) => [d, voronoi.cellPolygon(i)]); ctx.clearRect(0,0,w,h) for (let [center,poly] of cells) { if (!poly) continue; let [cx,cy] = center; let {r,g,b,a} = getPixel(~~cx,~~cy); ctx.fillStyle = `rgba(${r},${g},${b},${a})`; ctx.strokeStyle='white' let [x,y] = poly[0]; ctx.beginPath() ctx.moveTo (x+margin,y+margin) for (let [x,y] of poly) { ctx.lineTo(x+margin,y+margin) } ctx.fill() ctx.stroke() } } draw() yield ctx.canvas; for (;;) { await Promises.delay(100); await visibility() draw() } } 37:[] 2e:{"title":"Kinetic typography","cells":[{"id":0,"value":"md`# Kinetic typography\n\nThis is my take on creating animations based on a fixed text string. Although we focus on formatted text, most of these can be adapted to animate any black and white image. I present various design ideas below, some of them borrowed from [André Burnier](http://www.andreburnier.com) as explained in his talk [*10 ways to distort letters*](https://www.youtube.com/watch?v=IrceIl-g-XY) (original title in Portuguese: '10 maneiras de distorcer letras').\n\nEach animation can be varied using the configuration panel above it. The common configuration panel below lets you choose font family, font size as well as the text to be animated.\n\nI intend to add new effects to this notebook. Stay tuned!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"viewof fontOptions = { \n let div = html``;\n \n let i = 0;\n for (let fam of ['Bungee', 'Concert One', 'Aldrich', 'Times-bold']) {\n i++\n div.append (html`\n \n ${fam}\n `)\n }\n function getChecked () {\n for (let x of div) { if (x.checked) return x.value; }\n return null\n }\n div.oninput = () => { div.value = getChecked() }\n div.value = getChecked()\n let size = select({title:\"Size\",options:[80,120,160,200]})\n let inputText = text({value:\"Some Text\", title: \"Text\"})\n return combo({family:div,size,inputText})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1010,"value":"viewof slideConfig = {\n return combo({ speed:number({title:\"Translation speed\", min:0, max:20, value:3, step:1}),\n smoothness: number({title:\"Smoothness\", min:1, max:5, value:1.2, step:0.1}),\n cycles:number({title:\"Cycles\", min:1, max:10, value:2, step:1}),\n freq:number({title:\"Frequency\", min:1, max:10, value:5, step:1}),\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":978,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"viewof ballConfig = {\n return combo({ballSize:number({title:\"Ball Size\", min:4, max:20, value:10, step:1}),\n displaceRatio:number({title:\"Displacement ratio\", min:0, max:2, value:1, step:0.1}),\n radiusFactor:number({title:\"Radius atenuation\", min:-5, max:5, value:0, step:1}),\n speed:number({title:\"Speed\", min:0, max:100, value:30, step:1}),\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"viewof stripeConfig = {\n return combo({minStripe:number({title:\"Min stripe\", min:2, max:20, value:5, step:0.1}),\n maxStripe:number({title:\"Max stripe\", min:2, max:20, value:6, step:0.1}),\n angle:number({title:\"Angle\", min:-60, max:60, value:-45, step:1}),\n sep:number({title:\"Separation\", min:0, max:5, value:2, step:0.1}),\n speed:number({title:\"Speed\", min:0, max:90, value:5, step:5}),\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"viewof pixConfig = {\n return combo({pixelSize:number({title:\"Pixel size\", min:4, max:30, value:10, step:1}),\n octaves:number({title:\"Noise octaves\", min:1, max:5, value:2, step:1}),\n speed:number({title:\"Speed\", min:0, max:1, value:0.05, step:0.01}),\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"{\n let imgdata = baseImage();\n let img = imgdata.canvas;\n let [w,h] = [imgdata.width,imgdata.height]\n let ctx = DOM.context2d(w,h,1)\n let s = pixConfig.pixelSize;\n let [nx,ny] = [~~(w/s),~~(h/s)]\n let noise = octave(perlin3,pixConfig.octaves)\n for (let i = 0; i <=nx ; i++) {\n let x = i*s\n for (let j = 0; j <= ny; j++) {\n let y = j*s\n let a = noise(i/ny,j/ny,0)+0.5\n ctx.globalAlpha = a\n ctx.drawImage (img, x, y, s, s, x, y, s, s)\n }\n }\n let z = 0\n function animate() {\n ctx.clearRect(0,0,w,h)\n z+=pixConfig.speed\n for (let i = 0; i <=nx ; i++) {\n let x = i*s\n for (let j = 0; j <= ny; j++) {\n let y = j*s\n let a = noise(i/ny,j/ny,z)+0.5\n ctx.globalAlpha = a\n ctx.drawImage (img, x, y, s, s, x, y, s, s)\n }\n }\n }\n animate();\n yield ctx.canvas;\n for (;;) {\n await Promises.delay(100);\n await visibility()\n animate()\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"viewof scaleConfig = {\n return combo({pixelSize:number({title:\"Pixel size\", min:4, max:30, value:10, step:1}),\n octaves:number({title:\"Noise octaves\", min:1, max:5, value:2, step:1}),\n speed:number({title:\"Speed\", min:0, max:1, value:0.15, step:0.01}),\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"viewof ballDeformConfig = {\n return combo({ballCount:number({title:\"Number of balls\", min:1, max:10, value:3, step:1}),\n radius:number({title:\"Ball radius\", min:20, max:300, value:150, step:1}),\n deformRatio:number({title:\"Deformation ratio\", min:0, max:1, value:0.1, step:0.01}),\n speed:number({title:\"Speed\", min:1, max:50, value:5, step:1}),\n margin:number({title:\"Margin\", min:0, max:200, value:40, step:1}),\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"viewof noiseTransformConfig = {\n return combo({\n octaves:number({title:\"Noise octaves\", min:1, max:5, value:2, step:1}),\n radius:number({title:\"Noise radius\", min:20, max:200, value:80, step:1}),\n speed:number({title:\"Speed\", min:0, max:1, value:0.05, step:0.01}),\n margin:number({title:\"Margin\", min:0, max:200, value:40, step:1}),\n outline:checkbox({title:\"Outline\",options:[\"Yes\"],value:[\"Yes\"]})\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":923,"value":"viewof voronoiConfig = {\n return combo({\n cellSize:number({title:\"Cell size\", min:3, max:20, value:8, step:1}),\n speed:number({title:\"Speed\", min:0, max:1, value:0.1, step:0.01}),\n jitter:number({title:\"Jitter\", min:3, max:20, value:4, step:1}),\n radius:number({title:\"Noise radius\", min:3, max:20, value:8, step:1}),\n octaves:number({title:\"Noise octaves\", min:1, max:5, value:2, step:1}),\n margin:number({title:\"Margin\", min:0, max:200, value:40, step:1}),\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":938,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"md`

\n## Utilities and libraries`","pinned":true,"hidden":false,"mode":"ojs"},{"id":508,"value":"fonts = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"font = {\n let f = `${fontOptions.size}px '${fontOptions.family}'`;\n await document.fonts.load(f);\n return f\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":733,"value":"//\n// Generates positions for a set of n random bouncing balls in a w by h rectagle, moving\n// at the given speed (pixels per iteration\n//\nbouncingballs = function* (w,h,speed = 5, n = 5) {\n let balls = []\n for (let i = 0; i < n; i++) {\n let ang = Math.random()*Math.PI*2\n balls.push ({pos : {x: Math.random()*w, y: Math.random()*h},\n vel : {x: Math.cos(ang)*speed, y: Math.sin(ang)*speed}})\n }\n for (;;) {\n yield balls;\n for (let {pos,vel} of balls) {\n pos.x += vel.x; \n if (pos.x < 0) { vel.x = -vel.x; pos.x = -pos.x; }\n else if (pos.x > w) { vel.x = -vel.x; pos.x = 2*w - pos.x;}\n pos.y += vel.y; \n if (pos.y < 0) { vel.y = -vel.y; pos.y = -pos.y; }\n else if (pos.y > h) { vel.y = -vel.y; pos.y = 2*h - pos.y; }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"//\n// returns imageData for our base picture\n//\nbaseImage = function (dx=0,dy=0) {\n let [w,h] = [800,600]\n let ctx = DOM.context2d(w,h,1)\n let margin = 20;\n ctx.font = font\n let m = ctx.measureText(fontOptions.inputText)\n let {actualBoundingBoxLeft:l,actualBoundingBoxRight:r,\n actualBoundingBoxAscent:a,actualBoundingBoxDescent:d} = m\n ctx.fillText(fontOptions.inputText, margin-l+dx,a+margin+dy)\n let imgData = ctx.getImageData(0,0,margin*2+r-l,margin*2+a+d)\n imgData.canvas = ctx.canvas\n return imgData\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":794,"value":"{\n let {w,h,positive,negative} = baseCurves()\n let ctx = DOM.context2d(w,h,1)\n for (let curve of positive.concat(negative)) {\n for (let {x,y} of curve) {\n ctx.fillRect(x,y,1,1)\n }\n }\n return ctx.canvas\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":785,"value":"//\n// Generates a canvas and imageData for our base picture\n//\n\nbaseCurves = function () {\n let imgdata = baseImage();\n let img = imgdata.canvas;\n let [w,h] = [imgdata.width,imgdata.height]\n let ctx = DOM.context2d(w,h,1)\n let circ = getCirculations (imgdata)\n let comps = circ.closed.slice(0);\n comps.reverse();\n function toCurve (array) {\n let c = new Curve(...array);\n let n = ~~c.perimeter()\n return c.resample(n,true)\n }\n return {\n w,h,\n positive :comps.filter(comp => comp.inside.length%2 == 0).map(comp => toCurve(comp.points)),\n negative :comps.filter(comp => comp.inside.length%2 != 0).map(comp => toCurve(comp.points))\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":787,"value":"baseCurves()","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":593,"value":"import {octave,perlin2,perlin3} from \"@mbostock/perlin-noise\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"import {combo} from \"@esperanc/aggregated-inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":331,"value":"import {select,number,radio,text,checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":697,"value":"import {getCirculations, drawCirculations} from \"@esperanc/bitmap-tracing\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":783,"value":"import { Vec, Curve } from \"@esperanc/2d-geometry-utils\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}