2f:[] 2d:{"title":"Randomness","cells":[{"id":0,"value":"# Randomness","pinned":false,"hidden":false,"mode":"md"},{"id":690,"value":"Math.random()","pinned":true,"hidden":false,"mode":"ojs"},{"id":701,"value":"**Pick a random number between 0 & `x`**","pinned":false,"hidden":false,"mode":"md"},{"id":692,"value":"// pick a random number from 0 - `x`\nMath.random() * 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":698,"value":"**Pick a random number between 0 & `x` - Integer**","pinned":false,"hidden":false,"mode":"md"},{"id":694,"value":"Math.floor(parseInt(Math.random() * 20))","pinned":true,"hidden":false,"mode":"ojs"},{"id":704,"value":"**Pick a random float b/w `x` & `y`**","pinned":false,"hidden":false,"mode":"md"},{"id":709,"value":"_.random(20, 40)","pinned":true,"hidden":false,"mode":"ojs"},{"id":746,"value":"// generate an array of 10 elemens containing random numbers b/w `x` & `y`\nr_array = _.range(10).map(d => _.random(100, 200))","pinned":true,"hidden":false,"mode":"ojs"},{"id":748,"value":"// now pick a random element from that random array\nr_array[_.random(r_array.length)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":771,"value":"random_data = _.range(1000).map(d => Math.random())","pinned":true,"hidden":false,"mode":"ojs"},{"id":1196,"value":"d3.deviation(random_data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":775,"value":"## Frequency of Randomness \nfrom `Math.random()`. `shift+enter` on the above cell and see the distribution graph change below","pinned":false,"hidden":false,"mode":"md"},{"id":758,"value":"// Value count of numbers ranging b/w binned intervals between 0 & 1\nPlot.plot({\n width: innerWidth,\n marginBottom: 100,\n marginTop: 70,\n marginLeft: 70,\n x: {ticks: 10 },\n marks: [\n Plot.rectY(random_data, Plot.binX({y: \"count\"}, {x: d => d})),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"----","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"random_grid = {\n const height = 120\n const rect_size = 15\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"**Generate a grid of random colours from the entire rgb spectrum**","pinned":false,"hidden":false,"mode":"md"},{"id":513,"value":"noise_grid = {\n const height = 120\n const rect_size = 10\n return svg``;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":779,"value":"## Simplex Noise\nA more smoother way to generate noise","pinned":false,"hidden":false,"mode":"md"},{"id":733,"value":"// gives a random number between `x` & `y`\nsimplex.noise2D(10, 30)","pinned":true,"hidden":false,"mode":"ojs"},{"id":794,"value":"// the numbers keep increasing as `d` keeps increasing\n_.range(100).map(d => simplex.noise2D(d, 1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":801,"value":"// let's visualise this\nrandom_wave = {\n const height = 200\n return svg`\n \n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":832,"value":"_.range","pinned":true,"hidden":false,"mode":"ojs"},{"id":783,"value":"viewof noise_level = Inputs.range([0, 500], { step: .1, label: 'Select noise level:' })","pinned":true,"hidden":false,"mode":"ojs"},{"id":781,"value":"wave = {\n const height = 200\n return svg`\n \n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":836,"value":"## Applying randomness to shapes","pinned":false,"hidden":false,"mode":"md"},{"id":876,"value":"Creating squares with the function of randomness applied to\n1. width within a range (0 to 10)\n2. height within a range (0 to 10)\n3. x-position within a range (0 to width of canvas)\n4. y-position within a range (0 to height of canvas)\n5. fill colour within a range of 4 to 5 colours\n\nThe fixed aspects are the fill opacity only","pinned":false,"hidden":false,"mode":"md"},{"id":838,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":928,"value":"## Expanding the idea of randomness, but with paths\n\n[MDN Reference ↝](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths#b%C3%A9zier_curves)\n\nThe attributes where randomness can be applied on paths are\n- starting point of the path ([x, y] coordinates)\n- ending point of the path ([x, y] coordinates)\n- curve of the path\n\nBelow we randomised every parameter possible for the 'curve' function of the path. Further more, we could associate each randomness to another attribute like width, height of another component like the canvas itself or something else.","pinned":false,"hidden":false,"mode":"md"},{"id":1005,"value":"points = {\n return {\n \"sx\": _.random(w), // width of the canvas\n \"sy\": _.random(190), // height of the canvas\n \"ex\": _.random(200),\n \"ey\": _.random(200),\n \n \"cx1\": _.random(200),\n \"cy1\": _.random(200),\n \"cx2\": _.random(200),\n \"cy2\": _.random(200),\n\n \"colour\": palette[Math.floor(Math.random() * palette.length)]\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":936,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":1048,"value":"## Expand to multiple\nWe could further more, generate multiple paths to draw. This can be done by an array of the above `points` object within a function","pinned":false,"hidden":false,"mode":"md"},{"id":1051,"value":"multi_points = _.range(200).map(d => {\n return {\n \"sx\": _.random(w), // width of the canvas\n \"sy\": _.random(200), // height of the canvas\n \"ex\": _.random(200),\n \"ey\": _.random(200),\n \n \"cx1\": _.random(200),\n \"cy1\": _.random(200),\n \"cx2\": _.random(200),\n \"cy2\": _.random(200),\n\n \"colour\": palette[Math.floor(Math.random() * palette.length)]\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1070,"value":"","pinned":true,"hidden":false,"mode":"md"},{"id":1084,"value":"## Let's go further - add simplex\nGoing even further, you can take one of the attribute and make it a function of `simplex` instead of random","pinned":false,"hidden":false,"mode":"md"},{"id":1100,"value":"viewof line_noise_level = Inputs.range([1, 1000], { step: 1, label: 'Select noise level:' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1086,"value":"// simplex.noise2D(d/line_noise_level, 1)\nsimplex_points = _.range(100).map(d => {\n let n = d / line_noise_level // since this is subject to `d`, n for each object will grow\n return {\n \"n\": n,\n \"sx\": _.random(w), // width of the canvas\n \"sy\": _.random(200), // height of the canvas\n \"ex\": _.random(200),\n \"ey\": _.random(200),\n \n \"cx1\": simplex.noise2D(d, 1000),\n \"cy1\": simplex.noise2D(d, 1000),\n \"cx2\": simplex.noise2D(d, 1000),\n \"cy2\": simplex.noise2D(d, 1000),\n\n \"colour\": palette[Math.floor(Math.random() * palette.length)]\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1091,"value":"","pinned":false,"hidden":false,"mode":"md"},{"id":1154,"value":"## Animated Ellipse\n\nWe take a basic shape like the ellipse and oscillate the width and height at different rates, producing a flipping disc effect","pinned":false,"hidden":false,"mode":"md"},{"id":1134,"value":"// back_and_forth = {\n// let i = 0\n// let direction = 'up'\n// while(true) {\n// await Promises.delay(50)\n// if(i === 50) {\n// direction = 'down'\n// } else if(i === 0) {\n// direction = 'up'\n// }\n// yield direction === 'up' ? i ++ : i--\n// }\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1143,"value":"// back_and_forth2 = {\n// let i = 0\n// let direction = 'up'\n// while(true) {\n// await Promises.delay(10)\n// if(i === 50) {\n// direction = 'down'\n// } else if(i === 0) {\n// direction = 'up'\n// }\n// yield direction === 'up' ? i ++ : i--\n// }\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1129,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":1185,"value":"## Frequency count on Simplex\n\nA more standard deviated random number noise generator. The `random_data` generated purely based on `Math.random()` has a standard deviation of **${d3.deviation(random_data)}** where as the one with simplex has **${d3.deviation(random_noise)}**","pinned":false,"hidden":false,"mode":"md"},{"id":1192,"value":"random_noise = _.range(200).map(d => simplex.noise2D(d, 10))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1194,"value":"Standard deviation for random_noise = **`${d3.deviation(random_noise)}`**","pinned":false,"hidden":false,"mode":"md"},{"id":1175,"value":"// Value count of numbers ranging b/w binned intervals between 0 & 1\nPlot.plot({\n width: innerWidth,\n marginBottom: 100,\n marginTop: 70,\n marginLeft: 70,\n x: {ticks: 10 },\n marks: [\n Plot.rectY(random_noise, Plot.binX({y: \"count\"}, {x: d => d})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":845,"value":"---\n## Constants / Variables","pinned":false,"hidden":false,"mode":"md"},{"id":843,"value":"h = 512","pinned":true,"hidden":false,"mode":"ojs"},{"id":858,"value":"w = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":901,"value":"// pick a random colour from the palette\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":881,"value":"palette = getRandomPalette()","pinned":true,"hidden":false,"mode":"ojs"},{"id":885,"value":"displayPalettes(palette)","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"-----\n## References / Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"import {ramp} from \"@mbostock/color-ramp\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":673,"value":"import {getRandomPalette, displayPalettes} from \"@makio135/give-me-colors\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":679,"value":"SimplexNoise = require('simplex-noise@2.4')","pinned":true,"hidden":false,"mode":"ojs"},{"id":737,"value":"simplex = new SimplexNoise()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}