3f:null 40:["$","title",null,{"children":"El joc del caos | Jordi Saludes | Observable"}] 46:T95d,class triangle { constructor(a,b,c) { this.vs = [a,b,c] } draw(context, color, stroke) { let [a,b,c] = this.vs; context.fillStyle = color; context.beginPath(); context.moveTo(a[0],a[1]); context.lineTo(b[0],b[1]); context.lineTo(c[0],c[1]); context.closePath() context.fill(); if (stroke) { context.strokeStyle = stroke; context.stroke() } } asSVG(g, theClass) { let [a,b,c] = this.vs; g.append('polygon') .attr('class', theClass) .attr('points', this.vs.map(p => p.join(',')).join(' ')) } transform(f) { return new triangle(...this.vs.map(f)) } center() { let [a,b,c] = this.vs; let x = (a[0] + b[0] + c[0])/3, y = (a[1] + b[1] + c[1])/3; return [x,y] } isInside(p) { let [a,b,c] = this.toBarycentric(p); return (a>0 && b>0 && c>0); } fromBarycentric(a, b, c) { if (Math.abs(a + b + c - 1) > 1e-3) throw "Not barycentric"; let [A, B, C] = this.vs; const x = a*A[0] + b*B[0] + c*C[0], y = a*A[1] + b*B[1] + c*C[1]; return [x, y] } toBarycentric(P) { const vSub = (p,q) => [p[0]-q[0], p[1]-q[1]]; function transpose(M) { let m00 = M[0][0], m01 = M[0][1], m10 = M[1][0], m11 = M[1][1]; return [[m00, m10], [m01, m11]]; } function Cramer(M,b) { let det = M[0][0]*M[1][1] - M[0][1]*M[1][0]; if (det == 0) throw("Non-invertible matrix: " + M) let x = (b[0]*M[1][1] - M[0][1]*b[1])/det, y = (M[0][0]*b[1] - b[0]*M[1][0])/det; return [x, y] } let [A,B,C] = this.vs, vAB = vSub(B, A), vAC = vSub(C, A), v = vSub(P, A); let [b,c] = Cramer(transpose([vAB, vAC]), v), a = 1 - b - c; return [a, b, c] } randomInside() { let r = Math.random, [a, b, c] = [r(), r(), r()], t = a + b + c; return this.fromBarycentric(a/t, b/t, c/t) } interpolate(T) { if (!(T instanceof triangle)) throw("Must interpolate to a triangle"); function pinterp(p,q,t) { let x = (1-t)*p[0] + t*q[0], y = (1-t)*p[1] + t*q[1]; return [x,y] } return t => { let vs = this.vs.map((p,j) => pinterp(p, T.vs[j],t)); return new triangle(...vs); } } }47:T552,class quadrat { constructor(lt, a) { this.lt = lt; this.a = a; } draw(context, color, stroke) { let lt = this.lt, rb = [lt[0]+this.a, lt[1]+this.a]; context.fillStyle = color; context.beginPath(); context.moveTo(lt[0],lt[1]); context.lineTo(lt[0],rb[1]); context.lineTo(rb[0],rb[1]); context.lineTo(rb[0],lt[1]); context.closePath() context.fill(); if (stroke) { context.strokeStyle = stroke; context.stroke() } } transform(f) { return new quadrat(f(this.lt), this.a); } center() { let x = this.lt[0] + this.a/2, y = this.lt[1] + this.a/2; return [x,y] } isInside(p) { let [x,y] = p; return (this.lt[0] <= x && x <= this.lt[0] + this.a && this.lt[1] <= y && y <= this.lt[1] + this.a); } randomInside() { let {random } = Math, x = this.lt[0] + this.a*random(), y = this.lt[1] + this.a*random(); return [x, y]; } interpolate(T) { if (!(T instanceof triangle)) throw("Must interpolate to a triangle"); function pinterp(p,q,t) { let x = (1-t)*p[0] + t*q[0], y = (1-t)*p[1] + t*q[1]; return [x,y] } return t => { let vs = this.vs.map((p,j) => pinterp(p, T.vs[j],t)); return new triangle(...vs); } } }48:T5e4,{ let w = width; const svg = DOM.svg(w, w); const T = mainTri; let [a,b,c] = T.vs; let g = d3.select(svg).append('g') T.asSVG(g, 'domain'); let die = g.append('circle') .attr('id', 'die') .attr('r', 10) .attr('stroke', '#000') .attr('fill', 'none') .attr('visibility', 'hidden'); function newPoint(p) { return g.append('circle') .attr('class', 'sample') .attr('cx', p[0]) .attr('cy', p[1]) } var xy = T.randomInside(); var p = newPoint(xy); function rollDie() { let {n,f} = sierp.roll(), [x,y] = T.vs[n], color = ['red', 'green', 'blue'][n]; g.select('#die') .attr('cx', x) .attr('cy', y) .attr('fill', color) .attr('visibility', 'visible') return [f, [x,y]]; } function next(xy) { g.selectAll('line').remove(); const delay = 1000; var alldelay = 0; let p1 = newPoint(xy), [f, vx] = rollDie(), [x,y] = f(xy); const l = g.append('line') .attr('x1', xy[0]).attr('y1', xy[1]) .attr('x2', vx[0]).attr('y2', vx[1]) .attr('opacity', 0); l.transition().duration(alldelay += delay/2) .attr('opacity', 1.); p1.transition() .delay(alldelay) .duration(delay) .attr('cx', x).attr('cy', y); alldelay += delay; l.transition().delay(alldelay).duration(delay/2) .attr('opacity', 0); alldelay += delay/2; return Promises.delay(alldelay, [x,y]); } while(true) { xy = await next(xy) yield svg; } }49:[] 44:{"id":"1b4f6fa5d17419e8","slug":"the-chaos-game","title":"El joc del caos","thumbnail":"f7808cf56ff32fc5f1fe930474f117c7e524a070a2114e4d44a1b8cd4f1ebd74","access_level":"public","create_time":"$D2019-02-04T15:35:59.754Z","update_time":"$D2019-03-09T19:03:03.723Z","view_time":null,"first_public_time":"$D2019-02-18T16:55:28.066Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f4b4b938baf27882","login":"saludes","name":"Jordi Saludes","avatar_url":"https://avatars-next.observableusercontent.com/1d2477217e4b39f06cb2a19437f76e41d53331ab9b2d19b640c7d8be6b0cd950","tier":"starter_2024","bio":"","following":false},"version":1196,"publish_version":1196,"role":null,"authored":false,"authors":[{"type":"individual","id":"0510e92df0de01d0","login":"saludes","name":"Jordi Saludes","avatar_url":"https://avatars-next.observableusercontent.com/1d2477217e4b39f06cb2a19437f76e41d53331ab9b2d19b640c7d8be6b0cd950","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"0510e92df0de01d0","login":"saludes","name":"Jordi Saludes","avatar_url":"https://avatars-next.observableusercontent.com/1d2477217e4b39f06cb2a19437f76e41d53331ab9b2d19b640c7d8be6b0cd950","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"b6d5bde1dc981917","slug":"fractals","title":"Fractals","owner":{"id":"f4b4b938baf27882","login":"saludes","name":"Jordi Saludes"}},"type":"notebook","body":{"titling":"auto","title":"El joc del caos","cells":[{"id":277,"value":"md`# El joc del caos`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"viewof N = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 0,\n getValue: n => 4**n.value,\n title: \"Iteracions\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"{ const context = DOM.context2d(width, width);\n const T = mainTri;\n \n if (false) {\n const Sierp = new IFSOn(sierp, T);\n Sierp.iterate(3).base.map(t => t.draw(context, '#fd0'))\n } else {\n T.draw(context, '#ddf')\n sierp.playFor(N, T.randomInside()) \n .map(ip => {\n let p = new point(...ip[1]);\n p.draw(context, 'black')})\n }\n \n \n return context.canvas\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"sierp = {\n function midPoint(p, q) {\n let x = (p[0] + q[0])/2,\n y = (p[1] + q[1])/2;\n return [x, y]\n }\n \n return new IFS(mainTri.vs.map(V => (p => midPoint(V,p)))); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"Cantor = new IFS([x => 6/10*x, x => 7/10 + 3/10*x]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"class IFSOn {\n constructor(ifs, base) {\n this.ifs = ifs;\n this.base = [base];\n }\n \n step(B) {\n return B.map(b => this.ifs.fs.map(f => b.transform(f))).flat()\n }\n \n iterate(n) { \n function loop(self, n,B) {\n if (n == 0) return B;\n const B1 = loop(self, n-1, B);\n return self.step(B1)\n }\n \n const Bn = loop(this, n, this.base),\n In = new IFSOn(this.ifs, null);\n In.base = Bn;\n return In\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`## Sierpinsky aleatori`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"md`## Falguera aleatòria\n\nInspirat en https://www.delimited.io/blog/2014/2/20/fractal-ferns-in-d3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"viewof Nfern = slider({\n min: 1, \n max: 15, \n step: 1, \n value: 0,\n getValue: n => 2**n.value,\n title: \"Iteracions\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"{\n let f1 = p => {let [x,y] = p;\n return [0.81 * x + 0.07 * y + 0.12, -0.04 * x + 0.84 * y + 0.195]},\n f2 = p => {let [x,y] = p;\n return [0.18 * x - 0.25 * y + 0.12, 0.27 * x + 0.23 * y + 0.02]},\n f3 = p => {let [x,y] = p;\n return [0.19 * x + 0.275 * y + 0.16, 0.238 * x - 0.14 * y + 0.12]},\n f4 = p => {let [x,y] = p;\n return [0.0235 * x + 0.087 * y + 0.11, 0.045 * x + 0.1666 * y]};\n\n const fern = new IFS([f1, f2, f3, f4], [0.701, 0.851, 0.98, 1]);\n var colors = ['#006600','#663333','#CC0033','#330099'];\n colors = colors.map(s => s + '70');\n \n const ctx = DOM.context2d(width, width);\n \n fern.playFor(Nfern,[0,0])\n .map(ip => {\n let [k, p] = ip,\n s = width*0.9,\n [x,y] = p;\n \n new point(s*x, s*y).draw(ctx, colors[k], 2)\n });\n \n return ctx.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"md`## Aplicacions als jocs i la realitat virtual\n\n* [Paissatges amb fractals](https://youtu.be/9U0XVdvQwAI)\nObserveu la velocitat (fps)\n\n* [Com fer fractals 3D](https://youtu.be/svLzmFuSBhk)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"{\n const context = DOM.context2d(width, 100);\n let I = new interval1([0, 1]),\n cantorSet = new IFSOn(Cantor, I);\n for(var i=0; i<6; i++) {\n cantorSet.iterate(i)\n .base.map(t => t.draw(context, 'green', 10+10*i, width, 2))\n }\n \n return context.canvas;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"class point {\n constructor(x,y) {\n this.x = x\n this.y = y\n }\n \n draw(context, color, size) {\n const max = Math.max,\n π = Math.PI;\n context.beginPath();\n context.arc(this.x,this.y, size || 1, 0, 2*π);\n context.fillStyle = color || \"#00f\";\n // context.fillRect(p[0],p[1], 1, 1); */\n context.fill();\n }\n \n interpolate(p) {\n if(!(p instanceof point))\n throw(\"Must interpolate a point\");\n return t => {\n let x = (1-t)*this.x + t*p.x,\n y = (1-t)*this.y + t*p.y\n return new point(x,y)\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"class interval1 {\n constructor(I) {\n this.i = I[0]\n this.s = I[1]\n }\n \n draw(context, color, y, scale, lineW) {\n context.beginPath();\n context.moveTo(scale*this.i, y);\n context.lineTo(scale*this.s, y);\n context.strokeStyle = color || \"#00f\";\n context.lineWidth = lineW;\n // context.fillRect(p[0],p[1], 1, 1); */\n context.stroke();\n }\n \n interpolate(I) {\n if(!(I instanceof interval1))\n throw(\"Must interpolate an interval\");\n return t => {\n let x1 = (1-t)*this.i + t*I.i,\n x2 = (1-t)*this.s + t*I.s\n return new interval1(x1, x2)\n }\n }\n \n transform(f) {\n return new interval1([f(this.i), f(this.s)]);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"mainTri = {\n let center = [width/2, width/2],\n R = width*0.45;\n function polar(a) {\n let da = a/180.*Math.PI;\n return [center[0] + R * Math.cos(da), center[1] + R*Math.sin(da)]\n }\n \n const th = 0,\n A = polar(th + 0),\n B = polar(th + 120),\n C = polar(th +240);\n return new triangle(A, B, C);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"class IFS {\n constructor(fs, ps) {\n this.fs = fs;\n if (ps)\n this.ps = ps\n else {\n let u = 1./this.fs.length;\n this.ps = [];\n for(var a=0, i=0; iStyles\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 45:"$44:body"