31:T541,// averageImage = { // const ctx = DOM.context2d(width, height); // const imageData = ctx.getImageData(0, 0, width, height); // const data = imageData.data; // data.forEach((_, index) => data[index] = 255); // const shuffle = d3.shuffle(d3.range(imageCanvi.length)); // let layers = []; // let imageIndex = 0; // while (layers.length < overlapAmount) { // layers.push(getLayer(imageIndex, performance.now() - Math.random() * speed)); // imageIndex = (imageIndex + 1) % imageCanvi.length; // } // while (true) { // const now = performance.now(); // layers = layers.filter(l => l.isAlive(now)); // while (layers.length < overlapAmount) { // layers.push(getLayer(imageIndex)); // imageIndex = (imageIndex + 1) % imageCanvi.length; // } // const imgs = layers.map(l => l.getImageData(now)); // const weights = layers.map(l => l.getWeight(now)); // const weightSum = weights.reduce((r, w) => r + w, 0); // for (let index = 0; index < data.length; index++) { // if (index % 4 !== 3) { // let sum = 0; // for (let j = 0; j < imgs.length; j++) { // sum += imgs[j].data[index] * weights[j]; // } // data[index] = sum / weightSum; // } // } // ctx.putImageData(imageData, 0, 0); // yield ctx.canvas; // } // }32:T5e2,// getLayer = { // const randLifespan = d3.randomNormal(speed, speed / 10); // const randRotation = d3.randomNormal(0, Math.PI / 64); // const randScale = d3.randomNormal(1.1, 0.05); // const cHelper = DOM.context2d(width, height); // return (imageIndex, start) => { // start = start || performance.now(); // const lifespan = randLifespan(); // const c = DOM.context2d(width, height); // c.drawImage(imageCanvi[imageIndex], 0, 0); // const rotation = d3.interpolateNumber(randRotation(), randRotation()); // const scale = d3.interpolateNumber(randScale(), randScale()); // return { // getWeight: (now) => { // const elapsed = now - start; // if (elapsed < 0 || elapsed > lifespan) // return 0; // const t = elapsed / lifespan; // if (t < fadeRatio) // return t / fadeRatio; // if (t > 1 - fadeRatio) // return (1 - t) / fadeRatio; // return 1; // }, // getImageData: (now) => { // const t = (now - start) / lifespan; // cHelper.translate(width / 2, height / 2) // cHelper.rotate(rotation(t)) // cHelper.scale(scale(t), scale(t)) // cHelper.translate(-width / 2, -height / 2) // cHelper.drawImage(c.canvas, 0, 0); // cHelper.setTransform(1, 0, 0, 1, 0, 0); // return cHelper.getImageData(0, 0, width, height); // }, // isAlive: (now) => now - start < lifespan, // }; // } // }33:[] 2f:{"title":"Animated Average Images II","cells":[{"id":0,"value":"md`# Animated Average Images II\n\nAnother go at enlivening Average Images (see earlier notebooks [I](https://beta.observablehq.com/@zzzev/average-images-of-earth), [II](https://beta.observablehq.com/@zzzev/animated-average-images)), with better (usable) performance.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1178,"value":"supportMessage = {\n if (!PIXI.utils.isWebGLSupported())\n return md`**Warning**: You are using a browser without WebGL, so performance will be very bad. Try another browser.`\n return md`You are using a supported browser. The video may take a few seconds to start playing.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":957,"value":"canvas = {\n let last = performance.now();\n let lastSpriteAdded = -Infinity;\n let texIndex = 0;\n let sprites = [];\n \n app.stage.removeChildren();\n \n while (true) {\n const now = performance.now();\n let elapsed = now - last;\n last = now;\n \n sprites.filter(s => now - s.birth >= s.lifespan)\n .forEach(s => app.stage.removeChild(s));\n sprites = sprites.filter(s => now - s.birth < s.lifespan);\n \n if (sprites.length < overlap && now - lastSpriteAdded > minTimeBetweenSprites) {\n const s = createSprite(texIndex, now);\n texIndex = (texIndex + 1) % textures.length;\n app.stage.addChild(s);\n sprites.push(s);\n lastSpriteAdded = now;\n }\n \n sprites.forEach(s => {\n const t = (now - s.birth) / s.lifespan;\n s.x = width / 2 + s.ix(t);\n s.y = height / 2 + s.iy(t);\n s.rotation = s.ir(t);\n s.alpha = interpolateAlpha(t);\n });\n yield app.view;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"viewof query = text({\n title: 'Query',\n description: 'What do you want to see?',\n value: 'bookstore',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"viewof subreddit = text({\n title: 'subreddit',\n value: 'itookapicture',\n description: 'try foggypics, spaceporn, itookapicture, etc.'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1118,"value":"md`This notebook uses PixiJS' WebGL based renderer for much better (60fps-ish performance). Without WebGL, it has a canvas fallback which has poor performance by comparison (not suitable for realtime rendering).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1156,"value":"createSprite = (texIndex, birth) => {\n const s = new PIXI.Sprite(textures[texIndex]);\n s.anchor.x = s.anchor.y = 0.5;\n const aR = s.height / s.width;\n if (aR >= aspectRatio) { // taller than screen\n s.width = width;\n s.height = aR * width;\n } else { // wider than screen\n s.height = height;\n s.width = height / aR;\n }\n s.birth = birth;\n s.alpha = 0;\n s.ix = d3.interpolateNumber(randPosition(), randPosition());\n s.iy = d3.interpolateNumber(randPosition(), randPosition());\n s.ir = d3.interpolateNumber(randRotation(), randRotation());\n s.lifespan = randLifespan();\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1075,"value":"randRotation = d3.randomNormal(0, Math.PI / 64)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1073,"value":"randPosition = d3.randomNormal(0, 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"randLifespan = d3.randomNormal(speed, 3e3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1084,"value":"interpolateAlpha = t => {\n if (t < fadeRatio) return d3.easeQuad(t / fadeRatio) * maxAlpha;\n if (t > 1 - fadeRatio) return d3.easeQuad((1 - t) / fadeRatio) * maxAlpha;\n return maxAlpha;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"app = {\n const a = new PIXI.Application({\n width,\n height,\n // backgroundColor: 0xFFFFFF,\n antialias: true,\n // resolution: devicePixelRatio,\n });\n \n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"textures = imageUrls.map(url => resources[url].texture)\n .filter(tex => tex.width > width / 2 && tex.height > height / 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"minTimeBetweenSprites = 1e3","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"resources = {\n let resolve;\n const promise = new Promise(r => resolve = r);\n PIXI.loader.reset();\n PIXI.loader.add(imageUrls).load(() => resolve(PIXI.loader.resources));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"viewof overlap = slider({\n step: 1,\n min: 1,\n max: textures.length,\n title: 'Overlap',\n description: \"Number of images to overlap at once\",\n value: textures.length,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"viewof speed = slider({\n step: 1,\n min: 500,\n max: 100000,\n title: 'Animation Speed',\n description: \"ms per image rotation\",\n value: 50000,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"viewof imageCount = slider({\n step: 1,\n min: 1,\n max: 100,\n title: 'Image Count',\n description: \"Number of images to request and combine\",\n value: 50,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"viewof maxAlpha = slider({\n step: 0.01,\n min: 0,\n max: 1,\n title: 'Layer Opacity',\n value: 0.1,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":764,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"fadeRatio = 0.2","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"height = width * aspectRatio","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"aspectRatio = 9 / 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"imageUrls = searchResults.map(d => d.data.url)\n .filter(url => url.includes('imgur') || /jpg$/.test(url))\n .map(url => /jpg$/.test(url) ? url : url + '.jpg')\n .map(url => /\\/imgur/.test(url) ? url.replace('imgur', 'i.imgur') : url)\n .map(url => /reddit/.test(url) || /redd\\.it/.test(url) ? url + '?jsonp=test' : url)","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"searchUrl = `https://www.reddit.com/r/${subreddit}/search.json?restrict_sr=true&sort=top&t=all&limit=${imageCount}&q=${encodeURIComponent(query)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"searchResults = (await d3.json(searchUrl)).data.children","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"import {slider, text} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"PIXI = require('https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"`PIXI is ${PIXI.utils.isWebGLSupported() ? '' : 'NOT '}using WebGL`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1175,"value":"import {progress} from '@mootari/displaying-progress'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}