2c:null 2d:["$","title",null,{"children":"Texture Generator | Leonardo Kewitz | Observable"}] 32:[{"id":"e641cbdd4756158cc8c27176c847c105773ade3e9862102e04d54d33779e24c6aa9b9e03ab35038d8b85e21295cc8da9107e4519a31f7632c910d0bf7cfbcc63","href":"https://static.observableusercontent.com/files/e641cbdd4756158cc8c27176c847c105773ade3e9862102e04d54d33779e24c6aa9b9e03ab35038d8b85e21295cc8da9107e4519a31f7632c910d0bf7cfbcc63","name":"noise-small.png","type":"image/png","lastModified":1593213480708.778,"size":7951}] 30:{"id":"14a57ae2f095717e","slug":null,"title":"Texture Generator","thumbnail":"9ef4c59180ac5e46458fd6097a10fa1fac247e40e64098c12093846c2448420e","access_level":"public","create_time":"$D2020-06-26T21:39:42.163Z","update_time":"$D2024-02-24T18:51:57.923Z","view_time":null,"first_public_time":"$D2023-12-12T13:31:49.057Z","has_unpublished_edits":null,"fork":{"id":"3515a8bc832d8376","slug":"pixel-grain-html5","title":"Pixel Grain HTML5","owner":{"id":"5d3f29b3abfdfeb7","login":"kewitz","name":"Leonardo Kewitz"}},"stars":1,"starred":false,"owner":{"type":"team","id":"5d3f29b3abfdfeb7","login":"kewitz","name":"Leonardo Kewitz","avatar_url":"https://avatars-next.observableusercontent.com/2aef377a8659ae1f2c5e918afe50bf95dfa0ddae59ae8db3b62a2de659f81d8a","tier":"starter_2024"},"version":847,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"58f4527ace0580f9","login":"kewitz","name":"Leonardo Kewitz","avatar_url":"https://avatars-next.observableusercontent.com/2aef377a8659ae1f2c5e918afe50bf95dfa0ddae59ae8db3b62a2de659f81d8a","tier":null}],"members":[{"type":"individual","id":"58f4527ace0580f9","login":"kewitz","name":"Leonardo Kewitz","avatar_url":"https://avatars-next.observableusercontent.com/2aef377a8659ae1f2c5e918afe50bf95dfa0ddae59ae8db3b62a2de659f81d8a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Texture Generator","cells":[{"id":569,"value":"md`\n# Texture Generator\n\n1. Textures from: https://www.behance.net/gallery/56762193/FREE-DOWNLOAD-Modulation-Glitch-Textures\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"viewof noise = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"image = FileAttachment(\"noise-small.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"{\n const render = (pixels) => {\n const d = pixels.data;\n for (let x = 0; x < pixels.width; x += 1) {\n for (let y = 0; y < pixels.height; y += 1) {\n const i = y * 4 * pixels.width + x * 4;\n const { r, g, b } = net.run({ x, y });\n d[i] = r;\n d[i + 1] = g;\n d[i + 2] = b;\n }\n }\n return pixels;\n };\n\n // const canvas = renderImage(image, render);\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"net = {\n const net = new brain.recurrent.LSTM();\n const range = (n) => Array.from({ length: n }).map((_, i) => i);\n\n let data = [];\n const train = (pixels) => {\n const d = pixels.data;\n for (let x = 0; x < pixels.width; x += 10) {\n for (let y = 0; y < pixels.height; y += 10) {\n const input = [];\n const output = [];\n range(10).map((dx) =>\n range(10).map((dy) => {\n const i = (y + dy) * 4 * pixels.width + (x + dx) * 4;\n input.push(dx + x, dy + y);\n let r = d[i];\n let g = d[i + 1];\n let b = d[i + 2];\n output.push(r * 1, g * 1, b * 1);\n })\n );\n console.log(input, output);\n // const i = y * 4 * pixels.width + x * 4;\n // let r = d[i];\n // let g = d[i + 1];\n // let b = d[i + 2];\n net.train([\n {\n input,\n output\n }\n ]);\n }\n }\n return pixels;\n };\n\n renderImage(image, train);\n return net;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"{\n const copy = (pixels) => {\n const d = pixels.data;\n for (let x = 0; x < pixels.width; x += 1) {\n for (let y = 0; y < pixels.height; y += 1) {\n const i = y * 4 * pixels.width + x * 4;\n let r = d[i];\n let g = d[i + 1];\n let b = d[i + 2];\n d[i] = r;\n d[i + 1] = g;\n d[i + 2] = b;\n }\n }\n return pixels;\n };\n\n return renderImage(image, copy);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"grain = intensity => pixels => {\n const d = pixels.data;\n for (let i = 0; i < d.length; i += 4) {\n let v = d[i];\n const n = math.randomGaussian(\n 0,\n Math.sin(math.map(v, 0, 255, 0, Math.PI, true)) * intensity\n );\n v = math.constrain(v + n, 0, 255);\n d[i] = d[i + 1] = d[i + 2] = v;\n }\n return pixels;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"grayscale = pixels => {\n const d = pixels.data;\n for (let i = 0; i < d.length; i += 4) {\n const r = d[i];\n const g = d[i + 1];\n const b = d[i + 2];\n // CIE luminance for the RGB\n // The human eye is bad at seeing red and blue, so we de-emphasize them.\n let v = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n d[i] = d[i + 1] = d[i + 2] = v;\n }\n return pixels;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"/** Renders image applying a list of processors to its pixels.\n * @param image image HTML image instance.\n * @param {...function} processors Functions that takes and returns pixels.\n * @usage renderImage(image, ...processors)\n */\nrenderImage = (image, ...processors) => {\n const getPixels = function (img) {\n const c = document.createElement(\"canvas\");\n c.width = img.width > 1000 ? 1000 : img.width;\n c.height = img.width > 1000 ? (1000 / img.width) * img.height : img.height;\n const ctx = c.getContext(\"2d\");\n ctx.drawImage(img, 0, 0, c.width, c.height);\n return {\n pixels: ctx.getImageData(0, 0, c.width, c.height),\n context: ctx,\n canvas: c\n };\n };\n const pipe = (fns) => (arg) => fns.reduce((acc, fn) => fn(acc), arg);\n\n const { canvas, context, pixels } = getPixels(image);\n context.putImageData(pipe(processors)(pixels), 0, 0);\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"math = {\n // Functions copied from P5js\n return {\n sin: Math.sin,\n abs: Math.abs,\n cos: Math.cos,\n random(max) {\n return Math.random() * max;\n },\n constrain(n, low, high) {\n return Math.max(Math.min(n, high), low);\n },\n randomGaussian(mean, sd) {\n let y1, y2, x1, x2, w;\n do {\n x1 = this.random(2) - 1;\n x2 = this.random(2) - 1;\n w = x1 * x1 + x2 * x2;\n } while (w >= 1);\n w = Math.sqrt((-2 * Math.log(w)) / w);\n y1 = x1 * w;\n y2 = x2 * w;\n\n const m = mean || 0;\n const s = sd || 1;\n return y1 * s + m;\n },\n map(n, start1, stop1, start2, stop2, withinBounds) {\n const newval =\n ((n - start1) / (stop1 - start1)) * (stop2 - start2) + start2;\n if (!withinBounds) {\n return newval;\n }\n if (start2 < stop2) {\n return this.constrain(newval, start2, stop2);\n } else {\n return this.constrain(newval, stop2, start2);\n }\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"import { imageInput } from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"brain = require('brain.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"