2d:null 2e:["$","title",null,{"children":"Mondrian | John C | Observable"}] 33:T1013,p5(s => { let colors = [ [218,215,234], [173,179,211], [190,142,3], [175,46,25], [20,30,60], [10,10,10] ]; class Rt { //rectangle defined by two corners constructor(c1,c2){ this.c1 = c1; this.c2 = c2; this.xMin = s.min(c1.x,c2.x); this.xMax = s.max(c1.x,c2.x); this.yMin = s.min(c1.y,c2.y); this.yMax = s.max(c1.y,c2.y); this.ited = false; } divide(n) { if (n == 4) { let bp = new p5c.Vector( s.random(this.xMin + s.max(10, s.abs(this.xMin-this.xMax)/6), this.xMax - s.max(10, s.abs(this.xMin-this.xMax)/6)), s.random(this.yMin + s.max(10, s.abs(this.yMin-this.yMax)/6), this.yMax - s.max(10, s.abs(this.yMin-this.yMax)/6)), ); let lt = new Rt(new p5c.Vector(this.xMin,this.yMin),bp); let rt = new Rt(new p5c.Vector(this.xMax,this.yMin),bp); let lb = new Rt(new p5c.Vector(this.xMin,this.yMax),bp); let rb = new Rt(new p5c.Vector(this.xMax,this.yMax),bp); return [lt, rt, lb, rb]; } else if (n == 2) { let bp = new p5c.Vector( s.random(this.xMin + s.max(10, s.abs(this.xMin-this.xMax)/6), this.xMax - s.max(10, s.abs(this.xMin-this.xMax)/6)), s.random(this.yMin + s.max(10, s.abs(this.yMin-this.yMax)/6), this.yMax - s.max(10, s.abs(this.yMin-this.yMax)/6)), ); if (s.random() < 0.5) { //devide to top and bottom let t = new Rt(new p5c.Vector(this.xMin,this.yMin), new p5c.Vector(this.xMax,bp.y)); let b = new Rt(new p5c.Vector(this.xMax,bp.y), new p5c.Vector(this.xMin,this.yMax)); return [t,b]; } else { //devide to left and rignt let l = new Rt(new p5c.Vector(this.xMin,this.yMin), new p5c.Vector(bp.x,this.yMax)); let r = new Rt(new p5c.Vector(bp.x,this.yMax), new p5c.Vector(this.xMax,this.yMin)); return [l,r]; } } else if (n == 3) { //?has this? } } display(){ s.push(); s.stroke(10,10,10); s.strokeWeight(6); let dice = s.floor(s.random(16)); let c = s.floor(dice/3); s.fill(colors[c][0],colors[c][1],colors[c][2]); s.rect(this.xMin, this.yMin, this.xMax, this.yMax); s.pop(); } } s.setup = function () { s.createCanvas(960,720); s.background(255); s.rectMode(s.CORNERS); } s.draw = function () { let rectangles = []; let screen = new Rt(new p5c.Vector(0,0), new p5c.Vector(s.width,s.height)); rectangles = rectangles.concat(screen.divide(4)); rectangles = s.getRts(rectangles); rectangles.forEach(r => { r.display(); }); s.push(); s.stroke(10,10,10); s.strokeWeight(12); s.noFill(); s.rect(0,0,s.width,s.height); s.pop(); s.noLoop(); } s.mouseClicked = function () { if (s.mouseX < s.width && s.mouseX > 0 && s.mouseY < s.height && s.mouseY > 0) { s.loop(); } } s.getRts = function (tarr) { tarr.forEach((t,i) => { if (!t.ited) { //check if it is small if (s.abs(t.xMin - t.xMax) > 20 && s.abs(t.yMin - t.yMax) > 20) { //big enough, decide to divide or not let d = s.dist(t.xMin, t.yMin, t.xMax, t.yMax); let md = s.sqrt(s.sq(s.width*4/6) + s.sq(s.height*4/6)); if (s.random() < s.map(d,md,s.sqrt(800),0.9,0)){ //to divide tarr.splice(i,1); if (s.random() < 0.5) { tarr = tarr.concat(t.divide(2)); } else { tarr = tarr.concat(t.divide(4)); } } } t.ited = true; } }); let allIted = true; for (let i = 0; i < tarr.length; i ++) { if (!tarr[i].ited) { allIted = false; break; } } if (!allIted) { tarr = s.getRts(tarr); //this is actually not a recursion, just a simpler way to loop through all not ited rts } else { return tarr; } //theorically it never reaches here return tarr; } })34:T781,p5(s => { let colors = [ [218,215,234], [173,179,211], [190,142,3], [175,46,25], [20,30,60], [10,10,10] ]; let seed; s.setup = function () { s.createCanvas(960,720); s.background(255); s.rectMode(s.CORNERS); seed = s.floor(s.random(Number.MAX_SAFE_INTEGER)) } s.draw = function () { s.randomSeed(seed); s.background(255); s.drawRect(0,0,s.width,s.height); s.push(); s.stroke(10,10,10); s.strokeWeight(12); s.noFill(); s.rect(0,0,s.width,s.height); s.pop(); } s.drawRect = function (x,y,xx,yy) { s.push(); s.stroke(10,10,10); s.strokeWeight(6); let dice = s.floor(s.random(16)); let c = s.floor(dice/3); let al = viewof alpha.valueAsNumber; let md = s.sqrt(s.sq(s.width)+s.sq(s.height)); s.fill(colors[c][0],colors[c][1],colors[c][2],s.map(s.dist(x,y,xx,yy),s.sqrt(800),md,(255-al)*0.5,255-al)); s.rect(x,y,xx,yy); s.pop(); let nx = s.random(s.min(x,xx)+s.max(10, s.abs(x-xx)/6),s.max(x,xx)-s.max(10, s.abs(x-xx)/6)); let ny = s.random(s.min(y,yy)+s.max(10, s.abs(y-yy)/6),s.max(y,yy)-s.max(10, s.abs(y-yy)/6)); if (s.abs(x-xx)<20 || s.abs(y-yy)<20) return; // too small if (s.random() > s.map(s.dist(x,y,xx,yy),md,s.sqrt(800),1,0)) return; // fail random test // if (s.random() < 0.5 || (s.min(x,xx) == 0 && s.min(y,yy) == 0)) { s.drawRect(x,y,nx,ny); s.drawRect(xx,y,nx,ny); s.drawRect(x,yy,nx,ny); s.drawRect(xx,yy,nx,ny); } else { if (s.random() < 0.5) { s.drawRect(x,y,xx,ny); s.drawRect(x,yy,xx,ny); } else { s.drawRect(x,y,nx,yy); s.drawRect(nx,yy,xx,y); } } } s.mouseClicked = function () { if (s.mouseX < s.width && s.mouseX > 0 && s.mouseY < s.height && s.mouseY > 0) { seed = s.floor(s.random(Number.MAX_SAFE_INTEGER)) } } })35:[] 31:{"id":"2682c4333d3b76d3","slug":"sm3809-mondrian","title":"Mondrian","thumbnail":"22730bbd7ec5796bf3a72f489fa3fdcc766262852bda5447351eb18a1d37cd8f","access_level":"public","create_time":"$D2021-01-28T08:51:19.054Z","update_time":"$D2021-01-29T17:40:34.586Z","view_time":null,"first_public_time":"$D2021-01-28T08:51:37.140Z","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":131,"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":"Mondrian","cells":[{"id":0,"value":"html`\n

Mondrian

\nNo recursion method, click to regenerate
\nfirst create all the rectangles, then draw, faster and takes less resources\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"html`\nSimple recursion solution, click to regenerate
\nsimpler coding, draw smaller rectangles on top of the exist one
\nit is much slower, but can be interesting, try use the slider down below\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"viewof alpha = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"html`\n

\n\n

-------------------below is the import and setup section--------------------

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