2e:null 2f:["$","title",null,{"children":"100 Days of Code 80- Visualising Randomness | Kim Fitter | Observable"}] 34:T70f,{ // Create width and height variables const width = 600; const height = 300; // Create a HTML5 canvas object const canvas = DOM.canvas(width, height); // Now add a new paper variable to the global scope to reference the PaperScope object. const p = new paper.PaperScope(); // Using the setup method create a project with the HTML canvas element. This can also be combined with the step above paper.setup(canvas); // Assign multiple variable names to the p object const { Path, Point, Color } = p; // Create a background object let background = new p.Path.Rectangle([0, 0], [width, height]); // Give the background a colour background.fillColor = color1; let circle = new p.Path.Circle({ center: [width/2,height/2], radius: 50, fillColor: 'blue', strokecolour: color, opacity:0.65 }); // Create a symbol definition from the circle: let definition = new p.SymbolDefinition(circle); const num=1000; // Place 100 instances of the symbol definition: for (let i = 0; i < num; i++) { // Place an instance of the symbol definition in the project: let instance = definition.place(); // Move the instance to a random position within the view: instance.position = [Math.random()*width,Math.random()*height] ; // Scale the instance between 0.25 and 1: instance.scale(Math.random()); } // http://paperjs.org/reference/view/#onframe circle.onFrame = function(event) { // Every frame, // Loop through the segments of the path: for (let i = 0; i <= num; i++) { // Move the item 1/20th of its width to the right. This way // larger circles move faster than smaller circles: this.position.y += this.bounds.height / 50000; } } return canvas; } 35:T4d9,{ const height = 400 const width = 600 const context = DOM.context2d(width, height) const radius = 15 // Define location object of the 2D vector with the x and y properties const location = new THREE.Vector2(50, 50) // Define the xspeed and yspeed as properties of velocity object const velocity = new THREE.Vector2(2, 2) // Set the fill colour of the ball in the context context.fillStyle = color1 while (true) { // update the location vector with the velocity to create motion location.add(velocity); // By including the radius in the edge calculation, the ball seems to bounce off the edge else it disappears into the edge of the context by the radius if (location.x < radius || location.x > width - radius) { velocity.x = -velocity.x } if (location.y < radius || location.y > height - radius) { velocity.y = -velocity.y } // render the 'new' ball by clearing the background with each frame context.clearRect(0, 0, width, height) // start a new circle with the new x and y locations, so it appears to be moving context.beginPath() context.arc(location.x, location.y, radius, 0, PI * 2) context.fill() yield context.canvas } }36:T502,{ const height = 400 const width = 600 const context = DOM.context2d(width, height) const radius = 50 // Define location object of the 2D vector with the x and y properties const location = new THREE.Vector2(50, 50) // Define the xspeed and yspeed as properties of velocity object const velocity = new THREE.Vector2(5, 5) context.fillStyle = color2 //'rgba(5, 237, 245, 0.9)' context.fillRect(0, 0, width, height) // Set the fill colour of the ball in the context context.fillStyle = color1 while (true) { // update the location vector with the velocity to create motion location.add(velocity); // By including the radius in the edge calculation, the ball seems to bounce off the edge else it disappears into the edge of the context by the radius if (location.x < radius || location.x > width - radius) { velocity.x = -velocity.x } if (location.y < radius || location.y > height - radius) { velocity.y = -velocity.y } // render //context.clearRect(0, 0, width, height) // start a new circle with the new x and y locations, so it appears to be moving context.beginPath() context.arc(location.x, location.y, radius, 0, PI * 2) context.fill() yield context.canvas } }37:[] 32:{"id":"1e0adb1aa38b3466","slug":"100-days-of-code-80-visualising-randomness","title":"100 Days of Code 80- Visualising Randomness","thumbnail":"b42bcf1b3cdc531101ebb80f22277ca7a0aead545106bd1f17cdd93c8a8ddf56","access_level":"public","create_time":"$D2020-03-03T22:45:59.203Z","update_time":"$D2020-04-30T03:16:50.440Z","view_time":null,"first_public_time":"$D2020-03-03T23:44:50.527Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7d7941efbb2313ba","login":"kimnewzealand","name":"Kim Fitter","avatar_url":"https://avatars-next.observableusercontent.com/e8f314afe9edb2d2300dd21dd2314c6a931b75e859f283135ae85adac04c4e76","tier":"starter_2024"},"version":609,"publish_version":609,"role":null,"authored":false,"authors":[{"type":"individual","id":"75bb913059238850","login":"kimnewzealand","name":"Kim Fitter","avatar_url":"https://avatars-next.observableusercontent.com/e8f314afe9edb2d2300dd21dd2314c6a931b75e859f283135ae85adac04c4e76","tier":null}],"members":[{"type":"individual","id":"75bb913059238850","login":"kimnewzealand","name":"Kim Fitter","avatar_url":"https://avatars-next.observableusercontent.com/e8f314afe9edb2d2300dd21dd2314c6a931b75e859f283135ae85adac04c4e76","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"100 Days of Code 80- Visualising Randomness","cells":[{"id":0,"value":"md`# 100 Days of Code 80- Visualising Randomness`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"viewof color1 = colorPicker(\"#05ECF6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"viewof color2 = colorPicker(\"#FCE86B\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`For the remaining days of code challenge I would like to create animations using randomness and learn more about vector graphics. \nWe search for structure and predictability in many of the problems we try to solve with data. So being open minded about the randomness of things may let us see more. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`**Day 80**\n\nUse paper.js and randomness to create splattered dots. \n\nFirst generate the circles randomly placed and with random radii between 0 and 10.\n\nThen use a [symbol definition ](http://paperjs.org/reference/symboldefinition/#symboldefinition-item) ie Symbols allow you to place multiple instances of an item in the project.\n\nThese dots appear to be moving but there are actually not!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"{ \n // Create width and height variables\n const width = 600;\n const height = 300;\n // Create a HTML5 canvas object\n const canvas = DOM.canvas(width, height);\n // Now add a new paper variable to the global scope to reference the PaperScope object. \n const p = new paper.PaperScope();\n // Using the setup method create a project with the HTML canvas element. This can also be combined with the step above\n paper.setup(canvas);\n // Assign multiple variable names to the p object\n const { Path, Point, Color } = p;\n \n // Create a background object\n let background = new p.Path.Rectangle([0, 0], [width, height]);\n // Give the background a colour\n background.fillColor = color1;\n\n // Place 500 instances of the circle randomly placed and random radius between 0 and 10\n for (let i = 0; i < 200; i++) {\n let circle = new p.Path.Circle({\n center: [ Math.random()*width,Math.random()*height],\n radius: Math.random()*10,\n fillColor: color2,\n opacity:0.95\n });\n}\n\n\n \n return canvas;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`**Day 81**\n\nNow create falling splatted dots using the same paper.js frame event animation used previously in days 70-\n\nI changed the fill colour to 'blue' and althought this has been a diversion from the recent colour palette, I really like the blues together.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`**Day 82**\n\nI found this ebook by @shiffman which has a combination of coding, science, maths, art and randomness.\n\nJust to keep in good practice of checking the licensing I see it is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License. So no problem to rework some of the code examples in observable using some of my own ideas which I find the best way to learn.\n\nThis animation similates a normal (or Gaussian) distribution of dots using D3.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"{\n const height = 400\n const mean = width / 2\n const sd = width / 10\n const context = DOM.context2d(width, height)\n let x = width / 2\n let y = height /2\n let r = 20\n // Order matters, so we set the fillStyle to our palette light blue color before the html fillRect which draws a rectangle with the https://www.w3schools.com/tags/canvas_fillrect.asp\n context.fillStyle = color1 //'rgba(5, 237, 245, 0.9)'\n context.fillRect(0, 0, width, height)\n \n for (let i = 0; i < 500; ++i) {\n //Returns a function for generating random numbers with a normal (Gaussian) distribution centered in the context around the mean and sd defined above. \n x = normal() * sd + mean\n \n context.beginPath()\n context.fillStyle = 'rgba(5, 53, 245, 0.05)' // which is a more transparent 'blue'\n context.arc(x, y, r, 0, 6)\n context.fill()\n yield context.canvas\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md`**Day 83**\n\nNow we can follow this example to use a normal distribution of random numbers to generate a color palette randomly around a central point.\nhttps://observablehq.com/@ajur/the-nature-of-code-0-introduction?collection=@ajur/the-nature-of-code\n\n`\n\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"{\n const height = 500\n const radius = 50\n const ctx = DOM.context2d(width, height)\n \n for (let i = 0; i < 900; ++i) {\n const x = normal() * 80 + 0.5 * width\n const y = normal() * 80 + 0.5 * height\n const clr = splatterColorSigma !== 0 ? rndSplatterColor() : splatterColorByPos(x - width / 2, y - height / 2, Math.max(width, height) / 2)\n \n ctx.beginPath()\n ctx.fillStyle = clr\n ctx.arc(x, y, radius, 0, 6)\n ctx.fill()\n \n yield ctx.canvas\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`**Day 84**\n\nI have been wanting to make some noise for a while. \n\nCreate [Perlin Noise](https://en.wikipedia.org/wiki/Ken_Perlin) with the [simplex-noise.js](https://github.com/jwagner/simplex-noise.js) library.\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"{\n const height = 300\n const context = DOM.context2d(width, height)\n \n\n \n let steps = 0;\n while(true) {\n let t = steps *0.02\n let x = steps % width*2\n let y = height * (1 - noise1D(t))\n context.fillStyle = color1 //'rgba(5, 237, 245, 0.9)'\n context.clearRect(x, 1, 1, height)\n context.fillRect(x, y, 1, 10)\n ++steps\n yield visibility(context.canvas)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"md`**Day 85**\n\nUse the [noise2D](https://processing.org/examples/noise2d.html) library to create visual noise.\n\nWe also use the Lodash library [_.defaults](https://lodash.com/docs#defaults) method:\n>Assigns own and inherited enumerable string keyed properties of source objects to the destination object for all destination properties that resolve to undefined. Source objects are applied from left to right. Once a property is set, additional values of the same property are ignored.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"{\n const height = 400\n const width = 600\n const context = DOM.context2d(width, height)\n const clr = tinycolor(color1).toHsv()\n for (let x = 0; x < width; ++x) {\n for (let y = 0; y < height; ++y) {\n const v = noise2D(x *1 , y *0.35)\n context.fillStyle = tinycolor(_.defaults({v}, clr)).toRgbString()\n context.fillRect(x, y, 10, 10)\n }\n }\n return context.canvas\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"md`**Day 86**\n\nNow move onto animating using :\n\n> the most basic building block for programming motion—the vector\n\nand\n\n> assume it refers to a Euclidean vector, defined as an entity that has both magnitude and direction.\nFollowing the [vector chapter](https://natureofcode.com/book/chapter-1-vectors/) in the book.\n\nusing the 3D library THREE.js. We will start with a 2D animation using vectors, [vector2](https://threejs.org/docs/index.html#api/en/math/Vector2).\n\nThis animation still uses the DOM.context2d and uses location and velocity objects, where\n> the algorithm for motion, location = location + velocity\nHowever the \n> addition operator + is reserved for primitive values\nso we can use an add() method/ function for vectors to add the x's and y's together.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"md`**Day 87**\n\nChange the colours so that the ball becomes a colouring in line that bounces off the walls`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"md`**Day 88**\n\nChange `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"{\n const height = 400\n const width = 600\n \n const context = DOM.context2d(width, height)\n \n const mid = new THREE.Vector2(0, height )\n // Draw a line to represent the vector\n context.translate(mid.x, mid.y)\n context.strokeStyle=color1\n \n \n const mouse = new THREE.Vector2()\n \n context.canvas.onmousemove = (e) => {\n mouse.set(e.offsetX, e.offsetY).sub(mid)\n }\n \n while (true) {\n context.clearRect(-mid.x, -mid.y, width, height)\n context.beginPath()\n context.lineWidth = 4\n context.moveTo(1,0)\n context.lineTo(mouse.x, mouse.y)\n context.stroke()\n yield context.canvas\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"md`Day 89\n\nA take on this plot to create rippling hexs voronoi.\n\nhttps://observablehq.com/@mbostock/shimmy`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"height=400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"performance.now()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":" {\n const height = 400\n const width = 600\n const context = DOM.context2d(width, height);\n const coordinates = new Float64Array(points.length * 20);\n const voronoi = new d3.Delaunay(coordinates).voronoi([0, 0, width, height]);\n \n context.fillStyle = color2 //'rgba(5, 237, 245, 0.9)'\n context.strokeStyle =color1\n context.fillRect(0, 0, width, height)\n while (true) {\n const z = performance.now()* 0.001;\n context.clearRect(0, 0, width, height);\n for (let i = 0, j = -1; i < points.length; ++i) {\n const [x, y] = points[i];\nconst t = noise(x * config.f, y * config.f, z) ;\n coordinates[++j] = x + config.l;\n coordinates[++j] = y + config.l * Math.sin(t);\n }\n context.beginPath();\n voronoi.update().render(context);\n context.stroke();\n yield context.canvas;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"noise = {\n const simplex = new (await require(\"simplex-noise@2\"));\n return simplex.noise3D.bind(simplex);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"viewof config = {\n const form = html``;\n form.oninput = () => {\n form.value = {\n s: form.s.valueAsNumber,\n l: form.l.valueAsNumber,\n f: form.f.valueAsNumber\n };\n form.os.value = `${form.value.s.toFixed(1)}px`;\n form.ol.value = `${form.value.l.toFixed(0)}px`;\n form.of.value = `${form.value.f.toFixed(3)}`;\n };\n form.oninput();\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"points = d3.hexbin()\n .radius(config.s)\n .extent([[-config.l, -config.l], [width + config.l, height + config.l]])\n .centers()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"d3 = require(\"d3-selection@1.4.0\", \"d3-array@2\", \"d3-hexbin@0.2\", \"d3-scale-chromatic@1.5\", \"d3-shape@1.3.5\", \"d3-scale@3.1.0\",\"d3-random\",\"d3-hexbin@0.2\", \"d3-delaunay@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"PI = Math.PI","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"THREE = require('three')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"noise2D = (x, y) => (simplex.noise2D(x, y) + 1) * 0.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"noise1D = (x) => (simplex.noise2D(x, 1) + 1) * 0.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"simplex = new SimplexNoise(random)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"noise3D = (x, y, z) => (simplex.noise3D(x, y, z) + 1) * 0.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"SimplexNoise = require('simplex-noise')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"viewof splatterColorSigma = slider({\n min: 0,\n max: 60,\n step: 1,\n value: 0,\n display: v => v ? v : 'Color will be based on distance to center',\n description: \"choose color variance, or set to 0 to bind variance with position\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"splatterColorMean = \"#05ecf6\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"rndSplatterColor = () => tinycolor(splatterColorMean).spin(Math.floor(normal() * splatterColorSigma)).toHslString()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"import {slider, color, radio} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"tinycolor = require(\"tinycolor2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"splatterColorByPos = (x, y, max) => tinycolor(splatterColorMean).spin(Math.floor(360 * Math.sqrt(x * x + y * y) / max)).toHslString()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"normal = d3.randomNormal.source(random)()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"random = seedrandom()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"seedrandom = require(\"seedrandom/seedrandom.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import {colorPicker} from \"@shaunlebron/color-picker\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"paper = require(\"paper\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"