img2 = {
const totalWidth = 450;
const sizeSequence = [9,15,30]
const {width, height, luminosities} = downsampleCanvas
const size = totalWidth/width;
const w = width;
const h = height;
const lumiExcerpt = luminosities.filter((l,i) => i%width < w && Math.floor(i/height) < h)
const pixels = lumiExcerpt.map((p,i) => drawPixel(i%w,Math.floor(i/h), size, "#F5F5F5"))
const drawnPixels = lumiExcerpt.map((lumi,i) => {
const sketchRect = getSketchRectOfClass((1-lumi) * numClasses, true);
return sketchRect ? getSymbolPixel(i%w, Math.floor(i/h), size, sketchRect.id) : ''
})
const startDelay = 2
const zoomDur = 1;
const zoomDelay = 2
const animations = sizeSequence.slice(1).map((t,i) => {
return `<animate attributeName="viewBox" to="0 0 ${t*size} ${t*size}" dur="${zoomDur}s" begin="${i*(zoomDur+zoomDelay)+startDelay}s" fill="freeze" />`
})
const img = html`
<svg id="sketchpaper" height=${h*size} width=${w*size} viewBox="0 0 ${sizeSequence[0]*size} ${sizeSequence[0]*size}" overflow=hidden>
<animateTransform attributeName="transform" type="rotate"
from="45"
to="0"
dur="5s" />
${animations.join('\n')}
${pixels.join('\n')}
${drawnPixels.join('\n')}
</svg>
`;
const getSeqStage = (c,r) => {
const size = sizeSequence.find((s,i) => {
const prevS = i === 0 ? 0 : sizeSequence[i-1];
const larger = c > r ? c : r;
return larger >= prevS && larger < s
});
return sizeSequence.indexOf(size)
}
const symbolPaths = new Map();
templates.querySelectorAll(`symbol`).forEach(s => {
s.style.stroke = "#515151"
symbolPaths.set(s.id, s.querySelector('path'))
});
const speedScale = 0.1
const scribbles = img.querySelectorAll('use')
scribbles.forEach((p,i) => {
const {x,y} = p.dataset;
const href = p.getAttribute("xlink:href");
const path = symbolPaths.get(href.slice(1));
const len = +path.getAttribute("stroke-dasharray");
const stage = getSeqStage(+x,+y);
const stageFactor = 1 - stage / sizeSequence.length
let speed = len/1000 * zoomDur + stage * zoomDur;
let delay = stage * (zoomDur+zoomDelay) + stage * (+x * +y / scribbles.length * 20 * Math.random()) * speedScale
p.style.transition = `stroke-dashoffset ${(speed * stageFactor * speedScale).toFixed(2)}s ease-out ${delay.toFixed(2)}s`
p.style.strokeDashoffset = len;
})
yield img;
await Promises.delay(1)
scribbles.forEach(p => {
p.style.strokeDashoffset = 0
})
return img;
}