2d:null 2e:["$","title",null,{"children":"Circle Packing 2 | John C | Observable"}] 33:Tcae,# Circle Packing 2 from [the coding train](https://thecodingtrain.com/challenges/182-apollonian-gasket) In [this post](../@real-john-cheung/circle-packing) we explored a few algorithms to create circle packing pattern for generative art, and in [this post](../@real-john-cheung/subdivision) and [this post](../@real-john-cheung/subdivision2) we investigate in ways of creating tiling with subdivision. Today we are going to look into a algorithm that create a circle packing with the similar concepts we use in subdivision: [Apollonian gasket](https://en.wikipedia.org/wiki/Apollonian_gasket). Let's start with the [Apollonian problem](https://en.wikipedia.org/wiki/Problem_of_Apollonius): On a 2D plane there are three circles that not overlapping, how can we find a circle that's tangent to all three given circles? ![Screenshot 2024-03-20 at 10.50.23 AM.png](${await FileAttachment("Screenshot 2024-03-20 at 10.50.23 AM.png").url()}) Since Apollonius of Perga stated and solved this problem, mathematicians had found lots of different ways to solve this problem, some with straightedge and compass construction, some with algebra. To solve it with computer programme, we will approach it with [Descartes' theorem](https://en.wikipedia.org/wiki/Descartes%27_theorem). Descartes' theorem actually describe a specific case of Apollonian problem when the three given circles are mutually tangent (i.e. each of the circles is tangent to the other two). Descartes' theorem is most easily stated in terms of the circles' curvatures. We can defined the signed curvatures (k) of a circle as k = ± 1/r. The sign in k is positive for a circle that is externally tangent to the other circles, otherwise negative. Let the three given circle be C₁, C₂, and C₃ and the circle we are finding be C₄, the curvature of C₄ is given by this equation : k₁² + k₂² + k₃² + k₄² = (k₁ + k₂ + k₃ + k₄)² / 2. The radius of C4 will be given by r₄ = abs(1 / k₄). The center of C₄ can be calculated with the [Complex Descartes Theorem](https://arxiv.org/pdf/math/0101066.pdf), that is, if we present the center of each of the circles as a complex number z_i = x_i + i \* y_i, they follow a similar equation like above: (k₁\*z₁)² + (k₂\*z₂)² + (k₃\*z₃)² + (k₄\*z₄)² = (k₁\*z₁ + k₂\*z₂ + k₃\*z₃ + k₄\*z₄)² / 2. The equation given by Descartes' theorem is a quadratic equation and it can be solved into two roots k₄ = k₁ + k₂ + k₃ ± 2 \* sqrt(k₁ \* k₂ + k₁ \* k₃ + k₂ \* k₃) I will not go into the details of how to get those root here, if your are interested you can try it out yourself. The result formula is something that we can easily implement in code:34:T64a,p5(s => { s.setup = function(){ s.createCanvas(400,400); s.noFill(); s.stroke(0); // the big circle let x1 = s.width/2, y1 = s.height/2, r1 = s.width/2; let c1 = new Circle(x1, y1, -(1/r1)); s.circle(c1.center.x, c1.center.y, c1.r * 2); // randomly place smaller circles inside the big one let r2 = random(50,150), r3 = r1 - r2; let a2 = random(Math.PI * 2), a3 = a2 + Math.PI; let d2 = (r1 - r2), d3 = (r1 - r3); let c2 = new Circle(x1 + s.cos(a2) * d2, y1 + s.sin(a2) * d2, 1/r2); let c3 = new Circle(x1 + s.cos(a3) * d3, y1 + s.sin(a3) * d3, 1/r3); s.circle(c2.center.x, c2.center.y, c2.r * 2); s.circle(c3.center.x, c3.center.y, c3.r * 2); //get new circles let newCircles = descartes(c1, c2, c3); s.stroke("red"); newCircles.forEach(c => s.circle(c.center.x, c.center.y, c.r * 2)); let c4A = newCircles[0], c4B = newCircles[1]; s.stroke("blue"); newCircles = descartes(c2,c3,c4A); newCircles.forEach(c => s.circle(c.center.x, c.center.y, c.r * 2)); newCircles = descartes(c2,c3,c4B); newCircles.forEach(c => s.circle(c.center.x, c.center.y, c.r * 2)); newCircles = descartes(c1,c3,c4A); newCircles.forEach(c => s.circle(c.center.x, c.center.y, c.r * 2)); newCircles = descartes(c1,c3,c4B); newCircles.forEach(c => s.circle(c.center.x, c.center.y, c.r * 2)); newCircles = descartes(c1,c2,c4A); newCircles.forEach(c => s.circle(c.center.x, c.center.y, c.r * 2)); newCircles = descartes(c1,c2,c4B); newCircles.forEach(c => s.circle(c.center.x, c.center.y, c.r * 2)); } })35:T4fb,p5(s => { let circles = []; let queue = []; s.setup = function(){ s.createCanvas(400,400); s.noFill(); s.stroke(0); // the big circle let x1 = s.width/2, y1 = s.height/2, r1 = s.width/2; circles.push(new Circle(x1, y1, -(1/r1))); // randomly place smaller circles inside the big one circles.push(...placeCircles(circles[0])); circles.forEach(c => s.circle(c.center.x, c.center.y, c.r * 2)); queue.push([circles[0], circles[1], circles[2]]); //get new circles generateNew(); } function generateNew () { let newQueue = []; for (const triplet of queue) { let newCircles = descartes(...triplet); newCircles.forEach(c => { if (validateCircle(c,circles) && isTangent(c,triplet[0]) && isTangent(c,triplet[1]) && isTangent(c,triplet[2])) { circles.push(c); s.circle(c.center.x, c.center.y, c.r * 2) newQueue.push([c, triplet[0], triplet[1]]); newQueue.push([c, triplet[2], triplet[1]]); newQueue.push([c, triplet[0], triplet[2]]); } }) } queue = newQueue; } s.mouseClicked = function () { if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height) { generateNew(); } } })36:T89a,p5(s => { class Gasket{ constructor(root){ this.circles = [new Circle(root.center.x, root.center.y, -Math.abs(root.k))]; this.circles.push(...placeCircles(root)); this.queue = [[this.circles[0], this.circles[1], this.circles[2]],]; this.children = []; this.expand(); } expand(){ let len = -1; while(this.circles.length !== len) { len = this.circles.length; this.genNew(); } for (let i = 1; i < this.circles.length; ++i) { const c = this.circles[i]; if (c .r > 5) { this.children.push(new Gasket(c)); } } } genNew(){ let newQueue = []; for (const triplet of this.queue) { let newCircles = descartes(...triplet); newCircles.forEach(c => { if (validateCircle(c,this.circles) && isTangent(c,triplet[0]) && isTangent(c,triplet[1]) && isTangent(c,triplet[2])) { this.circles.push(c); newQueue.push([c, triplet[0], triplet[1]]); newQueue.push([c, triplet[2], triplet[1]]); newQueue.push([c, triplet[0], triplet[2]]); } }); } this.queue = newQueue; } display(){ this.circles.forEach(c => { let rand1 = s.random(Math.PI * 2); let a = s.map(c.r, s.width / 2, 2, Math.PI * 2, 0); let b = s.map(c.r, s.width / 2, 2, Math.PI * 2, Math.PI); let rand2 = s.random(a, b); s.strokeWeight(s.map(c.r, s.width / 2, 2, 1, 0.5)) s.arc(c.center.x, c.center.y, c.r * 2, c.r * 2, rand1, (rand1 + rand2)) }); for (let i = 0; i < this.children.length; ++i) { this.children[i].display(); } } } s.setup = function(){ s.createCanvas(800,800); s.noFill(); s.background(0); s.stroke(255); // the big circle let x1 = s.width/2, y1 = s.height/2, r1 = s.width/2; let a = new Gasket(new Circle(x1, y1, -(1/r1))); a.display(); } s.mouseClicked = function(){ s.background(0); s.stroke(255); // the big circle let x1 = s.width/2, y1 = s.height/2, r1 = s.width/2; let a = new Gasket(new Circle(x1, y1, -(1/r1))); a.display(); } })37:T86f,p5(s => { class Gasket{ constructor(root){ this.circles = [new Circle(root.center.x, root.center.y, -Math.abs(root.k))]; this.circles.push(...placeCircles(root)); this.queue = [[this.circles[0], this.circles[1], this.circles[2]],]; this.children = []; this.expand(); } expand(){ let len = -1; while(this.circles.length !== len) { len = this.circles.length; this.genNew(); } for (let i = 1; i < this.circles.length; ++i) { const c = this.circles[i]; if (c .r > 5) { this.children.push(new Gasket(c)); } } } genNew(){ let newQueue = []; for (const triplet of this.queue) { let newCircles = descartes(...triplet); newCircles.forEach(c => { if (validateCircle(c,this.circles) && isTangent(c,triplet[0]) && isTangent(c,triplet[1]) && isTangent(c,triplet[2])) { this.circles.push(c); newQueue.push([c, triplet[0], triplet[1]]); newQueue.push([c, triplet[2], triplet[1]]); newQueue.push([c, triplet[0], triplet[2]]); } }); } this.queue = newQueue; } display(p){ let pa = p; this.circles.forEach(c => { let alpha = s.map(c.r , 200, 2, 200, 80); let hue = (s.noise(pa) * 720) % 360; let b = s.map(c.r , 200, 2, 30, 100); let sat = s.map(c.r ,200, 2, 60,100) s.fill(hue, sat, b, alpha); s.circle(c.center.x, c.center.y, c.r * 2); pa += 0.005; }); for (let i = 0; i < this.children.length; ++i) { this.children[i].display(pa + 0.003); } } } s.setup = function(){ s.createCanvas(800,800); s.noStroke(); s.background(255); s.blendMode(s.BLEND); s.colorMode(s.HSB); // the big circle let x1 = s.width/2, y1 = s.height/2, r1 = s.width/2; let a = new Gasket(new Circle(x1, y1, -(1/r1))); a.display(1); } s.mouseClicked = function(){ let x1 = s.width/2, y1 = s.height/2, r1 = s.width/2; let a = new Gasket(new Circle(x1, y1, -(1/r1))); a.display(1); } })38:Tb0c,p5(s => { class Gasket{ constructor(root){ this.circles = [new Circle(root.center.x, root.center.y, -Math.abs(root.k))]; this.circles.push(...placeCircles(root)); this.queue = [[this.circles[0], this.circles[1], this.circles[2]],]; this.children = []; this.expand(); } expand(){ let len = -1; while(this.circles.length !== len) { len = this.circles.length; this.genNew(); } for (let i = 1; i < this.circles.length; ++i) { const c = this.circles[i]; if (c .r > 5) { this.children.push(new Gasket(c)); } } } genNew(){ let newQueue = []; for (const triplet of this.queue) { let newCircles = descartes(...triplet); newCircles.forEach(c => { if (validateCircle(c,this.circles) && isTangent(c,triplet[0]) && isTangent(c,triplet[1]) && isTangent(c,triplet[2])) { this.circles.push(c); newQueue.push([c, triplet[0], triplet[1]]); newQueue.push([c, triplet[2], triplet[1]]); newQueue.push([c, triplet[0], triplet[2]]); } }); } this.queue = newQueue; } display(){ this.circles.forEach(c => { let alpha = s.map(c.r , 200, 2, 200, 80); let x = Math.floor(c.center.x), y = Math.floor(c.center.y); let radi = Math.floor(c.r); let r = 0,g = 0,b = 0, count = 0;; if (c.r < 5) { const loc = x + y * img.width; r = imgData[loc * 4], g = imgData[loc * 4 + 1], b = imgData[loc * 4 + 2]; } else { for (let i = 1-radi; i < radi; ++i) { for (let j = 1-radi; j < radi; ++j) { let xx = x + i, yy = y + j; if (i*i + j*j > radi * radi) continue; const loc = xx + yy * img.width; r += imgData[loc * 4], g += imgData[loc * 4 + 1], b += imgData[loc * 4 + 2]; count ++; } } r /= count, g /= count, b /= count; } s.fill(r, g, b, alpha); s.circle(c.center.x, c.center.y, c.r * 2); }); for (let i = 0; i < this.children.length; ++i) { this.children[i].display(); } } } let img; let imgData; s.preload = function(){ img = s.loadImage(monalisa) } s.setup = function(){ s.createCanvas(800,800); s.noStroke(); s.background(255); s.blendMode(s.BLEND); img.loadPixels(); imgData = img.pixels; // the big circle let x1 = s.width/2, y1 = s.height/2, r1 = s.width/2; let a = new Gasket(new Circle(x1, y1, -(1/r1))); a.display(); } s.mouseClicked = function(){ let x1 = s.width/2, y1 = s.height/2, r1 = s.width/2; let a = new Gasket(new Circle(x1, y1, -(1/r1))); a.display(); } })39:[{"id":"bae8ddc279dbb8ff143e28171e40726924c20fd7bb2359c7202258942ee36f0729a40c39f38e71b269949e233ba29285d9a32c1210ee0883bc78b000e0ecaf1f","href":"https://static.observableusercontent.com/files/bae8ddc279dbb8ff143e28171e40726924c20fd7bb2359c7202258942ee36f0729a40c39f38e71b269949e233ba29285d9a32c1210ee0883bc78b000e0ecaf1f","name":"mona-lisa@1.jpg","type":"image/jpeg","lastModified":1711376740176.474,"size":63567},{"id":"747a10a0029b72cb715a007477f0c8d6daee8be18c025e4eb2d2eabdfa8ffa1a8fded94c1f762fc94515a5b6b976ec9b3adaa268ca00b0696066fefa84f844ac","href":"https://static.observableusercontent.com/files/747a10a0029b72cb715a007477f0c8d6daee8be18c025e4eb2d2eabdfa8ffa1a8fded94c1f762fc94515a5b6b976ec9b3adaa268ca00b0696066fefa84f844ac","name":"Screenshot 2024-03-20 at 10.50.23 AM.png","type":"image/png","lastModified":1710931828635.307,"size":37860}] 31:{"id":"58c4b685f54691b7","slug":"circle-packing-2","title":"Circle Packing 2","thumbnail":"c4b226958d04cd59cbf397f6e7b56be2740e8f14d2c56bb03300a6aded6a4e13","access_level":"public","create_time":"$D2024-03-19T15:39:44.244Z","update_time":"$D2024-03-25T14:34:40.201Z","view_time":null,"first_public_time":"$D2024-03-19T15:39:44.244Z","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":345,"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":true,"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":"Circle Packing 2","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"function getK4(k1, k2, k3) {\n let a = k1 * k2 + k1 * k3 + k2 * k3;\n // remember k is signed so a we get from above might be negative\n a = Math.abs(a);\n let k4A = k1 + k2 + k3 + 2 * Math.sqrt(a);\n let k4B = k1 + k2 + k3 - 2 * Math.sqrt(a);\n return [k4A, k4B]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"For the center of the new circles, the math is a bit more complicated. We can get the value of k₄\\*z₄ with the above formula:\n\nk₄\\*z₄ = k₁\\*z₁ + k₂\\*z₂ + k₃\\*z₃ ± 2 \\* sqrt(k₁\\*z₁ \\* k₂\\*z₂ + k₁\\*z₁ \\* k₃\\*z₃ + k₂\\*z₂ \\* k₃\\*z₃)\n\nbut to deal with complex number and extract x₄ and y ₄ from z₄ require some more code. We will start with a structure for complex number that handle complex number operation:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"class Complex{\n static add(a, b){\n return new Complex(a.x + b.x, a.y + b.y);\n }\n\n static sub(a, b){\n return new Complex(a.x - b.x, a.y - b.y);\n }\n\n static scale(c, f) {\n return new Complex(c.x * f, c.y * f);\n }\n\n static mult(a, b) {\n let x = a.x * b.x - a.y * b.y;\n let y = a.x * b.y + a.y * b.x;\n return new Complex(x, y);\n }\n\n static eq(a,b){\n return a.x === b.x && a.y === b.y;\n }\n\n static sqrt(c) {\n const m = Math.sqrt(c.x * c.x + c.y * c.y);\n const newM = Math.sqrt(m);\n const a = Math.atan2(c.y,c.x);\n const newA = a / 2;\n return new Complex(Math.cos(newA) * newM, Math.sin(newA) * newM);\n }\n \n constructor(x, y){\n this.x = x; // real component\n this.y = y; // imaginary component\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"Then we can create a function to get k₄\\*z₄:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"function getK4Z4(k1, z1, k2, z2, k3, z3, k4) {\n const k1z1 = Complex.scale(z1, k1), k2z2 = Complex.scale(z2, k2), k3z3 = Complex.scale(z3, k3);\n const sum = Complex.add(Complex.add(k1z1, k2z2), k3z3);\n const m12 = Complex.mult(k1z1, k2z2), m13 = Complex.mult(k1z1, k3z3), m23 = Complex.mult(k2z2, k3z3);\n let root = Complex.add(Complex.add(m12, m13), m23);\n root = Complex.sqrt(root);\n root = Complex.scale(root, 2);\n const k4z4 = [Complex.add(sum, root), Complex.sub(sum, root)];\n return k4z4;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"Ok, we are ready to draw some circles now, let's create a class for the circles first:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"class Circle {\n constructor(x, y, k) {\n if (x instanceof Complex){\n k = y;\n y = x.y;\n x = x.x;\n }\n this.center = new Complex(x, y);\n this.k = k;\n this.r = Math.abs(1 / this.k);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"And a function that returns the new circles:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"function descartes(c1, c2, c3){\n const k4 = getK4(c1.k, c2.k, c3.k);\n const k4z4 = getK4Z4(c1.k, c1.center, c2.k, c2.center, c3.k, c3.center, k4);\n if (k4[0] === k4[1]) {\n if (Complex.eq(k4z4[0],k4z4[1])) {\n let z4 = Complex.scale(k4z4[0], 1 / k4[0]);\n return [new Circle(z4, k4[0])];\n } else {\n let z4 = [Complex.scale(k4z4[0], 1 / k4[0]), Complex.scale(k4z4[1], 1/ k4[0])];\n return [new Circle(z4[0], k4[0]), new Circle(z4[1], k4[0])];\n }\n } else if (Complex.eq(k4z4[0],k4z4[1])) {\n let z4 = [Complex.scale(k4z4[0], 1 / k4[0]), Complex.scale(k4z4[0], 1 / k4[1])];\n return [new Circle(z4[0], k4[0]), new Circle(z4[1], k4[1])];\n } else {\n let z4 = [Complex.scale(k4z4[0], 1/ k4[0]), Complex.scale(k4z4[0], 1 / k4[1]), Complex.scale(k4z4[1], 1 / k4[0]), Complex.scale(k4z4[1], 1 / k4[1])];\n return [\n new Circle(z4[0], k4[0]),\n new Circle(z4[1], k4[1]),\n new Circle(z4[2], k4[0]),\n new Circle(z4[3], k4[1]),\n ];\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"For the composition of the canvas, I will start with a big circle and two random smaller circles inside of the big circle. The original given circles will be drawn in black and the newly found circles will be drawn in red:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"p5(s => {\n s.setup = function(){\n s.createCanvas(400,400);\n s.noFill();\n s.stroke(0);\n // the big circle\n let x1 = s.width/2, y1 = s.height/2, r1 = s.width/2;\n let c1 = new Circle(x1, y1, -(1/r1)); \n s.circle(c1.center.x, c1.center.y, c1.r * 2);\n // randomly place smaller circles inside the big one\n let r2 = random(50,150), r3 = r1 - r2;\n let a2 = random(Math.PI * 2), a3 = a2 + Math.PI;\n let d2 = (r1 - r2), d3 = (r1 - r3);\n let c2 = new Circle(x1 + s.cos(a2) * d2, y1 + s.sin(a2) * d2, 1/r2);\n let c3 = new Circle(x1 + s.cos(a3) * d3, y1 + s.sin(a3) * d3, 1/r3);\n s.circle(c2.center.x, c2.center.y, c2.r * 2);\n s.circle(c3.center.x, c3.center.y, c3.r * 2);\n //get new circles\n let newCircles = descartes(c1, c2, c3);\n s.stroke(\"red\");\n newCircles.forEach(c => s.circle(c.center.x, c.center.y, c.r * 2))\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"Cool, let try to draw the second generation in blue.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"You can notices that some of the circles are repeating (see how the origin big circles are also drawn in blue as well), and some floating circles appears as well. So let's clean up our code a bit and add a function to valid the newly created circles. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":155,"value":"function validateCircle(c, circles, minR = 2, epsilon = 0.1) {\n if (c.r < minR) return false;\n for (const cc of circles) {\n let dx = c.center.x - cc.center.x, dy = c.center.y - cc.center.y;\n if (dx*dx + dy*dy < epsilon * epsilon && Math.abs(cc.r - c.r) < epsilon) return false;\n }\n return true;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"function isTangent(c1, c2, e = 0.1){\n let dsq = (c1.center.x - c2.center.x) * (c1.center.x - c2.center.x) + (c1.center.y - c2.center.y) * (c1.center.y - c2.center.y);\n let d = Math.sqrt(dsq);\n let s1 = c1.r + c2.r\n let s2 = Math.abs(c2.r - c1.r)\n return Math.abs(d - s1) < e || Math.abs(d - s2) < e;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"placeCircles = function (bigCircle, ratio, angle) {\n if (!ratio) ratio = random(0.2, 0.8);\n if (!angle) angle = random(Math.PI * 2);\n let c1 = bigCircle, r1 = c1.r, x1 = c1.center.x, y1 = c1.center.y;\n let r2 = r1 * ratio, r3 = r1 - r2;\n let a2 = angle, a3 = a2 + Math.PI;\n let d2 = (r1 - r2), d3 = (r1 - r3);\n let c2 = new Circle(x1 + Math.cos(a2) * d2, y1 + Math.sin(a2) * d2, 1/r2);\n let c3 = new Circle(x1 + Math.cos(a3) * d3, y1 + Math.sin(a3) * d3, 1/r3);\n return [c2, c3];\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"function random(a, b) {\n if (!b){\n b = a;\n a = 0;\n }\n return a + Math.random() * (b - a);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"Cool, now we can repeat this process for every triplet of mutually tangent circles on the canvas to create more circles, and repeat and repeat... (click to create new circles)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":119,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"Play with this algorithm we can create many interesting graphics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":221,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"monalisa = FileAttachment(\"mona-lisa@1.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"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"