30:[] 2e:{"title":"Image Pasta","cells":[{"id":0,"value":"md`# Image Pasta\n\nI recently saw a [video on reddit](https://www.reddit.com/r/woahdude/comments/84zi1e/destructive_yet_creative/?st=JEV1R8CW&sh=bde363b1) that split a picture into strips using a pasta maker and then weaved pieces together to create smaller pictures.\n\n\n\nI thought it might be fun to try to recreate this as I'm learning Observable.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"viewof f = file({\n title: \"Image\",\n description: \"Pick an image\",\n accept: \".jpg, .png\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"drawImage(img, w, h, x, _.range(x), y, _.range(y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1351,"value":"md`## Vertical`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1249,"value":"md`First, let's slice the picture vertically into ${x} pieces.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"viewof x = slider({\n min: 2, \n max: 20, \n step: 2, \n value: 10, \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1200,"value":"{\n while (true) {\n for (let xi = 0; xi <= x; xi++) {\n await Promises.delay(200);\n yield html`

\n\t\t${drawImage(img, w, h, x, _.range(x), y, _.range(y), {alpha: (i, j) => i === xi - 1 ? 1 : 0.2})}\n\t

`;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"md`Now, let's put every other piece together to form 2 new pictures.`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"viewof i = slider({\n min: 0,\n max: 1,\n value: 0,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"drawWeave(img, w, h, x, y, 2, 1, i)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1353,"value":"md`## Horizontal`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1297,"value":"md`Let's split the same picture horizontally into ${y} pieces.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"viewof y = slider({\n min: 2, \n max: 20, \n step: 2, \n value: 10, \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"{\n while (true) {\n for (let yi = 0; yi <= y; yi++) {\n await Promises.delay(200);\n yield html`

\n\t\t${drawImage(img, w, h, x, _.range(x), y, _.range(y), {alpha: (i, j) => j === yi - 1 ? 1 : 0.2})}\n\t

`;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"md`Similarly, let's put every other piece together to form 2 new pictures`","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"viewof j = inputRange(0, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"drawWeave(img, w, h, x, y, 1, 2, j)","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"md`## 2D\n\nTo reproduce the image pasta from the video, we need to split the pieces evenly into 4 smaller pictures.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"viewof xRes = slider({\n min: 2, \n max: 20, \n step: 2, \n value: 10, \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1161,"value":"viewof yRes = slider({\n min: 2, \n max: 20, \n step: 2, \n value: 10, \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"viewof k = inputRange(0, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"drawWeave(img, w, h, xRes, yRes, rows, cols, k)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1411,"value":"md`We can actually go crazier and split the pieces into smaller pictures.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"viewof rows = slider({\n min: 1, \n max: 5, \n step: 1, \n value: 2, \n description: \"# rows of smaller pictures\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"viewof cols = slider({\n min: 1, \n max: 5, \n step: 1, \n value: 2, \n description: \"# cols of smaller pictures\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"md`## State`","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"w = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":854,"value":"r = img.height / img.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"h = r * w\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"img = {\n const img = html``;\n img.src = await Files.url(f);\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"drawWeave = (img, w, h, x, y, nx, ny, k) => {\n const ww = Math.min(w, width/ny);\n const hh = ww * r;\n\n return html`

\n ${_.chain()\n .range(nx)\n .map(i =>\n _.range(ny).map(j => {\n const xis = _.range(i, x + i, nx);\n const yis = _.range(j, y + j, ny);\n const xGap = (1 - k) * ww / x * (nx - 1);\n const yGap = (1 - k) * hh / y * (ny - 1);\n return html`

\n ${drawImage(\n img, ww, hh,\n x, xis,\n y, yis,\n {xGap, yGap}\n )}\n

`;\n })\n )\n .flatten()\n .value()}\n

`;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"drawImage = (\n img, w, h, xn, xis, yn, yis, \n {\n xGap = 0, \n yGap = 0,\n alpha = () => 1.0,\n } = {}\n) => {\n const dWidth = w / xn;\n const dHeight = h / yn;\n\n const sWidth = img.naturalWidth / xn;\n const sHeight = img.naturalHeight / yn;\n\n h = h + (yis.length - 1) * yGap;\n w = w + (xis.length - 1) * xGap;\n const context = DOM.context2d(w, h);\n context.clearRect(0, 0, w, h);\n xis.forEach((xi, i) => {\n yis.forEach((yi, j) => {\n \t context.globalAlpha = alpha(i, j);\n context.drawImage(\n img,\n\n xi * sWidth,\n yi * sHeight,\n\n sWidth,\n sHeight,\n\n i * (dWidth + xGap),\n j * (dHeight + yGap),\n dWidth,\n dHeight\n );\n \n \t context.restore();\n });\n });\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"s = styles => JSON.stringify(_.map(styles, (v, k) => `${k}: ${v};`).join(\"\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"ord = (n) => n == 1 ? \"1st\" : n == 2 ? \"2nd\" : n == 3 ? \"3rd\": `${n}th`","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"inputRange = (min, max, step, value = (max + min)/2) => {\n const input = DOM.range(min, max, step);\n input.value = value;\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"import {file, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}