2d:null 2e:["$","title",null,{"children":"SM3809_PRESENT_ARTIST | John C | Observable"}] 33:T1438,p5(s => { class Triangles { constructor(v){ //v is a array of vectors that contains 3 vertices of the triangle this.v = v; this.x1=v[0].x; this.y1=v[0].y; this.x2=v[1].x; this.y2=v[1].y; this.x3=v[2].x; this.y3=v[2].y; let va = 2 * ((this.x2 - this.x1) * (this.y3 - this.y1) - (this.y2 - this.y1) * (this.x3 - this.x1)); let x =((this.y3 - this.y1) * (s.sq(this.x2) - s.sq(this.x1) + s.sq(this.y2) - s.sq(this.y1)) + (this.y1 - this.y2) * (s.sq(this.x3) - s.sq(this.x1) + s.sq(this.y3) - s.sq(this.y1))) / va; let y=((this.x1 - this.x3) * (s.sq(this.x2) - s.sq(this.x1) + s.sq(this.y2) - s.sq(this.y1)) + (this.x2 - this.x1) * (s.sq(this.x3) - s.sq(this.x1) + s.sq(this.y3) - s.sq(this.y1))) / va; let r = s.dist(x,y,this.x1,this.y1); this.c_circle = [x, y, r]; //c_circle is the circumscribed circle, x,y is the center and r is the radius } is_in_circle(x, y) { return s.dist(this.c_circle[0],this.c_circle[1],x,y) < this.c_circle[2]; //this function return true if the given point is in the circumscribed circle } divide (vex){ let new_tris = []; for (let i=0;i<3;i++){ let va = i==2? 0:i+1; let tem = [this.v[i], this.v[va], vex]; let tem_tri = new Triangles(tem); new_tris.push(tem_tri); } return new_tris; // divide the triangle into small ones } display(w){ s.push(); s.noFill(); if (w) { s.strokeWeight(w); } s.stroke(0); for (let i = 0; i < 3; i++) { let next = i == 2? 0 : i+1; if (s.dist(this.v[i].x, this.v[i].y, this.v[next].x, this.v[next].y) < 150) { s.line(this.v[i].x, this.v[i].y, this.v[next].x, this.v[next].y); } } s.pop(); //function for drawing the triangle } vertices_contain(x,y){ for(let i=0;i<3;i++){ if (this.v[i].x==x && this.v[i].y==y){ return true; } } return false; } // return true if given point is one of the vertices of the triangle } //----------------------------main let points = []; let tris = []; s.setup = function () { s.createCanvas(600,600); s.background(244); s.noFill(); s.stroke(0); s.strokeWeight(5); s.drawPoints(); } s.drawPoints = function () { s.background(244); points.length = 0; for (let i = 0; i < 100; i++){ let x = s.floor(s.random(s.width)); let y = s.floor(s.random(s.height)); points.push(new p5c.Vector(x,y)); } //get 100 random point points.forEach(p => { s.point(p.x, p.y); }); //draw the point setTimeout(s.drawTriangles, 2000); } s.drawTriangles = function () { tris.length = 0; tris = s.get_d_tris(points); tris.forEach(t => { t.display(1); }); setTimeout(s.drawPoints, 2000); } //-----------------------------end of main s.supertriangle = function() { let r=s.sqrt(s.sq(width+400)+s.sq(s.height+400))/2; let supertriangle = [ new p5c.Vector(s.width/2-s.sqrt(3)*r,s.height/2-r), new p5c.Vector(s.width/2+s.sqrt(3)*r,s.height/2-r), new p5c.Vector(s.width/2,s.height/2+2*r) ]; return supertriangle; //this function construct a supertriangle that contains all points inside } s.should_del = function (tri,x,y){ if (tri.vertices_contain(x,y)){ return false; } return tri.is_in_circle(x,y); //return true if the triangle should be deleted } s.get_d_tris = function (input){ let result = []; let triangles = []; let vertices = []; let super_v = s.supertriangle(); triangles.push(new Triangles(super_v)); //add supertriangle into the triangle set vertices = vertices.concat(super_v); for (let i=0;i { class Triangles { constructor(v){ //v is a array of vectors that contains 3 vertices of the triangle this.v = v; this.x1=v[0].x; this.y1=v[0].y; this.x2=v[1].x; this.y2=v[1].y; this.x3=v[2].x; this.y3=v[2].y; let va = 2 * ((this.x2 - this.x1) * (this.y3 - this.y1) - (this.y2 - this.y1) * (this.x3 - this.x1)); let x =((this.y3 - this.y1) * (s.sq(this.x2) - s.sq(this.x1) + s.sq(this.y2) - s.sq(this.y1)) + (this.y1 - this.y2) * (s.sq(this.x3) - s.sq(this.x1) + s.sq(this.y3) - s.sq(this.y1))) / va; let y=((this.x1 - this.x3) * (s.sq(this.x2) - s.sq(this.x1) + s.sq(this.y2) - s.sq(this.y1)) + (this.x2 - this.x1) * (s.sq(this.x3) - s.sq(this.x1) + s.sq(this.y3) - s.sq(this.y1))) / va; let r = s.dist(x,y,this.x1,this.y1); this.c_circle = [x, y, r]; //c_circle is the circumscribed circle, x,y is the center and r is the radius } is_in_circle(x, y) { return s.dist(this.c_circle[0],this.c_circle[1],x,y) < this.c_circle[2]; //this function return true if the given point is in the circumscribed circle } divide (vex){ let new_tris = []; for (let i=0;i<3;i++){ let va = i==2? 0:i+1; let tem = [this.v[i], this.v[va], vex]; let tem_tri = new Triangles(tem); new_tris.push(tem_tri); } return new_tris; // divide the triangle into small ones } display(w){ s.push(); s.noFill(); if (w) { s.strokeWeight(w); } s.stroke(0,150); for (let i = 0; i < 3; i++) { let next = i == 2? 0 : i+1; if (s.dist(this.v[i].x, this.v[i].y, this.v[next].x, this.v[next].y) < 150) { s.line(this.v[i].x, this.v[i].y, this.v[next].x, this.v[next].y); } } s.pop(); //function for drawing the triangle } vertices_contain(x,y){ for(let i=0;i<3;i++){ if (this.v[i].x==x && this.v[i].y==y){ return true; } } return false; } // return true if given point is one of the vertices of the triangle } //---------------------------- main let points = []; let tris = []; let voronoi = []; s.setup = function () { s.createCanvas(600,600); s.background(244); s.noFill(); s.stroke(0); s.strokeWeight(5); s.drawPoints(); } s.drawPoints = function () { s.background(244); points.length = 0; for (let i = 0; i < 100; i++){ let x = s.floor(s.random(s.width)); let y = s.floor(s.random(s.height)); points.push(new p5c.Vector(x,y)); } //get 100 random point points.forEach(p => { s.point(p.x, p.y); }); //draw the point setTimeout(s.drawTriangles, 2000); } s.drawTriangles = function () { tris.length = 0; tris = s.get_d_tris(points); tris.forEach(t => { t.display(1); }); setTimeout(s.drawVoronoi, 2000); } s.drawVoronoi = function () { voronoi.length = 0; voronoi = s.get_voronoi(tris); s.background(244); points.forEach(p => { s.point(p.x, p.y); }); s.push(); s.strokeWeight(1); s.stroke(0,130); voronoi.forEach(vo => { s.line(vo[0].x, vo[0].y, vo[1].x, vo[1].y); }); s.pop(); setTimeout(s.drawPoints, 2000); } //-----------------------------end of main s.supertriangle = function() { let r=s.sqrt(s.sq(width+400)+s.sq(s.height+400))/2; let supertriangle = [ new p5c.Vector(s.width/2-s.sqrt(3)*r,s.height/2-r), new p5c.Vector(s.width/2+s.sqrt(3)*r,s.height/2-r), new p5c.Vector(s.width/2,s.height/2+2*r) ]; return supertriangle; //this function construct a supertriangle that contains all points inside } s.should_del = function (tri,x,y){ if (tri.vertices_contain(x,y)){ return false; } return tri.is_in_circle(x,y); //return true if the triangle should be deleted } s.get_d_tris = function (input){ let result = []; let triangles = []; let vertices = []; let super_v = s.supertriangle(); triangles.push(new Triangles(super_v)); //add supertriangle into the triangle set vertices = vertices.concat(super_v); for (let i=0;i { let adjoin_tris = []; let shared_edge = []; let notShared_edge = []; for (let i = 0; i < triangles.length; i++) { if (i == id) continue; let targetTri = triangles[i]; let commonVCount = 0; let vcount = [0,0,0]; targetTri.v.forEach(vertex => { if (vertex.equals(tri.v[0])) { commonVCount ++; vcount[0] ++; } else if (vertex.equals(tri.v[1])) { commonVCount ++; vcount[1] ++; } else if (vertex.equals(tri.v[2])) { commonVCount ++; vcount[2] ++; } }); if (commonVCount == 2) { adjoin_tris.push(targetTri); let v1 = new p5c.Vector(tri.c_circle[0],tri.c_circle[1]); let v2 = new p5c.Vector(targetTri.c_circle[0],targetTri.c_circle[1]); if (!result.includes([v1, v2]) && !result.includes([v2, v1])) result.push([v1, v2]); if (vcount[2] == 0) { if (!shared_edge.includes("01")) shared_edge.push("01"); } else if (vcount[1] == 0) { if (!shared_edge.includes("02")) shared_edge.push("02"); } else if (vcount[0] == 0) { if (!shared_edge.includes("12")) shared_edge.push("12"); } } } //less than 3 triangles if (shared_edge.length < 3){ if (!shared_edge.includes("01")) { notShared_edge.push([0,1]); } if (!shared_edge.includes("02")) { notShared_edge.push([0,2]); } if (!shared_edge.includes("12")) { notShared_edge.push([1,2]); } } notShared_edge.forEach(e => { let mid = new p5c.Vector((tri.v[e[0]].x+tri.v[e[1]].x)/2, (tri.v[e[0]].y+tri.v[e[1]].y)/2); let start = new p5c.Vector(tri.c_circle[0], tri.c_circle[1]); let tem; if (!pointInTriangle(start, tri.v[0], tri.v[1], tri.v[2]) && s.isLongestEdge(e,tri.v)){ tem = p5c.Vector.sub(mid,start); } else { tem = p5c.Vector.sub(start,mid); } let end = p5c.Vector.sub(start,p5c.Vector.mult(tem, 10)); if (!result.includes([start,end])) result.push([start,end]); }); }); return result; } s.isLongestEdge = function(e,v) { let thisL = s.dist(v[e[0]].x,v[e[0]].y,v[e[1]].x,v[e[1]].y); let l1 = s.dist(v[0].x,v[0].y,v[1].x,v[1].y); let l2 = s.dist(v[0].x,v[0].y,v[2].x,v[2].y); let l3 = s.dist(v[1].x,v[1].y,v[2].x,v[2].y); return (thisL >= l1 && thisL >= l2 && thisL >= l3); } })35:Tf0b,p5(s => { class LShape{ constructor(a,b,c,d,e,f){ this.a = a; this.b = b; this.c = c; this.d = d; this.e = e; this.f = f; this.divided = false; } divide(){ let l1a = p5c.Vector.add(this.a, p5c.Vector.mult(p5c.Vector.sub(this.c, this.a),0.5)); let l1b = p5c.Vector.add(this.b, p5c.Vector.mult(p5c.Vector.sub(this.c, this.b),0.5)); let l1c = this.c; let l1d = p5c.Vector.add(this.c, p5c.Vector.mult(p5c.Vector.sub(this.d, this.c),0.5)); let l1e = p5c.Vector.add(this.c, p5c.Vector.mult(p5c.Vector.sub(this.e, this.c),0.5)); let l1f = p5c.Vector.add(this.f, p5c.Vector.mult(p5c.Vector.sub(this.c, this.f),0.5)); let l1 = new LShape(l1a, l1b, l1c, l1d, l1e, l1f); let l2a = p5c.Vector.add(this.f, p5c.Vector.mult(p5c.Vector.sub(this.e, this.f),0.5)); let l2b = p5c.Vector.add(this.f, p5c.Vector.mult(p5c.Vector.sub(this.d, this.f),0.5)); let l2c = p5c.Vector.add(this.c, p5c.Vector.mult(p5c.Vector.sub(this.e, this.c),0.5)); let l2d = p5c.Vector.add(this.c, p5c.Vector.mult(p5c.Vector.sub(this.d, this.c),0.5)); let l2e = this.d; let l2f = this.e; let l2 = new LShape(l2a, l2b, l2c, l2d, l2e, l2f); let l3a = p5c.Vector.add(this.f, p5c.Vector.mult(p5c.Vector.sub(this.a, this.f),0.5)); let l3b = p5c.Vector.add(this.f, p5c.Vector.mult(p5c.Vector.sub(this.b, this.f),0.5)); let l3c = p5c.Vector.add(this.f, p5c.Vector.mult(p5c.Vector.sub(this.c, this.f),0.5)); let l3d = p5c.Vector.add(this.f, p5c.Vector.mult(p5c.Vector.sub(this.d, this.f),0.5)); let l3e = p5c.Vector.add(this.f, p5c.Vector.mult(p5c.Vector.sub(this.e, this.f),0.5)); let l3f = this.f; let l3 = new LShape(l3a, l3b, l3c, l3d, l3e, l3f); let l4a = this.b; let l4b = p5c.Vector.add(this.b, p5c.Vector.mult(p5c.Vector.sub(this.c, this.b),0.5)); let l4c = p5c.Vector.add(this.a, p5c.Vector.mult(p5c.Vector.sub(this.c, this.a),0.5)); let l4d = p5c.Vector.add(this.f, p5c.Vector.mult(p5c.Vector.sub(this.b, this.f),0.5)); let l4e = p5c.Vector.add(this.f, p5c.Vector.mult(p5c.Vector.sub(this.a, this.f),0.5)); let l4f = this.a; let l4 = new LShape(l4a, l4b, l4c, l4d, l4e, l4f); return [l1, l2, l3, l4]; } display(){ s.push(); s.stroke(0); if (this.c.x > this.f.x && this.c.y < this.f.y) { s.fill(119,38,245); } else if (this.c.x > this.f.x && this.c.y > this.f.y) { s.fill(103,222,170); } else if (this.c.x < this.f.x && this.c.y < this.f.y) { s.fill(168,238,246); } else { s.fill(245,189,172); } s.beginShape(); s.vertex(this.a.x, this.a.y); s.vertex(this.b.x, this.b.y); s.vertex(this.c.x, this.c.y); s.vertex(this.d.x, this.d.y); s.vertex(this.e.x, this.e.y); s.vertex(this.f.x, this.f.y); s.endShape(s.CLOSE); s.pop(); } } //------------main let shapes = []; let itr = 0; let initL; s.setup = function(){ s.createCanvas(600,600); s.background(240); initL = new LShape( new p5c.Vector(50,50), new p5c.Vector(s.width/2,50), new p5c.Vector(s.width/2,s.height/2), new p5c.Vector(s.width - 50,s.height/2), new p5c.Vector(s.width-50,s.height-50), new p5c.Vector(50,s.height-50), ); shapes.push(initL); setInterval(s.act,2000); } s.act = function() { s.drawShape(itr); itr = itr == 5? 0 : itr+1; } s.drawShape = function(its) { let arr = shapes; for (let i = 0; i< its; i++) { let newS = []; arr.forEach(sh => { let nns = newS.concat(sh.divide()); newS = nns; }); arr = newS; } s.background(244); arr.forEach((sh,i) => { sh.display(); }); } })36:Tf99,p5(s => { let points = []; let nodes=[]; s.setup = function () { s.createCanvas(600,600); s.background(244); s.act(); setInterval(s.act,2000); } s.act = function () { nodes.length = 0; s.getpoints(); s.buildTree(points,null,'root'); s.drawG(); } s.getpoints = function () { points.length = 0; for (let i = 0; i < pointNo; i++) { let x = s.floor(s.random(s.width)); let y = s.floor(s.random(s.height)); points.push(new p5c.Vector(x,y)); } } s.drawG = function() { s.background(244); s.stroke(0); s.strokeWeight(5); points.forEach(p => { s.point(p.x, p.y); }); s.strokeWeight(1); nodes.forEach(n => { if (!n.p) { //root if (n.spilt == 0){ s.line(n.v.x,0,n.v.x,s.height); } else { s.line(0,n.v.y,s.width,n.v.y); } } else { //not root let l1 = n.p,l2; while (l1 && l1.spilt == n.spilt) { if (l1.p) { l1 = l1.p; } else { l1 = undefined; break; } } if (l1 && l1.p) l2 = l1.p; while (l2 && l2.spilt !=l1.spilt) { if (l2.p) { l2 = l2.p; } else { l2 = undefined; break; } } if (l1 === undefined) { if (n.spilt == 0){ s.line(n.v.x,0,n.v.x,s.height); } else { s.line(0,n.v.y,s.width,n.v.y); } } else { if (n.spilt == 0){ if ((l2 === undefined && n.v.y < l1.v.y) || (l2 !== undefined && (n.v.y < l1.v.y && n.v.y < l2.v.y) )){ s.line(n.v.x,0,n.v.x,l1.v.y); } else if (l2 !== undefined && ((n.v.y-l1.v.y)*(n.v.y-l2.v.y) < 0)) { s.line(n.v.x,l2.v.y,n.v.x,l1.v.y); } else { s.line(n.v.x,s.height,n.v.x,l1.v.y); } } else { if ((l2 == undefined && n.v.x < l1.v.x) || (l2 !== undefined && (n.v.x < l1.v.x && n.v.x < l2.v.x) )){ s.line(0,n.v.y,l1.v.x,n.v.y); } else if (l2 !== undefined && ((n.v.x-l1.v.x)*(n.v.x-l2.v.x) < 0)) { s.line(l2.v.x,n.v.y,l1.v.x,n.v.y); } else { s.line(s.width,n.v.y,l1.v.x,n.v.y); } } } } }); } s.buildTree = function(pointSet, p, side) { if (pointSet.length > 1) { let xarr = []; let yarr = []; pointSet.forEach(p => { xarr.push(p.x); yarr.push(p.y); }); let xvari = getVariance(xarr); let yvari = getVariance(yarr); let spilt; if (xvari >= yvari) { spilt = 0; //splitline vertical to x axis } else { spilt = 1; //splitline vertical to y axis } let midP = getMid(pointSet,spilt == 0 ? 'x' : 'y'); let newNode = new Node(midP,spilt,p,side); nodes.push(newNode); if (p != null){ if (side == 'l'){ p.left.push(newNode); } else { p.right.push(newNode); } } let lSubset = []; let rSubest = []; let idx = pointSet.indexOf(midP); for (let i = 0; i < pointSet.length; i++) { if (i == idx) continue; if (spilt == 0) { if (pointSet[i].x <= midP.x) { lSubset.push(pointSet[i]); } else { rSubest.push(pointSet[i]); } } else { if (pointSet[i].y <= midP.y) { lSubset.push(pointSet[i]); } else { rSubest.push(pointSet[i]); } } } s.buildTree(lSubset,newNode,'l'); s.buildTree(rSubest,newNode,'r'); } else if (pointSet.length > 0) { let newNode = new Node(pointSet[0],!p.spilt,p,side); nodes.push(newNode); if (p != null){ if (side == 'l'){ p.left.push(newNode); } else { p.right.push(newNode); } } } } })37:[{"id":"8f5a2667812e861cb2d2c0d60c49c753b7974d04b84ad3c77b4d093774fc1bc7b4ae4494d1e2f76c55e44b0e38e67119c0f13aaf28d1e3fc74942e93adf56ba6","href":"https://static.observableusercontent.com/files/8f5a2667812e861cb2d2c0d60c49c753b7974d04b84ad3c77b4d093774fc1bc7b4ae4494d1e2f76c55e44b0e38e67119c0f13aaf28d1e3fc74942e93adf56ba6","name":"Presentation-Raven-Kwok.pdf","type":"application/pdf","lastModified":1614585342883.229,"size":14335950}] 31:{"id":"0fa48408a31735f1","slug":"sm3809-present-artist","title":"SM3809_PRESENT_ARTIST","thumbnail":"32490296004c304d52d1c366f7b20c9e74435cbda23cd63f3e83d593c7df75f3","access_level":"public","create_time":"$D2021-02-20T14:50:44.264Z","update_time":"$D2021-03-02T08:03:59.767Z","view_time":null,"first_public_time":"$D2021-03-01T07:57:37.361Z","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":249,"publish_version":249,"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":null,"type":"notebook","body":{"title":"SM3809_PRESENT_ARTIST","cells":[{"id":0,"value":"html`

SM3809_PRESENT_ARTIST

Raven Kwok | 郭鋭文

Slides

\nLink here\n

Code

Delaunay triangulation

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"html`Voronoi tessellation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"html`Finite Subdivision
\nA simple example is the Mondrian exercise
\nLShape example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"html`k-d tree
\nthere are lots of avaliable libraries for this online, for js, check here
\nbelow is a simple example I wrote`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"viewof pointNo = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"class Node{\n constructor(vector,spilt,p,inS){\n this.v = vector;\n this.spilt = spilt\n this.left = [];\n this.right = [];\n this.p = p\n this.inSide = inS;\n }\n \n getp(){\n return this.p; \n }\n \n getLeft() {\n return this.left; \n }\n getLeft() {\n return this.right; \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"html`\n

\n

------------------------------------- below is import area --------------------------------------

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

SM3809_PRESENT_ARTIST

Raven Kwok | 郭 鋭文

Slides

Code

Raven Kwok | 郭鋭文