3e:null 3f:["$","title",null,{"children":"Plot: Perlin noise | Youssef A | Observable"}] 45:T848,extractImageData = (image) => { const width = image.naturalWidth; // retrieves the image's width const height = image.naturalHeight; // retrieves the image's height const context = DOM.context2d(width, height, 1); // create a canvas context.drawImage(image, 0, 0); // draw the image const {data} = context.getImageData(0, 0, width, height); // extract pixel data. this will return an array with a length = width * height (pixels) * 4 (it's four because by default, it's providing the red, green, blue and alpha value for each pixel) // This is for the bins that we will use to group pixel colors together const range = d3.range(0, 1, 1 / nBins); // The Quantize Scale allows us to bin values. The domain is set to the [0, 255], the extent of values for RGBA (red, green, blue, alpha) const bins = ({ r: d3.scaleQuantize().domain([0, 255]).range(range), g: d3.scaleQuantize().domain([0, 255]).range(range), b: d3.scaleQuantize().domain([0, 255]).range(range), }) const pixelData = []; // create an empty array let r = 0, g = 0, b = 0, a = 0; for (let i = 0; i < data.length; i += 4) { // For every four datapoints = RGBA r = data[i + 0]; g = data[i + 1]; b = data[i + 2]; a = data[i + 3]; const rgba = `rgba(${r}, ${g}, ${b}, ${a})`; // Get RGBA value const hsl = d3.hsl(rgba); // Get HSL value const rBin = bins.r(r); // Bin R const gBin = bins.g(g); // Bin G const bBin = bins.b(b); // Bin B const rgbBinColor = d3.rgb(bins.r.invertExtent(rBin)[0],bins.g.invertExtent(gBin)[0], bins.b.invertExtent(bBin)[0]) // Create new color from the binned values pixelData.push({ // Push all the data r: r, g: g, b: b, a: a, h: hsl.h, s: hsl.s, l: hsl.l, rgba: rgba, hex: d3.color(rgba).hex(), hsl: hsl, rBin: rBin, gBin: gBin, bBin: bBin, rgbBinR: rgbBinColor.r, rgbBinG: rgbBinColor.g, rgbBinB: rgbBinColor.b, rgbBinColor: rgbBinColor.toString() }) } return { width: width, height: height, pixelData: pixelData } }46:[{"id":"82266f543a18f495697d7c8f312b7d1dcbfea8d0210f5b607ca1b776567c978f977700cecb0247b6bb38cf03b1e22480e70623901a667afb52543bdfca519d4f","href":"https://static.observableusercontent.com/files/82266f543a18f495697d7c8f312b7d1dcbfea8d0210f5b607ca1b776567c978f977700cecb0247b6bb38cf03b1e22480e70623901a667afb52543bdfca519d4f","name":"China-2x@1.png","type":"image/png","lastModified":1685570681465.905,"size":36399}] 43:{"id":"3a3311ce2be0d49d","slug":null,"title":"Plot: Perlin noise","thumbnail":"67aea46133b282f4d5560b9f11e908a16eae56c3e009d2234114508afde05956","access_level":"public","create_time":"$D2023-05-31T20:26:12.270Z","update_time":"$D2023-06-01T22:20:37.604Z","view_time":null,"first_public_time":"$D2023-05-31T20:26:12.270Z","has_unpublished_edits":null,"fork":{"id":"a51b7f87054fb6e2","slug":"plot-perlin-noise","title":"Plot: Perlin noise","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"74c87b22da559889","login":"youssefa","name":"Youssef A","avatar_url":"https://avatars-next.observableusercontent.com/968ba8e97a78beedc02ad099c5935ca5666a0212fb009c9715805881c695922c","tier":"starter_2024","bio":"","following":false},"version":301,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8ca28586b2a68928","login":"youssefa","name":"Youssef A","avatar_url":"https://avatars-next.observableusercontent.com/968ba8e97a78beedc02ad099c5935ca5666a0212fb009c9715805881c695922c","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"8ca28586b2a68928","login":"youssefa","name":"Youssef A","avatar_url":"https://avatars-next.observableusercontent.com/968ba8e97a78beedc02ad099c5935ca5666a0212fb009c9715805881c695922c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Plot: Perlin noise","cells":[{"id":0,"value":"

Plot: Perlin noise

Observable Plot › Gallery

\n\n# Perlin noise\n\nAn example showing a Perlin noise [vector](https://observablehq.com/plot/marks/vector) field, just because it’s pretty:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"noise = octave(perlin2, 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"viewof image = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl: await FileAttachment(\"colors.jpg\").url()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"china2x = FileAttachment(\"China-2x@1.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"china2x ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"// Calculate the force based on color\nfunction calculateForce(color) {\n const [r, g, b] = color;\n const redForce = r / 255;\n const greenForce = g / 255;\n return greenForce - redForce;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"// Create a vector field based on the image\nasync function createVectorField() {\n const imageData = china2x;\n const {width, height, data} = imageData;\n\n return Plot.plot({\n inset: 6,\n width: 1024,\n aspectRatio: 1,\n axis: null,\n marks: [\n Plot.vector(poisson([0, 0, width, height], {n: 4000}), {\n length: ([x, y]) => {\n const index = (Math.floor(y) * width + Math.floor(x)) * 4;\n const color = [data[index], data[index + 1], data[index + 2]];\n return (calculateForce(color) + 0.5) * 24;\n },\n rotate: ([x, y]) => {\n const index = (Math.floor(y) * width + Math.floor(x)) * 4;\n const color = [data[index], data[index + 1], data[index + 2]];\n return calculateForce(color) * 360;\n }\n })\n ]\n });\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"imageData = extractImageData(china2x);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"nBins = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"redPixels = [] \n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"greenPixels = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"otherPixels = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"{\nfor (let i = 0; i < imageData.pixelData.length; i++) {\n const pixel = imageData.pixelData[i];\n if (pixel.h >= 0 && pixel.h < 60) { // Red hues are 0-60\n redPixels.push(pixel);\n } else if (pixel.h >= 60 && pixel.h < 180) { // Green hues are 60-180\n greenPixels.push(pixel);\n } else {\n otherPixels.push(pixel); \n }\n}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"forces = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"{\nfor (let i = 0; i < imageData.pixelData.length; i++) {\n let force;\n if (redPixels.includes(imageData.pixelData[i])) {\n force = -1; // Repel\n } else if (greenPixels.includes(imageData.pixelData[i])) {\n force = 1; // Attract\n } else {\n force = 0; // Neutral\n }\n forces.push(force);\n}\n}\n\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"{\nfor (let i = 0; i < imageData.pixelData.length; i++) {\n vectors.push({\n x: imageData.pixelData[i].x,\n y: imageData.pixelData[i].y,\n length: (d) => Math.abs(forces[i]) * 5, \n rotate: (d) => forces[i] * 90\n });\n}\n}\n\n \n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"Plot.plot({\n inset: 6, \n width: 1024, \n aspectRatio: 1, \n axis: null,\n marks: [Plot.vector(vectors, {shape: \"arrow\"})] \n}) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"vectors","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"imageData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"redness = r / 255;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"force = (pixel) => {\n let { r, g, b } = pixel; \n \n let redness = r / 255;\n let greenness = g / 255;\n let brightness = (r + g + b) / (3 * 255);\n \n if (redness > 0.5 && brightness > 0.3) return -1; \n if (greenness > 0.5 && brightness > 0.3) return 1; \n return 0; \n} \n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"vectors = {[0.2341, 0.1244, 0.1, 0.4], [0.125515, 0.346346, 0.3, 0.4]}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"t = poisson([0, 0, 2, 2], {n: 100})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"Plot.plot({\n inset: 6,\n width: 512,\n aspectRatio: 1,\n axis: null,\n width: 500, \n height: 500,\n marks: [\n sample.points, // Plot the poin{sample.length, sample.rotate}\n ]\n \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"Plot.plot({\n inset: 6,\n width: 1024,\n aspectRatio: 1,\n axis: null,\n marks: [\n Plot.vector(poisson([3, 2, 4, 4], {n: 666}), {\n length: ([x, y]) => (noise(x + 2, y) + 0.5) * 24,\n rotate: ([x, y]) => noise(x, y) * 360\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"{\nfor (let i = 0; i < imageData.pixelData.length; i++) {\n let pixel = imageData.pixelData[i];\n let rgb = `rgb(${pixel.r}, ${pixel.g}, ${pixel.b})`;\n let force;\n if (d3.color(rgb).r > 200) { \n force = -1; \n } else if (d3.color(rgb).g > 200) { \n force = 1;\n } else {\n force = 0; \n }\n forces[i] = force;\n}}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"f = poisson([0, 0, 1, 1], {n: 10}), {\n length: ([x, y]) => (noise(x + 2, y) + 0.5) * 24,\n rotate: ([x, y]) => noise(x, y) * 360\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"sample.rotate","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"poisson([0, 0, 1, 1], {n: 10})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"function generateSample() {\n let points = [];\n let lengths = [];\n let rotates = [];\n \n for (let i = 0; i < 10; i++) {\n let x = Math.random();\n let y = Math.random();\n points.push([x, y]);\n \n let length = Math.random() * 24;\n lengths.push(length);\n \n let rotate = Math.random() * 360;\n rotates.push(rotate);\n }\n \n return {\n points: points,\n length: lengths,\n rotate: rotates \n };\n}\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"Plot.plot({\n axis: null,\n marks: [\n Plot.vector(sample, {\n shape: \"arrow\",\n stroke: \"steelblue\"\n })\n ] \n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"vectors","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"import {poisson} from \"@mbostock/poisson-disk-sampling\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"import {octave, perlin2} from \"@mbostock/perlin-noise\";\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"