2d:null 2e:["$","title",null,{"children":"Randomness and other | John C | Observable"}] 33:T88c,class MT19937 { // A variant of Mersenne twister, used in Python, PHP, etc. // refer to the MT wiki page https://en.wikipedia.org/wiki/Mersenne_Twister constructor(seed){ // consts this.w =32; // this is the output bit length this.n = 624; // this is the length of our generator array this.m = 397 // const for twist this.r = 31 // this is # of bit for the lower mask this.a = 2567483615 // this is the const for matrix rotation this.f = 1812433253 // const for initialzation this.b = 675053731862 this.c = 1029819072534 // masks for TGFSR this.s = 7 this.t = 15 // # of bit to shift in TGFSR this.u = 11 this.d = 1099511627542 this.l = 18 // additional consts and masks this.seed = seed; // seed should be an int this.MT = []; // typically, for genrating an random w bit int, it's length will be n, but this is js, so... this.ini(seed); this.index = this.n; } getLast32Bit(input){ return parseInt(input & 0xFFFFFFFF); } ini(seed){ // initialize the array (our generator) with the seed this.MT[0] = seed; for (let i = 1; i < this.n - 1; i ++) { this.MT[i] = this.getLast32Bit(this.f * (this.MT[i - 1] ^ this.MT[i - 1] >> 30) + i) // loop over all elements in the array } } rotate(){ // i.e twist, to re-build our array for more 'randomness' let lowerMask = (1 << this.r) - 1; let upperMask = 1 << this.r; for (let i = 0; i < this.MT.length - 1; i ++) { let x = (this.MT[i] & upperMask) + (this.MT[(i + 1) % this.n] & lowerMask); let xa = x >> 1 if ((x % 2) != 0 ){ xa ^= this.a; } this.MT[i] = this.MT[(i+this.m) % this.n] ^ xa; } this.index = 0; } getRand(){ if (this.index >= this.n){ this.rotate(); } let x = this.MT[this.index]; let z = this.processRes(x); this.index ++; return z; } processRes(input){ let y = input ^ ((input >> this.u) & this.d); y = y ^ ((y << this.s) & this.b); y = y ^ ((y << this.t) & this.c); y = this.getLast32Bit((y ^ (y >> this.l))) return y; } }34:[] 31:{"id":"0d2adb8871eec087","slug":"randomness-and-other","title":"Randomness and other","thumbnail":"b520e59cde4b65e0436441b93862a624c537cde08836034736c805a7f19b9743","access_level":"public","create_time":"$D2021-09-08T05:00:17.236Z","update_time":"$D2023-12-08T11:37:17.944Z","view_time":null,"first_public_time":"$D2021-09-08T07:59:47.390Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b2e9840be7b1b607","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":"starter_2024"},"version":278,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e8e99acdbe3aebfb","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":null}],"members":[{"type":"individual","id":"e8e99acdbe3aebfb","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"aac27ce630a2ebd4","slug":"posts","title":"Posts","owner":{"id":"b2e9840be7b1b607","login":"real-john-cheung","name":"John C"}},"type":"notebook","body":{"title":"Randomness and other","cells":[{"id":10,"value":"html`

Randomness and other

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"html`

\nAn important question to think about when we use \"randomness\" or \"random number\" on a piece of code: how it is produced in a computer(or a micro controller or whatever), a deterministic machine?
Below is a js implemention of the method they use in R, Python, PHP, etc... (i.e. what happens when you call random())\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"aGenerator = new MT19937(parseInt(new Date().getTime()))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"randNum = aGenerator.getRand() ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"html`

\nWhat is important in the source code is this section in the getRand() function:

\n    ...\n    let x = this.MT[this.index];\n    let z = this.processRes(x);\n    this.index ++;\n    return z;\n    ...\n

It basically means, when random() give us is an element in a known array, and it is in numeric order. So we, actually, know what our next \"random\" number will be.\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":" (() => {\n let div = html`

`;\n let innerText = \"

Try update the above randNum cell for a few times
\"\n innerText += \"Current Index: \" + (aGenerator.index -1 ) + \";
\";\n innerText += \"This random number: \" + randNum + \";
\";\n innerText += \"Next random number: \" + (aGenerator.MT[aGenerator.index] ?aGenerator.processRes(aGenerator.MT[aGenerator.index]) : \"Matrix rotate\") +\";
\";\n innerText += \"

\";\n div.innerHTML = innerText;\n return div;\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"html`

So what does it means to us as genrative artists?
Firstly, it means we can, acutally, control the \"random\". We can use this to create an illustion for the audience, tricking them to think that the genertative process is random in the early stage of the experience and then reveal the truth afterward. It can leads to many topics, like free will and deteminism.
On the other hand, we can also play with the random algorithms and create our own ones. (We are artist, we don't need our algorithm to pass statical randomness check, they just need to look like random)

Randomness and the Chaos Theory

If we define randomness simply as \"not-predictable-ness\". We can create a simple random function with any chaotic system (if you are not familar with chaos theory, click here).

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"cotRandClass = class{\n constructor(seed){\n this.seed = seed;\n this.lastR = this.seed;\n for ( let i=0;i<1000; i++){\n this.lastR = 1 / Math.tan(this.lastR);\n }\n }\n\n rand(){\n this.lastR = 1 / Math.tan(this.lastR);\n return Math.abs(this.lastR);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"cotRand = new cotRandClass(new Date().getTime()/1000000000000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"cotRand.rand()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"

But notice that the distribution of \"random\" is not very even

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"p5(s => {\n s.setup = function(){\n s.createCanvas(600,200);\n s.background(255);\n s.strokeWeight(2);\n let arr = [];\n for (let i = 0; i < 600; i++) {\n arr.push(cotRand.rand())\n }\n s.translate(0,s.height);\n arr.forEach((n,i) => {\n s.point(i,-n*5);\n })\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"

Another one that is more even. Using Logistic Map

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"logisticMapClass = class {\n constructor(seed){\n this.seed = seed;\n this.lastR = this.seed;\n this.r = 4\n for (let i = 0; i < 1000; i++) {\n this.lastR = this.r * this.lastR * (1-this.lastR);\n }\n }\n\n rand(){\n this.lastR = this.r * this.lastR * (1-this.lastR);\n return this.lastR\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"logisticMapRand = new logisticMapClass(new Date().getTime()/10000000000000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"logisticMapRand.rand()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"p5(s => {\n s.setup = function(){\n s.createCanvas(600,200);\n s.background(255);\n s.strokeWeight(2);\n let arr = [];\n for (let i = 0; i < 600; i++) {\n arr.push(logisticMapRand.rand())\n }\n s.translate(0,s.height);\n arr.forEach((n,i) => {\n s.point(i,-n*200);\n })\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"

Another one called LCG .

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":180,"value":"LCG = class{\n constructor(seed){\n if (!seed) seed = 1;\n this.s = seed;\n }\n next(){\n const a = 1664525;\n const c = 1013904223;\n const m = 4294967296;\n this.s = (a * this.s + c) % m\n return this.s/m;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"lcg = new LCG();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"lcg.next()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"p5(s => {\n s.setup = function(){\n s.createCanvas(600,200);\n s.background(255);\n s.strokeWeight(2);\n let arr = [];\n for (let i = 0; i < 600; i++) {\n arr.push(lcg.next())\n }\n s.translate(0,s.height);\n arr.forEach((n,i) => {\n s.point(i,-n*200);\n })\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"

And Middle Square method. See a youtube video that clearly describe how it works here.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":198,"value":"class MiddleSquareRand{\n constructor(seed){\n this.x = 0;\n this.w = 0;\n this.s = seed || 0x45ad4ece;\n }\n\n setSeed(seed){\n this.s = seed;\n }\n\n next(){\n this.x *= this.x;\n this.x += (this.w += this.s);\n this.x = (this.x >>> 16) | (this.x << 16);\n this.x = (this.x < 0) ? this.x * -1 : this.x;\n\n return this.x\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"middleSquare = new MiddleSquareRand();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"p5(s => {\n s.setup = function(){\n s.createCanvas(600,200);\n s.background(255);\n s.strokeWeight(2);\n let arr = [];\n let min = 10000,max = -100;\n for (let i = 0; i < 600; i++) {\n let nn = middleSquare.next();\n if (nn / 2147483647 > max) max = nn / 2147483647;\n if (nn / 2147483647 < min) min = nn / 2147483647;\n arr.push( nn / 2147483647);\n }\n //console.log(max, min)\n s.translate(0,s.height);\n arr.forEach((n,i) => {\n s.point(i,-n*200);\n })\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"

Based on Middle Square RNG, we can generate pink noise

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":235,"value":"/**\n * pink Noise based on https://gist.github.com/tom-merchant/5ced03a0638b06138ee7d11c0c209aa4 \n */\nclass PinkNoise {\n\n /**\n * \n * @param {Object} opts \n */\n constructor(opts){\n let seed = opts && opts.seed ? opts.seed : undefined;\n this.counter = opts && opts.start ? opts.start : 0;\n this.counter = this.counter % trailingZero.length;\n this.rand = new MiddleSquareRand(seed);\n this.octaveVals = new Array(9).fill(0);\n this.out = 0;\n }\n\n /**\n * return next pink noise value\n */\n next(){\n let octave = trailingZero[this.counter];\n\n this.out -= this.octaveVals[octave];\n this.octaveVals[octave] = this.rand.next() / (2147483647);\n this.octaveVals[octave] /= 10 - octave;\n this.out += this.octaveVals[octave];\n this.counter ++;\n this.counter = this.counter % trailingZero.length;\n\n return this.out;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"trailingZero = [8,0,1,0,2,0,1,0,3,0,1,0,2,0,1,0,4,0,1,0,2,0,1,0,3,0,1,0,2,0,1,0,5,0,1,0,2,0,1,0,3,0,1,0,2,0,1,0,4,0,1,0,2,0,1,0,3,0,1,0,2,0,1,0,6,0,1,0,2,0,1,0,3,0,1,0,2,0,1,0,4,0,1,0,2,0,1,0,3,0,1,0,2,0,1,0,5,0,1,0,2,0,1,0,3,0,1,0,2,0,1,0,4,0,1,0,2,0,1,0,3,0,1,0,2,0,1,0,7,0,1,0,2,0,1,0,3,0,1,0,2,0,1,0,4,0,1,0,2,0,1,0,3,0,1,0,2,0,1,0,5,0,1,0,2,0,1,0,3,0,1,0,2,0,1,0,4,0,1,0,2,0,1,0,3,0,1,0,2,0,1,0,6,0,1,0,2,0,1,0,3,0,1,0,2,0,1,0,4,0,1,0,2,0,1,0,3,0,1,0,2,0,1,0,5,0,1,0,2,0,1,0,3,0,1,0,2,0,1,0,4,0,1,0,2,0,1,0,3,0,1,0,2,0,1,0];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"pinkNoise = new PinkNoise({start: Math.floor(Math.random() * 1000)});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"p5(s => {\n s.setup = function(){\n s.createCanvas(600,200);\n s.background(255);\n s.strokeWeight(2);\n let arr = [];\n let max = Number.NEGATIVE_INFINITY, min = Number.POSITIVE_INFINITY;\n for (let i = 0; i < 600; i++) {\n let nn = pinkNoise.next();\n if (nn > max) max = nn;\n if (nn < min) min = nn;\n arr.push(nn / 1.8);\n }\n console.log(max, min)\n s.translate(0,s.height);\n arr.forEach((n,i) => {\n s.point(i,-n*200);\n })\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"import {p5} from \"@real-john-cheung/sm3809-a1\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"