29:null 2a:["$","title",null,{"children":"Platonic Solids Playground | Claudio Esperança | Observable"}] 2f:T82a,md`# Platonic Solids Playground This notebook is inspired by Michael Hansmeyer's work on design by subdivision, in particular his Extended Catmull-Clark subdivision scheme, as detailed in the article ["Design by Subdivision"](http://archive.bridgesmathart.org/2010/bridges2010-167.pdf) presented at the Bridges 2010 conference. Only the basic features of this scheme were implemented, but enough to produce some interesting results such as the image below. ${await demoImg[~~(Math.random() * demoImg.length)].image()} Several other mesh operators are also implemented, including the original [Catmull-Clark subdivision algorithm](https://en.wikipedia.org/wiki/Catmull%E2%80%93Clark_subdivision_surface), the [Doo-Sabin subdivision algorithm](http://graphics.cs.ucdavis.edu/education/CAGDNotes/Doo-Sabin/Doo-Sabin.html), vertex cutting, face extrusion, face center extrusion and the dual operator. The playground consists of a canvas showing a platonic solid (choose one) and an interface containing buttons for applying mesh operators. You can rotate the solid using the mouse or zoom in/out by dragging with the middle button. Most mesh operators increase the number of faces at least two-fold, and thus the complexity of the resulting mesh increases exponentially with the number of operations. The result of some operators can be varied by sliders that control the operator parameters. In particular, the Extended Catmull-Clark scheme, perhaps the most expressive operator, has provision for 7 parameters. Since I found that some of the most interesting surfaces are achieved by applying a few Extended Catmull-Clark operations followed by one or two regular Catmull-Clark operations (to smooth out the result), the sliders for the Extended CC already contain controls for repeated operator application. Also check the [Platonic Solid Movie Maker](https://observablehq.com/@esperanc/platonic-solids-movie-maker)! **New:** You can now download the mesh as a Wavefront .obj file. **Important note:** It is very easy to run out of memory and/or hog the CPU. That said, have fun! `30:T1037,gui = { let objects = {cube,tetrahedron,dodecahedron,icosahedron,octahedron}; let original = select({options:["tetrahedron","cube","octahedron","dodecahedron","icosahedron"], value:"cube"}); let ccsubdivide = button({value:"Catmull-Clark"}); let eccsubdivide = button({value:"Extended Catmull-Clark"}); let dssubdivide = button({value:"Doo-Sabin"}); let cutsubdivide = button({value:"Cut corners"}); let centersubdivide = button({value:"Extrude centers"}); let extrudesubdivide = button({value:"Extrude faces"}); let flatsubdivide = button({value:"Flat subdivide"}); let dualoperator = button({value:"Dual"}); let undo = button({value:"undo"}); let reset = button({value:"reset"}); let opStack = []; let mainDiv = html`

`; let buttons = html`

`; mainDiv.append(buttons); let sliders = html`

`; mainDiv.append(sliders); let unsetSliders = function () { if (sliders.lastChild) sliders.removeChild (sliders.lastChild); } let newOp = function (func, ...sliderConf) { unsetSliders(); let old = mutable obj; opStack.push({mesh:old, func, sliderConf}); let controlConf = {}; let confNames = []; sliderConf.forEach((sconf,i) => { let cname = 'slider'+i; controlConf [cname] = slider (sconf); confNames.push (cname); }) let controls = combo(controlConf); sliders.append(controls); controls.oninput = () => { mutable obj = func(old, ... confNames.map (cname => controls.value[cname])); confNames.forEach ((cname,iconf)=> sliderConf[iconf].value = controls.value[cname]); } mutable obj = func(old,... confNames.map (cname => controls.value[cname])); } ccsubdivide.oninput = () => { newOp(catmull); } eccsubdivide.oninput = () => { function repeat (mesh, n, m, ...param) { while (n--) mesh = extendedCatmull(mesh,...param); return catmull (mesh, m); } newOp(repeat, {title:"Extended iterations", min:1, max:4, step: 1,value:1}, {title:"Standard iterations", min:0, max:4, step: 1,value:0}, {title:"wf",min:-10,max:10,step:0.01,value:0}, {title:"we",min:-10,max:10,step:0.01,value:0}, {title:"wp",min:-10,max:10,step:0.01,value:0}, {title:"w1",min:-10,max:10,step:0.01,value:0}, {title:"w2",min:-10,max:10,step:0.01,value:0}, {title:"w3",min:-10,max:10,step:0.01,value:0}, {title:"w4",min:-10,max:10,step:0.01,value:0} ); } flatsubdivide.oninput = () => { newOp(flatSubdiv); } dssubdivide.oninput = () => { newOp(dooSabin, {title:"Bias",min:-0.49,max:0.49,step:0.01,value:0}); } cutsubdivide.oninput = () => { newOp(cutCorners,{title:"Cut ratio",min:0.1,max:0.5,step:0.01,value:0.33}); } centersubdivide.oninput = () => { newOp (extrudeCenters, {title:"Shift", min:-0.5,max:5,step:0.01,value:0.5}, {title:"Bias", min:-3,max:3,step:0.01,value:0}); } extrudesubdivide.oninput = () => { newOp (extrudeFaces, {title:"Shift", min:-0.5,max:5,step:0.01,value:0.5}, {title:"Scale", min:0.1,max:2,step:0.01,value:0.5}, {title:"Bias", min:-3,max:3,step:0.01,value:0}); } dualoperator.oninput = () => { newOp(dual); } undo.oninput = () => { if (opStack.length>0) { let {mesh, func, sliderConf} = opStack.pop(); if (opStack.length > 0) { let {mesh, func, sliderConf} = opStack.pop(); mutable obj = mesh; newOp (func, ...sliderConf); } else { mutable obj = mesh; unsetSliders(); } } } reset.oninput = original.onchange = () => { unsetSliders(); opStack = []; mutable obj = objects[original.value]; } buttons.append (combo({ undo, reset, original })); buttons.append (combo({eccsubdivide, ccsubdivide, dssubdivide, cutsubdivide, centersubdivide, extrudesubdivide, flatsubdivide, dualoperator })); reset.oninput(); return mainDiv; } 31:T5df,// // Generates a draw program for drawing the faces of triangle mesh // makeTriMeshDraw = function(triMesh) { return regl({ frag: ` precision mediump float; uniform vec4 color; varying vec3 vertex_normal; uniform vec3 light_dir; void main () { gl_FragColor = vec4(clamp(abs(color.xyz*dot(vertex_normal,light_dir)),0.0,1.0),1.0); }`, vert: ` attribute vec3 position; attribute vec3 normal; varying vec3 vertex_normal; uniform mat4 modelview; uniform mat4 projection; uniform float scaleFactor; void main () { vec4 worldpos = modelview*vec4(scaleFactor*position, 1.0); gl_Position = projection*worldpos; vertex_normal = (modelview*vec4(normal,0.0)).xyz; }`, // These are the vertex attributes that will be passed // on to the vertex shader attributes: { position: triMesh.positions, normal: triMesh.normals }, // These are the uniforms, i.e., global shader variables that are set // from inside the host (CPU) program uniforms: { color: toWebGLColor(displayConfig.foreground).concat([1]), light_dir : vec3.normalize([], vec3.set ([],1,1,5)), modelview : regl.prop('modelview'), projection : regl.prop ('projection'), scaleFactor : regl.prop ('scaleFactor') }, // The depth buffer depth: { enable: true, func: '<', mask: true, }, // Number of triangles count: triMesh.positions.length }) }32:T493,// // Generates a draw program for drawing the edges of a mesh // makeMeshEdgeDraw = function(mesh) { return regl({ frag: ` precision mediump float; uniform vec4 color; void main () { gl_FragColor = color; }`, vert: ` attribute vec3 position; uniform mat4 modelview; uniform mat4 projection; uniform float scaleFactor; void main () { vec4 worldpos = modelview*vec4(scaleFactor*position, 1.0); gl_Position = projection*(worldpos+vec4(0.0,0.0,0.01,0.0)); // Offset to help with z-fighting }`, // These are the vertex attributes that will be passed // on to the vertex shader attributes: { position: mesh.positions }, // These are the uniforms, i.e., global shader variables that are set // from inside the host (CPU) program uniforms: { color: [0,0,0, 1], modelview : regl.prop('modelview'), projection : regl.prop ('projection'), scaleFactor : regl.prop ('scaleFactor') }, // The depth buffer depth: { enable: true, func: '<', mask: true, }, // Number of triangles elements: mesh.edges }) }33:T67a,draw = { let mouse = null; let dist = 5; let angle = 0, axis; let rotate = () => { if (angle == 0) return; let rot = mat4.fromRotation([],angle,axis); mat4.multiply(mutable model, rot, mutable model); refresh(mutable model,mutable view,mutable projection) } let id = -1; let stopAutoRot = () => { if (id != -1) clearInterval(id); id = -1; } let autoRot = () => { angle *= 0.99; if (Math.abs(angle)<0.00001) stopAutoRot(); else { rotate(); } } let startAutoRot = () => { if(Math.abs(angle) > 0.0001) id = setInterval (autoRot,50) } invalidation.then(stopAutoRot); canvas.oncontextmenu = (e) => { e.preventDefault(); e.stopPropagation() } canvas.onmousedown = (e) => { stopAutoRot() angle = 0; mouse = [e.offsetX,e.offsetY] } canvas.onmouseup = (e) => { stopAutoRot() startAutoRot() mouse = null; } canvas.onmousemove = (e) => { if (mouse) { let newMouse = [e.offsetX,e.offsetY]; if (e.buttons & 1) { let newMouse = [e.offsetX,e.offsetY]; axis = vec3.fromValues(newMouse[1]-mouse[1],newMouse[0]-mouse[0],0); angle = vec3.length(axis)*Math.PI/180*0.5; // 1/2 degree vec3.normalize(axis,axis); rotate(); } else { dist = Math.max(1.5,Math.min(999,dist+(newMouse[1]-mouse[1])*0.1)); mutable view = mat4.lookAt([],[0,0,dist],[0,0,0],[0,1,0]) refresh(mutable model,mutable view,mutable projection) } mouse = newMouse; } } refresh(mutable model,mutable view,mutable projection) }34:Tb1f,class Mesh { constructor(positions, faces) { Object.assign(this, { positions, faces }); this.computeFaceCentersNormalsAndSizes(); this.computeVertexNormals(); this.computeEdges(); this.computeBox(); } // Converts to wavefront obj format obj() { let { positions, faces } = this; return positions .map((pos) => `v ${pos.join(" ")}`) .concat(faces.map((face) => `f ${face.map((v) => v + 1).join(" ")}`)) .join("\n"); } // Generates triangular faces for non-triangle meshes *triangleFaces() { for (let f of this.faces) { if (f.length == 3) yield f; else { for (let i = 2; i < f.length; i++) { yield [f[0], f[i - 1], f[i]]; } } } } computeEdges() { let { faces } = this; let edges = []; for (let cell of faces) { let i = cell[cell.length - 1]; for (let j of cell) { if (i < j) edges.push([i, j]); i = j; } } this.edges = edges; } computeFaceCentersNormalsAndSizes() { let { positions, faces } = this; let normals = []; let centers = []; let sizes = []; for (let cell of faces) { let vtx = cell.map((i) => positions[i]); let [a, b, c, ...rest] = vtx; let u = vec3.sub([], b, a); let v = vec3.sub([], c, b); normals.push(vec3.normalize([], vec3.cross([], u, v))); let center = vec3.scale( [], vtx.reduce((a, b) => vec3.add([], a, b)), 1 / vtx.length ); centers.push(center); sizes.push((vec3.dist(center, a) + vec3.dist(center, b)) / 2); } this.faceNormals = normals; this.faceCenters = centers; this.faceSizes = sizes; } computeVertexNormals() { let { positions, faces, faceNormals } = this; let normal = []; let iface = 0; for (let face of faces) { for (let ivertex of face) { if (normal[ivertex]) { vec3.add(normal[ivertex], normal[ivertex], faceNormals[iface]); } else { normal[ivertex] = [...faceNormals[iface]]; } } iface++; } for (let i = 0; i < normal.length; i++) normal[i] = vec3.normalize([], normal[i]); this.vertexNormals = normal; } computeBox() { let vtx = this.positions; let min = [Number.MAX_VALUE, Number.MAX_VALUE, Number.MAX_VALUE]; let max = [Number.MIN_VALUE, Number.MIN_VALUE, Number.MIN_VALUE]; for (let p of vtx) { for (let i of [0, 1, 2]) { min[i] = Math.min(min[i], p[i]); max[i] = Math.max(max[i], p[i]); } } let center = [0, 1, 2].map((i) => (min[i] + max[i]) / 2); let size = [0, 1, 2] .map((i) => max[i] - min[i]) .reduce((a, b) => Math.max(a, b)); let radius = vec3.dist(center, max); Object.assign(this, { center, size, radius, min, max }); } }35:Te6e,// @returns the subdivision of an input mesh // @mesh - an object containing positions, array of points, each a 3-coordinate array, and // faces, an array of face circulations, each an array with n indices of positions // @param catmull - if true, perform catmull-clarks subdivision, otherwise, regular (flat) subdivision // @param repeat - how many iterations to perform subdivide = function (mesh, catmull = true, repeat = 1) { let {positions,faces} = mesh; while (repeat--) { let ds = HalfedgeDS.fromFaces(faces); // Function to sum an array of points let sum = pts => pts.reduce((p,q) => [p[0]+q[0],p[1]+q[1],p[2]+q[2]]); // Function to average an array of points let avg = pts => sum(pts).map (x => x / pts.length); // Multiplies all elements of v by s let scale = (v,s) => v.map(x => x * s); // Build face midpoints let facePoints = ds.face.map( (he,iface) => avg ([...ds.faceCirculator(iface)].map(he => positions[he.v])) ); // Function to map an edge (a halfedge and its twin) to the edge midpoint let edgeToMidpoint = (he,twin) => avg([positions[he.v],positions[twin.v]]); // Function to map an edge to its catmull-clark new position, which takes // into account the neighboring center points of neighbor points let edgeToSubdivisionPoint = //(he,twin) => avg([positions[he.v],positions[twin.v],facePoints[he.f],facePoints[twin.f]]); (he,twin) => sum([scale(positions[he.v],0.25), scale(positions[twin.v],0.25), scale(facePoints[he.f],0.25), scale(facePoints[twin.f],0.25)]); // Compute all edge points let edgePoints = []; let edgeMidPoints = [] ds.halfedge.forEach ( he => { let twin = ds.halfedge[he.twin] if (he.v < twin.v) { // Process each edge only once he.iEdgePoint = twin.iEdgePoint = edgePoints.length; let midpoint = edgeToMidpoint(he,twin) edgeMidPoints.push (midpoint) if (catmull) edgePoints.push (edgeToSubdivisionPoint(he,twin)); else edgePoints.push(midpoint) } }); // Compute the new position of vertex v in a Catmull-Clark subdivision let newPosition = ivertex => { let incidentHalfedges = [...ds.vertexCirculator(ivertex)]; let incidentFacePoints = incidentHalfedges.map(he=>facePoints[he.f]); let incidentEdgePoints = incidentHalfedges.map(he=>edgeMidPoints[he.iEdgePoint]); let n = incidentHalfedges.length; // return sum ([scale(positions[ivertex], (n-3)/n), // scale(avg(incidentFacePoints), 1/n), // scale(avg(incidentEdgePoints), 2/n)]) return sum ([scale(positions[ivertex], (n-3)/n), scale(avg(incidentFacePoints), 1/n), scale(avg(incidentEdgePoints), 2/n)]) } // Array with the new positions of the original vertices let newPositions = (catmull ? positions.map((d,i) => newPosition(i)) : positions); // Compute the new face circulations let n = positions.length; let m = edgePoints.length; newPositions = newPositions.concat(edgePoints).concat(facePoints); let newFaces = []; ds.face.forEach((he,i) => { let edgeIndices = [] for (let he of ds.faceCirculator(i)) edgeIndices.push(he.iEdgePoint+n, he.v,); let ne = edgeIndices.length; for (let k = 0; k < edgeIndices.length; k+= 2) { newFaces.push([i+n+m,edgeIndices[k],edgeIndices[(k+1)%ne],edgeIndices[(k+2)%ne]]); } }) positions = newPositions; faces = newFaces; } return new Mesh (positions,faces) }36:T103a,function extendedCatmull( mesh, wf = 0, we = 0, wp = 0, w1 = 0, w2 = 0, w3 = 0, w4 = 0 ) { let { positions, faces, faceNormals, vertexNormals, faceCenters, faceSizes } = mesh; let ds = HalfedgeDS.fromFaces(faces); // Build face points, but first check if we are using eq (4) from Hansmeyers paper or eq(1). // Eq 4 requires all faces to be quads already and is worth computing only if w3 or w4 are not 0 const fancyMidPoints = (w3 != 0 || w4 != 0) && faces.length != 6 && faces.map((f) => f.length == 4).reduce((a, b) => a && b); let newPositions = fancyMidPoints ? faces.map((face, iface) => { let [F, E1, V, E2] = face.map((i) => positions[i]); let fvterm = vec3.add( [], vec3.scale([], V, 1 + w3), vec3.scale([], F, 1 - w3) ); let eterm = vec3.add([], E1, E2); let center = vec3.scale( [], vec3.add( [], vec3.scale([], fvterm, 1 + w4), vec3.scale([], eterm, 1 - w4) ), 0.25 ); return vec3.add( [], center, vec3.scale([], faceNormals[iface], wf * faceSizes[iface]) ); }) : faceCenters.map((center, iface) => vec3.add( [], center, vec3.scale([], faceNormals[iface], wf * faceSizes[iface]) ) ); let nFacePoints = newPositions.length; // Build edge points ds.halfedge.forEach((he) => { let twin = ds.halfedge[he.twin]; if (he.v < twin.v) { // Process each edge only once he.iEdgePoint = twin.iEdgePoint = newPositions.length; let f1 = newPositions[he.f]; let f2 = newPositions[twin.f]; let p1 = positions[he.v]; let p2 = positions[twin.v]; let ne = vec3.normalize( [], vec3.add([], faceNormals[he.f], faceNormals[twin.f]) ); let edgePoint = vec3.add( [], vec3.scale( [], vec3.add( [], vec3.scale([], vec3.add([], f1, f2), 1 + w1), vec3.scale([], vec3.add([], p1, p2), 1 - w1) ), 0.25 ), vec3.scale([], ne, 0.5 * we * (faceSizes[he.f] + faceSizes[twin.f])) ); newPositions.push(edgePoint); } }); // Build new vertex positions let m = newPositions.length; // Remember index where we started storing new vertex positions let nEdgePoints = m - nFacePoints; let debug = []; ds.vertex.forEach((he, i) => { let p = positions[he.v]; let F = [0, 0, 0]; let E = [0, 0, 0]; let n = 0; // Number of edges around vertex let avgSize = 0; for (let edgeHe of ds.vertexCirculator(i)) { vec3.add( E, E, vec3.lerp([], p, positions[ds.halfedge[edgeHe.twin].v], 0.5) ); vec3.add(F, F, faceCenters[edgeHe.f]); avgSize += faceSizes[edgeHe.f]; n++; } vec3.scale(E, E, 1 / n); vec3.scale(F, F, 1 / n); avgSize /= n; he.iVertexPoint = newPositions.length; let vp = vec3.scale([], F, 1 + w2); vec3.add(vp, vp, vec3.scale([], E, 2 * (1 - w2 / 2))); vec3.add(vp, vp, vec3.scale([], p, n - 3)); vec3.scale(vp, vp, 1 / n); vec3.add(vp, vp, vec3.scale([], vertexNormals[i], wp)); newPositions.push(vp); }); let nVertexPoints = newPositions.length - m; // console.log({ // wf, // we, // wp, // w1, // w2, // w3, // w4, // nFacePoints, // fp: newPositions.slice(0, nFacePoints), // nEdgePoints, // ep: newPositions.slice(nFacePoints, m), // nVertexPoints, // vp: newPositions.slice(m) // }); let newFaces = []; ds.face.forEach((he, i) => { let edgeIndices = []; for (let he of ds.faceCirculator(i)) edgeIndices.push(he.iEdgePoint, he.v + m); let ne = edgeIndices.length; for (let k = 0; k < ne; k += 2) { newFaces.push([ i, edgeIndices[k], edgeIndices[(k + 1) % ne], edgeIndices[(k + 2) % ne] ]); } }); let result = new Mesh(newPositions, newFaces); result.debug = debug; return result; }37:Te11,// @returns the Doo-Sabin subdivision of an input mesh // @mesh - an object containing positions, array of points, each a 3-coordinate array, and // faces, an array of face circulations, each an array with n indices of positions // @param bias - biases the weighting for the new vertices: 0 yields the normal doo-sabin weights, // a positive value yields smaller vertex and edge faces, while a negative value // yields larger vertex and edge faces. dooSabin = function (mesh,bias = 0) { let {positions,faces} = mesh; let ds = HalfedgeDS.fromFaces(faces); // Function to sum an array of points let sum = pts => pts.reduce((p,q) => [p[0]+q[0],p[1]+q[1],p[2]+q[2]]); // Function to average an array of points let avg = pts => sum(pts).map (x => x / pts.length); // Build face midpoints let faceMidPoints = ds.face.map( (he,iface) => avg ([...ds.faceCirculator(iface)].map(he => positions[he.v])) ); // Function to map an edge (a halfedge and its twin) to the edge midpoint let edgeToMidpoint = (he,twin) => vec3.lerp([], positions[he.v], positions[twin.v], 0.5); // Compute all edge midpoints ds.halfedge.forEach ( he => { let twin = ds.halfedge[he.twin] if (he.v < twin.v) { // Process each edge only once let midPoint = edgeToMidpoint(he,twin) he.midPoint = twin.midPoint = midPoint } }); // Compute new faces let newPositions = [], newFaces = []; // The face point averaging function let facePointFunc = bias == 0 ? (fp,vp,e1,e2) => avg([fp,vp,e1,e2]) : bias < 0 ? (fp,vp,e1,e2) => vec3.lerp([], vec3.lerp([],vp,fp,0.5-bias), vec3.lerp([],e1,e2,0.5), 0.5+bias) : (fp,vp,e1,e2) => vec3.lerp([], vec3.lerp([],fp,vp,0.5+bias), vec3.lerp([],e1,e2,0.5), 0.5-bias); // Shrunk faces (one for each original face) ds.face.forEach((heface,iface) => { let newFace = []; for (let he of ds.faceCirculator(iface)) { let iNewFacePoint = newPositions.length; newFace.push (iNewFacePoint); let facePoint = faceMidPoints[iface]; let edgeMidPoint1 = he.midPoint; let vertexPoint = positions[he.v]; let edgeMidPoint2 = ds.halfedge[he.next].midPoint; let newFacePoint = facePointFunc (facePoint,vertexPoint,edgeMidPoint1,edgeMidPoint2); he.iFacePoint = iNewFacePoint; newPositions.push (newFacePoint); } newFaces.push (newFace) }) // Edge faces (one for each original edge) ds.halfedge.forEach ( he => { let twin = ds.halfedge[he.twin] if (he.v < twin.v) { // Process each edge only once let hePrev = ds.halfedge[he.prev]; let twinPrev = ds.halfedge[twin.prev]; newFaces.push([ he.iFacePoint, hePrev.iFacePoint, twin.iFacePoint, twinPrev.iFacePoint ]); } }); // Vertex faces (one for each original vertex) ds.vertex.forEach ( (he,i) => { let newFace = []; for (let vtxHe of ds.vertexCirculator (i)) { newFace.push (vtxHe.iFacePoint); } newFaces.push (newFace) }); return new Mesh(newPositions, newFaces); }38:T425,// Computes the dual of a mesh // @mesh - an object containing positions, array of points, each a 3-coordinate array, and // faces, an array of face circulations, each an array with n indices of positions dual = function (mesh) { let {positions,faces} = mesh; let ds = HalfedgeDS.fromFaces(faces); // Function to sum an array of points let sum = pts => pts.reduce((p,q) => [p[0]+q[0],p[1]+q[1],p[2]+q[2]]); // Function to average an array of points let avg = pts => sum(pts).map (x => x / pts.length); // Build face midpoints let faceMidPoints = ds.face.map( (he,iface) => avg ([...ds.faceCirculator(iface)].map(he => positions[he.v])) ); // Compute new faces let newPositions = faceMidPoints, newFaces = []; // Vertex faces (one for each original vertex) ds.vertex.forEach ( (he,i) => { let newFace = []; for (let vtxHe of ds.vertexCirculator (i)) { newFace.push (vtxHe.f); } newFaces.push (newFace) }); return new Mesh (newPositions, newFaces); }39:Ta0b,// @returns the 'cut corner' subdivision of an input mesh // @mesh - an object containing positions, array of points, each a 3-coordinate array, and // faces, an array of face circulations, each an array with n indices of positions // @param amount - how far from each edge endpoint is the cut made cutCorners = function (mesh,amount = 0.5) { let {positions,faces} = mesh; let ds = HalfedgeDS.fromFaces(faces); // Function to sum an array of points let sum = pts => pts.reduce((p,q) => [p[0]+q[0],p[1]+q[1],p[2]+q[2]]); // Function to average an array of points let avg = pts => sum(pts).map (x => x / pts.length); // Multiplies all elements of v by s let scale = (v,s) => v.map(x => x * s); // Build face midpoints let faceMidPoints = ds.face.map( (he,iface) => avg ([...ds.faceCirculator(iface)].map(he => positions[he.v])) ); // Function to map an edge (a halfedge and its twin) to the edge midpoint let edgeToMidpoint = (he,twin) => avg([positions[he.v],positions[twin.v]]); // Compute all edge cut corners let newPositions = []; ds.halfedge.forEach ( he => { let twin = ds.halfedge[he.twin] if (he.v < twin.v) { // Process each edge only once let [a,b] = [positions[he.v],positions[twin.v]] //let midPoint = avg([positions[he.v],positions[twin.v]]); let i = newPositions.length; // newPositions.push (avg([positions[he.v],midPoint]), // avg([positions[twin.v],midPoint])); if (amount >= 0.5) { newPositions.push (vec3.lerp([],a,b,0.5)); he.cut1 = twin.cut2 = he.cut2 = twin.cut1 = i; } else { newPositions.push (vec3.lerp([],a,b,amount), vec3.lerp([],b,a,amount)); he.cut1 = twin.cut2 = i; he.cut2 = twin.cut1 = i+1; } } }); // Compute new faces let newFaces = []; // Shrunk faces (one for each original face) ds.face.forEach((heface,iface) => { let newFace = []; for (let he of ds.faceCirculator(iface)) { newFace.push (he.cut2); if (amount < 0.5) newFace.push (he.cut1); } newFaces.push (newFace) }) //return {positions:newPositions, cells:newFaces}; // Vertex faces (one for each original vertex) ds.vertex.forEach ( (he,i) => { let newFace = []; for (let vtxHe of ds.vertexCirculator (i)) { newFace.push (vtxHe.cut1); } newFaces.push (newFace) }); return new Mesh (newPositions, newFaces); }3a:T9fe,// @returns the 'extrude center' subdivision of an input mesh // @mesh - an object containing positions, array of points, each a 3-coordinate array, and // faces, an array of face circulations, each an array with n indices of positions // @param amount - ratio with respect to the average radius of the face used to displace face centers // in the direction of the face normals extrudeCenters = function (mesh,amount=1/Math.sqrt(2),bias=1) { let {positions,faces} = mesh; let ds = HalfedgeDS.fromFaces(faces); // Function to sum an array of points let sum = pts => pts.reduce((p,q) => [p[0]+q[0],p[1]+q[1],p[2]+q[2]]); // Function to average an array of points let avg = pts => sum(pts).map (x => x / pts.length); // Multiplies all elements of v by s let scale = (v,s) => v.map(x => x * s); // Build face midpoints and face normals let newPositions = positions.slice(0); let normals = [], centers = []; let radii = [], minRadius = Number.MAX_VALUE, maxRadius = Number.MIN_VALUE; let faceMid = []; ds.face.forEach ( (he,iface) => { let nvtx = 0; let distSum = 0; let faceMidPoint = avg ([...ds.faceCirculator(iface)].map(he => positions[he.v])); for (let vtxhe of ds.faceCirculator(iface)) { let p = positions[vtxhe.v]; nvtx++; distSum += vec3.dist(p,faceMidPoint) } let radius = distSum / nvtx; minRadius = Math.min (minRadius,radius); maxRadius = Math.max (maxRadius,radius); radii.push (radius) let a = positions[he.v]; let b = positions[ds.halfedge[he.next].v]; let normal = (vec3.normalize([],vec3.cross([],vec3.sub([],a,b),vec3.sub([],b,faceMidPoint)))); normals.push (normal); centers.push (faceMidPoint) } ); let biasFunc = radiusBias (minRadius,maxRadius,bias); ds.face.forEach ( (he,iface) => { faceMid [iface] = newPositions.length; newPositions.push(vec3.add([], centers[iface], vec3.scale([], normals[iface], biasFunc(radii[iface])*amount))) } ); // Compute new faces let newFaces = []; // Face "umbrellas": a triangle fan for each original face ds.face.forEach((heface,iface) => { let mid = faceMid [iface]; for (let he of ds.faceCirculator(iface)) { let twin = ds.halfedge[he.twin] newFaces.push ([mid,twin.v, he.v]); } }) return new Mesh(newPositions, newFaces); }3b:Tb51,// @returns the 'extrude Face' subdivision of an input mesh // @mesh - an object containing positions, array of points, each a 3-coordinate array, and // faces, an array of face circulations, each an array with n indices of positions // @param shift - ratio with respect to the average radius of the face. Used to displace faces // in the direction of the face normals // @param scale - relative size of the extruded face with respect to the original face extrudeFaces = function (mesh,shift=1/Math.sqrt(2),scale=0.5,bias = 0) { let {positions,faces} = mesh; let ds = HalfedgeDS.fromFaces(faces); // Function to sum an array of points let sum = pts => pts.reduce((p,q) => [p[0]+q[0],p[1]+q[1],p[2]+q[2]]); // Function to average an array of points let avg = pts => sum(pts).map (x => x / pts.length); // Build face midpoints and face normals let newPositions = positions.slice(0); let midPoints = []; let normals = []; let radii = [], minRadius = Number.MAX_VALUE, maxRadius = Number.MIN_VALUE; ds.face.forEach ( (he,iface) => { let nvtx = 0; let distSum = 0; let faceMidPoint = avg ([...ds.faceCirculator(iface)].map(he => positions[he.v])); midPoints.push(faceMidPoint); for (let vtxhe of ds.faceCirculator(iface)) { let p = positions[vtxhe.v]; nvtx++; distSum += vec3.dist(p,faceMidPoint) } let radius = distSum / nvtx; radii.push (radius); minRadius = Math.min (minRadius,radius); maxRadius = Math.max (maxRadius,radius); let a = positions[he.v]; let b = positions[ds.halfedge[he.next].v]; let normal = (vec3.normalize([],vec3.cross([],vec3.sub([],a,b),vec3.sub([],b,faceMidPoint)))); normals.push (normal); } ); // Compute new faces let newFaces = []; let biasFunc = radiusBias (minRadius,maxRadius,bias); // Face "plateaux": a new face for each original face connected to the original edges by rectangular faces ds.face.forEach((heface,iface) => { let normal = normals [iface]; vec3.scale(normal, normal, biasFunc(radii[iface])*shift) let mid = midPoints[iface]; let newFace = []; let n = 0; // The plateau face for (let he of ds.faceCirculator(iface)) { let p = positions[he.v]; let u = vec3.sub([],p,mid); u = vec3.scale ([], u, scale); p = vec3.add([], mid, u); let newVertex = vec3.add([], p, normal); newFace.push (newPositions.length); newPositions.push (newVertex); n++ } newFaces.push(newFace); // The connecting rectangles let i = 0; for (let he of ds.faceCirculator(iface)) { newFaces.push([he.v,newFace[i], newFace[(i+n-1)%n], ds.halfedge[he.prev].v]) i++; } }) return new Mesh(newPositions, newFaces); }3c:[{"id":"915c790fce8b2db07a41b8a39c14af6639d492704567f58e8bd76e4662428c128f48d613fe90ab84f94807d35a055b502cc5d857d2b016eac7b669971309a5b9","href":"https://static.observableusercontent.com/files/915c790fce8b2db07a41b8a39c14af6639d492704567f58e8bd76e4662428c128f48d613fe90ab84f94807d35a055b502cc5d857d2b016eac7b669971309a5b9","name":"demo2.png","type":"image/png","lastModified":1608059089933.489,"size":151384},{"id":"9b43d85b6f8b5532d8f34899c52b86a3763fca2935d0bd1e4194f20f7137040b30a5f5b85ad0f3c3a306d89e7e1c375eb13ca0743295404d43b12d58f7e4d6ba","href":"https://static.observableusercontent.com/files/9b43d85b6f8b5532d8f34899c52b86a3763fca2935d0bd1e4194f20f7137040b30a5f5b85ad0f3c3a306d89e7e1c375eb13ca0743295404d43b12d58f7e4d6ba","name":"demo3.png","type":"image/png","lastModified":1608059089948.003,"size":183413},{"id":"def3453290a49a9d9906714cb8289524378c1dff7c4d82737262f71b7accf5fc43f2d0b8f0a07050e80d86d35ad05b356e950a67d2cdf54383fddee2f7504721","href":"https://static.observableusercontent.com/files/def3453290a49a9d9906714cb8289524378c1dff7c4d82737262f71b7accf5fc43f2d0b8f0a07050e80d86d35ad05b356e950a67d2cdf54383fddee2f7504721","name":"demo4.png","type":"image/png","lastModified":1608059089947.037,"size":184742},{"id":"1d67742c12b0318f6d80d9869dd5fc79d1b7a22e795203543edfbdc096435cbbd5c9fb8ded51a0f6abf5872dc471d97f7273d180243f3b1eedd698fe690d2d9d","href":"https://static.observableusercontent.com/files/1d67742c12b0318f6d80d9869dd5fc79d1b7a22e795203543edfbdc096435cbbd5c9fb8ded51a0f6abf5872dc471d97f7273d180243f3b1eedd698fe690d2d9d","name":"demo5.png","type":"image/png","lastModified":1608059089942.144,"size":169935},{"id":"d45be435c1485dfaafd42ec90f367db8653b6427ec8198abf567fb9811f325b561c3f993b5d94735182e6c000a447f5a7cc71276023d17ad77d51085306ec203","href":"https://static.observableusercontent.com/files/d45be435c1485dfaafd42ec90f367db8653b6427ec8198abf567fb9811f325b561c3f993b5d94735182e6c000a447f5a7cc71276023d17ad77d51085306ec203","name":"demo1.png","type":"image/png","lastModified":1608059090950.971,"size":93000}] 2d:{"id":"21a764bb17a81fd5","slug":"platonic-solids-playground","title":"Platonic Solids Playground","thumbnail":"e515b5d5ddefe697ac83350d57721554f1aa89237f55a45c50e9926ba21d9797","access_level":"public","create_time":"$D2020-12-08T22:35:24.373Z","update_time":"$D2024-12-28T01:09:26.369Z","view_time":null,"first_public_time":"$D2020-12-15T19:31:25.333Z","has_unpublished_edits":null,"fork":{"id":"41273687c60bc183","slug":"catmull-clark-subdivision","title":"Catmull Clark Subdivision","owner":{"id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança"}},"stars":34,"starred":false,"owner":{"type":"team","id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":"starter_2024"},"version":924,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}],"members":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null,"role":"editor"}],"comments":[{"id":"2a417a7d46d609df","reply_to_id":null,"content":"This is beautiful, I would love to have the possibility to download the 3D object :)","create_time":"$D2021-01-27T09:18:38.240Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"74ba28d55f9f5425","login":"guiq","name":"Guillaume Quet","avatar_url":"https://avatars-next.observableusercontent.com/e3615608d84ea4ccd13ed87e0dee872cb08d8f9474d6fd162a3834c34c56470c","tier":null}},{"id":"6090ccaebed60894","reply_to_id":"2a417a7d46d609df","content":"I hear you, sir. Check the \"save mesh as .obj\" button below...","create_time":"$D2021-01-27T15:00:29.687Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"e0d24a292dccabae","slug":"computacao-grafica","title":"Computer Graphics","owner":{"id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança"}},"type":"notebook","body":{"title":"Platonic Solids Playground","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"md`## The playground`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"canvas = {\n let canvas = html`