2b:null 2c:["$","title",null,{"children":"The Nature of Code - 0 - Randomness | Adam Jurczyk | Observable"}] 31:T500,{ let r = 100 let ctx = DOM.context2d(2*r,2*r) let clr = (a, close) => `hsla(${Math.floor(180 * a / PI)}, 100%, 50%, ${close ? 1 : 0.3})` let pa = null let mousePos = {x: 0, y: 0} let dir = directions[0] ctx.canvas.onmousemove = (e) => { [mousePos.x, mousePos.y] = [e.offsetX, e.offsetY]; pa = Math.atan2(mousePos.y - r, mousePos.x - r) dir = directionFromMousePos({x: r, y: r}, mousePos) } ctx.canvas.onmouseleave = (e) => { pa = null; } while(true) { ctx.clearRect(0, 0, 2*r, 2*r) angles.forEach((a) => { ctx.fillStyle = clr(a, pa != null && angleDist(pa, a) <= PI / 8) ctx.beginPath() ctx.moveTo(r, r) ctx.arc(r, r, r, a - PI / 8, a + PI / 4 - PI / 8) // shift by Math.PI / 8 to see area of effect ctx.fill() }) if (pa != null) { ctx.beginPath() ctx.moveTo(r, r) ctx.lineTo(r * (1 + Math.cos(pa)), r * (1 + Math.sin(pa))) ctx.stroke() } yield html`${ctx.canvas}
mouse pos: ${mousePos.x} x ${mousePos.y} angle: ${pa} -> ${Math.floor((pa / (2 * PI)) * 360)}
dist to 0: ${angleDist(pa, 0)}; dist to PI: ${angleDist(pa, PI)}; dist to -PI/2: ${angleDist(pa, -PI/2)}
dir from pos: ${dir.join(',')} ` } }32:T411,threeScene({ width, height: 300, visibility, addMeshes: (scene) => { const size = plane_3d_size; const geometry = new THREE.PlaneGeometry( plane_3d_size, plane_3d_size, plane_3d_size - 1, plane_3d_size - 1 ); const position = geometry.attributes.position; for (let i = 0; i < position.count; ++i) { let x = position.array[i * 3]; let y = position.array[i * 3 + 1]; position.array[i * 3 + 2] = plane_3d_max_height * (-0.5 + noise2D(x * plane_3d_noise_xoff, y * plane_3d_noise_yoff)); } const material = new THREE.MeshStandardMaterial({ color: 0x336633, // red flatShading: true }); material.color.convertSRGBToLinear(); const plane = new THREE.Mesh(geometry, material); plane.rotation.x = -PI / 2; scene.add(plane); return { plane }; }, update: ({ meches: { plane } }) => (plane.rotation.z += 0.01), cam: { x: 0, y: plane_3d_max_height, z: plane_3d_size * 0.5, fov: 35, far: 500 } })33:[] 2f:{"id":"ebe26d4ac736bbe2","slug":"the-nature-of-code-0-introduction","title":"The Nature of Code - 0 - Randomness","thumbnail":"56e3c318e692b064c876970465757e2a7788e0044441b6488714c95e1ebe62bb","access_level":"public","create_time":"$D2019-12-30T15:00:37.533Z","update_time":"$D2025-09-01T18:46:30.157Z","view_time":null,"first_public_time":"$D2020-01-09T21:53:25.496Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"e59cfabcc8cf2053","login":"ajur","name":"Adam Jurczyk","avatar_url":"https://avatars-next.observableusercontent.com/9780c718edee977389e5a921151fad79009484346784f63edc44894bfc64c5cd","tier":"starter_2024"},"version":1869,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"316e3341b439aa13","login":"ajur","name":"Adam Jurczyk","avatar_url":"https://avatars-next.observableusercontent.com/9780c718edee977389e5a921151fad79009484346784f63edc44894bfc64c5cd","tier":null}],"members":[{"type":"individual","id":"316e3341b439aa13","login":"ajur","name":"Adam Jurczyk","avatar_url":"https://avatars-next.observableusercontent.com/9780c718edee977389e5a921151fad79009484346784f63edc44894bfc64c5cd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"fe7a597113ba6d01","slug":"the-nature-of-code","title":"The Nature of Code","owner":{"id":"e59cfabcc8cf2053","login":"ajur","name":"Adam Jurczyk"}},"type":"notebook","body":{"title":"The Nature of Code - 0 - Randomness","cells":[{"id":0,"value":"md`# The Nature of Code - 0 - Randomness\n\n_Deeper into dynamic code, with https://natureofcode.com/ _\n\nThis notebook follows introduction chapter https://natureofcode.com/random/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"md`## 0.1. Random walks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":200,"value":"md`Here is some example, pretty generic Walker class, that represents single randomply walking 'pixel'`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"class Walker {\n constructor({x=0, y=0, color='#000'}={}) {\n this.x = x\n this.y = y\n this.color = color\n }\n step() {\n this.x += randInt(-1, 1)\n this.y += randInt(-1, 1)\n }\n set({x,y}){\n this.x = x\n this.y = y\n }\n display(ctx) {\n ctx.fillStyle = this.color\n ctx.fillRect(this.x, this.y, 1, 1)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"md`So, lets add ${count_1} walker${count_1 > 1 ? 's' : ''} and see how it's looking`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"viewof count_1 = slider({\n min: 1, \n max: 10, \n step: 1, \n value: 4, \n title: \"Number of walkers\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"viewof speed_1 = slider({\n min: 1, \n max: 100, \n step: 1, \n value: 1, \n title: \"Walking speed\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":186,"value":"{\n const height = 100;\n const rndWalker = () => new Walker({x: Math.random() * width, y: Math.random() * height, color: randColor()})\n return renderWalkers(_.times(count_1, rndWalker), height, speed_1, visibility)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":219,"value":"md`Below is our little function to render and animate our walkers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"renderWalkers = function *(walkers, height, speed=1, vis) {\n const ctx = DOM.context2d(width, height)\n \n let mousePos = null;\n \n ctx.canvas.onmousemove = (e) => {\n mousePos = {x: e.offsetX, y: e.offsetY};\n }\n ctx.canvas.onmouseleave = (e) => {\n mousePos = null;\n }\n \n const step = (walker) => {\n walker.step(mousePos)\n walker.set({\n x: wrap(walker.x, 0, width),\n y: wrap(walker.y, 0, height)\n });\n walker.x = clamp(walker.x, 0, width)\n walker.y = clamp(walker.y, 0, height)\n\n walker.display(ctx);\n }\n \n while (true) {\n repeat(() => walkers.forEach(step), speed)\n yield vis(ctx.canvas)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":223,"value":"md`### Exercise 0.1\n\n_Walker biased to move down and to the right_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":230,"value":"class RightDownBiasedWalker extends Walker {\n step() {\n // 'hard' bias, by increasing probability of right/down movements\n this.x += clamp(randInt(-1, 2), -1, 1)\n this.y += clamp(randInt(-1, 2), -1, 1)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":240,"value":"{\n const height = 100;\n return renderWalkers([\n new RightDownBiasedWalker({x: width / 2, y: height / 2})\n ], height, 2, visibility)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":248,"value":"md`## 0.3 Probablility`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":285,"value":"md`Let's make function, that will draw value from a table, based on it's probability (given as second argument)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":288,"value":"probTableRng = probTable => {\n // sanitise table:\n const probsSum = _.sumBy(probTable, ([val, prob]) => prob || 0);\n const restProbItems = probTable.filter(([val, prob]) => prob == null).length;\n if (probsSum < 1 && restProbItems === 0) {\n throw Error('all probs should sum to 1, or at least one be left without prob')\n }\n const defaultProb = restProbItems === 0 ? 0 : Math.max(0, 1.0 - probsSum) / restProbItems;\n \n return () => {\n const rnd = random();\n let cursor = 0;\n for (let [val, prob] of probTable) {\n cursor += (prob != null ? prob : defaultProb);\n if (rnd < cursor) return val;\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":298,"value":"pachinko(probTableRng([[1,0.1],[2,0.2], [3], [4, 0.1], [5, 0.2]]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":251,"value":"md`### Exercise 0.2\n\n_What is the probability of drawing two aces in a row from a deck of fifty-two cards?_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":254,"value":"md`The probablity is **${ roundedPercent((4 / 52) ** 2) }%**`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":328,"value":"md`### Exercise 0.3\n\n_Walker that have 50% tendency to go into direction of mouse_\n\nThis will require bit more fiddling, but thats the fun, isn't it? :)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":338,"value":"class PointerFallowingWalker extends Walker {\n step(mousePos) {\n const prefered = mousePos && directionFromMousePos(this, mousePos);\n const probs = directions.map((dir) =>\n _.isEqual(prefered, dir) ? [dir, 0.5] : [dir]\n );\n const [x, y] = probTableRng(probs)();\n\n this.x += x;\n this.y += y;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":490,"value":"{\n const height = 200;\n return renderWalkers([\n new PointerFallowingWalker({x: width / 2, y: height / 2})\n ], height, 2, visibility)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":453,"value":"md`Some testing and learning that went into getting proper direction from mouse pointer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":350,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":472,"value":"directionFromMousePos = (p, m) => {\n const pa = Math.atan2(m.y - p.y, m.x - p.x)\n const ai = _.findIndex(angles, (a) => angleDist(a, pa) <= PI / 8)\n return directions[ai]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":464,"value":"directions = [[-1, 0], [-1, -1], [0, -1], [1, -1], [1, 0], [1, 1], [0, 1], [-1, 1]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":344,"value":"angles = _.range(-PI, PI, PI / 4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":527,"value":"md`## 0.4 Normal distribution\n\nFew notes about normal distribution, lets start with standard normal, so mean 0 and deviation 1\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":531,"value":"normal = d3.randomNormal.source(random)()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":533,"value":"pachinko(normal)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":540,"value":"md`we can than change mean and sigma by simple operation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":541,"value":"pachinko(() => normal() * 15 + 100) // mean = 100, sd = 15","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":547,"value":"{\n const height = 100\n const mean = width / 2\n const sd = width / 8\n const ctx = DOM.context2d(width, height)\n let x = width / 2\n let y = height / 2\n let r = 20\n \n for (let i = 0; i < 300; ++i) {\n x = normal() * sd + mean\n \n ctx.beginPath()\n ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'\n ctx.arc(x, y, r, 0, 2 * PI)\n ctx.fill()\n yield ctx.canvas\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":554,"value":"md`### Excersize 0.4\n\n_Consider a simulation of paint splatter drawn as a collection of colored dots. Most of the paint clusters around a central location, but some dots do splatter out towards the edges. Can you use a normal distribution of random numbers to generate the locations of the dots? Can you also use a normal distribution of random numbers to generate a color palette?_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":619,"value":"viewof splattersPlaced = slider({\n min: 10,\n max: 1000,\n value: 240,\n step: 1,\n title: \"Number of splatters\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":605,"value":"viewof splatterSigma = slider({\n min: 1,\n max: 150,\n step: 1,\n value: 60,\n title: \"Splatter spread\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":570,"value":"viewof splatterColorMean = color({\n value: \"#8efa00\",\n title: \"color\",\n description: \"Choose color, most splatts will be close to it. Note, only hue will varry\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":593,"value":"viewof splatterColorSigma = slider({\n min: 0,\n max: 60,\n step: 1,\n value: 0,\n display: v => v ? v : 'Color will be based on distance to center',\n description: \"choose color variance, or set to 0 to bind variance with position\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":618,"value":"{\n const height = 500\n const radius = 20\n const ctx = DOM.context2d(width, height)\n \n for (let i = 0; i < splattersPlaced; ++i) {\n const x = normal() * splatterSigma + 0.5 * width\n const y = normal() * splatterSigma + 0.5 * height\n const clr = splatterColorSigma !== 0 ? rndSplatterColor() : splatterColorByPos(x - width / 2, y - height / 2, Math.max(width, height) / 2)\n \n ctx.beginPath()\n ctx.fillStyle = clr\n ctx.arc(x, y, radius, 0, 2 * PI)\n ctx.fill()\n \n yield ctx.canvas\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":577,"value":"rndSplatterColor = () => tinycolor(splatterColorMean).spin(Math.floor(normal() * splatterColorSigma)).toHslString()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":642,"value":"splatterColorByPos = (x, y, max) => tinycolor(splatterColorMean).spin(Math.floor(360 * Math.sqrt(x * x + y * y) / max)).toHslString()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":557,"value":"md`### Excercize 0.5\n\n_A Gaussian random walk is defined as one in which the step size (how far the object moves in a given direction) is generated with a normal distribution. Implement this variation of our random walk._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":709,"value":"viewof distStepSigma = slider({\n min: 0,\n max: 50,\n value: 3,\n step: 1,\n title: 'Step length sigma'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":693,"value":"{\n const height = 200;\n return renderWalkers([\n new NormalDistStep360Walker({x: width / 2, y: height / 2})\n ], height, 2, visibility)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":728,"value":"class NormalDistStep360Walker extends RandomStep360Walker {\n stepLength() {\n const l = Math.abs(normal() * distStepSigma)\n // little coloring magic\n this.color = tinycolor(this.color).setAlpha(Math.min(0.1 + l / (3 * distStepSigma), 1)).toString()\n return 1 + l\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":735,"value":"md`Maybe lets try some other, more funny distribution?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":751,"value":"viewof paretoAlpha = slider({\n min: 0.01,\n max: 2,\n step: 0.01,\n value: 1.16,\n title: 'alpha for Pareto distribution'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":725,"value":"{\n const height = 200;\n return renderWalkers([\n new ParetoStep360Walker({x: width / 2, y: height / 2, color: '#f00'})\n ], height, 1, visibility)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":740,"value":"class ParetoStep360Walker extends RandomStep360Walker {\n constructor(...args) {\n super(...args)\n this.rng = d3.randomPareto.source(random)(paretoAlpha)\n }\n stepLength() {\n const l = this.rng()\n // little coloring magic\n this.color = tinycolor(this.color).setAlpha(Math.min(0.1 + l/100, 1)).toString()\n return l\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":697,"value":"class RandomStep360Walker extends Walker {\n step() {\n const l = this.stepLength()\n const a = random() * 2 * PI\n\n this.px = this.x\n this.py = this.y\n \n this.x += l * Math.cos(a)\n this.y += l * Math.sin(a)\n \n // hack for externally done clamping\n this.ox = this.x\n this.oy = this.y\n }\n stepLength() {\n // to override with own length function\n return 1 + randInt(0, 1)\n }\n _stroke(ctx, x0, y0, x1, y1) {\n ctx.beginPath()\n ctx.moveTo(x0, y0)\n ctx.lineTo(x1, y1)\n ctx.stroke()\n }\n display(ctx) {\n ctx.strokeStyle = this.color\n if (this.x === this.ox && this.y === this.oy) { \n this._stroke(ctx, this.px, this.py, this.x, this.y)\n } else {\n // hack clamping\n this._stroke(ctx, this.px, this.py, this.ox, this.oy)\n const x_diff = this.x - this.ox\n const y_diff = this.y - this.oy\n this._stroke(ctx, this.px + x_diff, this.py + y_diff, this.x, this.y)\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1033,"value":"md`## 0.5 A custom distribution`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":801,"value":"md`### Excercize 0.6\n\n_Use a custom probability distribution to vary the size of a step taken by the random walker. The step size can be determined by influencing the range of values picked. Can you map the probability exponentially—i.e. making the likelihood that a value is picked equal to the value squared?_\n\nso, little step back...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":848,"value":"{\n const height = 200;\n return renderWalkers([\n new ExpWalker({x: width / 2, y: height / 2, color: '#00f'})\n ], height, 1, visibility)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":842,"value":"class ExpWalker extends RandomStep360Walker {\n constructor(...args){\n super(...args)\n this.rng = montecarloDistrib(r => r * r)\n }\n step() {\n const stepSize = 10 * this.rng()\n \n this.px = this.x\n this.py = this.y\n \n this.x += randInt(-1, 1) * stepSize\n this.y += randInt(-1, 1) * stepSize\n \n // hack for externally done clamping\n this.ox = this.x\n this.oy = this.y\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":833,"value":"montecarloDistrib = (fn) => () => {\n while(true) {\n const r1 = random()\n const prob = fn(r1)\n if (random() < prob) {\n return r1\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":908,"value":"md`## 0.6 Perlin Noise\n\nA smooth random, kinda..\n\nDeveloped by **Ken Perlin** for og _Tron_ movie, back in the early 1980s. It even won Academy Award^^`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":915,"value":"viewof noise_time_step = {\n const values = [0.001, 0.005, 0.01, 0.02, 0.05, 0.1, 0.5, 1]\n return slider({\n min: 0,\n max: values.length - 1,\n step: 1,\n value: 2,\n description: \"Time step\",\n getValue: (n) => values[n.value]\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":879,"value":"{\n const height = 100\n const ctx = DOM.context2d(width, height)\n \n let steps = 0;\n while(true) {\n let t = steps * noise_time_step\n let x = steps % width\n let y = height * (1 - noise1D(t))\n ctx.clearRect(x, 0, 1, height)\n ctx.fillRect(x, y, 2, 1)\n ++steps\n yield visibility(ctx.canvas)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":954,"value":"md`\"Perlin walker\", done by simply mapping position to noise results `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":957,"value":"{\n const height = 200\n const width = 200\n const ctx = DOM.context2d(width, height)\n \n let xoff = 0\n let yoff = 10000\n \n while(true) {\n let x = width * noise1D(xoff)\n let y = height * noise1D(yoff)\n ctx.fillStyle = '#eef'\n ctx.fillRect(0, 0, width, height)\n ctx.beginPath()\n ctx.fillStyle = '#faa'\n ctx.strokeStyle = '#a00'\n ctx.arc(x, y, 20, 0, 2*PI)\n ctx.fill()\n ctx.stroke()\n xoff += noise_time_step\n yoff += noise_time_step\n yield visibility(ctx.canvas)\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":967,"value":"md`### Exercize 0.7\n\n_In the above random walker, the result of the noise function is mapped directly to the Walker’s location. Create a random walker where you instead map the result of the noise() function to a Walker’s step size._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":976,"value":"{\n const height = 100;\n return renderWalkers([\n new PerlinStep360Walker({x: width / 2, y: height / 2, color: '#090'})\n ], height, 1, visibility)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":973,"value":"class PerlinStep360Walker extends RandomStep360Walker {\n constructor(...args) {\n super(...args)\n this.xoff = 0\n this.xoffdiff = 0.01\n this.maxDist = 10\n }\n stepLength() {\n this.xoff += this.xoffdiff\n return noise1D(this.xoff) * this.maxDist\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":981,"value":"md`Nah.. lets try something more visible and **fun**!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":999,"value":"viewof noise_walker_x_step = {\n const values = [0.001, 0.005, 0.01, 0.02, 0.05, 0.1, 0.5, 1]\n return slider({\n min: 0,\n max: values.length - 1,\n step: 1,\n value: 2,\n description: \"Time step\",\n getValue: (n) => values[n.value]\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1003,"value":"viewof noise_walker_step_size = slider({\n min: 1,\n max: 20,\n step: 1,\n value: 2,\n description: 'Walk step size'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1061,"value":"viewof walker_stepping_style = radio({\n description: 'Stepping style, or how noise is applied',\n options: [\n { label: 'Full angle', value: 'full' },\n { label: 'Diff angle', value: 'diff' },\n ],\n value: 'diff'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":990,"value":"{\n const height = 200;\n return renderWalkers([\n new PerlinDir360Walker({x: width / 2, y: height / 2, color: '#f9f9'})\n ], height, 5, visibility)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":986,"value":"class PerlinDir360Walker extends RandomStep360Walker {\n constructor(...args){\n super(...args)\n this.xoff = 0\n this.angle = 0\n }\n step() {\n this.xoff += noise_walker_x_step\n const l = noise_walker_step_size\n if (walker_stepping_style === 'diff') {\n this.angle = this.angle + (noise1D(this.xoff) * PI - PI / 2)\n } else {\n this.angle = noise1D(this.xoff) * 2 * PI\n }\n\n this.px = this.x\n this.py = this.y\n \n this.x += l * Math.cos(this.angle)\n this.y += l * Math.sin(this.angle)\n \n // hack for externally done clamping\n this.ox = this.x\n this.oy = this.y\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1010,"value":"md`### Two-Dimensional Noise`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1086,"value":"viewof noise_2d_display_step = {\n const values = [0.001, 0.005, 0.01, 0.02, 0.05, 0.1, 0.5, 1]\n return slider({\n min: 0,\n max: values.length - 1,\n step: 1,\n value: 3,\n description: \"Time step\",\n getValue: (n) => values[n.value]\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1067,"value":"{\n const height = 100;\n const width = 100;\n const ctx = DOM.context2d(width, height);\n const dt = noise_2d_display_step;\n for (let x = 0; x < width; ++x) {\n for (let y = 0; y < height; ++y) {\n const v = noise2D(x * dt, y * dt);\n ctx.fillStyle = tinycolor.fromRatio({ r: v, g: v, b: v }).toString();\n ctx.fillRect(x, y, 1, 1);\n }\n }\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1093,"value":"md`### Exercise 0.8\n\n_Play with color, noiseDetail(), and the rate at which xoff and yoff are incremented to achieve different visual effects._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1135,"value":"viewof noise_2d_display_step_xoff = {\n const values = [0.001, 0.005, 0.01, 0.02, 0.05, 0.1, 0.5, 1]\n return slider({\n min: 0,\n max: values.length - 1,\n step: 1,\n value: 0,\n description: \"xoff\",\n getValue: (n) => values[n.value]\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1137,"value":"viewof noise_2d_display_step_yoff = {\n const values = [0.001, 0.005, 0.01, 0.02, 0.05, 0.1, 0.5, 1]\n return slider({\n min: 0,\n max: values.length - 1,\n step: 1,\n value: 3,\n description: \"yoff\",\n getValue: (n) => values[n.value]\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1144,"value":"viewof noise_2d_display_color = color({\n value: \"#00ffee\",\n description: \"color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1131,"value":"{\n const height = 200\n const width = 200\n const ctx = DOM.context2d(width, height)\n const clr = tinycolor(noise_2d_display_color).toHsv()\n for (let x = 0; x < width; ++x) {\n for (let y = 0; y < height; ++y) {\n const v = noise2D(x * noise_2d_display_step_xoff, y * noise_2d_display_step_yoff)\n ctx.fillStyle = tinycolor(_.defaults({v}, clr)).toRgbString()\n ctx.fillRect(x, y, 1, 1)\n }\n }\n return ctx.canvas\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1095,"value":"md`### Exercise 0.9\n\n_Add a third argument to noise that increments once per cycle through draw() to animate the two-dimensional noise._\n\nSo, basically, animate through third dimension`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1115,"value":"viewof noise_2d_animated_display_step = {\n const values = [0.001, 0.005, 0.01, 0.02, 0.05, 0.1, 0.5, 1]\n return slider({\n min: 0,\n max: values.length - 1,\n step: 1,\n value: 3,\n description: \"Time step\",\n getValue: (n) => values[n.value]\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1117,"value":"{\n const height = 100\n const width = 100\n const ctx = DOM.context2d(width, height)\n const dt = noise_2d_animated_display_step\n let z = -dt\n while (true) {\n z += dt\n for (let x = 0; x < 100; ++x) {\n for (let y = 0; y < 100; ++y) {\n const v = noise3D(x * dt, y * dt, z)\n ctx.fillStyle = tinycolor.fromRatio({r: v, g: v, b: v}).toString()\n ctx.fillRect(x, y, 1, 1)\n }\n }\n yield visibility(ctx.canvas)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1703,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1104,"value":"md`### Exercise 0.10\n\n_Use the noise values as the elevations of a landscape._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1388,"value":"viewof plane_3d_noise_xoff = {\n const values = [0.001, 0.005, 0.01, 0.02, 0.05, 0.1, 0.2, 0.5, 1]\n return slider({\n min: 0,\n max: values.length - 1,\n step: 1,\n value: 4,\n description: \"xoff\",\n getValue: (n) => values[n.value]\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1390,"value":"viewof plane_3d_noise_yoff = {\n const values = [0.001, 0.005, 0.01, 0.02, 0.05, 0.1, 0.2, 0.5, 1]\n return slider({\n min: 0,\n max: values.length - 1,\n step: 1,\n value: 4,\n description: \"yoff\",\n getValue: (n) => values[n.value]\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1393,"value":"viewof plane_3d_size = slider({\n min: 10,\n max: 500,\n value: 100,\n step: 1,\n description: \"plane size\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1395,"value":"viewof plane_3d_max_height = slider({\n min: 1,\n max: 100,\n step: 1,\n value: 10,\n description: \"max height\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1426,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"md`## Appendix\n\nSome functions and libs used throughout this notebook`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1423,"value":"import { threeScene } from '@ajur/threejs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":863,"value":"SimplexNoise = require('simplex-noise@2.4')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":869,"value":"simplex = new SimplexNoise(random)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1684,"value":"{\n let n = 0;\n const noise = () => simplex.noise2D(n++ / 100, n++);\n return pachinko(noise);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":871,"value":"noise1D = (x) => (simplex.noise2D(x, 1) + 1) * 0.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1070,"value":"noise2D = (x, y) => (simplex.noise2D(x, y) + 1) * 0.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1112,"value":"noise3D = (x, y, z) => (simplex.noise3D(x, y, z) + 1) * 0.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":439,"value":"angleDist = (a, a0) => {\n let ang = a0 - a;\n ang += ang > PI ? -2 * PI : ang < -PI ? 2 * PI : 0\n return Math.abs(ang)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":402,"value":"PI = Math.PI","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":268,"value":"roundedPercent = num => Math.round(num * 1000) / 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":155,"value":"randColor = () => '#' + _.times(6, () => randInt(0, 16).toString(16)).join('')\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"repeat = (fn, times) => {\n while (times--) {\n fn()\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"clamp = (x, min, max) => Math.max(Math.min(x, max), min)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"wrap = (x, min, max) => modulo(x - min, max - min) + min","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":396,"value":"modulo = (a, n) => a - n * Math.floor(a / n) // after D. Knuth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"randInt = (min, max) => Math.floor(random() * (max - min + 1) + min)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"import {pachinko} from '@d3/d3-random'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":518,"value":"random = seedrandom()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":516,"value":"seedrandom = require(\"seedrandom/seedrandom.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":514,"value":"d3 = require(\"d3-random\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"import {slider, color, radio} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":164,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":564,"value":"tinycolor = require(\"tinycolor2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1177,"value":"import { THREE } from \"@ajur/threejs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1853,"value":"## Random `random` functions and playground","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1861,"value":"pprng = (seed = 0.5, alpha = (Math.SQRT(5) - 1) / 2) => {\n let n = seed;\n return () => {\n n = (n + alpha) % 1;\n return n;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1863,"value":"pachinko(pprng(Math.random(), (Math.sqrt(5) - 1) / 2))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1859,"value":"{\n const height = 500;\n const radius = 4;\n const ctx = DOM.context2d(width, height);\n const pr = pprng(Math.random(), (Math.sqrt(5) - 1) / 2);\n\n for (let i = 0; i < 10; ++i) {\n const y = pr() * height;\n ctx.beginPath();\n ctx.moveTo(0, y);\n ctx.lineTo(width, y);\n ctx.stroke();\n\n yield ctx.canvas;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"