28:null 29:["$","title",null,{"children":"Perlin Noise | Ben Simonds | Observable"}] 2e:T454,{ // generate some noise const [bottom, top] = [0, 64]; const x = d3.range(bottom, top, (top - bottom)/width); const data = x.map((d) => [d, noise1d(d)]); const integerPoints = d3.range(bottom, top).map(d => [d, noise1d(d)]); const height = width / 4; // render it with a simple line chart. const svg = d3.create('svg') .attr("width", width) .attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`) const scaleX = d3.scaleLinear([0, width]).domain([bottom, top]) const scaleY = d3.scaleLinear([height, 0]).domain([-1, 2]) var line = d3.line() // Draw a line with our perlin data. svg.append("path") .attr('d', line(data.map(d => [scaleX(d[0]), scaleY(d[1])]))) .attr("stroke","black") .attr("fill","none"); // Draw a circle showing the noise value at each integer point svg.selectAll("circle") .data(integerPoints) .enter() .append("circle") .attr("cx",d => scaleX(d[0])) .attr("cy",d => scaleY(d[1])) .attr("r", 3) .attr("fill", (d, i) => i % nUnique === 0 ? "red" : "black") return svg.node(); }2f:T50b,function noise2d(x, y) { // get our position within the unit space. const _x = Math.floor(x); const _y = Math.floor(y); x = x - _x; y = y - _y; // Get the x and y cooridnates of the left and right, top and bottom of the cell // Taking the modulo of these by nUnique gives us noise that repeats every nUnique units. const _x0 = _x % nUnique; const _y0 = _y % nUnique; const _x1 = (_x + 1) % nUnique; const _y1 = (_y + 1) % nUnique; // Get our gradient vectors const g00 = cells2d[_x0 + perm[_y0]] const g10 = cells2d[_x1 + perm[_y0]] const g01 = cells2d[_x0 + perm[_y1]] const g11 = cells2d[_x1 + perm[_y1]] // Get the displacement between a given point and the four corners of the cell const d00 = [x, y]; const d10 = [x-1, y]; const d01 = [x , y-1]; const d11 = [x-1, y-1]; // Compute the influence of each corner on a given point. const in00 = dot(g00, d00); const in10 = dot(g10, d10); const in01 = dot(g01, d01); const in11 = dot(g11, d11); // Finally interpolate betweeen our influences. First on the x axis for the top and bottom pairs of points const l1 = lerp(in00, in10, fade(x)); const l2 = lerp(in01, in11, fade(x)); // Then on the y axis to fade from left to right. return lerp(l1, l2, fade(y)) + 0.5; }30:Tbbe,{ await visibility(); const margin = {left: 40, top: 40, right: 40, bottom: 40} const height = width; // generate some 2D noise const nUnits = 8; const shapesPerRepeat = 8; // Scales for drawing things. const scaleX = d3.scaleLinear([margin.left, width-margin.right]).domain([0, nUnits]) const scaleY = d3.scaleLinear([margin.top, height-margin.bottom]).domain([0, nUnits]) const scaleC = d3.scaleSequential(d3.interpolateRdYlBu).domain([0, 1]) const [start, stop] = [0, shapesPerRepeat * nUnits]; const shapeSize = Math.ceil(width / (stop - start)) - 1; const data = []; const vectorData = []; for (let i = start; i<= stop; i++) { for (let j = start; j<= stop; j++) { const x = i / shapesPerRepeat; const y = j / shapesPerRepeat; data.push({i, j, x, y, value: noise2d(x, y)}) } } for (let i = 0; i <= nUnits; i++) { for (let j = 0; j <= nUnits; j++) { const x = i; const y = j; vectorData.push({i, j, x, y, vector: cells2d[x % nUnique + perm[y % nUnique]]}) } } // Render our data this time as a grid of rectangles. const div = d3.create('div').style('position','relative') .style('width', `${width}px`) .style('height', `${height}px`) const canvas = div.append('canvas') .style('position', 'absolute') .style('top', 0) .style('left', 0) .attr('width', width) .attr('height', height) const context = canvas.node().getContext('2d'); const svg = div.append('svg') .style('position', 'absolute') .style('top', 0) .style('left', 0) .style('z-index', 2) .attr("width", width) .attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`) data.forEach(function(d, i) { context.beginPath(); context.rect(scaleX(d.x), scaleY(d.y), shapeSize, shapeSize); context.fillStyle=scaleC(d.value); context.fill(); context.closePath(); }); svg.append('defs') .append('marker') .attr('id', 'arrow') .attr('viewBox', [0, 0, shapeSize, shapeSize]) .attr('refX', shapeSize / 2) .attr('refY', shapeSize / 2) .attr('markerWidth',shapeSize) .attr('markerHeight', shapeSize) .attr('orient', 'auto-start-reverse') .append('path') .attr('d', d3.line()([ [0, 0], [0, shapeSize], [shapeSize, shapeSize / 2] ])) .attr('fill', 'black');; var line = d3.line() var gArrows = svg.selectAll('g') .data(vectorData) .enter() gArrows.append('circle') .attr('cx', d => scaleX(d.x)) .attr('cy', d => scaleY(d.y)) .attr('r', 4) .attr('stroke','black') .attr('fill', 'none') gArrows.append('path') .attr('d', d => line([ [scaleX(d.x), scaleY(d.y)], [scaleX(d.x + d.vector[0] / 3), scaleY(d.y + d.vector[1]/3)] ])) .attr("stroke","black") .attr("stroke-width",2) .attr("fill","none") //.attr('marker-end', 'url(#arrow)') .attr('fill', 'none'); return div.node(); }31:T724,{ await visibility(); const margin = {left: 40, top: 30, right: 30, bottom: 30} const height = width; // generate some 2D noise const nUnits = 2; const shapesPerRepeat = 64; // Scales for drawing things. const scaleX = d3.scaleLinear([margin.left, width-margin.right]).domain([0, nUnits]) const scaleY = d3.scaleLinear([margin.top, height-margin.bottom]).domain([0, nUnits]) const [start, stop] = [0, shapesPerRepeat * nUnits]; const shapeSize = Math.ceil(width / (stop - start)); const data = []; const vectorData = []; for (let i = start; i<= stop; i++) { for (let j = start; j<= stop; j++) { const x = i / shapesPerRepeat; const y = j / shapesPerRepeat; data.push({i, j, x, y, value: noise2DOctaves(x, y, octaves, persistence)}) } } // Normalise our data const scaleC = d3.scaleSequential(d3.interpolateRdYlBu).domain(d3.extent(data.map(d => d.value))) // Render our data this time as a grid of rectangles. const div = d3.create('div').style('position','relative') const svg = div.append('svg') .attr("width", width) .attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`) svg.append('g').attr('transform','translate(0,20)').call(d3.axisTop(scaleX)); svg.append('g').attr('transform','translate(30,0)').call(d3.axisLeft(scaleY)); const canvas = div.append('canvas') .style('position', 'absolute') .style('top', 0) .style('left', 0) .attr('width', width) .attr('height', height) const context = canvas.node().getContext('2d'); data.forEach(function(d, i) { context.beginPath(); context.rect(scaleX(d.x), scaleY(d.y), shapeSize, shapeSize); context.fillStyle=scaleC(d.value); context.fill(); context.closePath(); }); return div.node(); }32:[] 2c:{"id":"98555fc83b8c0894","slug":"perlin-noise","title":"Perlin Noise","thumbnail":"4dc20f089fe1e988ddadc7fbde452f3f59a968eca591b0df2a9abea0824dfab3","access_level":"public","create_time":"$D2022-08-18T13:19:42.013Z","update_time":"$D2023-02-24T19:05:05.435Z","view_time":null,"first_public_time":"$D2022-11-30T17:29:20.210Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"2e5e341b76bf2323","login":"bensimonds","name":"Ben Simonds","avatar_url":"https://avatars-next.observableusercontent.com/bb4a7fdf77be269eb0b697887a2808df69081986eef6aa2d96c81bb3c533528c","tier":"starter_2024"},"version":700,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"01828926f5962c33","login":"bensimonds","name":"Ben Simonds","avatar_url":"https://avatars-next.observableusercontent.com/bb4a7fdf77be269eb0b697887a2808df69081986eef6aa2d96c81bb3c533528c","tier":null}],"members":[{"type":"individual","id":"01828926f5962c33","login":"bensimonds","name":"Ben Simonds","avatar_url":"https://avatars-next.observableusercontent.com/bb4a7fdf77be269eb0b697887a2808df69081986eef6aa2d96c81bb3c533528c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Perlin Noise","cells":[{"id":0,"value":"# Perlin Noise\n\nThis notebook builds up some examples of the Perlin noise algorithm from scratch. It's based heavily on the following resources: \n\n- [Undestanding perlin noise in (C#)](http://adrianb.io/2014/08/09/perlinnoise.html)\n- [@Josephg/noisejs on github](https://github.com/josephg/noisejs)\n\nPerlin noise is way of creating a continuous noise field, by chopping up the domain you want to create noise in into units, giving each unit it's own noise vector, and then interpolating smoothly between them. \n\n## 1D Perlin Noise\nOur 1D Perlin noise function takes an input x and returns a continuous noise field. We basically assign each integer value a random value, and just interpolate smoothly between them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"function noise1d (x) {\n\n // Get the integer component of x to tell us which \"unit\" of we're in.\n const _x = Math.floor(x);\n // Treat x as the distance within that unit length.\n x = x - _x;\n\n // For each unit coordinate genreate a pseudo random gradient vector.\n // This part I haven't done exactly like the perlin algorithm, but it boils down to something pretty similar.\n const g1 = cells1d[(_x) % nUnique]; \n const g2 = cells1d[(_x+1) % nUnique];\n\n // Linearly interpolate between g1 and g2 to give our output.\n return lerp(g1, g2, fade(x))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"Let's test our our 1D noise function with a line chart. ● circles mark each integer point, so you can see how the function interpolates between them. ● red circles mark where the pattern repeats as we loop through our array of random values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":357,"value":"viewof nUnique = Inputs.range([1, 256], {value: 16, step: 1, label: \"# Unique values\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"## 2D Perlin Noise\nFor our 2D perlin noise we need to create a 2D pseudo-random vector at each integer grid point, rather than a scalar value. Then to convert that to a value we can compute the dot product been this vector and any points position within the cell to compute a noise value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"We can draw our noise field with some shapes, coloring them by the value of the field at that location. We'll also draw in the random vector for the field at each integer loaction, so we can see how this influences the noise pattern. You'll see the vectors always point in the direction of the higher (blue) values, and that the integer points themselves always lie at the midpoint of the color gradient - because their dot product will always be zero.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":489,"value":"viewof theta = Inputs.range([0, 360], {value: 0, step: 5, label: \"Rotate noise vectors\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"## Layering Noise - Octaves\nWe can create more natural, fractal like noise, by combining noise functions with different scales. If we make each layer of noise a have a smaller scale, and progressively adjust their influence, we end up with a nice looking \"scale-free\" noise texture with detail at both large and small scales.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":519,"value":"function noise2DOctaves(x, y, octaves=2, persistence=1.0) {\n var total = 0;\n var frequency = 1;\n var amplitude = 1;\n var maxValue = 0;\n for (let i=0;i rotate(d, theta / 360 * 2 * Math.PI))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"cells2Base = {\n // This acts as the source for cells2d, allowing us to rotate cells2d without picking new random values.\n var cells = [];\n for (let i=0;i<(nUnique * 2);i++) {\n cells.push([(Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2]);\n }\n return cells;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"cells1d = {\n // Actas as a lookup for the random 1D value\n var cells = [];\n for (let i=0;i Math.random() - 0.5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"Finally we have some numbers for fading an interpolating smoothly between values, and a helper function for taking vector dot products.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":175,"value":"// Return a weighted average of the influence betweeen the two influence factors.\n function lerp(a,b,t) {\n return ((1-t) * a) + (t * b);\n }\n\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"// Curve fade function for better numbers.\n //6t5-15t4+10t3\n function fade(t) {\n return t*t*t*(t*(t*6-15)+10);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"function dot(a, b) {\n return a.map((d, i) => d * b[i]).reduce((a, b) => a+b, 0)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"function rotate(vec, theta) {\n return [\n //𝑥2=cos𝛽𝑥1−sin𝛽𝑦1\n // y2=sin𝛽𝑥1+cos𝛽𝑦1\n Math.cos(theta) * vec[0] - Math.sin(theta) * vec[1],\n Math.sin(theta) * vec[0] + Math.cos(theta) * vec[1]\n ]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2d:"$2c:body"