2b:null 2c:["$","title",null,{"children":"Part 4: Noise and Animation | Mike Freeman | Observable"}] 31:[{"id":"7416dc873c895f2dca8ec4adb220bad94c5789ecf2b57aeb4524896b4eb11e9128d5316a66cfb81e1651ac0cd4808de6851d1a9503c78eb6bfc80004c4117e7b","href":"https://static.observableusercontent.com/files/7416dc873c895f2dca8ec4adb220bad94c5789ecf2b57aeb4524896b4eb11e9128d5316a66cfb81e1651ac0cd4808de6851d1a9503c78eb6bfc80004c4117e7b","name":"roses.jpg","type":"image/jpeg","lastModified":1599505586098.65,"size":758867}] 2f:{"id":"18c411dbd3cf0a66","slug":"part-4-noise-and-animation","title":"Part 4: Noise and Animation","thumbnail":"f67ac63ea5f13a0d42282061825f12ac9071b525a74b066be89b7779cc544fbf","access_level":"public","create_time":"$D2020-09-05T20:41:28.628Z","update_time":"$D2020-09-09T14:22:01.569Z","view_time":null,"first_public_time":"$D2020-09-05T21:59:28.546Z","fork":false,"stars":17,"starred":false,"owner":{"type":"team","id":"5a7641f443a5ac2c","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":"starter_2024"},"version":761,"publish_version":761,"role":null,"authored":false,"authors":[{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null}],"members":[{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null,"role":"editor"}],"comments":[{"id":"c21e339f2fcb334e","reply_to_id":null,"content":"You can achieve this without generators as well, right?\n\nex: move from 0 to 100\n\n`Math.round(now) % 100`?","create_time":"$D2020-10-31T16:09:13.192Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"aa9aa40e2f07b5ca","login":"nullhook","name":"nullhook","avatar_url":"https://avatars-next.observableusercontent.com/1cad328a11e08936aab1ffc8c1d8d328981e1b25ff66d7f7bb9b933d5d232e58","tier":null}},{"id":"da531003b123c370","reply_to_id":"c21e339f2fcb334e","content":"Good point! I think this is the best method for moving from negative to positive values, as I implement in the next cell (this sort of sets that up).","create_time":"$D2021-01-19T12:35:30.768Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null}},{"id":"967e534a68a4814c","reply_to_id":null,"content":"This is not a uniform distribution. Looks like the chart found in @d3/histogram renders unemployment data (a variable named `unemployment`), so \"rewriting\" the data using `import - with` (` with { rv as data } `) does not work as expected; maybe instead can do `import {Histogram} from \"@d3/histogram\"` and `Histogram(rv)`?","create_time":"$D2022-11-15T18:48:21.094Z","update_time":"$D2022-11-15T18:50:04.515Z","resolved":false,"user":{"type":"individual","id":"3dd0060e1bb28b29","login":"theredpea","name":"Nate","avatar_url":"https://avatars-next.observableusercontent.com/4f531c0b6a3be95f8811e91826ef6309f5e7968ba9ede56523913f5e30ef3ab2","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":8,"collection":{"id":"8e36a8f0cf2fd4c1","slug":"building-art-tools","title":"Building Art Tools","owner":{"id":"5a7641f443a5ac2c","login":"mkfreeman","name":"Mike Freeman"}},"type":"notebook","body":{"title":"Part 4: Noise and Animation","cells":[{"id":0,"value":"md`# Part 4: Noise and Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":14,"value":"md`## Random Number Generation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"md`As a basic approach, JavaScript includes a \\`Math.random()\\` funciton that will randomly select a value between 0 (inclusive), and 1 (exclusive):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":47,"value":"md`As you can see, the distribution of values is **uniform**:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"histogram","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"md`## 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. 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":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":507,"value":"// Draw points showing a random y value sampled at each pixel across the horizontal axis\nrandom_points = {\n return svg`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":518,"value":"// Draw a line showing a random y value sampled at each pixel across the horizontal axis\nsimplex_points = {\n return svg`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"viewof smoothness = slider({\n value: 20,\n min: 1,\n max: 1000,\n step: 1,\n title: \"Smoothness\",\n description: \"Zoom into noise field →\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":180,"value":"md`Let's take a look at **two-dimensional** simplex noise. In this case, we'll use the gray-scale of each square in a grid to represent the underlying value.\n\nFor comparison, here is a grid of _random_ values:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":182,"value":"random_grid = {\n const height = 400;\n const rect_size = 20;\n const num_cols = Math.floor(height / rect_size);\n const num_rows = Math.floor(width / rect_size);\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":231,"value":"viewof x_smoothness = slider({\n value: 20,\n min: 1,\n max: 100,\n step: 1,\n title: \"Smoothness\",\n description: \"Color Transition in the X direction\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":232,"value":"viewof y_smoothness = slider({\n value: 20,\n min: 1,\n max: 100,\n step: 1,\n title: \"Y Smoothness\",\n description: \"Color Transition in the Y direction\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":224,"value":"simplex_grid = {\n const height = 400;\n const rect_size = 20;\n const num_cols = Math.floor(height / rect_size);\n const num_rows = Math.floor(width / rect_size);\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":407,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":422,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":461,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":260,"value":"md`## Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":472,"value":"md`A simple way to handle animations in the context of Observable is to tie the rendering cell to an _iterator_. Every time the iterator increments, the cell will re-render (for more detail, see [this notebook](https://observablehq.com/@observablehq/introduction-to-generators)).\n\nLet's start by simply incrementing an integer 60 times a second:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"// Yield a value, 60 times a second\niterator = {\n let i = 0;\n while (true) {\n yield ++i;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":476,"value":"md`You can also use a **Promise** to slow it down:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":390,"value":"// Slow it down a bit!\nslow_iterator = {\n let i = 0;\n while (true) {\n yield Promises.delay(50, ++i);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":551,"value":"md`For looped animations, it's helpful to cycle through a range of numbers (moving from negative values to positive values allows for a slick use of \\`Math.abs()\\` to get a loop effect.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":544,"value":"// We'll use this to loop animations\nloop = {\n while (true) {\n yield* _.range(-100, 100);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":670,"value":"// We'll use this to loop animations a bit more slowly\nslow_loop = {\n let i = 0;\n let direction = \"up\";\n while (true) {\n await Promises.delay(10);\n if (i === 100) {\n direction = \"down\";\n } else if (i === -100) {\n direction = \"up\";\n }\n i = direction === \"up\" ? i + 1 : i - 1;\n yield i;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"md`Then, we can tie the rendering of our animations above to each of these values, triggering a re-render each time the variable updates!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":265,"value":"// Draw a line showing simplex generated random numbers\nanimated_line = {\n const points = _.range(width)\n .map(d => {\n const val = d / Math.abs(loop);\n return `${d}, ${simplex.noise2D(val, 1) * 50}`;\n })\n .join(\" \");\n return svg`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":561,"value":"md`You can also use a mod operator - \\`%\\` - to achieve a similar effect in animations (though it has the effect of \"restarting\" from the beginning)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":566,"value":"md`## Useful Technique: Using images as inputs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":569,"value":"md`As discussed, you can use a [File Attachment](https://observablehq.com/@observablehq/file-attachments) to upload an image, and then display it in Observable:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":571,"value":"roses = await FileAttachment(\"roses.jpg\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":573,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":575,"value":"img_points = {\n // Render as canvas to sample the colors\n const img = document.querySelector(\"#roses\");\n img.src = roses;\n img.crossOrigin = \"Anonymous\";\n const canvas = document.createElement('canvas');\n canvas.width = img.width;\n canvas.height = img.height;\n canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);\n return svg``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":759,"value":"md`We can further extend this technique by adding animations (you could also imagine using **inputs** to control visual features such as the number of points, etc.):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":657,"value":"animated_img_points = {\n // Render as canvas to sample the colors\n const img = document.querySelector(\"#roses\");\n img.src = roses;\n const canvas = document.createElement('canvas');\n canvas.width = img.width;\n canvas.height = img.height;\n const max_radius = 50;\n const min_radius = 2;\n canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);\n return svg``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":693,"value":"// Positions for the above points\npositions = {\n const img = document.querySelector(\"#roses\");\n return _.range(100).map(d => ({\n x: Math.random() * width,\n y: Math.random() * img.height\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"// Assigning a label to use with the imported histogram function\nrv = Object.assign(random_values, {\n y: \"Number of Observations\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"import { chart as histogram } with { rv as data } from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":251,"value":"import { code_styles, displayCaution } from \"@info474/utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":355,"value":"PVector = require('https://bundle.run/pvectorjs@1.2.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":346,"value":"w = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":370,"value":"num_rects = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":349,"value":"h = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":502,"value":"code_styles","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"