2c:null 2d:["$","title",null,{"children":"Art Tools, Part 4: Noise and Animation | Anjana Vakil | Observable"}] 32:[] 30:{"id":"cc771e8b9e551b66","slug":"art-tools-part-4-noise-and-animation","title":"Art Tools, Part 4: Noise and Animation","thumbnail":"34d5d68f2f201352c4e21659cf92c33b2f147b58206a432a98fc45dde2d653af","access_level":"public","create_time":"$D2021-09-20T23:17:13.799Z","update_time":"$D2022-06-09T09:58:12.917Z","view_time":null,"first_public_time":"$D2021-09-30T14:07:22.405Z","has_unpublished_edits":null,"fork":{"id":"18c411dbd3cf0a66","slug":"part-4-noise-and-animation","title":"Part 4: Noise and Animation","owner":{"id":"5a7641f443a5ac2c","login":"mkfreeman","name":"Mike Freeman"}},"stars":5,"starred":false,"owner":{"type":"team","id":"8cc6a24956698638","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":"starter_2024"},"version":1374,"publish_version":1374,"role":null,"authored":false,"authors":[{"type":"individual","id":"d7d614fa2258860d","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":null}],"members":[{"type":"individual","id":"d7d614fa2258860d","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":null,"role":"editor"},{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"c7f05ec6ff3b45e0","slug":"building-generative-art-tools-with-observable","title":"Building Generative Art Tools with Observable","owner":{"id":"8cc6a24956698638","login":"anjana","name":"Anjana Vakil"}},"type":"notebook","body":{"titling":"auto","title":"Art Tools, Part 4: Noise and Animation","cells":[{"id":0,"value":"md`# Art Tools, Part 4: Noise and Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`The _generative_ aspect of generative art tools involves identifying ways for computational tools to inject randomness into the work. There are a few approaches for generating this randomness (or \"noise\").`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`## Random Number Generation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`As a basic approach, JavaScript includes a \\`Math.random()\\` function that will randomly select a value between 0 (inclusive), and 1 (exclusive):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"// Randomly pick numbers between 0 and 1\nrandom_values = _.range(10000).map(d => Math.random())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"This generates uniformly distributed random values, giving a \"white noise\" effect:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"

Use Math.random() to pick a y position at each x position

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"\n ","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"## Simplex Noise\nA common technique in generative art is to use [Simplex Noise](https://en.wikipedia.org/wiki/Simplex_noise) algorithm to generate a gradient of random values between 0 and 1. In this technique, each value is *related to the previous value* in n-dimensional space. Rather than write the algorithm ourselves, we can load a package that will generate Simplex noise values.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"// Require a library for generating simplex noise\nSimplexNoise = require('simplex-noise@2.4')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"// Create a new instance of our simplex noise object\nsimplex = new SimplexNoise()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"Compared to Math.random(), Simplex Noise produces a more continuous visual effect.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"#### Use Simplex Noise to pick a y position at each x position","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"\n\n ","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"We can enhance the \"smoothness\" even further by \"zooming in\" to the noise field, as demonstrated by this slider whose value is used as a denominator in the `noise2D` calculation above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"viewof smoothness = Inputs.range([1, 1000], {\n value: 20,\n step: 1,\n label: \"Smoothness:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"Let's take a look at **two-dimensional** simplex noise. In this case, we'll use the opacity of each black square in a grid to represent the underlying value.\n\nFor comparison, here is a grid of _random_ values:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"random_grid = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"And here is a grid of values generated by Simplex Noise (with sliders to adjust smoothness as before, but now in both dimensions):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"simplex_grid = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"viewof x_smoothness = Inputs.range([1, 100], {\n value: 20,\n step: 1,\n label: \"X Smoothness:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"viewof y_smoothness = Inputs.range([1, 100], {\n value: 20,\n step: 1,\n label: \"Y Smoothness:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"md`This style of randomness allows for gentle (gradient-style) variations in aesthetically pleasing ways. Let's start with a static image of rectangles arranged into a circle (for an interactive example, see here):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"md`We can then add randomness (simplex noise) to determine the size of each rectangle:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"md`For comparison, here is an example of simply picking a random size for each rectangle:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"md`## Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"### Generators","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"A simple way to handle animations in the context of Observable is to tie the rendering cell to a _generator_ cell, which we can create by `yield`ing values from a cell rather than `return`ing. Observable's runtime will pull from the generator cell once per animation frame (approximately 60 times per second), and update the cell's value to the value we `yield`. Every time the generator cell's value updates, any other cells referencing it will re-render. \n\n(For more details, see [Introduction to Generators](https://observablehq.com/@observablehq/introduction-to-generators).)\n\nWe've already mentioned one built-in generator, `now`, which gives the current value of `Date.now()`: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1138,"value":"now","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1140,"value":"If we want to make our own generator, we can `yield` a value from a loop, for example: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"// Yield a value, 60 times a second\ngenerator = {\n let i = 0;\n while (true) {\n yield ++i;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"Then, we can tie the rendering of an SVG to the generator cell's value, triggering a re-render each time the variable updates! For example, we could use the `generator` value to set the `cx` position of a circle: \n\n(Don't see anything below? Re-evaluate the `generator` cell to restart the animation)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1223,"value":"### Loops\n \nFor infinitely looping animations, it's helpful to cycle through a range of numbers with a generator.\n\nFor example, we can use a remainder operator (`%`) on `now` to cycle from zero through `width`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1227,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"\nFor back-and-forth loops without the \"restarting\" effect, one technique is moving from negative values to positive values, combined with `Math.abs()` to get a loop effect.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"range = {\n while (true) {\n yield* _.range(-100, 100);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1127,"value":"loop = Math.abs(range)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1130,"value":"For a smoother, less \"jumpy\" animation effect, we can use `now` to create a sine wave to \"slow\" the movement at each end of the loop:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"sineWave = Math.sin(now / 1000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1025,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1348,"value":"_Note: While generator-based animation works for simple SVGs, the element is being re-created on each animation frame, so you may run into performance issues with larger, more complex SVG elements. See [Animation Loops](https://observablehq.com/@mbostock/animation-loops) for more details (though those examples use Canvas elements)._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"### Combining noise, animation & controls\n\nWe can use a generator (like `now`) to \"pass through\" one of the dimensions of a Simplex Noise field to create the effect of motion over time: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1234,"value":"\n ","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1244,"value":"As in static SVGs, we can then add Inputs to control parameters like the smoothness of the curve or the speed of the animation:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1079,"value":"viewof curveSmooth = Inputs.range([0, 100], {\n label: \"Curve Smoothness\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"viewof animationSlow = Inputs.range([10, 10000], {\n label: \"Animation Slowness (higher is slower)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"\n ","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"Once we start experimenting with mixing & matching different animation and noise techniques -- assisted by Input controls of course! -- we can get some mesmerizing effects:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"viewof rectangles = Inputs.range([50, 300], {\n step: 1,\n value: num_rects,\n label: \"Number of rectangles\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"viewof circleSize = Inputs.range([20, 100], {\n step: 1,\n value: 70,\n label: \"Circle size\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1321,"value":"viewof rectMaxSize = Inputs.range([10, 100], {\n step: 1,\n value: 50,\n label: \"Square size\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1332,"value":"viewof xSlow = Inputs.range([1000, 15000], {\n value: 10000,\n label: \"X noise slowness\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1337,"value":"viewof ySlow = Inputs.range([1000, 15000], {\n value: 10000,\n label: \"Y noise slowness\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1367,"value":"----------\n## Next step\n\n[**Part V:** Building tools](https://observablehq.com/d/4d56a357862d802f)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"--------\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"import { code_styles, displayCaution } from \"@info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"PVector = require('https://bundle.run/pvectorjs@1.2.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"w = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"height = 400;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1256,"value":"\nrect_size = 20;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1254,"value":"\nnum_cols = Math.floor(height / rect_size);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1257,"value":"\nnum_rows = Math.floor(width / rect_size);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1292,"value":"num_rects = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"h = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"code_styles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"