30:T425,## Reflect #### What have I learned? * d3.line refresh * d3.random refresh * noise generation * a bit about p5.js * about how to require simplex.noise.js (thanks to Tom Larkworthy) * that `noise3D()` from [simplex-noise.js](https://www.npmjs.com/package/simplex-noise) is pure in that it always generates the same random number given the same inputs, unlike `Math.random()` * also see [Creating a Canvas Noise Map for Generative Art](https://observablehq.com/@ada-lovecraft/creating-a-canvas-noise-map-for-generative-art): The benefit of *noise* versus *random* is that noise generates numbers that are closely related to each other as opposed to truly random numbers. * that I need to fully understand new functions like `simplex.noise3D()` in order to grasp the visual behaviour of an animation; * I have trouble wrapping my head around multidimensional arrays and their mappings, transformations, and conversions; #### What do I no longer believe now? #### What will I do differently from now on? #### What do I want to further explore and investigate? 31:[] 2e:{"title":"Waves","cells":[{"id":0,"value":"# Waves","pinned":false,"hidden":false,"mode":"md"},{"id":2750,"value":"Mesmerizing how a few simple lines can create so many patterns, almost for free.\n\n> **Just play around with the controls to create your own psychedelics.**","pinned":false,"hidden":false,"mode":"md"},{"id":1802,"value":"{\n const sketch = d3.create(\"svg\")\n .attr(\"width\", w)\n .attr(\"height\", height)\n .style(\"background-color\", background)\n .style(\"fill\", \"none\")\n .style(\"stroke-width\", strokeWidth)\n .style(\"stroke-linecap\", \"round\")\n .style(\"mix-blend-mode\", mixBlendMode)\n ;\n update({sketch, scene, time});\n yield sensitize({sketch}).node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2613,"value":"viewof preset = Inputs.radio(presets, {label: \"Preset\", format: x => x.name, value: presets[0]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"viewof background = Inputs.color({label: \"Background Color\", value: \"#000\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"viewof palette = Inputs.radio(Object.keys(palettes), {label: \"Palette\", value: \"Category10\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"viewof mixBlendMode = Inputs.radio(mixBlendModes, {label: \"Mix Blend Mode\", value: \"difference\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"viewof waves = Inputs.range([1, 50], {label: \"Waves\", value: 10, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"viewof strokeWidth = Inputs.range([0.1, 500], {label: \"Stroke Width\", value: 20, step: .1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"viewof curve = Inputs.radio(\n [\n \"Natural\",\n \"Basis\",\n \"Cardinal\",\n \"Linear\",\n \"Step\",\n ],\n {label: \"Curve\", value: \"Natural\"}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"viewof frequency = Inputs.range([2, 50], {label: \"Frequency\", value: 5, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"viewof amplitude = Inputs.range([0, 20], {label: \"Amplitude\", value: 1, step: .1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"viewof speed = Inputs.range([1, 50], {label: \"Speed\", value: 4, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1246,"value":"viewof animate = Inputs.toggle({label: \"Animate\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2436,"value":"viewof tall = Inputs.range([1, 16], {label: \"Tallness\", value: 9, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2732,"value":"The fact that the lines seem to resonate is because of the use of\nnoise3D(step, row, time).\nnoise3D(a, b, c) takes three input values and returns a number between [–1,+1].\n\nUnlike `Math.random()`’s stochastic nature, `noise3D()` is deterministic: return values are identical for identical arguments. Also, it appears that slight variations in the input cause slight variations in the output, causing subsequent lines (in y-direction) as well as subsequent steps (in time or x-direction) to resemble their peers closeby.\n\nIn short, the benefit of *noise* over *random* is that noise generates numbers that are closely related to each other as opposed to truly random numbers.","pinned":false,"hidden":false,"mode":"md"},{"id":2694,"value":"### To add a preset\n1. Create a named cell with the preset (or duplicate and modify an existing one).\n2. Add the preset’s name to `presets[]`.","pinned":false,"hidden":false,"mode":"md"},{"id":2605,"value":"presets = [\n presetWavy,\n presetColorful,\n presetMoiré,\n presetP5jsdemo,\n presetNeon,\n presetBouncy,\n presetMatrixy,\n presetElevators,\n // presetSmoothing,\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2908,"value":"presetWavy = ({\n name: \"Wavy\",\n // appearance\n background: \"#e32400\",\n palette: \"Category10\",\n mixBlendMode: \"hard-light\",\n waves: 10,\n strokeWidth: 100,\n curve: \"Natural\",\n // behaviour\n frequency: 5,\n amplitude: 5,\n speed: 4,\n animate: true,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2676,"value":"presetColorful = ({\n name: \"Colorful\",\n animate: true,\n background: \"#000000\",\n mixBlendMode: \"difference\",\n strokeWidth: 20,\n amplitude: 1,\n curve: \"Natural\",\n palette: \"Category10\",\n speed: 4,\n waves: 10,\n frequency: 5,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2679,"value":"presetMoiré = {\n const ww = 25;\n return ({\n name: \"Moiré\",\n // appearance\n background: \"#000000\",\n palette: \"Simply White\",\n mixBlendMode: \"exclusion\",\n waves: ww,\n strokeWidth: width/(ww - 1)|0,\n curve: \"Natural\",\n // behaviour\n frequency: 6,\n amplitude: 2,\n speed: 3,\n animate: true,\n})}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2683,"value":"presetP5jsdemo = ({\n name: \"p5.js demo\",\n // appearance\n background: \"#000000\",\n palette: \"Simply White\",\n mixBlendMode: \"exclusion\",\n waves: 10,\n strokeWidth: 2,\n curve: \"Natural\",\n // behaviour\n frequency: 15,\n amplitude: 1.5,\n speed: 10,\n animate: true,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2688,"value":"presetNeon = ({\n name: \"Neon\",\n // appearance\n background: \"#4d22b3\",\n palette: \"Category10\",\n mixBlendMode: \"hard-light\",\n waves: 13,\n strokeWidth: 75,\n curve: \"Natural\",\n // behaviour\n frequency: 17,\n amplitude: 6.1,\n speed: 3,\n animate: true,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2725,"value":"presetBouncy = ({\n name: \"Bouncy\",\n // appearance\n background: \"#000000\",\n palette: \"Tableau10\",\n mixBlendMode: \"difference\",\n waves: 13,\n strokeWidth: 48,\n curve: \"Step\",\n // behaviour\n frequency: 20,\n amplitude: 6,\n speed: 3,\n animate: true,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2796,"value":"presetMatrixy = ({\n name: \"Matrixy\",\n // appearance\n background: \"#000000\",\n palette: \"Paired\",\n mixBlendMode: \"difference\",\n waves: 20,\n strokeWidth: 20,\n curve: \"Step\",\n // behaviour\n frequency: 50,\n amplitude: 15,\n speed: 4,\n animate: true,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2799,"value":"presetElevators = ({\n name: \"Elevators\",\n // appearance\n background: \"#000000\",\n palette: \"Simply White\",\n mixBlendMode: \"normal\",\n waves: 1,\n strokeWidth: 5,\n curve: \"Step\",\n // behaviour\n frequency: 40,\n amplitude: 20,\n speed: 1,\n animate: true,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2997,"value":"presetSmoothing = ({\n name: \"Smoothing\",\n slug: \"Smoothing « Examples « Paper.js\",\n site: \"paperjs.org\",\n url: \"http://paperjs.org/examples/smoothing/\",\n // appearance\n background: \"#ffffff\",\n palette: \"Simply Black\",\n mixBlendMode: \"normal\",\n waves: 1,\n strokeWidth: 0,\n curve: \"Natural\",\n ends: [height, 0],\n // behaviour\n frequency: 11,\n amplitude: .3,\n speed: 3.6,\n animate: true,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2702,"value":"### To add a synchronized input\n1. Add the input to the notebook.\n2. Add the input’s name (cell name) to `scene{}`.\n3. Link the input to the preset by adding the following line to `{synchronized}`:\n > set(viewof name, preset.name);","pinned":false,"hidden":false,"mode":"md"},{"id":2536,"value":"scene = ({\n ...preset,\n background,\n palette: palettes[palette],\n mixBlendMode,\n waves,\n strokeWidth,\n curve,\n frequency,\n // a = 1 => stay w/i half available space per wave\n amplitude: amplitude * height / 2 / waves,\n speed,\n animate,\n xsAbsolute \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2633,"value":"// Synchronized inputs\\n Synchronized inputs are set in this cell.\n// Make sure to list all inputs that control the sketch’s appearance.`\nsynchronized = {\n set(viewof background, preset.background);\n set(viewof palette, preset.palette);\n set(viewof mixBlendMode, preset.mixBlendMode);\n set(viewof waves, preset.waves);\n set(viewof strokeWidth, preset.strokeWidth);\n set(viewof curve, preset.curve);\n set(viewof frequency, preset.frequency);\n set(viewof amplitude, preset.amplitude);\n set(viewof speed, preset.speed);\n set(viewof animate, preset.animate);\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2721,"value":"### Artists","pinned":false,"hidden":false,"mode":"md"},{"id":1806,"value":"sensitize = ({sketch} = {}) => {\n\n sketch.attr(\"cursor\", \"pointer\");\n\n sketch.on(\"mousemove\", (event) => {\n const p = d3.pointer(event);\n set(viewof frequency, 50 * p[0] / width);\n set(viewof amplitude, 10 * (height - p[1]) / height);\n })\n\n return sketch;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1804,"value":"update = ({sketch, scene, time} = {}) =>\n{\n const {amplitude, strokeWidth, palette, waves, mixBlendMode, xsAbsolute} = scene;\n sketch.selectAll(\"path\")\n .data(ysNormalized(waves))\n .join(\n (pad) => pad\n .append(\"path\") \n .attr(\"stroke\", (_, i) => palette[i % palette.length])\n .attr(\"d\", path(xsAbsolute, amplitude, time))\n .style(\"mix-blend-mode\", mixBlendMode)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1576,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":922,"value":"xsAbsolute = d3.range(0, width + 1, width / (frequency - 1)).map(Math.round)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3012,"value":"// takes waves count\n// returns list of wave count normalized y postions\nysNormalized = (waves) => Array.from({length: waves}, (_, i) => (2 * i + 1) / (2 * waves));","pinned":true,"hidden":false,"mode":"ojs"},{"id":3011,"value":"ysNormalized(waves)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1848,"value":"// takes a xsAbsolute, amplitude, time\n// returns a function that takes yNormalized and returns an SVG path string\n// that can be used inside a path d attribute\npath = (xsAbsolute, amplitude, time) => (yNormalized) =>\nline(\n wave(\n xsAbsolute,\n yNormalized * height, // === yAbsolute\n yNormalized,\n amplitude,\n time,\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3009,"value":"path(xsAbsolute, amplitude, 1)(ysNormalized(waves)[1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":3008,"value":"// takes xsAbsolute, yAbsolute, yNormalized, amplitude, time\n// returns list of absolute points for a single wave, ready for d3.line()\nwave = (xsAbsolute, yAbsolute, yNormalized, amplitude, time) =>\nxsAbsolute.map\n(\n (xAbsolute, step) => \n [\n xAbsolute,\n yAbsolute + amplitude * simplex(step, yNormalized, time),\n ]\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"line = d3.line().curve(d3[\"curve\" + curve])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1167,"value":"// todo: more elegant way to pause/resume the animation; tips welcome!\ntime = animate\n? now * speed / 1e4\n// ? 17\n: 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":1332,"value":"### Colors, Schemes & Palettes","pinned":false,"hidden":false,"mode":"md"},{"id":428,"value":"mixBlendModes = [\n \"normal\",\n // \"multiply\",\n \"screen\",\n // \"overlay\",\n // \"darken\",\n\"lighten\",\n // \"color-dodge\",\n // \"color-burn\",\n \"hard-light\",\n // \"soft-light\",\n \"difference\",\n \"exclusion\",\n // \"hue\",\n // \"saturation\",\n // \"color\",\n \"luminosity\",\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"palettes = ({\n \"Simply White\": [\"white\"],\n \"Simply Black\": [\"black\"],\n ...d3ColorSchemes,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"d3ColorSchemes = [\n \"Category10\",\n \"Accent\",\n \"Dark2\",\n \"Paired\",\n \"Pastel1\",\n \"Pastel2\",\n \"Set1\",\n \"Set2\",\n \"Set3\",\n \"Tableau10\"\n].reduce((accu, name) => ({...accu, [name]: d3[\"scheme\" + name]}), {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2806,"value":"w = width // * wide","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"height = w/16*tall|0","pinned":false,"hidden":false,"mode":"ojs"},{"id":2610,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":203,"value":"### Inspiration & Reference\n* [d3.line](https://observablehq.com/@d3/d3-line)\n* [d3.random](https://observablehq.com/@d3/d3-random)\n* [d3.interpolate](https://observablehq.com/@d3/d3-interpolate)\n* [Learn D3 » Animation](https://observablehq.com/@d3/learn-d3-animation)\n* [Ψηφιακό ρολόι « Roman Karavia « Observable](https://observablehq.com/@rkaravia/roloi)\n* [noise « p5.js demos « Matt des Lauriers « glitch.me](https://p5-demos.glitch.me)","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"µ = (n = 1) => 3 * n","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"M = (n = 1) => 36 * n","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"sn =\nimport('https://unpkg.com/simplex-noise@4.0.0/dist/esm/simplex-noise.js?module')\n// import('https://unpkg.com/simplex-noise/dist/esm/simplex-noise.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"simplex = new sn.createNoise3D()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2957,"value":"R = require(\"ramda\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}