2c:null 2d:["$","title",null,{"children":"Bulge Illusion | Fabian Iwand | Observable"}] 32:T85b,{ const options = { columns: 13, rows: 5, size: 80, randomness: .2, minRadius: .15, maxRadius: .4, timeStep: .007, bgColor: 'hsl(0,0%,0%)', fillColor: 'hsl(0,0%,100%)', lineColor: 'hsl(0,0%,50%)', lineWidth: 2, }; const { bgColor, columns: w, rows: h, size: s, minRadius: rMin, maxRadius: rMax, timeStep: step, lineWidth, randomness: rand} = options; const cx = (w-1)/2, cy = (h-1)/2, PI = Math.PI; const c = DOM.context2d(w*s, h*s, 1); c.canvas.style.maxWidth = '100%'; c.fillStyle = options.fillColor; c.strokeStyle = options.lineColor; c.lineWidth = lineWidth; const offsets = []; for(let [x,y] of walkGrid(w,h)) { const tlbr = (!x&&!y) || (x+1==w&&y+1==h); const trbl = (!x&&y+1==h) || (x+1==w&&!y); offsets.push([ ((x>cx&&y<=cy) || (x<=cx&&y>cy)) && !trbl || tlbr, // top left ((x=cx&&y>cy)) && !tlbr || trbl, // top right ((x=cy) || (x>=cx&&ycx&&y>=cy) || (x<=cx&&y 0) { c.beginPath(); for(let [x,y] of walkGrid(w,h)) c.rect(x*s, y*s, x*s+s, y*s+s); c.stroke(); } yield c.canvas; t = (t + step) % 1; } function* walkGrid(w, h) { for(let y = 0; y < h; y++) for(let x = 0; x < w; x++) yield [x,y]; } function arc(x, y, i, r) { const Q = Math.PI/2; const map = [[0,0],[1,0],[1,1],[0,1]]; const px = (x + map[i][0])*s; const py = (y + map[i][1])*s; c.moveTo(px, py); c.arc(px, py, r*s, Q*i, Q*(i+1)); c.lineTo(px, py); } }33:[] 30:{"id":"da9a36efe4e9cc9c","slug":"bulge-illusion","title":"Bulge Illusion","thumbnail":"c9bb25b6138cfeaf7f724ac05c9d84509f5f227b398664ba8f3d0245696850dc","access_level":"public","create_time":"$D2019-02-07T21:24:49.265Z","update_time":"$D2019-02-08T15:14:45.313Z","view_time":null,"first_public_time":"$D2019-02-07T23:43:29.219Z","fork":false,"stars":20,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":376,"publish_version":376,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":8,"collection":{"id":"414312a67ea30ac3","slug":"generative","title":"Generative","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"Bulge Illusion","cells":[{"id":0,"value":"md`\n# Bulge Illusion\n\nThis illusion by [Akiyoshi Kitaoka](https://twitter.com/AkiyoshiKitaoka) contains only straight horizontal and vertical lines. \nNote: Randomly varied circle sizes and animation are not part of the original illusion.\n\n(via [Massimo](https://twitter.com/Rainmaker1973/status/1093617415265632257))\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"