28:null 29:["$","title",null,{"children":"Noise and Animation | Interactive Info Vis | Observable"}] 2e:[{"id":"7416dc873c895f2dca8ec4adb220bad94c5789ecf2b57aeb4524896b4eb11e9128d5316a66cfb81e1651ac0cd4808de6851d1a9503c78eb6bfc80004c4117e7b","href":"https://static.observableusercontent.com/files/7416dc873c895f2dca8ec4adb220bad94c5789ecf2b57aeb4524896b4eb11e9128d5316a66cfb81e1651ac0cd4808de6851d1a9503c78eb6bfc80004c4117e7b","name":"roses.jpg","type":"image/jpeg","lastModified":1606924272833.736,"size":758867}] 2c:{"id":"53b2ea4d862d7b82","slug":"noise-and-animation","title":"Noise and Animation","thumbnail":"75e1da01d7c3991b15952c15be1a9ef07193bad60a57d3c621d1400dd6f1a024","access_level":"public","create_time":"$D2020-12-02T15:51:12.833Z","update_time":"$D2021-03-01T22:13:28.946Z","view_time":null,"first_public_time":"$D2020-12-02T16:02:36.474Z","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":1,"starred":false,"owner":{"type":"team","id":"82cd20deb9e45d2a","login":"uw-info474","name":"Interactive Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/0f696394de7ab5e2cd50dd2e1dd79af08077f3f74024d007b8a5af8b9d01a473","tier":"education_2026"},"version":889,"publish_version":889,"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":"86edef058f2856c4","reply_to_id":null,"content":"function is misspelled fyi","create_time":"$D2020-12-12T23:10:58.160Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"e5925f0af885d1d7","slug":"generative-art","title":"generative-art","owner":{"id":"82cd20deb9e45d2a","login":"uw-info474","name":"Interactive Info Vis"}},"type":"notebook","body":{"title":"Noise and Animation","cells":[{"id":0,"value":"md`# Noise and Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`## Random Number Generation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":28,"value":"histogram","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","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","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","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$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","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","output":"$undefined","database":"$undefined"},{"id":407,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":422,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":461,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"md`## Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":840,"value":"iterator = now","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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.sin()\\` to get a loop effect.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"loop = Math.sin(now / 1000) * 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$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 const val = d / Math.abs(loop) / 10;\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","output":"$undefined","database":"$undefined"},{"id":345,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"md`## Useful Technique: Using images as inputs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":571,"value":"roses = await FileAttachment(\"roses.jpg\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":693,"value":"// Positions for the above points\npositions = {\n const img = await 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","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":130,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":251,"value":"import { code_styles, displayCaution } from \"@info474/utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":346,"value":"w = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"num_rects = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"h = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"code_styles","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"