2e:null 2f:["$","title",null,{"children":"Image Pasta | Yang Su | Observable"}] 34:[] 32:{"id":"cbafbe9eda226771","slug":"image-pasta","title":"Image Pasta","thumbnail":"097de93a86a33e2336e78402056bd75bee5742431da1f839c448e86f90177ad5","access_level":"public","create_time":"$D2018-03-18T07:33:30.105Z","update_time":"$D2018-03-21T07:55:32.139Z","view_time":null,"first_public_time":"$D2018-03-19T02:19:31.307Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"82b8f3d195264861","login":"yangsu","name":"Yang Su","avatar_url":"https://avatars-next.observableusercontent.com/ab5bf88d9845aa5277c992ba228b712aa72b9e2a9ccb962b9762d2eed670600d","tier":"starter_2024"},"version":1438,"publish_version":1438,"role":null,"authored":false,"authors":[{"type":"individual","id":"4290ab24c309d119","login":"yangsu","name":"Yang Su","avatar_url":"https://avatars-next.observableusercontent.com/ab5bf88d9845aa5277c992ba228b712aa72b9e2a9ccb962b9762d2eed670600d","tier":null}],"members":[{"type":"individual","id":"4290ab24c309d119","login":"yangsu","name":"Yang Su","avatar_url":"https://avatars-next.observableusercontent.com/ab5bf88d9845aa5277c992ba228b712aa72b9e2a9ccb962b9762d2eed670600d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"drawImage(img, w, h, x, _.range(x), y, _.range(y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1351,"value":"md`## Vertical`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1249,"value":"md`First, let's slice the picture vertically into ${x} pieces.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"md`Similarly, let's put every other piece together to form 2 new pictures`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"viewof j = inputRange(0, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"drawWeave(img, w, h, x, y, 1, 2, j)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"viewof k = inputRange(0, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"drawWeave(img, w, h, xRes, yRes, rows, cols, k)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1411,"value":"md`We can actually go crazier and split the pieces into smaller pictures.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"md`## State`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"w = 350","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"r = img.height / img.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"h = r * w\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"s = styles => JSON.stringify(_.map(styles, (v, k) => `${k}: ${v};`).join(\"\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"ord = (n) => n == 1 ? \"1st\" : n == 2 ? \"2nd\" : n == 3 ? \"3rd\": `${n}th`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"import {file, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"