2d:null 2e:["$","title",null,{"children":"Subdivision | John C | Observable"}] 33:T834,p5(s => { class Triangle{ constructor(x1, y1, x2, y2, x3, y3, level){ this.x1 = x1; this.y1 = y1; this.x2 = x2; this.y2 = y2; this.x3 = x3; this.y3 = y3; this.level = level; this.divided = false; } // return [longestEdgeVertex1X, longestEdgeVertex1Y, longestEdgeVertex2X, longestEdgeVertex2Y, oppositeVertexX, oppositeVertexY] getLongest(){ let d12 = (this.x1 - this.x2) * (this.x1 - this.x2) + (this.y1 - this.y2) * (this.y1 - this.y2); let d23 = (this.x3 - this.x2) * (this.x3 - this.x2) + (this.y3 - this.y2) * (this.y3 - this.y2); let d13 = (this.x1 - this.x3) * (this.x1 - this.x3) + (this.y1 - this.y3) * (this.y1 - this.y3); if (d12 > d23 && d12 > d13) { return [this.x1, this.y1, this.x2, this.y2, this.x3, this.y3]; } else if (d23 > d13) { return [this.x2, this.y2, this.x3, this.y3, this.x1, this.y1]; } else { return [this.x1, this.y1, this.x3, this.y3, this.x2, this.y2]; } } divide(){ this.divided = true; let longestEdge = this.getLongest(); let unchanged = []; //divide the triangle with the middle point of the longest edge let newX = (longestEdge[0] + longestEdge[2]) / 2; let newY = (longestEdge[1] + longestEdge[3]) / 2; return [new Triangle(longestEdge[0],longestEdge[1], newX, newY, longestEdge[4], longestEdge[5], this.level + 1), new Triangle(longestEdge[2],longestEdge[3], newX, newY, longestEdge[4], longestEdge[5], this.level + 1)]; } } s.setup = function(){ s.createCanvas(400,400); s.strokeWeight(0.5); let tris = [new Triangle(0,0,400,0,0,400, 0), new Triangle(0,400,400,400,400,0,0)]; // loop over all the triangles to do the division for (let i = 0; i < tris.length; ++i) { const t = tris[i]; if (Math.random() > 0.1 && t.level < 10) tris.push(...t.divide()); } //get rid of the divided ones tris = tris.filter(t => !t.divided); //draw tris.forEach(t => s.triangle(t.x1, t.y1, t.x2, t.y2, t.x3, t.y3)); } })34:T4d5,viewof opts = { //ref to https://observablehq.com/@s-haensch/multiple-inputs-in-a-cell const form = html` ` ; form.oninput = () => { form.value = [parseFloat(form.minDepth.value),parseFloat(form.maxDepth.value),parseFloat(form.possibility.value),parseFloat(form.displacement.value)]; } form.value = [parseFloat(form.minDepth.value),parseFloat(form.maxDepth.value),parseFloat(form.possibility.value),parseFloat(form.displacement.value)]; return form; }35:Ta08,p5(s => { const minDepth = opts[0]; const maxDepth = opts[1]; const possibility = opts[2]; const displacement = opts[3]; class Triangle{ constructor(point1, point2, point3, depth, terminateDepth){ this.depth = depth; this.terminateDepth = terminateDepth; this.A = point1; this.B = point2; this.C = point3; this.a = [point2, point3]; this.b = [point3, point1]; this.c = [point1, point2]; this.terminated = false; } getLongSide(){ let arr = [this.a, this.b, this.c]; arr = arr.sort((a,b) =>{ let vecA = s.createVector(a[0].x - a[1].x, a[0].y - a[1].y); let vecB = s.createVector(b[0].x - b[1].x, b[0].y - b[1].y); return vecB.magSq() - vecA.magSq(); }); return arr[0]; } render(){ s.triangle(this.A.x, this.A.y, this.B.x, this.B.y, this.C.x, this.C.y) } } const divide = function (tri){ let res = []; recursion(res, tri); return res; } const recursion = function (arr, tri){ if ((Math.random() > possibility || tri.depth > maxDepth) && tri.depth >= minDepth) { //stop dividing tri.terminated = true; arr.push(tri); } else { //divide to two new triangles let longSide = tri.getLongSide(); let oppositePoint = (!tri.A.equals(longSide[0]) && !tri.A.equals(longSide[1])) ? tri.A : ((!tri.B.equals(longSide[0]) && !tri.B.equals(longSide[1])) ? tri.B : tri.C) ; let ratio = s.randomGaussian(0.5, (displacement/2)/2); let newPoint = s.createVector(longSide[0].x + ratio*(longSide[1].x - longSide[0].x), longSide[0].y + ratio*(longSide[1].y - longSide[0].y)); recursion(arr, new Triangle(longSide[0], newPoint, oppositePoint, tri.depth + 1)); recursion(arr, new Triangle(longSide[1], newPoint, oppositePoint, tri.depth + 1)); } } let triangles = []; s.setup = function (){ s.createCanvas(400,400); //s.stroke("#0F0F0F"); s.strokeWeight(0.5); s.noFill(); } s.draw = function () { s.background(255); triangles= []; let tri1 = new Triangle(s.createVector(0,0), s.createVector(s.width, 0), s.createVector(0,s.height), 0); let tri2 = new Triangle(s.createVector(s.width,s.height), s.createVector(s.width, 0), s.createVector(0,s.height), 0); triangles = [...divide(tri1),...divide(tri2)]; triangles.forEach(t => {t.render()}); s.noLoop(); } s.mouseClicked = function () { if (s.mouseX < 0 || s.mouseX > s.width || s.mouseY < 0 || s.mouseY > s.height) return; s.loop(); } })36:T870,p5(s => { class Triangle{ constructor(x1, y1, x2, y2, x3, y3, level){ this.x1 = x1; this.y1 = y1; this.x2 = x2; this.y2 = y2; this.x3 = x3; this.y3 = y3; this.level = level; this.divided = false; } // pick the new point in the incircle of the triangle to avoid triangles that are too 'long' incircle(){ let a = Math.sqrt((this.x2 - this.x1) * (this.x2 - this.x1) + (this.y2 - this.y1) * (this.y2 - this.y1)); let b = Math.sqrt((this.x3 - this.x2) * (this.x3 - this.x2) + (this.y3 - this.y2) * (this.y3 - this.y2)); let c = Math.sqrt((this.x3 - this.x1) * (this.x3 - this.x1) + (this.y3 - this.y1) * (this.y3 - this.y1)); let newX = (a * this.x3 + b * this.x1 + c * this.x2) / (a + b + c); let newY = (a * this.y3 + b * this.y1 + c * this.y2) / (a + b + c); let ss=(a+b+c)/2; let area=Math.sqrt(ss*(ss-a)*(ss-b)*(ss-c)); let r = area/ss; return [newX, newY, r]; //[x, y, r]; } divide(){ this.divided = true; let incircle = this.incircle(); let a = Math.random() * Math.PI * 2, r = Math.random() * incircle[2] * 0.5; // adjustment for more even division let newP = [incircle[0] + Math.sin(a) * r, incircle[1] + Math.cos(a) * r]; return [ new Triangle(this.x1, this.y1, this.x2, this.y2, newP[0], newP[1], this.level + 1), new Triangle(this.x1, this.y1, this.x3, this.y3, newP[0], newP[1], this.level + 1), new Triangle(this.x2, this.y2, this.x3, this.y3, newP[0], newP[1], this.level + 1), ]; } } s.setup = function(){ s.createCanvas(400,400); s.strokeWeight(.5); s.noFill(); let tris = [new Triangle(200,0,400,400,0,400,0)]; // loop over all the triangles to do the division for (let i = 0; i < tris.length; ++i) { const t = tris[i]; // possibility based on level if (Math.random() > 0.05 * (t.level + 1) && t.level < 5) tris.push(...t.divide()); } //get rid of the divided ones tris = tris.filter(t => !t.divided); //draw tris.forEach(t => s.triangle(t.x1, t.y1, t.x2, t.y2, t.x3, t.y3)); } })37:T69c,p5(s => { class Triangle{ constructor(x1, y1, x2, y2, x3, y3, level){ this.x1 = x1; this.y1 = y1; this.x2 = x2; this.y2 = y2; this.x3 = x3; this.y3 = y3; this.level = level; this.divided = false; } divide(){ this.divided = true; let rand1 = Math.random() * 0.4 + 0.3, rand2 = Math.random() * 0.4 + 0.3, rand3 = Math.random() * 0.4 + 0.3; let newP1 = [this.x1 + (this.x2 - this.x1) * rand1, this.y1 + (this.y2 - this.y1) * rand1]; let newP2 = [this.x1 + (this.x3 - this.x1) * rand2, this.y1 + (this.y3 - this.y1) * rand2]; let newP3 = [this.x3 + (this.x2 - this.x3) * rand3, this.y3 + (this.y2 - this.y3) * rand3]; return [ new Triangle(newP1[0], newP1[1], newP2[0], newP2[1], newP3[0], newP3[1], this.level + 1), new Triangle(this.x1, this.y1, newP1[0], newP1[1], newP2[0], newP2[1], this.level + 1), new Triangle(this.x2, this.y2, newP1[0], newP1[1], newP3[0], newP3[1], this.level + 1), new Triangle(this.x3, this.y3, newP3[0], newP3[1], newP2[0], newP2[1], this.level + 1), ]; } } s.setup = function(){ s.createCanvas(400,400); s.strokeWeight(.5); s.noFill(); let tris = [new Triangle(200,0,400,400,0,400,0)]; // loop over all the triangles to do the division for (let i = 0; i < tris.length; ++i) { const t = tris[i]; // possibility based on level if (Math.random() > 0.05 * (t.level + 1) && t.level < 5) tris.push(...t.divide()); } //get rid of the divided ones tris = tris.filter(t => !t.divided); //draw tris.forEach(t => s.triangle(t.x1, t.y1, t.x2, t.y2, t.x3, t.y3)); } })38:Tea9,p5(s => { const palette = ["#efecca","#a9cbb7","#f7ff58","#ff934f","#5e565a"]; class Triangle{ constructor(x1, y1, x2, y2, x3, y3, level, color){ this.x1 = x1; this.y1 = y1; this.x2 = x2; this.y2 = y2; this.x3 = x3; this.y3 = y3; this.level = level; this.divided = false; this.c = color; } // pick the new point in the incircle of the triangle to avoid triangles that are too 'long' incircle(){ let a = Math.sqrt((this.x2 - this.x1) * (this.x2 - this.x1) + (this.y2 - this.y1) * (this.y2 - this.y1)); let b = Math.sqrt((this.x3 - this.x2) * (this.x3 - this.x2) + (this.y3 - this.y2) * (this.y3 - this.y2)); let c = Math.sqrt((this.x3 - this.x1) * (this.x3 - this.x1) + (this.y3 - this.y1) * (this.y3 - this.y1)); let newX = (a * this.x3 + b * this.x1 + c * this.x2) / (a + b + c); let newY = (a * this.y3 + b * this.y1 + c * this.y2) / (a + b + c); let ss=(a+b+c)/2; let area=Math.sqrt(ss*(ss-a)*(ss-b)*(ss-c)); let r = area/ss; return [newX, newY, r]; //[x, y, r]; } divide(){ this.divided = true; let avaC = palette.slice(); avaC = avaC.filter(c => c != this.c); if (Math.random() > 0.7){ let incircle = this.incircle(); let a = Math.random() * Math.PI * 2, r = Math.random() * incircle[2] * 0.5; // adjustment for more even division let newP = [incircle[0] + Math.sin(a) * r, incircle[1] + Math.cos(a) * r]; let c1 = avaC.splice(Math.floor(Math.random() * avaC.length), 1)[0]; let c2 = avaC.splice(Math.floor(Math.random() * avaC.length), 1)[0]; let c3 = avaC.splice(Math.floor(Math.random() * avaC.length), 1)[0]; return [ new Triangle(this.x1, this.y1, this.x2, this.y2, newP[0], newP[1], this.level + 1, c1), new Triangle(this.x1, this.y1, this.x3, this.y3, newP[0], newP[1], this.level + 1, c2), new Triangle(this.x2, this.y2, this.x3, this.y3, newP[0], newP[1], this.level + 1, c3), ]; } else { let rand1 = Math.random() * 0.4 + 0.3, rand2 = Math.random() * 0.4 + 0.3, rand3 = Math.random() * 0.4 + 0.3; let newP1 = [this.x1 + (this.x2 - this.x1) * rand1, this.y1 + (this.y2 - this.y1) * rand1]; let newP2 = [this.x1 + (this.x3 - this.x1) * rand2, this.y1 + (this.y3 - this.y1) * rand2]; let newP3 = [this.x3 + (this.x2 - this.x3) * rand3, this.y3 + (this.y2 - this.y3) * rand3]; let c1 = avaC.splice(Math.floor(Math.random() * avaC.length), 1)[0]; let c2 = avaC.splice(Math.floor(Math.random() * avaC.length), 1)[0]; let c3 = avaC.splice(Math.floor(Math.random() * avaC.length), 1)[0]; let c4 = avaC[0]; return [ new Triangle(newP1[0], newP1[1], newP2[0], newP2[1], newP3[0], newP3[1], this.level + 1, c1), new Triangle(this.x1, this.y1, newP1[0], newP1[1], newP2[0], newP2[1], this.level + 1, c2), new Triangle(this.x2, this.y2, newP1[0], newP1[1], newP3[0], newP3[1], this.level + 1, c3), new Triangle(this.x3, this.y3, newP3[0], newP3[1], newP2[0], newP2[1], this.level + 1, c4), ]; } } } s.setup = function(){ s.createCanvas(400,400); s.strokeWeight(.5); let tris = [new Triangle(200,0,400,400,0,400,0, palette[0])]; // loop over all the triangles to do the division for (let i = 0; i < tris.length; ++i) { const t = tris[i]; if (t.level < 5) tris.push(...t.divide()); } //get rid of the divided ones tris = tris.filter(t => !t.divided); //draw tris.forEach(t => { s.push(); s.fill(t.c); s.triangle(t.x1, t.y1, t.x2, t.y2, t.x3, t.y3); s.pop(); }); } })39:[] 31:{"id":"3d9502acf107cfd7","slug":"subdivision","title":"Subdivision","thumbnail":"eee076baeb19d1824e8ab0302a3a6a10c143f3f0ba531755735bbe91995c2356","access_level":"public","create_time":"$D2024-03-14T13:08:14.356Z","update_time":"$D2024-03-14T16:24:49.112Z","view_time":null,"first_public_time":"$D2024-03-14T13:08:14.356Z","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":107,"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":"team","id":"b2e9840be7b1b607","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":"starter_2024","role":"editor"},{"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":"8a91769c6d3b75ab","slug":"algorithms","title":"Algorithms","owner":{"id":"b2e9840be7b1b607","login":"real-john-cheung","name":"John C"}},"type":"notebook","body":{"title":"Subdivision","cells":[{"id":0,"value":"# Subdivision\n\nSubdivision, with the recursive programming approach, is one of the most used ways for generative artist to create tilings and patterns, for example, this classic subdivision of triangles:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"The above code uses one of the most simple ways of triangle subdivision: divide the triangle with the middle point of the longest edge. The subdivision happened randomly. Play with the possibility parameter and the position of the point on the longest edge we can get many different variations:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"Another way to subdivide a triangle is to pick a point inside the triangle and separate it into three, to code that we would need some math that is a bit more complex:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"Comparing the two different ways of triangle subdivisions above, we can see that the first one create more interesting patterns. That's probably because with the second subdivision method, too much lines end up on the vertices of the origin big triangles. Thus, separate the triangles on edge is a more aesthetics appealing way of subdivision. So, let's try another one: connect the middle point (or better, a point near the middle) of each edges to form new triangles (you might already notice how is this related to the famous fractal [Seripinski triangle](https://en.wikipedia.org/wiki/Sierpiński_triangle), which we will discuss more on another post).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"Combing the second and third method we can create something interesting:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":92,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {p5} from \"@real-john-cheung/p5js\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body"