31:[{"id":"7416dc873c895f2dca8ec4adb220bad94c5789ecf2b57aeb4524896b4eb11e9128d5316a66cfb81e1651ac0cd4808de6851d1a9503c78eb6bfc80004c4117e7b","href":"https://static.observableusercontent.com/files/7416dc873c895f2dca8ec4adb220bad94c5789ecf2b57aeb4524896b4eb11e9128d5316a66cfb81e1651ac0cd4808de6851d1a9503c78eb6bfc80004c4117e7b","name":"roses.jpg","type":"image/jpeg","lastModified":1599505586098.65,"size":758867}] 2f:{"title":"Part 4: Noise and Animation","cells":[{"id":0,"value":"md`# Part 4: Noise and Animation`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":14,"value":"md`## Random Number Generation`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":23,"value":"// Randomly pick numbers between 0 and 1\nrandom_values = _.range(10000).map(d => Math.random())","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`As you can see, the distribution of values is **uniform**:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"histogram","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":81,"value":"// Require a library for generating simplex noise\nSimplexNoise = require('simplex-noise@2.4')","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"// Create a new instance of our simplex noise object\nsimplex = new SimplexNoise()","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":407,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":419,"value":"md`We can then add randomness (simplex noise) to determine the size of each rectangle:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":461,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"md`## Animation`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":476,"value":"md`You can also use a **Promise** to slow it down:`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":345,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"md`## Useful Technique: Using images as inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":571,"value":"roses = await FileAttachment(\"roses.jpg\").url()","pinned":true,"hidden":false,"mode":"ojs"},{"id":573,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":18,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":130,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"import { chart as histogram } with { rv as data } from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"import { code_styles, displayCaution } from \"@info474/utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"PVector = require('https://bundle.run/pvectorjs@1.2.0')","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"w = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"num_rects = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"h = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":502,"value":"code_styles","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}