31:T8d3,# Subdivision 2 In the [last post](../@real-john-cheung/subdivision) we play with different subdivision methods for triangles. In this post, we are going to explore some subdivisions of other polygon. First, we will start with [Penrose tiling](https://en.wikipedia.org/wiki/Penrose_tiling). This is a tiling named after Roger Penrose, who studied it systematically in 1970s. There are several forms of Panrose tiling, but they all have common features and properties involving golden ratio, and they are all self-similar. One of the many ways to create a Panrose tiling is through subdivision: 1. start with a decagon, divide it into 10 triangles, take the length of the longest edge of the triangles as R; ![Screenshot 2024-03-15 at 9.57.25 AM.png](${await FileAttachment("Screenshot 2024-03-15 at 9.57.25 AM.png").url()}) 2. draw a circle at the middle of the decagon with a radius of R1 = (φ-1)*R (φ is the golden ratio, ~1.618), on every two vertex of the decagon, draw a circle with a radius of R2 = R - R1; ![Screenshot 2024-03-15 at 11.31.04 AM.png](${await FileAttachment("Screenshot 2024-03-15 at 11.31.04 AM.png").url()}) 3. divide the triangles with the point where circles intersect; ![Screenshot 2024-03-15 at 1.01.11 PM.png](${await FileAttachment("Screenshot 2024-03-15 at 1.01.11 PM.png").url()}) 4. At the center of the origin decagon, draw a circle with a radius of R2 (red), connect the circle intersections in step 3 to the near by points where the newly drawn circle intersect with the triangle edges: ![Screenshot 2024-03-15 at 2.42.20 PM.png](${await FileAttachment("Screenshot 2024-03-15 at 2.42.20 PM.png").url()}) 5. Connect the intersections of the circle drawn in step 4 (the red one) and the triangle edges together to form a small decagon: ![Screenshot 2024-03-15 at 2.45.37 PM.png](${await FileAttachment("Screenshot 2024-03-15 at 2.45.37 PM.png").url()}) Remove all the circles and repeat step 1 - 5 for the smaller decagon recursively to get a infinite Penrose titling. You might have already see how this subdivision can be done with each triangles created during the steps as well, and that will allow us to create variation in different regions, just like what we did in the last post. 32:Tf78,p5(s=>{ const PHI = (1 + Math.sqrt(5)) / 2; const PHISQ = PHI*PHI; const OBTSUE_H = Math.sqrt(1 - PHISQ/4); const ACUTE_H = Math.sqrt(1 - 1 / (4 * PHISQ)); class Triangle { // triangles in the subdivision are similar isosceles triangles, so here we use the location of apex and size to difine them constructor(x, y, rotation, size, type, direction, level){ this.x = x; this.y = y; this.rotation = rotation; this.size = size; this.d = direction; this.type = type; // 0: obtuse 1: acute this.level = level; this.divided = false; } divide(){ this.divided = true; let res = []; if (this.type === 1) { //acute, divide to three: let newSz = this.size / PHISQ; let r = - 3 * Math.PI/5; let newRotation = this.d === 1 ? this.rotation + r : this.rotation - r; let ang = this.d === 1 ? this.rotation + Math.PI/10 : this.rotation - Math.PI/10; let nx = this.x + newSz * Math.cos(ang); let ny = this.y + newSz * Math.sin(ang); res.push(new Triangle(nx, ny, newRotation, newSz, 0, this.d, this.level + 1)); newSz = this.size / PHI; r = 3 * Math.PI / 5; newRotation = this.d === 1 ? this.rotation - r : this.rotation + r; ang = this.d === 1 ? this.rotation + Math.PI/10 : this.rotation - Math.PI/10; nx = this.x + this.size * Math.cos(ang); ny = this.y + this.size * Math.sin(ang); res.push(new Triangle(nx, ny, newRotation, newSz, 1, this.d, this.level + 1)); r = 4 * Math.PI / 5; newRotation = this.d === 1 ? this.rotation - r : this.rotation + r; ang = this.d === 1 ? this.rotation + Math.PI/10 : this.rotation - Math.PI / 10; nx = this.x + this.size * Math.cos(ang); ny = this.y + this.size * Math.sin(ang); res.push(new Triangle(nx, ny, newRotation, newSz, 1, (this.d + 1) % 2, this.level + 1)); } else { //obtuse, divide to two let newSz = this.size; let r = 3 * Math.PI / 5; let newRotation = this.d === 1 ? this.rotation + r : this.rotation - r; let ang = this.d === 1 ? this.rotation - 3 * Math.PI / 10 : this.rotation + 3 * Math.PI / 10; let nx = this.x + this.size * Math.cos(ang); let ny = this.y + this.size * Math.sin(ang); res.push(new Triangle(nx, ny, newRotation, newSz, 1, (this.d + 1) % 2, this.level + 1)); newSz = this.size / PHI; r = 4 * Math.PI / 5; newRotation = this.d === 1 ? this.rotation + r : this.rotation - r; ang = this.d === 1 ? this.rotation + Math.PI / 10 : this.rotation - Math.PI / 10; nx = this.x + newSz * Math.cos(ang); ny = this.y + newSz * Math.sin(ang); res.push(new Triangle(nx, ny, newRotation, newSz, 0, this.d, this.level + 1)); } return res; } render(){ let ds = this.size; s.push(); s.translate(this.x, this.y); s.scale(ds); s.rotate(this.rotation); s.strokeWeight(1/ds); // make sure strokeweight looks the same in different scale; if (this.type === 0){ s.triangle(OBTSUE_H, - PHI/2, 0, 0, OBTSUE_H, PHI/2); } else { s.triangle(ACUTE_H, - 1 / (PHI * 2), 0, 0, ACUTE_H, 1 / (PHI * 2)); } s.pop(); } } s.setup = function(){ s.createCanvas(400,400); s.noFill(); s.stroke(0); let tris = []; let size = s.width/2; for (let i = 0; i < 5; i ++) { let ang = i * 2 * Math.PI / 5; tris.push(new Triangle(s.width/2, s.height/2, ang, size, 1, 0, 0)); tris.push(new Triangle(s.width/2, s.height/2, ang + Math.PI/5, size, 1, 1, 0)); } for (let i = 0; i < tris.length; ++i) { let t = tris[i] if (t.level < 5 && Math.random() * (t.level + 1) > 0.2) tris.push(... t.divide()); } tris = tris.filter(t => !t.divided); tris.forEach(t => t.render()); } })33:T1374,p5(s=>{ const PHI = (1 + Math.sqrt(5)) / 2; const PHISQ = PHI*PHI; const OBTSUE_H = Math.sqrt(1 - PHISQ/4); const ACUTE_H = Math.sqrt(1 - 1 / (4 * PHISQ)); class Triangle { // triangles in the subdivision are similar isosceles triangles, so here we use the location of apex and size to difine them constructor(x, y, rotation, size, type, direction, level){ this.x = x; this.y = y; this.rotation = rotation; this.size = size; this.d = direction; this.type = type; // 0: obtuse 1: acute this.level = level; this.divided = false; } divide(){ this.divided = true; let res = []; if (this.type === 1) { //acute, divide to three: let newSz = this.size / PHISQ; let r = - 3 * Math.PI/5; let newRotation = this.d === 1 ? this.rotation + r : this.rotation - r; let ang = this.d === 1 ? this.rotation + Math.PI/10 : this.rotation - Math.PI/10; let nx = this.x + newSz * Math.cos(ang); let ny = this.y + newSz * Math.sin(ang); res.push(new Triangle(nx, ny, newRotation, newSz, 0, this.d, this.level + 1)); newSz = this.size / PHI; r = 3 * Math.PI / 5; newRotation = this.d === 1 ? this.rotation - r : this.rotation + r; ang = this.d === 1 ? this.rotation + Math.PI/10 : this.rotation - Math.PI/10; nx = this.x + this.size * Math.cos(ang); ny = this.y + this.size * Math.sin(ang); res.push(new Triangle(nx, ny, newRotation, newSz, 1, this.d, this.level + 1)); r = 4 * Math.PI / 5; newRotation = this.d === 1 ? this.rotation - r : this.rotation + r; ang = this.d === 1 ? this.rotation + Math.PI/10 : this.rotation - Math.PI / 10; nx = this.x + this.size * Math.cos(ang); ny = this.y + this.size * Math.sin(ang); res.push(new Triangle(nx, ny, newRotation, newSz, 1, (this.d + 1) % 2, this.level + 1)); } else { //obtuse, divide to two let newSz = this.size; let r = 3 * Math.PI / 5; let newRotation = this.d === 1 ? this.rotation + r : this.rotation - r; let ang = this.d === 1 ? this.rotation - 3 * Math.PI / 10 : this.rotation + 3 * Math.PI / 10; let nx = this.x + this.size * Math.cos(ang); let ny = this.y + this.size * Math.sin(ang); res.push(new Triangle(nx, ny, newRotation, newSz, 1, (this.d + 1) % 2, this.level + 1)); newSz = this.size / PHI; r = 4 * Math.PI / 5; newRotation = this.d === 1 ? this.rotation + r : this.rotation - r; ang = this.d === 1 ? this.rotation + Math.PI / 10 : this.rotation - Math.PI / 10; nx = this.x + newSz * Math.cos(ang); ny = this.y + newSz * Math.sin(ang); res.push(new Triangle(nx, ny, newRotation, newSz, 0, this.d, this.level + 1)); } return res; } render(){ let ds = this.size; s.push(); s.translate(this.x, this.y); s.scale(ds); s.rotate(this.rotation); s.strokeWeight(0.15/ds); // make sure strokeweight looks the same in different scale; s.stroke("wheat"); if (this.type === 0){ s.triangle(OBTSUE_H, - PHI/2, 0, 0, OBTSUE_H, PHI/2); } else { s.triangle(ACUTE_H, - 1 / (PHI * 2), 0, 0, ACUTE_H, 1 / (PHI * 2)); } s.noStroke(); for(let i = 0; i < 20; i ++) { const r = (100 - (i/2)*(i/2)) * 0.2 / ds; const c = s.color(200, i * i * 0.01); s.fill(c); if (this.type === 0){ s.circle(OBTSUE_H, - PHI/2, r * 2) s.circle(0, 0, r * 2); s.circle(OBTSUE_H, PHI/2, r * 2); } else { s.circle(ACUTE_H, - 1 / (PHI * 2), r * 2) s.circle(0, 0, r * 2); s.circle(ACUTE_H, 1 / (PHI * 2), r * 2); } } s.pop(); } } let tris = []; let st = false; s.setup = function(){ s.createCanvas(800,800); s.noFill(); s.background(0); s.blendMode(s.SCREEN); s.textAlign(s.CENTER, s.CENTER); s.textSize(40); s.stroke("wheat"); s.text("Click to generate", s.width/2, s.height/2) } s.mouseClicked = function () { if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height) { if (!st){ st = true; s.blendMode(s.NORMAL); s.background(0); s.blendMode(s.SCREEN); } tris= []; let size = s.width * 0.5; for (let i = 0; i < 5; i ++) { let ang = i * 2 * Math.PI / 5; tris.push(new Triangle(s.width/2, s.height/2, ang, size, 1, 0, 0)); tris.push(new Triangle(s.width/2, s.height/2, ang + Math.PI/5, size, 1, 1, 0)); } for (let i = 0; i < tris.length; ++i) { let t = tris[i] if (t.level < 6 && Math.random() > t.level * 0.05) tris.push(... t.divide()); } tris = tris.filter(t => !t.divided); tris.forEach(t => t.render()); } } })34:T162a,p5(s=>{ const PHI = (1 + Math.sqrt(5)) / 2; const PHISQ = PHI*PHI; const OBTSUE_H = Math.sqrt(1 - PHISQ/4); const ACUTE_H = Math.sqrt(1 - 1 / (4 * PHISQ)); class Triangle { // triangles in the subdivision are similar isosceles triangles, so here we use the location of apex and size to difine them constructor(x, y, rotation, size, type, direction, level, color){ this.x = x; this.y = y; this.rotation = rotation; this.size = size; this.d = direction; this.type = type; // 0: obtuse 1: acute this.level = level; this.divided = false; this.color = color; } divide(){ this.divided = true; let res = []; let availableColor = palette.filter(cc => cc !== this.color); if (this.type === 1) { let color1 = availableColor.splice(Math.floor(Math.random() * availableColor.length), 1)[0]; let color2 = availableColor.splice(Math.floor(Math.random() * availableColor.length), 1)[0]; let color3 = availableColor.splice(Math.floor(Math.random() * availableColor.length), 1)[0]; //acute, divide to three: let newSz = this.size / PHISQ; let r = - 3 * Math.PI/5; let newRotation = this.d === 1 ? this.rotation + r : this.rotation - r; let ang = this.d === 1 ? this.rotation + Math.PI/10 : this.rotation - Math.PI/10; let nx = this.x + newSz * Math.cos(ang); let ny = this.y + newSz * Math.sin(ang); res.push(new Triangle(nx, ny, newRotation, newSz, 0, this.d, this.level + 1, color1)); newSz = this.size / PHI; r = 3 * Math.PI / 5; newRotation = this.d === 1 ? this.rotation - r : this.rotation + r; ang = this.d === 1 ? this.rotation + Math.PI/10 : this.rotation - Math.PI/10; nx = this.x + this.size * Math.cos(ang); ny = this.y + this.size * Math.sin(ang); res.push(new Triangle(nx, ny, newRotation, newSz, 1, this.d, this.level + 1, color2)); r = 4 * Math.PI / 5; newRotation = this.d === 1 ? this.rotation - r : this.rotation + r; ang = this.d === 1 ? this.rotation + Math.PI/10 : this.rotation - Math.PI / 10; nx = this.x + this.size * Math.cos(ang); ny = this.y + this.size * Math.sin(ang); res.push(new Triangle(nx, ny, newRotation, newSz, 1, (this.d + 1) % 2, this.level + 1, color3)); } else { let color1 = availableColor.splice(Math.floor(Math.random() * availableColor.length), 1)[0]; let color2 = availableColor.splice(Math.floor(Math.random() * availableColor.length), 1)[0]; //obtuse, divide to two let newSz = this.size; let r = 3 * Math.PI / 5; let newRotation = this.d === 1 ? this.rotation + r : this.rotation - r; let ang = this.d === 1 ? this.rotation - 3 * Math.PI / 10 : this.rotation + 3 * Math.PI / 10; let nx = this.x + this.size * Math.cos(ang); let ny = this.y + this.size * Math.sin(ang); res.push(new Triangle(nx, ny, newRotation, newSz, 1, (this.d + 1) % 2, this.level + 1, color1)); newSz = this.size / PHI; r = 4 * Math.PI / 5; newRotation = this.d === 1 ? this.rotation + r : this.rotation - r; ang = this.d === 1 ? this.rotation + Math.PI / 10 : this.rotation - Math.PI / 10; nx = this.x + newSz * Math.cos(ang); ny = this.y + newSz * Math.sin(ang); res.push(new Triangle(nx, ny, newRotation, newSz, 0, this.d, this.level + 1, color2)); } return res; } render(){ let ds = this.size; s.push(); s.translate(this.x, this.y); s.scale(ds); s.rotate(this.rotation); s.strokeWeight(0.15/ds); // make sure strokeweight looks the same in different scale; s.stroke("wheat"); if (layer > 1) this.color.setAlpha(200 - layer * 50) s.fill(this.color); if (this.type === 0){ s.triangle(OBTSUE_H, - PHI/2, 0, 0, OBTSUE_H, PHI/2); } else { s.triangle(ACUTE_H, - 1 / (PHI * 2), 0, 0, ACUTE_H, 1 / (PHI * 2)); } s.pop(); } } let tris = []; let st = false; let layer = 0; const paletteAlpha = 255; const palette = [s.color(112,112,74,paletteAlpha), s.color(246,198,110,paletteAlpha), s.color(215,91,34,paletteAlpha), s.color(242,229,194,paletteAlpha), s.color(115,106,98,paletteAlpha), s.color(13,4,0,paletteAlpha), s.color(234,61,1,paletteAlpha)]; s.setup = function(){ s.createCanvas(800,800); s.noFill(); s.background(0); s.textAlign(s.CENTER, s.CENTER); s.textSize(40); s.stroke("wheat"); s.text("Click to generate", s.width/2, s.height/2) } s.mouseClicked = function () { if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height) { if (!st){ st = true; s.blendMode(s.BLEND); s.background(0); s.blendMode(s.SCREEN); } else { layer ++; } s.noiseSeed(Math.random() * 14400); tris= []; let size = s.width * 0.5; for (let i = 0; i < 5; i ++) { let ang = i * 2 * Math.PI / 5; tris.push(new Triangle(s.width/2, s.height/2, ang, size, 1, 0, 0)); tris.push(new Triangle(s.width/2, s.height/2, ang + Math.PI/5, size, 1, 1, 0)); } for (let i = 0; i < tris.length; ++i) { let t = tris[i]; let noiseLevel = s.noise(t.x * 0.005, t.y * 0.005); noiseLevel *= noiseLevel > 0.5 ? 1.5 : 0.5; if (t.level < 8 && Math.random() > noiseLevel * (t.level / 8)) tris.push(... t.divide()); } tris = tris.filter(t => !t.divided); tris.forEach(t => t.render()); } } })35:T5ef,class Polygon{ //vertices should be in order (cw or ccw); constructor(vertices, level){ this.level = level; this.vertices = vertices.slice(); this.n = vertices.length / 2; this.divided = false; this.center = getCenterAvg(vertices); //this.center = getCentroid(this.vertices); // try using the mathmethic centroid instead } divide(a = 0.2,b = 0.8){ let center = this.center, // center of the polygon controlPoints1 = [], // points on the polygon edge controlPoints2 = []; // points inside the polygon for (let i = 0; i < this.vertices.length; i += 2) { let j = i > 0 ? i - 2 : this.vertices.length - 2; let rnd1 = random(a, b), rnd2 = random(a, b); controlPoints1.push(this.vertices[j] + (this.vertices[i] - this.vertices[j]) * rnd1, this.vertices[j + 1] + (this.vertices[i + 1] - this.vertices[j + 1]) * rnd1); controlPoints2.push(controlPoints1[i] + (center[0] - controlPoints1[i]) * rnd2, controlPoints1[i + 1] + (center[1] - controlPoints1[i + 1]) * rnd2); } let res = []; res.push(new Polygon(controlPoints2, this.level + 1)); for (let i = 0; i < this.n; ++i) { let j = (i + 1) % this.n; let vs = [this.vertices[i*2], this.vertices[i*2+1], controlPoints1[j*2], controlPoints1[j*2+1], controlPoints2[j*2], controlPoints2[j*2+1],controlPoints2[i*2],controlPoints2[i*2+1],controlPoints1[i*2],controlPoints1[i*2+1]]; res.push(new Polygon(vs, this.level + 1)); } this.divided = true; return res; } }36:Td4d,p5(s => { const alpha = 150; const palette = [s.color(96,39,51), s.color(178,19,26), s.color(196,222,223), s.color(43,185,209), s.color(7,94,133), s.color(21,51,74), s.color(13,89,17), s.color(0,120,30), s.color(204,130,2), s.color(255,101, 7), s.color(253,234,168)]; let st = false; let layer = 0; let polys = []; class P{ //vertices should be in order (cw or ccw); constructor(vertices, level, color){ this.level = level; this.vertices = vertices.slice(); this.n = vertices.length / 2; this.divided = false; this.center = getCenterAvg(vertices); //this.center = getCentroid(this.vertices); // try using the mathmethic centroid instead this.color = color; } divide(a = 0.2,b = 0.8){ let availableColor = palette.filter(c => c!==this.color); let center = this.center, // center of the polygon controlPoints1 = [], // points on the polygon edge controlPoints2 = []; // points inside the polygon for (let i = 0; i < this.vertices.length; i += 2) { let j = i > 0 ? i - 2 : this.vertices.length - 2; let rnd1 = random(a, b), rnd2 = random(a, b); controlPoints1.push(this.vertices[j] + (this.vertices[i] - this.vertices[j]) * rnd1, this.vertices[j + 1] + (this.vertices[i + 1] - this.vertices[j + 1]) * rnd1); controlPoints2.push(controlPoints1[i] + (center[0] - controlPoints1[i]) * rnd2, controlPoints1[i + 1] + (center[1] - controlPoints1[i + 1]) * rnd2); } let res = []; let color1 = availableColor.splice(Math.floor(Math.random() * availableColor.length), 1)[0]; res.push(new P(controlPoints2, this.level + 1, color1)); for (let i = 0; i < this.n; ++i) { let j = (i + 1) % this.n; let vs = [this.vertices[i*2], this.vertices[i*2+1], controlPoints1[j*2], controlPoints1[j*2+1], controlPoints2[j*2], controlPoints2[j*2+1],controlPoints2[i*2],controlPoints2[i*2+1],controlPoints1[i*2],controlPoints1[i*2+1]]; let cc = availableColor.splice(Math.floor(Math.random() * availableColor.length), 1)[0]; res.push(new P(vs, this.level + 1, cc)); } this.divided = true; return res; } render(){ s.push(); this.color.setAlpha(80 + this.level * 20); s.fill(this.color); s.noStroke(); s.beginShape(); for (let i = 0; i < this.vertices.length; i +=2) { s.vertex(this.vertices[i], this.vertices[i + 1]); } s.endShape(s.CLOSE); s.pop(); } } s.setup = function(){ s.createCanvas(800,800); s.noFill(); s.background(0); s.blendMode(s.SCREEN); s.textAlign(s.CENTER, s.CENTER); s.textSize(40); s.stroke("wheat"); s.text("Click to generate", s.width/2, s.height/2) } s.mouseClicked = function () { if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height) { polys = []; s.blendMode(s.NORMAL); s.background(0); s.blendMode(s.SCREEN); layer ++; polys.push(new P([0,0,s.width,0,s.width,s.height,0,s.height], 0, palette[Math.floor(Math.random() * palette.length)])); for (let i = 0; i < polys.length; ++i) { let p = polys[i]; if (p.level < 6 && Math.random() > p.level * 0.05) polys.push(... p.divide()); } polys.sort((a,b) => a.level - b.level); polys.forEach(t => t.render()); } } })37:[{"id":"af328b5b2eb34bb6ff0c065a67323588808c2242828ba2c9d33c274d17ff0daae4b1d12adc947d7d0c3a720f98f45dac60f282362aa1290c2065c164f9be525f","href":"https://static.observableusercontent.com/files/af328b5b2eb34bb6ff0c065a67323588808c2242828ba2c9d33c274d17ff0daae4b1d12adc947d7d0c3a720f98f45dac60f282362aa1290c2065c164f9be525f","name":"Screenshot 2024-03-18 at 2.26.08 PM.png","type":"image/png","lastModified":1710771975745.436,"size":18617},{"id":"8098c822fe5141fcf1923e65ea9bf7aaaccdf095c457120e6b21662efd45fb4b650d423e523c9abc1ebe02df0b7b29f0b61632a1f938a294d0dffd210ba24ac0","href":"https://static.observableusercontent.com/files/8098c822fe5141fcf1923e65ea9bf7aaaccdf095c457120e6b21662efd45fb4b650d423e523c9abc1ebe02df0b7b29f0b61632a1f938a294d0dffd210ba24ac0","name":"Screenshot 2024-03-18 at 2.32.53 PM.png","type":"image/png","lastModified":1710772379971.323,"size":19601},{"id":"d47be0bea69f571e454a8e5e6299dfb370a048ab4b31b83b4ce74b9345b0e16dff7f24cba8af71bdec92de319d5f10205bffe6368d5125f90c01ae41fdb308dd","href":"https://static.observableusercontent.com/files/d47be0bea69f571e454a8e5e6299dfb370a048ab4b31b83b4ce74b9345b0e16dff7f24cba8af71bdec92de319d5f10205bffe6368d5125f90c01ae41fdb308dd","name":"Screenshot 2024-03-18 at 2.36.21 PM.png","type":"image/png","lastModified":1710772587298.259,"size":17475},{"id":"6f1110f49e2083fef708e620da76a88e5e221d4f4e90621194a4af813ddd9b77f94aa895652dfc1ad399aecaa730708b421945dc504ffb7bf80c0020cace9c2c","href":"https://static.observableusercontent.com/files/6f1110f49e2083fef708e620da76a88e5e221d4f4e90621194a4af813ddd9b77f94aa895652dfc1ad399aecaa730708b421945dc504ffb7bf80c0020cace9c2c","name":"Screenshot 2024-03-15 at 9.57.25 AM.png","type":"image/png","lastModified":1710496650647.814,"size":23980},{"id":"896a2f28618b1de56946aa2307f36c8d08fffcd87466eccc76d5ba59c9d6af1db33f7dfffee4342d778c39c092bf4a0db55d9baa3de2a932741ee00b965b6d48","href":"https://static.observableusercontent.com/files/896a2f28618b1de56946aa2307f36c8d08fffcd87466eccc76d5ba59c9d6af1db33f7dfffee4342d778c39c092bf4a0db55d9baa3de2a932741ee00b965b6d48","name":"Screenshot 2024-03-15 at 11.31.04 AM.png","type":"image/png","lastModified":1710502270880.867,"size":36953},{"id":"0ee76d54f9d66eb62b77c704f5d17635e89f7e105164377d5cac634450df997e5bb407b67ddcc3e29648183fedb9556bbcaf923df016cd88b2a1171be139bccb","href":"https://static.observableusercontent.com/files/0ee76d54f9d66eb62b77c704f5d17635e89f7e105164377d5cac634450df997e5bb407b67ddcc3e29648183fedb9556bbcaf923df016cd88b2a1171be139bccb","name":"Screenshot 2024-03-15 at 1.01.11 PM.png","type":"image/png","lastModified":1710507676399.533,"size":40331},{"id":"f04272a0f1139d24a0cc5f588c6074f4dee41b0c7290bf41061ce9605c65f16a746fa25884df2c027e2d3663dc144a4ac229b4792d19c71c28bb6295d8e262ef","href":"https://static.observableusercontent.com/files/f04272a0f1139d24a0cc5f588c6074f4dee41b0c7290bf41061ce9605c65f16a746fa25884df2c027e2d3663dc144a4ac229b4792d19c71c28bb6295d8e262ef","name":"Screenshot 2024-03-15 at 2.17.00 PM.png","type":"image/png","lastModified":1710512224630.898,"size":44400},{"id":"73c24fa9e5d40a4a01076ecfcc97eabfa0bd98239241c5831018604839cca10bcb477f458698e4708458ab5fc85fe34576ca63efb4b91b77fa957a8611eb928c","href":"https://static.observableusercontent.com/files/73c24fa9e5d40a4a01076ecfcc97eabfa0bd98239241c5831018604839cca10bcb477f458698e4708458ab5fc85fe34576ca63efb4b91b77fa957a8611eb928c","name":"Screenshot 2024-03-15 at 2.32.29 PM.png","type":"image/png","lastModified":1710513154194.067,"size":45548},{"id":"5ffb85dc71115eaedf349dea95c3ed8c5e5f73c39b1e20f26cac0bc041b9024b7530cba115b34bcd110ae51bea64ebdd835f855edda45653523bde3d47e303e1","href":"https://static.observableusercontent.com/files/5ffb85dc71115eaedf349dea95c3ed8c5e5f73c39b1e20f26cac0bc041b9024b7530cba115b34bcd110ae51bea64ebdd835f855edda45653523bde3d47e303e1","name":"Screenshot 2024-03-15 at 2.40.07 PM.png","type":"image/png","lastModified":1710513611919.099,"size":47582},{"id":"ce232455c23a121e09b1f257012765b0e93f910df14264733c71705e237d89154080d70acd19727f4404df6da02116eb168927993e04ce687c0efae089f26840","href":"https://static.observableusercontent.com/files/ce232455c23a121e09b1f257012765b0e93f910df14264733c71705e237d89154080d70acd19727f4404df6da02116eb168927993e04ce687c0efae089f26840","name":"Screenshot 2024-03-15 at 2.42.20 PM.png","type":"image/png","lastModified":1710513744585.901,"size":45014},{"id":"eff2856006d6b360f8e34e1852260dc79b221e824d28609b7f7609ead1324dbfad50a3c307daaf2c80b7390fadbe59cc5df05cfd87d06bdf09347834b6bce27c","href":"https://static.observableusercontent.com/files/eff2856006d6b360f8e34e1852260dc79b221e824d28609b7f7609ead1324dbfad50a3c307daaf2c80b7390fadbe59cc5df05cfd87d06bdf09347834b6bce27c","name":"Screenshot 2024-03-15 at 2.45.37 PM.png","type":"image/png","lastModified":1710513940737.117,"size":45374}] 2f:{"title":"Subdivision 2","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"We can play with the possibility of the subdivision and how the shapes are rendered to create different visual outcomes.","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"Another one subdivision I used a lot in my work (like [this](https://real-john-cheung.github.io/works/netOriginal/) and [this](https://real-john-cheung.github.io/works/net/)) is this one:\n\n1. Start with a polygon with N edges, find the centre (in this example, we will simply take the average of all the vertices) of the polygon and connect it to the middle points of its edges;\n \n ![Screenshot 2024-03-18 at 2.26.08 PM.png](${await FileAttachment(\"Screenshot 2024-03-18 at 2.26.08 PM.png\").url()})\n \n2. Connect the middle points of the newly drawn lines to form N pentagons and a smaller N-side polygon;\n \n ![Screenshot 2024-03-18 at 2.32.53 PM.png](${await FileAttachment(\"Screenshot 2024-03-18 at 2.32.53 PM.png\").url()})\n\n3. Repeat the steps for the newly formed polygons\n\n![Screenshot 2024-03-18 at 2.36.21 PM.png](${await FileAttachment(\"Screenshot 2024-03-18 at 2.36.21 PM.png\").url()})\n\nLet's implement it and see what we can create:","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"function random(a,b) {\n return a + Math.random() * (b-a);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"function getCenterAvg(vertices) {\n // get the center by averging all vertices\n let c = [0,0];\n for (let i = 0; i < vertices.length; i+=2) {\n c[0] += vertices[i];\n c[1] += vertices[i+1];\n }\n c[0] /= vertices.length/2;\n c[1] /= vertices.length/2;\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"function getCentroid(polygon) {\n let area = 0, cx = 0, cy = 0;\n for (let i = 0; i < polygon.length/2 - 1; ++i) {\n let j = (i+1) % polygon.length/2;\n let xi = polygon[i*2], yi = polygon[i*2+1], xj = polygon[j * 2], yj = polygon[j*2+1];\n area += xj*yi - xi*yj;\n cx += (xj + xi)*(xj*yi - xi * yj);\n cy += (yj + yi)*(xj*yi - xi * yj);\n }\n area /= 2;\n cx /= (6 * area);\n cy /= (6 * area);\n return [cx, cy];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"p5(s =>{\n s.setup = function(){\n s.createCanvas(800,800);\n s.noFill();\n s.stroke(0);\n let polys = [];\n\n polys.push(new Polygon([10,10,790,10,790,790,10,790], 0));\n\n for (let i = 0; i < polys.length; ++i) {\n let p = polys[i];\n let noiseValue = s.noise(p.center[0] * 0.005, p.center[1] * 0.005);\n noiseValue *= noiseValue > .5 ? 1.1 : 0.9;\n if (p.level < 5 && noiseValue > 0.15 * p.level) polys.push(...p.divide());\n }\n\n polys = polys.filter(p => !p.divided);\n\n polys.forEach(p => {\n s.beginShape();\n s.strokeWeight(0.2);\n for (let i = 0; i < p.vertices.length; i += 2) {\n s.vertex(p.vertices[i], p.vertices[i+1]);\n }\n s.endShape(s.CLOSE);\n })\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"Again, play with colors and subdivision parameters we can create lots of different renders:","pinned":false,"hidden":false,"mode":"md"},{"id":308,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {p5} from \"@real-john-cheung/p5js\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}