30:[] 2e:{"title":"Randomness","cells":[{"id":0,"value":"md`# Randomness\nGenerating random numbers with a computer may seem simple, but numbers generated with an algorithm are not *truly* random. They are generated according to a deterministic formula and could thus have faults. Let's see how random numbers generated with the computer really are.\n\nIn JavaScript, you can conjure up a random number using:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"Math.random() // replay this cell to generate a new random value","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`So how good is it? We can visualize results in 1 dimension by plotting them on a number line.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"md`Here ${oneDimN != 1 ? 'are' : 'is'} ${oneDimN} point${oneDimN != 1 ? 's' : ''} plotted on a one-dimensional number line:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"{\n const ctx = DOM.context2d(width, 40);\n ctx.beginPath();\n ctx.moveTo(0, 20);\n ctx.lineTo(width, 20);\n ctx.stroke();\n for (let i = 0; i < oneDimN; i++) {\n const x = Math.random() * (width - 10) + 5;\n ctx.beginPath();\n ctx.arc(x, 20, 5, 0, 2 * Math.PI, false);\n ctx.fillStyle = `rgba(255, 0, 0, ${1 / oneDimN * 100})`;\n ctx.fill();\n }\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"md`You can use this slider to change the number of points drawn on the number line`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"viewof oneDimN = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`This is interesting, but it's hard to really understand in such a confined space. What if we visualize these results in two dimensions? Generate an x-coordinate and a y-coordinate and plot the points.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`Here ${twoDimN != 1 ? 'are' : 'is'} ${twoDimN} point${twoDimN != 1 ? 's' : ''} plotted on a two-dimensional graph:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"{\n const height = 400;\n const ctx = DOM.context2d(width, height);\n ctx.beginPath();\n ctx.moveTo(0, 0);\n ctx.lineTo(0, height);\n ctx.stroke();\n ctx.beginPath();\n ctx.moveTo(0, height);\n ctx.lineTo(width, height);\n ctx.stroke();\n \n for (let i = 0; i < twoDimN; i++) {\n const x = Math.random() * (width - 10) + 5;\n const y = Math.random() * (height - 10) + 5;\n ctx.beginPath();\n ctx.arc(x, y, 5, 0, 2 * Math.PI, false);\n ctx.fillStyle = `rgba(255, 0, 0, ${1 / twoDimN * 1000})`;\n ctx.fill();\n }\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"md`You can use this slider to change the number of points drawn on the plot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"viewof twoDimN = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"md`It's still hard to tell if there's any real pattern. Let's add color into the mix and generate with larger transparent circles.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`Here ${twoDimN2 != 1 ? 'are' : 'is'} ${twoDimN2} dot${twoDimN2 != 1 ? 's' : ''} plotted with color on a two-dimensional graph:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"{\n const height = 400;\n const radius = 100;\n const ctx = DOM.context2d(width, height);\n ctx.globalCompositeOperation = 'screen';\n ctx.beginPath();\n ctx.moveTo(0, 0);\n ctx.lineTo(0, height);\n ctx.stroke();\n ctx.beginPath();\n ctx.moveTo(0, height);\n ctx.lineTo(width, height);\n ctx.stroke();\n \n for (let i = 0; i < twoDimN2; i++) {\n const x = Math.random() * (width + radius * 2) - radius;\n const y = Math.random() * (height + radius * 2) - radius;\n const h = Math.floor(Math.random() * 360);\n ctx.beginPath();\n ctx.arc(x, y, 100, 0, 2 * Math.PI, false);\n ctx.fillStyle = `hsla(${h}, 100%, 50%, ${1 / twoDimN2 * 20})`;\n ctx.fill();\n }\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"md`You can use this slider to change the number of colorful dots drawn on the plot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"viewof twoDimN2 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"md`Still hard to tell what this means? Let's try using another random number generator. The *Mersenne Twister* is famous for having well-distributed generated numbers which show many statistical signals that echo truly random number distributions.\n\nLet's include the package and generate some numbers.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"MersenneTwister = require('https://unpkg.com/mersennetwister@0.2.3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"mt = new MersenneTwister()","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"mt.random() // replay this cell to generate a new random value using the Mersenne Twister algorithm","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"{\n const height = 400;\n const radius = 100;\n const ctx = DOM.context2d(width, height);\n ctx.globalCompositeOperation = 'screen';\n ctx.beginPath();\n ctx.moveTo(0, 0);\n ctx.lineTo(0, height);\n ctx.stroke();\n ctx.beginPath();\n ctx.moveTo(0, height);\n ctx.lineTo(width, height);\n ctx.stroke();\n \n for (let i = 0; i < twoDimN2; i++) {\n const x = mt.random() * (width + radius * 2) - radius;\n const y = mt.random() * (height + radius * 2) - radius;\n const h = Math.floor(mt.random() * 360);\n ctx.beginPath();\n ctx.arc(x, y, 100, 0, 2 * Math.PI, false);\n ctx.fillStyle = `hsla(${h}, 100%, 50%, ${1 / twoDimN2 * 20})`;\n ctx.fill();\n }\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"{\n const height = 20;\n const width = 20;\n const scale = 10;\n const ctx = DOM.context2d(width * scale, height * scale);\n \n // Init an empty 2D array.\n const rows = [];\n for (let i = 0; i < height; i++) {\n const row = [];\n for (let i = 0; i < width; i++) {\n row.push(0);\n }\n rows.push(row);\n }\n \n let globalMax = 0;\n for (let i = 0; i < 1000000; i++) {\n const x = Math.floor(mt.random() * width);\n const y = Math.floor(mt.random() * height);\n rows[y][x]++;\n if (rows[y][x] > globalMax) globalMax = rows[y][x];\n }\n\n for (let x = 0; x < width; x++) {\n for (let y = 0; y < height; y++) {\n const value = Math.floor((rows[y][x] - globalMax / 2) / globalMax * 256 + 128);\n ctx.fillStyle = `rgb(${value}, ${value}, ${value})`;\n ctx.fillRect(x * scale, y * scale, scale, scale); \n }\n }\n \n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"{\n const height = 100;\n const width = 100;\n const ctx = DOM.context2d(width, height);\n \n // Init an empty 2D array.\n const rows = [];\n for (let i = 0; i < height; i++) {\n const row = [];\n for (let i = 0; i < width; i++) {\n row.push(0);\n }\n rows.push(row);\n }\n \n let globalMax = 0;\n for (let i = 0; i < 10000000; i++) {\n const x = Math.floor(mt.random() * width);\n const y = Math.floor(mt.random() * height);\n rows[y][x]++;\n if (rows[y][x] > globalMax) globalMax = rows[y][x];\n }\n \n const imageData = ctx.createImageData(width, height);\n const data = imageData.data;\n \n let i = 0;\n for (let x = 0; x < width; x++) {\n for (let y = 0; y < height; y++) {\n const value = Math.floor(rows[y][x] / globalMax * 256);\n data[i] = 255 - value;\n data[i + 1] = 255 - value;\n data[i + 2] = 255 - value;\n data[i + 3] = 255;\n i += 4;\n }\n }\n \n ctx.putImageData(imageData, 0, 0);\n\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}