44:["$","title",null,{"children":"Voronoi Cloth | Daniel Marcelino | Observable"}] 4c:T32dc,function display({ width: w = width, height: h = 500 } = {}) { const width = w; const height = h; /* * Cloth Simulation using a relaxed constraints solver */ // Suggested Readings // Advanced Character Physics by Thomas Jakobsen Character // http://freespace.virgin.net/hugo.elias/models/m_cloth.htm // http://en.wikipedia.org/wiki/Cloth_modeling // http://cg.alexandra.dk/tag/spring-mass-system/ // Real-time Cloth Animation http://www.darwin3d.com/gamedev/articles/col0599.pdf const DAMPING = 0.03; const DRAG = 1 - DAMPING; const MASS = 0.1; const restDistance = 25; const xSegs = 10; const ySegs = 10; const clothFunction = plane(restDistance * xSegs, restDistance * ySegs); const cloth = new Cloth(xSegs, ySegs); const GRAVITY = 981 * 1.4; const gravity = new THREE.Vector3(0, -GRAVITY, 0).multiplyScalar(MASS); const TIMESTEP = 18 / 1000; const TIMESTEP_SQ = TIMESTEP * TIMESTEP; let pins = []; const windForce = new THREE.Vector3(0, 0, 0); const tmpForce = new THREE.Vector3(); function plane(width, height) { return function(u, v, target) { const x = (u - 0.5) * width; const y = (v + 0.5) * height; const z = 0; target.set(x, y, z); }; } function Particle(x, y, z, mass) { this.position = new THREE.Vector3(); this.previous = new THREE.Vector3(); this.original = new THREE.Vector3(); this.a = new THREE.Vector3(0, 0, 0); // acceleration this.mass = mass; this.invMass = 1 / mass; this.tmp = new THREE.Vector3(); this.tmp2 = new THREE.Vector3(); // init clothFunction(x, y, this.position); // position clothFunction(x, y, this.previous); // previous clothFunction(x, y, this.original); } // Force -> Acceleration Particle.prototype.addForce = function(force) { this.a.add(this.tmp2.copy(force).multiplyScalar(this.invMass)); }; // Performs Verlet integration Particle.prototype.integrate = function(timesq) { const newPos = this.tmp.subVectors(this.position, this.previous); newPos.multiplyScalar(DRAG).add(this.position); newPos.add(this.a.multiplyScalar(timesq)); this.tmp = this.previous; this.previous = this.position; this.position = newPos; this.a.set(0, 0, 0); }; const diff = new THREE.Vector3(); function satisfyConstraints(p1, p2, distance) { diff.subVectors(p2.position, p1.position); const currentDist = diff.length(); if (currentDist === 0) return; // prevents division by 0 const correction = diff.multiplyScalar(1 - distance / currentDist); const correctionHalf = correction.multiplyScalar(0.5); p1.position.add(correctionHalf); p2.position.sub(correctionHalf); } function Cloth(w, h) { w = w || 10; h = h || 10; this.w = w; this.h = h; const particles = []; const constraints = []; // Create particles for (let v = 0; v <= h; v++) { for (let u = 0; u <= w; u++) { particles.push(new Particle(u / w, v / h, 0, MASS)); } } // Structural for (let v = 0; v < h; v++) { for (let u = 0; u < w; u++) { constraints.push([ particles[index(u, v)], particles[index(u, v + 1)], restDistance ]); constraints.push([ particles[index(u, v)], particles[index(u + 1, v)], restDistance ]); } } for (let u = w, v = 0; v < h; v++) { constraints.push([ particles[index(u, v)], particles[index(u, v + 1)], restDistance ]); } for (let v = h, u = 0; u < w; u++) { constraints.push([ particles[index(u, v)], particles[index(u + 1, v)], restDistance ]); } // While many systems use shear and bend springs, // the relaxed constraints model seems to be just fine // using structural springs. // Shear // const diagonalDist = Math.sqrt(restDistance * restDistance * 2); // for (v=0;v Math.random() * (i & 1 ? voronoiParams.height : voronoiParams.width) ); const colorIdxs = Int8Array.from( { length: voronoiParams.n }, (_, i) => Math.random() * colorPalette.length ); const velocities = new Float64Array(voronoiParams.n * 2); const voronoi = new d3.Delaunay(positions).voronoi([ 0, 0, voronoiParams.width, voronoiParams.height ]); const canvas = DOM.canvas(voronoiParams.width, voronoiParams.height); const ctx = canvas.getContext('2d'); ctx.strokeStyle = 'black'; //colorPalette[0]; ctx.lineWidth = 2; const clothTexture = new THREE.CanvasTexture(ctx.canvas); function simulateVoronoi() { const { n, margin, velocityFactor1, velocityFactor2 } = voronoiParams; ctx.save(); ctx.fillStyle = '#FFF'; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); for (let i = 0; i < n; ++i) { ctx.beginPath(); ctx.fillStyle = colorPalette[colorIdxs[i]]; voronoi.renderCell(i, ctx); ctx.fill(); const x = i << 1; const y = x + 1; positions[x] += velocities[x]; positions[y] += velocities[y]; if (positions[x] < -margin) positions[x] += width + margin * 2; else if (positions[x] > width + margin) positions[x] -= width + margin * 2; if (positions[y] < -margin) positions[y] += height + margin * 2; else if (positions[y] > height + margin) positions[y] -= height + margin * 2; velocities[x] += velocityFactor1 * (Math.random() - 0.5) - velocityFactor2 * velocities[x]; velocities[y] += velocityFactor1 * (Math.random() - 0.5) - velocityFactor2 * velocities[y]; } ctx.beginPath(); voronoi.render(ctx); ctx.stroke(); ctx.fillStyle = 'black'; //colorPalette[0]; ctx.beginPath(); voronoi.delaunay.renderPoints(ctx); ctx.fill(); voronoi.update(); } function init() { // scene scene = new THREE.Scene(); scene.background = new THREE.Color(0xcce0ff); scene.fog = new THREE.Fog(0xcce0ff, 500, 10000); // camera camera = new THREE.PerspectiveCamera(20, width / height, 1, 10000); camera.position.set(1000, 50, 1500); // lights scene.add(new THREE.AmbientLight(0x666666)); const light = new THREE.DirectionalLight(0xdfebff, 1); light.position.set(50, 200, 100); light.position.multiplyScalar(1.3); light.castShadow = true; light.shadow.mapSize.width = 1024; light.shadow.mapSize.height = 1024; const d = 300; light.shadow.camera.left = -d; light.shadow.camera.right = d; light.shadow.camera.top = d; light.shadow.camera.bottom = -d; light.shadow.camera.far = 1000; scene.add(light); // cloth material const loader = new THREE.TextureLoader(); clothTexture.anisotropy = 16; const clothMaterial = new THREE.MeshLambertMaterial({ map: clothTexture, side: THREE.DoubleSide, alphaTest: 0.5 }); // cloth geometry clothGeometry = new THREE.ParametricBufferGeometry( clothFunction, cloth.w, cloth.h ); // cloth mesh object = new THREE.Mesh(clothGeometry, clothMaterial); object.position.set(0, 0, 0); object.castShadow = true; scene.add(object); object.customDepthMaterial = new THREE.MeshDepthMaterial({ depthPacking: THREE.RGBADepthPacking, map: clothTexture, alphaTest: 0.5 }); // ground const groundTexture = loader.load(groundTextureUrl); groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping; groundTexture.repeat.set(25, 25); groundTexture.anisotropy = 16; groundTexture.encoding = THREE.sRGBEncoding; const groundMaterial = new THREE.MeshLambertMaterial({ map: groundTexture }); let mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry(20000, 20000), groundMaterial ); mesh.position.y = -250; mesh.rotation.x = -Math.PI / 2; mesh.receiveShadow = true; scene.add(mesh); // poles const poleGeo = new THREE.BoxBufferGeometry(5, 375, 5); const poleMat = new THREE.MeshLambertMaterial(); mesh = new THREE.Mesh(poleGeo, poleMat); mesh.position.x = -125; mesh.position.y = -62; mesh.receiveShadow = true; mesh.castShadow = true; scene.add(mesh); mesh = new THREE.Mesh(poleGeo, poleMat); mesh.position.x = 125; mesh.position.y = -62; mesh.receiveShadow = true; mesh.castShadow = true; scene.add(mesh); mesh = new THREE.Mesh(new THREE.BoxBufferGeometry(255, 5, 5), poleMat); mesh.position.y = -250 + 750 / 2; mesh.position.x = 0; mesh.receiveShadow = true; mesh.castShadow = true; scene.add(mesh); const gg = new THREE.BoxBufferGeometry(10, 10, 10); mesh = new THREE.Mesh(gg, poleMat); mesh.position.y = -250; mesh.position.x = 125; mesh.receiveShadow = true; mesh.castShadow = true; scene.add(mesh); mesh = new THREE.Mesh(gg, poleMat); mesh.position.y = -250; mesh.position.x = -125; mesh.receiveShadow = true; mesh.castShadow = true; scene.add(mesh); // renderer renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); renderer.outputEncoding = THREE.sRGBEncoding; renderer.shadowMap.enabled = true; // controls const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.maxPolarAngle = Math.PI * 0.5; controls.minDistance = 1000; controls.maxDistance = 5000; return renderer.domElement; } // let lastRequest; function animate(now) { lastRequest = requestAnimationFrame(animate); simulateCloth(now); simulateVoronoi(); clothTexture.needsUpdate = true; render(); } function render() { const p = cloth.particles; for (let i = 0, il = p.length; i < il; i++) { const v = p[i].position; clothGeometry.attributes.position.setXYZ(i, v.x, v.y, v.z); } clothGeometry.attributes.position.needsUpdate = true; clothGeometry.computeVertexNormals(); renderer.render(scene, camera); } const container = html`

`; container.appendChild(init()); animate(0); invalidation.then(() => cancelAnimationFrame(lastRequest)); return container; }4d:[{"id":"ffcb317e806ae74f1b6e8cd8c8126905c4dd31d274fbfd51efb092eaf24d4bb5364c9ef708652ce8f1492f4efdfa36cde7484376d41babe014287dfd9710af90","href":"https://static.observableusercontent.com/files/ffcb317e806ae74f1b6e8cd8c8126905c4dd31d274fbfd51efb092eaf24d4bb5364c9ef708652ce8f1492f4efdfa36cde7484376d41babe014287dfd9710af90","name":"circuit_pattern.png","type":"image/png","lastModified":1604934541776.089,"size":5782},{"id":"466c5ae115e7753fd630c016c25db9542047fbf1ad7298929ac0e44890fb8d3cb3b55558faf6b963aca7563ed6d78096138b6afe66a7545852203a1939ade77c","href":"https://static.observableusercontent.com/files/466c5ae115e7753fd630c016c25db9542047fbf1ad7298929ac0e44890fb8d3cb3b55558faf6b963aca7563ed6d78096138b6afe66a7545852203a1939ade77c","name":"grasslight-big.jpg","type":"image/jpeg","lastModified":1604934541776.089,"size":2595150}] 48:{"id":"e0ad59e2cf6baac2","slug":"voronoi-cloth","title":"Voronoi Cloth","thumbnail":"4a7e17c4e1e4beabd26a036cfd61de9e2b9e31ef06711f6e9ceefcf5d425cd24","access_level":"public","create_time":"$D2020-11-09T15:09:01.776Z","update_time":"$D2020-11-09T15:09:01.776Z","view_time":null,"first_public_time":"$D2020-11-09T15:09:17.448Z","has_unpublished_edits":null,"fork":{"id":"4a6a14c932c2418f","slug":"voronoi-cloth","title":"Voronoi Cloth","owner":{"id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage"}},"stars":0,"starred":false,"owner":{"type":"team","id":"727c147006f64f0f","login":"danielmarcelino","name":"Daniel Marcelino","avatar_url":"https://avatars-next.observableusercontent.com/c8a67a5a1708625af9180a06aec58b1204658dba23ded350a8d0c6ddbf75ebb9","tier":"starter_2024","bio":"Data/Political Scientist at @JOTAJornalismo. Passionate ML researcher, Bayesian advocate, applied legis/juri-metrics. I do things in R/Python/PostgreSQL","followed_by_you":false,"follows_you":false},"version":284,"publish_version":284,"role":null,"authored":false,"authors":[{"type":"individual","id":"ed39a3561b5d7b23","login":"danielmarcelino","name":"Daniel Marcelino","avatar_url":"https://avatars-next.observableusercontent.com/c8a67a5a1708625af9180a06aec58b1204658dba23ded350a8d0c6ddbf75ebb9","tier":null,"bio":"Data/Political Scientist at @JOTAJornalismo. Passionate ML researcher, Bayesian advocate, applied legis/juri-metrics. I do things in R/Python/PostgreSQL","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"ed39a3561b5d7b23","login":"danielmarcelino","name":"Daniel Marcelino","avatar_url":"https://avatars-next.observableusercontent.com/c8a67a5a1708625af9180a06aec58b1204658dba23ded350a8d0c6ddbf75ebb9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Voronoi Cloth","cells":[{"id":0,"value":"md`# Voronoi Cloth\n\nA mashup of [Voronoi Particules](https://observablehq.com/@mbostock/voronoi-particles) and [Cloth Simulation using a relaxed constraints solver](https://threejs.org/examples/#webgl_animation_cloth) from Three.js examples. This shows that you can put any animated canvas as the texture of Three.js objects.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"display({ width, height: 600 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"md`---\n\n### Credits\n\n_Developed for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Sylvain Lesage._\n\n_Idea by [Romain Vuillemot](https://observablehq.com/@romsson/)_\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"colorPalette = ['#132743', '#d7385e', '#edc988', '#f8efd4']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"clothTextureUrl = await FileAttachment(\"circuit_pattern.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"groundTextureUrl = await FileAttachment(\"grasslight-big.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"THREE = {\n const THREE = await require(\"three@0.121.1/build/three.min.js\");\n // See https://threejs.org/docs/#manual/en/introduction/Installation\n const OrbitControls = await import('https://unpkg.com/three@0.121.1/examples/jsm/controls/OrbitControls.js').then(\n a => a.OrbitControls\n );\n THREE.OrbitControls = OrbitControls;\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"d3 = require(\"d3-delaunay@^5.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null