2d:null 2e:["$","title",null,{"children":"Verlet Cloth Sim | Eric Miller | Observable"}] 33:T14c7,{ const cols = 60 const rows = 40 const quadWidth = 10 const quadHeight = 10 const stiffness = 1 // > 1 at your own risk :) const viewportHeight = 600 const floorDistance = 600 const wallDistance = 450 // +1 because we need an extra set of vertices to define quads const nVertsX = cols + 1 const nVertsY = rows + 1 const envTexLoader = new THREE.CubeTextureLoader(); const r = "https://threejs.org/examples/textures/cube/Bridge2/" const urls = [ r + "posx.jpg", r + "negx.jpg", r + "posy.jpg", r + "negy.jpg", r + "posz.jpg", r + "negz.jpg" ] const envTex = envTexLoader.load(urls); const clothGeo = new THREE.Geometry() const clothMat = new THREE.MeshStandardMaterial({ side: THREE.DoubleSide, metalness: 0.3, envMap: envTex }); const clothMesh = new THREE.Mesh(clothGeo, clothMat) clothMesh.castShadow = true clothMesh.receiveShadow = true clothMesh.position.x = cols * quadWidth * -0.5 const directionalLight1 = new THREE.DirectionalLight(0xddddff, 0.8) directionalLight1.position.set(200, 600, 800) directionalLight1.target.position.set(100, 0, 200) directionalLight1.castShadow = true directionalLight1.shadow.mapSize.width = 1024 directionalLight1.shadow.mapSize.height = 1024 directionalLight1.shadow.camera.left = -800 directionalLight1.shadow.camera.right = 800 directionalLight1.shadow.camera.top = 800 directionalLight1.shadow.camera.bottom = -800 directionalLight1.shadow.camera.far = 2000 const directionalLight2 = new THREE.DirectionalLight(0x775533, 0.6) directionalLight2.position.set(-100, -100, 400) const ambientLight = new THREE.AmbientLight(0xddddff, 0.4) const groundGeo = new THREE.PlaneGeometry(3000, 3000) const groundMat = new THREE.MeshLambertMaterial({ color: 0xbbbbbb }) const groundMesh = new THREE.Mesh(groundGeo, groundMat) groundMesh.position.set(0, -floorDistance, 0) groundMesh.rotation.set(Math.PI / -2, 0, 0) groundMesh.receiveShadow = true const wallGeo = new THREE.PlaneGeometry(3000, floorDistance * 2) const wallMesh = new THREE.Mesh(groundGeo, groundMat) wallMesh.position.set(0, floorDistance, -wallDistance) wallMesh.rotation.set(0, 0, 0) wallMesh.receiveShadow = true const scene = new THREE.Scene() scene.background = new THREE.Color(0x000000) scene.add(clothMesh) scene.add(directionalLight1) scene.add(directionalLight1.target) // scene.add(new THREE.DirectionalLightHelper(directionalLight1, 50)) // scene.add(new THREE.CameraHelper(directionalLight1.shadow.camera)) scene.add(directionalLight2) // scene.add(new THREE.DirectionalLightHelper(directionalLight2, 50)) scene.add(ambientLight) scene.add(groundMesh) scene.add(wallMesh) // scene.add(new THREE.GridHelper(1000, 100)) const fov = 45 const aspect = width / viewportHeight const near = 1 const far = 5000 const camera = new THREE.PerspectiveCamera(fov, aspect, near, far) camera.position.z = 1000 camera.position.y = 0 camera.position.x = 400 const renderer = new THREE.WebGLRenderer({ antialias: true }) renderer.shadowMap.enabled = true renderer.shadowMap.type = THREE.PCFSoftShadowMap renderer.shadowMap.renderSingleSided = false renderer.setSize(width, viewportHeight) renderer.setPixelRatio(devicePixelRatio) const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.target.y = -300 controls.update() // create the sim const sim = new VerCloth({ nVertsX, nVertsY, quadWidth, quadHeight, hStiffness: stiffness, vStiffness: stiffness, world: { min: [-3000, -3000, -3000], max: [3000, floorDistance - 1, 3000], gravity: [0, 800, 0] }, onPtCreated: (x, y, pt) => { clothGeo.vertices.push(new THREE.Vector3( pt.position[0], -1 * pt.position[1], pt.position[2] )) } }) // build faces createThreeFaces(clothGeo, sim) // anchors w/controls const topPts = sim.clothPts[0] // top row const topAnchorFns = createAnchorFns(sim, topPts, viewof anchoredToTop) sim.addConstraintSrc(topAnchorFns.constraintSrcFn) sim.addPtSrc(topAnchorFns.ptSrcFn) const sidePts = sim.clothPts.map(row => row[0]) // left side pts const sideAnchorFns = createAnchorFns(sim, sidePts, viewof anchoredToLeft) sim.addPtSrc(sideAnchorFns.ptSrcFn) // use a postprocessor to copy sim point positions to threejs point positions sim.addPostprocessor(sim => { const pts = _.flatten(sim.clothPts) pts.forEach((pt, i) => { clothGeo.vertices[i].x = pt.position[0] clothGeo.vertices[i].y = -1 * pt.position[1] clothGeo.vertices[i].z = pt.position[2] }) clothGeo.computeFaceNormals() clothGeo.computeVertexNormals() clothGeo.verticesNeedUpdate = true clothGeo.normalsNeedUpdate = true // sphere.position.y = -200 + (Math.sin(sim._lastStep / 1000) * 200) }) // set up wind (also uses a postprocessor) addWind(sim) sim.start() invalidation.then(() => { sim.cleanup() renderer.dispose() controls.dispose() }) try { while(true) { renderer.render(scene, camera) yield renderer.domElement } } finally { sim.cleanup() renderer.dispose() controls.dispose() } }34:T445,createThreeFaces = (geo, sim) => { /** * Helper fn to build faces on a THREE.Geometry instance matching * the cloth sim's dimensions. */ const cols = sim.params.nVertsX - 1 const rows = sim.params.nVertsY - 1 geo.faceVertexUvs = [[]] // two faces/triangles for every quad for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { // indices for each vertex in our faces const ul = (y * sim.params.nVertsX) + x const ur = ul + 1 const ll = ((y + 1) * sim.params.nVertsX) + x const lr = ll + 1 geo.faces.push(new THREE.Face3(ul, ll, ur)) geo.faceVertexUvs[0].push([ new THREE.Vector2(x / cols, y / rows), new THREE.Vector2(x / cols, (y + 1) / rows), new THREE.Vector2((x + 1) / cols, y / rows) ]) geo.faces.push(new THREE.Face3(ur, ll, lr)) geo.faceVertexUvs[0].push([ new THREE.Vector2((x + 1) / cols, y / rows), new THREE.Vector2(x / cols, (y + 1) / rows), new THREE.Vector2((x + 1) / cols, (y + 1) / rows) ]) } } }35:T1006,class VerCloth { constructor(params) { this.params = { nVertsX: 10, nVertsY: 10, quadWidth: 10, quadWidth: 10, startX: 0, startY: 0, hStiffness: 1, vStiffness: 1, pointMass: (x, y) => 1, world: { gravity: [0, 800, 0], ...(params.world || {}) }, ...params } this.clothPts = [] // 2d array, [, , ... ] this.clothConstraints = [] this.ptSrcs = [] this.constraintSrcs = [] this.pts = [] // flattened array of all pts this.constraints = [] this.preprocessors = [] this.postprocessors = [] this.isPaused = true this.isValid = true this._recalcPts = true this._recalcConstraints = true this._lastStep = new Date().valueOf() this.world = verlet.createWorld(this.params.world) this.build() this.stitch() this.step = this.step.bind(this) invalidation.then(() => { this.cleanup() }) } start() { if (this.isPaused) { this.isPaused = false this._lastStep = new Date().valueOf() requestAnimationFrame(this.step) } } pause() { this.isPaused = true } cleanup() { this.isValid = false } step() { const t = new Date().valueOf() let dt = (t - this._lastStep) / 1000 dt = dt > 1 ? 0.03 : dt // avoid insanity when raf() defers us for a while this._lastStep = t if (this._recalcPts) { this.pts = this.ptSrcs.reduce((pts, fn) => { return pts.concat(fn(this)) }, _.flatten(this.clothPts)) this._recalcPts = false } if (this._recalcConstraints) { this.constraints = this.constraintSrcs.reduce((constraints, fn) => { return constraints.concat(fn(this)) }, this.clothConstraints) this._recalcConstraints = false } this.preprocessors.forEach(fn => fn(this)) this.world.integrate(this.pts, dt) this.constraints.forEach(c => c.solve()) this.postprocessors.forEach(fn => fn(this)) if (!this.isPaused && this.isValid) { requestAnimationFrame(this.step) } } addPreprocessor(fn) { this.preprocessors.push(fn) } addPostprocessor(fn) { this.postprocessors.push(fn) } addPtSrc(fn) { this.ptSrcs.push(fn) this._recalcPts = true } addConstraintSrc(fn) { this.constraintSrcs.push(fn) this._recalcConstraints = true } removeConstraintSrc(fn) { this.constraintSrcs.splice(this.constraintSrcs.indexOf(fn), 1) this._recalcConstraints = true } removePtSrc(fn) { this.ptSrcs.splice(this.ptSrcs.indexOf(fn), 1) this._recalcPts = true } build() { const { nVertsX, nVertsY, quadWidth, quadHeight, startX, startY } = this.params const startingZ = 0 this.clothPts = [] for (let y = 0; y < nVertsY; y++) { let row = [] for (let x = 0; x < nVertsX; x++) { const pt = verlet.createPoint({ position: [ startX + (x * quadWidth), startY + (y * quadHeight), startingZ ], mass: this.params.pointMass(x, y) }) row.push(pt) } this.clothPts.push(row) } this.clothPts.forEach((row, y) => { row.forEach((pt, x) => { this.params.onPtCreated(x, y, pt) }) }) } stitch () { const { nVertsX, nVertsY, hStiffness, vStiffness } = this.params // stitch horizontal for (let y = 0; y < nVertsY; y++) { for (let x = 0; x < nVertsX - 1; x++) { this.clothConstraints.push(verlet.createConstraint([ this.clothPts[y][x], this.clothPts[y][x + 1] ], { stiffness: hStiffness })) } } // stitch vertical for (let x = 0; x < nVertsX; x++) { for (let y = 0; y < nVertsY - 1; y++) { this.clothConstraints.push(verlet.createConstraint([ this.clothPts[y][x], this.clothPts[y + 1][x] ], { stiffness: vStiffness })) } } } }36:T55e,md` ## VerCloth Basic usage: \`\`\`javascript const sim = new VerCloth({ nVertsX: 20, nVertsY: 20, quadWidth: 10, quadHeight: 10, onPtCreated: (xIndex, yIndex, pt) => { // pt.position is an array: [x, y, z] // map pt to something in a view: dom element, vertex in geometry, etc } }) sim.addPostprocessor(sim => { sim.pts.forEach(pt => { const newPosition = pt.position // pt.position is an array: [x, y, z] // update your mapped dom element's transform or vertex position, etc }) }) sim.start() \`\`\` - The sim will use its own \`requestAnimationFrame\` loop - On each frame you can run functions before and after integration via \`sim.addPreprocessor(...)\` and \`sim.addPostprocessor(...)\`. They will be passed the sim. - You can add and remove extra points and constraints dynamically via \`sim.add/removePtSrc(...)\`, \`sim.add/removeConstraintSrc(...)\`. Each call takes a function which is passed the sim and should return an array of verlet-points or verlet-constraints to be added. - Extra point and constraint sources need not be connected to the cloth grid at all. They're just thrown into the integrator along with everything else. - Points all have an \`addForce\` method with which you may poke them. See the source for more details. Using threejs/WebGL here but could use CSS \`transform\` and DOM elements, etc. `37:T649,class VerTween { constructor(params, startPt) { this.params = { mass: 1.0, stiffness: 1.0, ...params, world: { gravity: [0, 0, 0], friction: params.friction || 1.0, // values closer to 0 => more friction ...(params.world || {}) }, } this.world = verlet.createWorld(this.params.world) this.start = startPt this.att = verlet.createPoint({ position: startPt, mass: 0 }) this.pt = verlet.createPoint({ position: startPt, mass: this.params.mass }) this.constraint = verlet.createConstraint([this.att, this.pt], { stiffness: this.params.stiffness }) this._list = []; } step(dt) { this.world.integrate([this.pt, this.att], 0.03) this.constraint.solve() let diff = this.pt.position[0] !== this.att.position[0] diff = diff || this.pt.position[1] !== this.att.position[1] diff = diff || this.pt.position[2] !== this.att.position[2] if (diff) { this.dispatchEvent({ type: 'change', value: this.value }) } } set goal(pt) { this.att.place(pt) } get goal() { return this.att.position } get value() { return this.pt.position } addEventListener(type, listener) { if (type != "change" || this._list.includes(listener)) return; this._list = [listener].concat(this._list); } removeEventListener(type, listener) { if (type != "change") return; this._list = this._list.filter(l => l !== listener); } dispatchEvent(event) { const p = Promise.resolve(event); this._list.forEach(l => p.then(l)); } }38:T406,md` ## VerTween Uses the verlet integrator to make one three-dimensional point (or three one-dimensional points) move to another point over time in a simple but physical-ish way. Can be used in places where you might otherwise use lerping or easing to emulate natural motion. \`\`\`javascript const tween = new VerTween({ friction: 0.3, stiffness: 0.2 }, [0, 0, 0]) \`\`\` First argument is a parameter hash. \`stiffness\` and \`friction\` determine the behavior of the movement. High stiffness (up to \`1.0\`) results in quick movement. Friction is multiplied by velocity per step, so \`1.0\` actually means "no friction". Use a low value of friction (close to 0) to reduce overshoot. Second parameter is the starting value. To initiate movement to a new point set \`tween.goal\`, eg, \`tween.goal = [3.3, 0.2, 0.2]\`. Call \`tween.step()\` on your animation cycle, and \`tween.value\` will contain the current value of the tween. You can also subscribe to changes with \`tween.addEventListener('change', callback)\`. `39:T851,vWorld = { var number = asNumber var clamp = clamp var createCollider = boxCollision function create(vec) { var collide = createCollider(vec) var velocity = vec.create() var tmp = vec.create() var zero = vec.create() function VerletSystem(opt) { if (!(this instanceof VerletSystem)) return new VerletSystem(opt) opt = opt||{} this.gravity = opt.gravity || vec.create() this.friction = number(opt.friction, 0.98) this.min = opt.min this.max = opt.max this.bounce = number(opt.bounce, 1) } VerletSystem.prototype.collision = function(p, velocity) { collide(p, velocity, this.min, this.max, this.bounce) } VerletSystem.prototype.integratePoint = function(point, delta) { var mass = typeof point.mass === 'number' ? point.mass : 1 //if mass is zero, assume body is static / unmovable if (mass === 0) { this.collision(point, zero) vec.copy(point.acceleration, zero) return } vec.add(point.acceleration, point.acceleration, this.gravity) vec.scale(point.acceleration, point.acceleration, mass) //difference in positions vec.sub(velocity, point.position, point.previous) //dampen velocity vec.scale(velocity, velocity, this.friction) //handle custom collisions in 2D or 3D space this.collision(point, velocity) //set last position vec.copy(point.previous, point.position) var tSqr = delta * delta //integrate vec.scale(tmp, point.acceleration, 0.5 * tSqr) vec.add(point.position, point.position, velocity) vec.add(point.position, point.position, tmp) //reset acceleration vec.copy(point.acceleration, zero) } VerletSystem.prototype.integrate = function(points, delta) { for (var i=0; i 0) { scalarP1 = 0 scalarP2 = this.stiffness } else if (p1mass > 0 && p2mass == 0) { scalarP1 = this.stiffness scalarP2 = 0 } else { //invert mass quantities var im1 = 1.0 / p1mass var im2 = 1.0 / p2mass scalarP1 = (im1 / (im1 + im2)) * this.stiffness scalarP2 = this.stiffness - scalarP1 } //push/pull based on mass vec.scale(scaled, delta, scalarP1 * restingRatio) vec.add(p1vec, p1vec, scaled) vec.scale(scaled, delta, scalarP2 * restingRatio) vec.sub(p2vec, p2vec, scaled) return d } return function(p1, p2, opt) { return new Constraint(p1, p2, opt) } } return build(glmatrix.vec3) }3b:T48b,vPoint = { // https://raw.githubusercontent.com/mattdesl/verlet-point/master/lib/build.js const build = function(vec) { function Point(opt) { this.position = vec.create() this.previous = vec.create() this.acceleration = vec.create() this.mass = 1.0 this.radius = 0 if (opt && typeof opt.mass === 'number') this.mass = opt.mass if (opt && typeof opt.radius === 'number') this.radius = opt.radius if (opt && opt.position) vec.copy(this.position, opt.position) if (opt && (opt.previous||opt.position)) vec.copy(this.previous, opt.previous || opt.position) if (opt && opt.acceleration) vec.copy(this.acceleration, opt.acceleration) } Point.prototype.addForce = function(v) { vec.sub(this.previous, this.previous, v) return this } Point.prototype.place = function(v) { vec.copy(this.position, v) vec.copy(this.previous, v) return this } return function(opt) { return new Point(opt) } } return build(glmatrix.vec3) }3c:T640,boxCollision = { // https://raw.githubusercontent.com/mattdesl/verlet-system/master/lib/box-collision.js return function(vec) { var negInfinity = vec.fromValues(-Infinity, -Infinity, -Infinity) var posInfinity = vec.fromValues(Infinity, Infinity, Infinity) var ones = vec.fromValues(1, 1, 1) var reflect = vec.create() var EPSILON = 0.000001 return function collider(p, velocity, min, max, friction) { if (!min && !max) return //reset reflection vec.copy(reflect, ones) min = min || negInfinity max = max || posInfinity var i = 0, n = p.position.length, hit = false, radius = p.radius || 0 //bounce and clamp for (i=0; i max[i]) { reflect[i] = -1 p.position[i] = max[i]-radius hit = true } //no bounce var len2 = vec.sqrLen(velocity) if (!hit || len2 <= EPSILON) return var m = Math.sqrt(len2) if (m !== 0) vec.scale(velocity, velocity, 1/m) //scale bounce by friction vec.scale(reflect, reflect, m * friction) //bounce back vec.multiply(velocity, velocity, reflect) } } }3d:[] 31:{"id":"fe41f45dea30f9e1","slug":"verlet-cloth-sim","title":"Verlet Cloth Sim","thumbnail":"b676943bf398a3bcb6fbc6ed05f3fe791ec643d55e82012ec01e7192ff6f7f96","access_level":"public","create_time":"$D2018-08-31T17:53:50.734Z","update_time":"$D2019-05-28T17:13:01.646Z","view_time":null,"first_public_time":"$D2018-09-01T02:13:32.514Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"3658977199cf1d82","login":"patternleaf","name":"Eric Miller","avatar_url":"https://avatars-next.observableusercontent.com/660aa9f592252abdc7cfa7767474aa8a3cf28684d4348296976fec11a40bf3af","tier":"starter_2024"},"version":612,"publish_version":612,"role":null,"authored":false,"authors":[{"type":"individual","id":"4b7eed79bb764021","login":"patternleaf","name":"Eric Miller","avatar_url":"https://avatars-next.observableusercontent.com/660aa9f592252abdc7cfa7767474aa8a3cf28684d4348296976fec11a40bf3af","tier":null}],"members":[{"type":"individual","id":"4b7eed79bb764021","login":"patternleaf","name":"Eric Miller","avatar_url":"https://avatars-next.observableusercontent.com/660aa9f592252abdc7cfa7767474aa8a3cf28684d4348296976fec11a40bf3af","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Verlet Cloth Sim","cells":[{"id":0,"value":"md`# Verlet Cloth Sim\n\nRender-agnostic cloth simulator. Also a little physical tweener. Both use [Verlet integration](https://en.wikipedia.org/wiki/Verlet_integration) via [@mattdesl](https://twitter.com/mattdesl)'s [verlet packages](https://github.com/mattdesl/verlet-system). Ultimately using [glmatrix](http://glmatrix.net), so should be pretty fast.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"windDirection = {\n const size = 100\n const halfSize = size / 2\n const canvas = DOM.element('canvas', { width: size, height: size })\n const ctx = canvas.getContext('2d')\n const wind = viewof windTween\n \n ctx.lineWidth = 2\n ctx.strokeStyle = 'white'\n \n const update = () => {\n ctx.fillStyle = 'black'\n ctx.fillRect(0, 0, size, size)\n ctx.beginPath()\n ctx.moveTo(halfSize, halfSize)\n ctx.lineTo(\n halfSize + wind.value[0] * size, \n halfSize + wind.value[2] * size\n )\n ctx.stroke()\n\n ctx.beginPath()\n ctx.fillStyle = 'white'\n ctx.arc(\n halfSize + (wind.goal[0] * size),\n halfSize + (wind.goal[2] * size),\n 5,\n 0, \n Math.PI * 2\n )\n ctx.fill()\n }\n \n wind.addEventListener('change', update)\n canvas.addEventListener('click', e => {\n const x = (e.offsetX / size) - 0.5\n const y = (e.offsetY / size) - 0.5\n wind.goal = [x, 0, y]\n })\n update()\n \n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"viewof anchoredToTop = html` Anchored To Top`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"viewof anchoredToLeft = html` Anchored To Left`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"viewof windTween = new VerTween({ stiffness: 0.1, friction: 0.2 }, [0.1, 0, 0.4])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"createAnchorFns = (sim, clothPts, checkbox) => {\n let constraints = []\n let anchorPts = []\n clothPts.forEach(clothPt => {\n const anchorPt = verlet.createPoint({ position: clothPt.position, mass: 0 })\n constraints.push(verlet.createConstraint([clothPt, anchorPt]))\n anchorPts.push(anchorPt)\n }) \n const constraintSrcFn = sim => constraints\n const ptSrcFn = sim => anchorPts\n checkbox && checkbox.addEventListener('change', e => {\n if (e.target.checked) {\n sim.addConstraintSrc(constraintSrcFn)\n }\n else {\n sim.removeConstraintSrc(constraintSrcFn)\n }\n })\n return {\n constraintSrcFn,\n ptSrcFn\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"addWind = (sim) => {\n const noise = new Noise(Math.random())\n let count = 0\n const windVector = viewof windTween\n const windMag = 6\n const applyWind = (sim) => {\n windVector.step()\n count++\n sim.clothPts.forEach((row, y) => {\n row.forEach((pt, x) => {\n let v = glmatrix.vec3.clone(windVector.value * windMag)\n\n // some almost-plausible billowing\n let billow = noise.perlin3(x / sim.params.nVertsX, y / sim.params.nVertsY, count / 100)\n glmatrix.vec3.scale(v, windVector.value, Math.abs(billow))\n \n pt.addForce(v)\n })\n })\n }\n sim.addPostprocessor(applyWind)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"import { View } from '@mbostock/synchronized-views'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"THREE = {\n const THREE = await require(\"three@0.82.1/build/three.min.js\");\n if (!THREE.OrbitControls) { // If not previously loaded.\n const module = window.module = {exports: undefined};\n THREE.OrbitControls = await require(\"three-orbit-controls@82.1.0/index.js\").catch(() => module.exports(THREE));\n }\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"Noise = {\n const noisejs = await require('https://bundle.run/noisejs@2.1.0')\n return noisejs.Noise\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`\n## verlet integrator\n\nUsing [@mattdesl](https://twitter.com/mattdesl)'s [verlet integrator](https://github.com/mattdesl/verlet-system). Was having trouble importing it directly, so wound up copying most of it and its requirements over by hand. :(\n\nThese all use the 3d flavors of point, constraint, and world.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"verlet = {\n return {\n createWorld: vWorld,\n createConstraint: vConstraint,\n createPoint: vPoint\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"asNumber = {\n // https://raw.githubusercontent.com/mattdesl/as-number/master/index.js\n return function numtype(num, def) {\n return typeof num === 'number'\n ? num \n : (typeof def === 'number' ? def : 0)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"clamp = {\n // https://raw.githubusercontent.com/hughsk/clamp/master/index.js\n return function clamp(value, min, max) {\n return min < max\n ? (value < min ? min : value > max ? max : value)\n : (value < max ? max : value > min ? min : value)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"glmatrix = import('https://unpkg.com/gl-matrix@3.0.0/esm/index.js?module')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 32:"$31:body"