2d:null 2e:["$","title",null,{"children":"Plateau | Vinícius Mello | Observable"}] 33:Te2a,viewof ctrlPoints = { let height = 500; let svgNode = DOM.svg(width,height); svgNode.value = initialCtrlPoints; let svg = d3.select(svgNode); let grid = []; const scale = 80; let iso = isometricProjection(width,height,scale); for(let i=-2;i<=2;++i) { for(let j=-2;j<=2;++j) { grid.push(iso.proj(i,j,0)); } } let rangePoints = R.range(0,initialCtrlPoints.length); svg.selectAll(".grid").data(grid).enter().append("circle") .attr("cx", d => d[0]) .attr("cy", d => d[1]) .attr("r", "2px"); let projCtrlPoints = R.map( p => iso.proj(p[0],p[1],0), initialCtrlPoints); let ctrlPointsSvg = svg.selectAll(".controlPoint").data(rangePoints) .enter().append("circle") .attr("class",".controlPoint") .attr("cx", d => projCtrlPoints[d][0] ) .attr("cy", d => projCtrlPoints[d][1] ) .attr("r", "8px") .call(d3.drag() .on("drag", dragged) .on("end", function() { // d3.event.sourceEvent.stopPropagation(); // silence other listeners }) ).on("click",clicked); let planeCurve = svg.append("path") .datum(projCtrlPoints) .attr("d", d3.line().curve(d3.curveCardinalClosed.tension(0.0))) .attr("fill","none") .attr("stroke","black"); let pointHeights = R.map( t => 0.8, initialCtrlPoints); let projSpaceCurve = R.map( d => [projCtrlPoints[d][0],projCtrlPoints[d][1]-scale*pointHeights[d]] ,rangePoints); let ctrlHeightsSvg = svg.selectAll(".controlPoint").data(rangePoints) .enter().append("circle") .attr("id", d => `ctrlHeight${d}`) .attr("class",".controlPoint") .attr("cx", d => projSpaceCurve[d][0]) .attr("cy", d => projSpaceCurve[d][1]) .attr("r", "8px") .attr("fill", "red") .call(d3.drag() .on("drag", draggedHeights) .on("end", function() { // d3.event.sourceEvent.stopPropagation(); // silence other listeners })); let spaceCurve = svg.append("path") .datum(projSpaceCurve) .attr("d", d3.line().curve(d3.curveCardinalClosed.tension(0.0))) .attr("fill","none") .attr("stroke","red"); function dragged(d) { let su = d3.event.x; let sv = d3.event.y; let p = iso.inv(su,sv,0); initialCtrlPoints[d][0] = p[0]; initialCtrlPoints[d][1] = p[1]; projCtrlPoints[d][0] = su; projCtrlPoints[d][1] = sv; projSpaceCurve[d][0] = projCtrlPoints[d][0]; projSpaceCurve[d][1] = projCtrlPoints[d][1]-scale*pointHeights[d]; planeCurve.attr("d", d3.line().curve(d3.curveCardinalClosed.tension(0.0))); spaceCurve.attr("d", d3.line().curve(d3.curveCardinalClosed.tension(0.0))); d3.select(`#ctrlHeight${d}`) .attr("cx", projSpaceCurve[d][0]) .attr("cy", projSpaceCurve[d][1]); d3.select(this) .attr('cx', su) .attr('cy', sv); svgNode.value = {pts: initialCtrlPoints, heights: pointHeights}; svgNode.dispatchEvent(new CustomEvent("input")); } function draggedHeights(d) { let su = d3.event.x; let sv = d3.event.y; pointHeights[d] = (projCtrlPoints[d][1]-sv)/scale; projSpaceCurve[d][0] = projCtrlPoints[d][0]; projSpaceCurve[d][1] = projCtrlPoints[d][1]-scale*pointHeights[d]; spaceCurve.attr("d", d3.line().curve(d3.curveCardinalClosed.tension(0.0))); d3.select(this) .attr('cy', sv); svgNode.value = {pts: initialCtrlPoints, heights: pointHeights}; svgNode.dispatchEvent(new CustomEvent("input")); } function clicked(d) { } svgNode.value = {pts: initialCtrlPoints, heights: pointHeights}; return svgNode; }34:T719,viewof triangulation = { let height = 500; let svgNode = DOM.svg(width,500); let svg = d3.select(svgNode); let cu = cardinalSplineClosed(0.0,ctrlPoints.pts); let cuz = cardinalSplineClosed(0.0,ctrlPoints.heights); let border = []; let z = []; for(let t=0;t [100*p[0]+width/2,height/2-100*p[1]] ,border); let [xb,yb] = R.transpose(borderTrans); let [x,y] = R.transpose(border); for(let i=-2;i<=2;i+=1/subdivision) { for(let j=-2;j<=2;j+=1/subdivision) { if(insidePolygon(x,y,i,j)) border.push([i,j]); } } let trans = R.map( p => [100*p[0]+width/2,height/2-100*p[1]] ,border); const delaunay = Delaunay.from(trans); let triangulation = {}; triangulation.triangles = []; let g = svg.append("g") .attr("stroke","black") .attr("fill","none"); for (let i = 0, n = delaunay.triangles.length / 3; i < n; ++i) { let [u,v,w] = delaunay.triangles.slice(3*i,3*i+3); let bx = (delaunay.points[2*u]+delaunay.points[2*v]+delaunay.points[2*w])/3.0; let by = (delaunay.points[2*u+1]+delaunay.points[2*v+1]+delaunay.points[2*w+1])/3.0; if(insidePolygon(xb,yb,bx,by)) { g.append("path") .attr("d", delaunay.renderTriangle(i)); triangulation.triangles.push([u,v,w]); } } triangulation.nb = x.length; for(let l=triangulation.nb;l` let points = []; let points2d = []; for(let i=0;i new seen.Surface(R.map(i => points[i] ,coord)) ,coordinateMap); return surfaces } let planeMesh = new seen.Shape('plane', mapPointsToSurfaces(points2d, triangulation.triangles)); let mesh = new seen.Shape('plateau', mapPointsToSurfaces(points, triangulation.triangles)); seen.Colors.randomSurfaces2(mesh) let scene = new seen.Scene({ model : seen.Models.default().add(mesh).add(planeMesh), viewport : seen.Viewports.center(width, height) }); mesh.rotx(-Math.PI/3) planeMesh.rotx(-Math.PI/3) let context = new seen.CanvasRenderContext(canvas); context.sceneLayer(scene); scene.camera.scale(100); scene.cullBackfaces = false; context.render(); let dragger = new seen.Drag(canvas, {inertia : true}); dragger.on('drag.rotate', (e) => { let xform = seen.Quaternion.xyToTransform(...e.offsetRelative); mesh.transform(xform); planeMesh.transform(xform); context.render(); }); let gradArea = R.map( x => 0, triangulation.z); let ctx = canvas.getContext("2d"); ctx.font = "30px Arial"; let form = d3.format(".4f"); let params = { maxIterations: 50, learnRate: 0.1, history: [] }; function f(zt,grad) { let r = meshArea(triangulation.x,triangulation.y,zt,triangulation.triangles); triangleAreaGrad(triangulation.x,triangulation.y,zt,triangulation.triangles,gradArea); for(let i=0;i surf.dirty = true); context.render(); } let area = meshArea(triangulation.x,triangulation.y,triangulation.z,triangulation.triangles); ctx.fillText(`Area=${form(area)}`,50,50); yield canvas; } }36:[] 31:{"id":"32f837b8ee1e69e3","slug":"plateau","title":"Plateau","thumbnail":"da8aff1fe208abc27de562c2be1cbd9cd68414e3f765736b239e1df67aa30240","access_level":"public","create_time":"$D2018-12-09T16:09:11.527Z","update_time":"$D2018-12-17T23:56:45.097Z","view_time":null,"first_public_time":"$D2018-12-10T01:25:09.440Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7a4ecd430a93cd6f","login":"vinicius-mello","name":"Vinícius Mello","avatar_url":"https://avatars-next.observableusercontent.com/b5d4671aa488d8bcb984f575f985332403cde5f63942ea883a6a1a630941ec05","tier":"starter_2024"},"version":510,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ecc4854ab7ad95b6","login":"vinicius-mello","name":"Vinícius Mello","avatar_url":"https://avatars-next.observableusercontent.com/b5d4671aa488d8bcb984f575f985332403cde5f63942ea883a6a1a630941ec05","tier":null}],"members":[{"type":"individual","id":"ecc4854ab7ad95b6","login":"vinicius-mello","name":"Vinícius Mello","avatar_url":"https://avatars-next.observableusercontent.com/b5d4671aa488d8bcb984f575f985332403cde5f63942ea883a6a1a630941ec05","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Plateau","cells":[{"id":0,"value":"md`# Plateau`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"viewof subdivision = slider({\n min: 2, \n max: 20, \n step: 1,\n value: 5,\n title: \"subdivision\"\n\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"debug = ({\n error: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"initialCtrlPoints = {\n return R.map( t => [Math.cos(2*Math.PI*t/8),Math.sin(2*Math.PI*t/8)], R.range(0,8));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"// https://stackoverflow.com/questions/217578/how-can-i-determine-whether-a-2d-point-is-within-a-polygon\nfunction insidePolygon(x,y,px,py) {\n let [i, j, c] = [0, 0, 0];\n let nvert = x.length;\n for (i = 0, j = nvert-1; i < nvert; j = i++) {\n if ( ((y[i]>py) != (y[j]>py)) &&\n (px < (x[j]-x[i]) * (py-y[i]) / (y[j]-y[i]) + x[i]) )\n c = !c;\n }\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"function triangleArea2d(x,y,i,j,k) {\n let A = 0.5*((x[j]*y[k]-x[k]*y[j])-(x[i]*y[k]-x[k]*y[i])+(x[j]*y[j]-x[j]*y[i]));\n return A;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"function triangleArea(x,y,z,i,j,k) {\n let dij = Math.sqrt((x[i]-x[j])**2+(y[i]-y[j])**2+(z[i]-z[j])**2);\n let dik = Math.sqrt((x[i]-x[k])**2+(y[i]-y[k])**2+(z[i]-z[k])**2);\n let djk = Math.sqrt((x[j]-x[k])**2+(y[j]-y[k])**2+(z[j]-z[k])**2);\n //Heron's Formula\n let A = 1.0/4.0*Math.sqrt((dij+dik+djk)*(-dij+dik+djk)*(dij-dik+djk)*(dij+dik-djk));\n //let dij2 = ((x[i]-x[j])**2+(y[i]-y[j])**2+(z[i]-z[j])**2);\n //let dik2 = ((x[i]-x[k])**2+(y[i]-y[k])**2+(z[i]-z[k])**2);\n //let djk2 = ((x[j]-x[k])**2+(y[j]-y[k])**2+(z[j]-z[k])**2);\n //Buchholz's Formula\n //let A = 1.0/4.0*Math.sqrt(dij2*(-dij2+dik2+djk2)+dik2*(dij2-dik2+djk2)+djk2*(dij2+dik2-djk2)); \n return A;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"function triangleBaryZ(x,y,z,i,j,k) {\n let bz = ((z[i]+z[j]+z[k])/3.0 )*triangleArea(x,y,z,i,j,k);\n return bz;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"function triangleAreaDi(x,y,z,i,j,k) {\n let dij2 = ((x[i]-x[j])**2+(y[i]-y[j])**2+(z[i]-z[j])**2);\n let dik2 = ((x[i]-x[k])**2+(y[i]-y[k])**2+(z[i]-z[k])**2);\n let djk2 = ((x[j]-x[k])**2+(y[j]-y[k])**2+(z[j]-z[k])**2);\n let A = triangleArea(x,y,z,i,j,k);\n let Ai = 1.0/(8.0*A)*((z[i]-z[j])*(djk2-dij2+dik2)+(z[i]-z[k])*(djk2+dij2-dik2));\n return Ai;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"function triangleBaryZDi(x,y,z,i,j,k) {\n let bzi = triangleArea(x,y,z,i,j,k) + (z[i]+z[j]+z[k])*triangleAreaDi(x,y,z,i,j,k); \n bzi = bzi/3.0;\n return bzi;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"function triangleAreaGrad(x,y,z,tri,grad) {\n grad.fill(0);\n tri.forEach( (t) => {\n let [i,j,k] = t;\n for(let l=0;l<3;++l) {\n grad[i] += triangleAreaDi(x,y,z,i,j,k);\n [i,j,k] = [j,k,i];\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"function triangleBaryZGrad(x,y,z,tri,grad) {\n grad.fill(0);\n tri.forEach( (t) => {\n let [i,j,k] = t;\n for(let l=0;l<3;++l) {\n grad[i] += triangleBaryZDi(x,y,z,i,j,k);\n [i,j,k] = [j,k,i];\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"function meshArea(x,y,z,tri) {\n let area = 0;\n tri.forEach( (t) => {\n let [i,j,k] = t;\n area += triangleArea(x,y,z,i,j,k);\n });\n return area;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"function meshBaryZ(x,y,z,tri) {\n let area = 0;\n let bz = 0;\n tri.forEach( (t) => {\n let [i,j,k] = t;\n let a = triangleArea(x,y,z,i,j,k);\n area += a;\n bz += triangleBaryZ(x,y,z,i,j,k); \n });\n return bz/area;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"function meshBaryZArea(x,y,z,tri) {\n let bz = 0;\n tri.forEach( (t) => {\n let [i,j,k] = t;\n bz += triangleBaryZ(x,y,z,i,j,k); \n });\n return bz;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"function area(x,y,z,tri) {\n let sum = 0.0;\n tri.forEach( (t) => {\n let [i,j,k] = t;\n sum += triangleArea(x,y,z,i,j,k);\n });\n return sum;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"import {cardinalSplineClosed} from \"@vinicius-mello/cubic-curve\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"import {isometricProjection} from \"@vinicius-mello/isometric-projection\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"Delaunay = (await require(\"d3-delaunay@4.1\")).Delaunay","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"seen = require('https://bundle.run/seen')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"R = require(\"ramda@0.25\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"fmin = require(\"fmin\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"