31:T892,canvas = { let div = html`

`; let ctx = DOM.context2d(width, height); let canvas = ctx.canvas; canvas.style.border = "1px solid gray"; div.append(canvas); let mouse; let startCellAmp = amplificationViscosity ? 0 : cellAmplification; let limitCellAmp = cellAmplification; let ampIncrement = viscosityRate; let currentCA = startCellAmp; canvas.onmouseenter = (e) => { mouse = {x:e.offsetX, y:e.offsetY}; currentCA = startCellAmp }; canvas.onmouseleave = (e) => { mouse = undefined; currentCA = startCellAmp }; canvas.onmousemove = (e) => { let [newx,newy] = [e.offsetX, e.offsetY]; let [dx,dy] = [newx-mouse.x,newy-mouse.y]; let displacement = Math.sqrt(dx*dx+dy*dy) mouse = {x:newx, y:newy}; currentCA = Math.max(startCellAmp, currentCA-ampIncrement*displacement); }; let [CW,CH] = [grid.cw,grid.ch]; while (true) { ctx.clearRect(0,0,width,height); let order = []; let i = 0; if (currentCA < cellAmplification) currentCA += ampIncrement; for (let d of data) { let { x, y, w, h } = grid.cell(i++); let [cx,cy] = [x + w/2, y + h/2]; let scale = 1; if (mouse) { let [dx,dy] = [cx-mouse.x,cy-mouse.y]; let dist = Math.sqrt(dx*dx+dy*dy); let dscale = Math.pow(smoothStep(CW*amplificationNeighbors,0,dist),amplificationExponent); scale += /*cellAmplification*/ currentCA * dscale; cx += dx * dscale * offsetFactor; cy += dy * dscale * offsetFactor; } order.push ([cx,cy,scale,d.img]); } order.sort((a,b) => a[2]-b[2]); ctx.fillStyle = "lightgray"; for (let [cx,cy,scale,d] of order) { let [lx,ly] = [(CW-margin)*scale,(CH-margin)*scale]; let [x,y] = [cx-lx/2, cy-ly/2]; let dx=0,dy=0; if (d.width/d.height > lx/ly) { dy = (ly-lx*d.height/d.width)/2; ly -= dy*2 } else { dx = (lx-ly*d.width/d.height)/2 lx -= dx*2 } let [x0,y0] = [x+dx,y+dy]; if (x0 < 0) x0 = 0; if (y0 < 0) y0 = 0; if (x0+lx > width) x0 = width-lx; if (y0+ly > height) y0 = height-ly; ctx.drawImage(d,x0,y0,lx,ly) } yield div } }32:Tf27,links = [`

`, `

`, `

`, `

`, `

`, `

`, `

`, `

` ]33:[] 2f:{"title":"Photo gallery with lens","cells":[{"id":0,"value":"md`# Photo gallery with lens`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"viewof margin = slider ({min:0, max:50, step: 1, value:10, title:\"Margin\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"viewof nImages = slider ({min:10, max:400, step: 1, value:100, title:\"Number of images\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"viewof cellAmplification = slider ({min:0, max:10, step: 0.1, value:5, title:\"Cell amplification\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"viewof amplificationNeighbors = slider ({min:1, max:10, step: 1, value:5, title:\"Amplification Neighbors\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"viewof amplificationExponent = slider ({min:1, max:10, step: 1, value:1, title:\"Amplification Exponent\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"viewof offsetFactor = slider ({min:0, max:8, step: 0.1, value:1, title:\"Image Dynamic Offset\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"viewof amplificationViscosity = checkbox ({\n options: [{ label:\"yes\", value:\"true\"}],\n title: \"Amplification viscosity\",\n description: \"increase image amplification only when mouse is not moved\", \n value: \"true\" })\n\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"viewof viscosityRate = slider ({min:0.01, max:0.5, step: 0.01, value:0.1, title:\"Viscosity Rate\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"height = ~~(width*9/16)","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"html`

${links.reduce((a,b) => a.concat(b))}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"grid = {\n let ratio = width/height;\n let rows = ~~(Math.sqrt(nImages/ratio)+1)\n let cols = ~~(nImages/rows+1)\n let cellwidth = (width-margin) / (cols);\n let cellheight = (height-margin) / (rows);\n let cell = function (i) {\n return { x : i % cols * cellwidth + margin,\n y : ~~(i/cols) * cellheight + margin,\n w : cellwidth-margin,\n h : cellheight-margin }\n }\n return { cols:cols, rows:rows, cw : cellwidth, ch : cellheight, cell : cell}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"// A smooth interpolation between two values which has 0 as first and second derivatives both at x = 0 and x = 1\n// (see smoothstep in wikipedia)\nsmoothStep = function (edge0, edge1, x) {\n x = Math.min(Math.max((x - edge0)/(edge1 - edge0), 0.0), 1.0)\n return x*x*(3 - 2*x);\n // alternatively\n //return x*x*x*(x*(x*6 - 15) + 10)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"data = {\n let data = [];\n for (let i = 0; i < nImages; i++) {\n let datum = grid.cell(i);\n let a = anchors [i%anchors.length];\n datum.img = a.children[0];\n data.push(datum)\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"anchors = {\n let a = [];\n for (let l of links) a.push(html`${l}`);\n return a\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"import { fetchImage } from \"@mbostock/cross-origin-images\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"import { slider, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}