2d:null 2e:["$","title",null,{"children":"Plasma Boids - May 2022 Update | Esteban Serrano | Observable"}] 33:T5bd,Based on Craig Reynolds paper: [Flocks, Herds, and Schools: A Distributed Behavioral Model](http://www.cs.toronto.edu/~dt/siggraph97-course/cwr87/). The flock's motion results from the synchronized action of each individual bird or *boid* following this set of rules: - **Cohesion**: Steer towards the flock's center - **Alignment**: Align direction with flock's average direction - **Separation**: Keep a minimum distance with other birds - **Avoidance**: Avoid flying past a the container volume While you can find plenty of remarkable boid implementations on Observable (see [References](https://observablehq.com/d/db25f8193237eb79#cell-8038)), I thought I could add a couple of interesting elements to make the most out their beautiful motion: - Blow wind to affect the bird's motion and watch the flock reassemble afterwards. The wind is created by adding a temporary 3d flow-field based on [Perlin noise](https://en.wikipedia.org/wiki/Perlin_noise). - Camera follows center of flock: Compute the average position of the flock (Red point on debug window) and follow it around with a custom steering behavior (Green point). This provides a smooth camera motion and manages to reliably follow the flock on most cases. - I'm using code from Matt Deslaurier's [Perceptually Smooth Multi-Color Linear Gradients](https://observablehq.com/@mattdesl/perceptually-smooth-multi-color-linear-gradients) modified to produce vertical gradient which I used for the background.34:T4a3,params = { return { background: { verticalOffset: 1300, distanceFromCamera: 600, radius: 5300, height: 8000, texture: { width: Math.floor(width * 0.4), height: Math.floor(height * 0.4) }, colors: [ [0, 0, 0], [45, 55, 75], [135, 166, 218], [254, 250, 245] ] }, mainCamera: { near: 1, far: 8000, fov: 35, topLimit: 1400, bottomLimit: -500, arriveDistance: 400, offset: 1100, target: { mass: 0.75 } }, debugCamera: { startPos: { x: 5000, y: 1500, z: 0 } }, fogDensity: 0.00065, perlinOctaves: 2, flowFieldMaxTime: 3, flowFieldResolution: 200, quadGridResolution: 300, spawnbox: 100, containerRadius: 1500, containerHeight: 1000, maxBirds: 500, averageDistanceThreshold: 200, // bird behavior maxSpeed: 7, avoid: { maxForce: 0.2 }, seek: { maxForce: 0.04 }, align: { effectiveRange: 85, maxForce: 0.16 }, separate: { effectiveRange: 30, maxForce: 0.2 }, cohesion: { effectiveRange: 200 } }; }35:T8a1,class Bird { constructor() { // whoops not a real mesh this.mesh = new THREE.Object3D(); const s = 5; this.mesh.scale.set(s, s, s); this.heading = new THREE.Vector3(); this.velocity = new THREE.Vector3( getRandomNum(100, -100) * 0.1, getRandomNum(100, -100) * 0.1, getRandomNum(100, -100) * 0.1 ); this.acceleration = new THREE.Vector3(); const birdSize = params.birdSize; const spawnBox = params.spawnbox; const padding = 70; this.mesh.position.x = getRandomNum(-spawnBox / 2, spawnBox / 2); this.mesh.position.y = getRandomNum(padding, spawnBox); this.mesh.position.z = getRandomNum(-spawnBox, spawnBox); this.flapCounter = getRandomNum(0, 10); this.hue = 0; this.currentTime = 0; this.f1 = false; this.deltaTime = 0; this.baseFlapInteval = getRandomNum(70, 100); this.flapInterval = 500; // in ms } applyForce(f) { this.acceleration.add(f.clone()); } flap() { // almost no flap when freefalling if (this.velocity.y < -4) { this.flapInterval = getRandomNum(900, 1100); } else { this.flapInterval = map(this.velocity.y, -4, 3, 200, 20); } const t2 = this.flapInterval + this.baseFlapInteval; if (!this.currentTime) { this.currentTime = Date.now(); } this.deltaTime = Date.now() - this.currentTime; if (this.deltaTime > this.flapInterval) { if (!this.f1) { halfFlap(this); this.f1 = true; } } if (this.deltaTime > t2) { halfFlap(this); this.currentTime = undefined; this.f1 = false; } } update() { this.flap(); const maxSpeed = params.maxSpeed; this.velocity.add(this.acceleration); // limit velocity if (this.velocity.length() > maxSpeed) { this.velocity.clampLength(0, maxSpeed); } // update position this.mesh.position.add(this.velocity); // reset acc this.acceleration.multiplyScalar(0); // head this.heading = this.velocity.clone(); // set magnitude this.heading.normalize(); this.heading.multiplyScalar(2000); this.heading.add(this.mesh.position); this.mesh.lookAt(this.heading); } }36:T998,class Flock { constructor(birds = []) { this.birds = birds; this.birdPositions = []; this.initInstancedMesh(); this.distances = []; // distances of one bird to all the other birds } updateDistances(bird) { this.distances = []; this.birds.forEach((targetBird) => { this.distances.push({ position: targetBird.mesh.position, distance: bird.mesh.position.distanceTo(targetBird.mesh.position), velocity: targetBird.velocity }); }); } update() { if (this.birds.length === 0) return; for (let i = 0; i < params.maxBirds; i++) { const bird = this.birds[i]; this.updateDistances(bird); // wind force if (wind.blowing) { bird.applyForce(wind.getWindForce(bird)); } else { // bird behavior forces bird.applyForce(align(bird, this.distances)); bird.applyForce(separate(bird, this.distances)); bird.applyForce(cohesion(bird, this.distances)); } // avoid boundaries bird.applyForce(avoidSphereContainer(bird)); bird.applyForce(avoidLimits(bird, params.containerHeight)); // upper bird.applyForce(avoidLimits(bird, 0)); // lower // update bird internals bird.update(); // update individual instancedMesh position this.instancedMesh.setMatrixAt(i, bird.mesh.matrix); this.collectBirdPosition(bird); } this.instancedMesh.instanceMatrix.needsUpdate = true; // camera tracking this.updateFlockCenter(); updateCameraTargetAndPosition(this.center); } updateFlockCenter() { /** Returns a point for the camera to use as target **/ const positions = this.birdPositions; // initial state if (!this.center) { const avgPoint = findAveragePoint(positions); this.center = avgPoint; } // filter out positions far away from this.center const filteredPos = filterDistance(this.center, positions); if (filteredPos.length > 0) { this.center = findAveragePoint(filteredPos); } else { console.log("no positions found, undefined behavior"); } this.birdPositions = []; } collectBirdPosition(bird) { this.birdPositions.push(bird.mesh.position); } initInstancedMesh() { this.instancedMesh = createBirdHalfInstanceMesh(birdTopVertices); } putnew(newBird) { this.birds.push(newBird); } reset() { this.birds = []; this.initInstancedMesh(); } }37:T8fa,class Wind { constructor() { this.blowing = false; } getWindForce(bird) { /** Returns wind force for a bird's current position **/ if (this.flowFieldObj) { const lookUp = this.flowfieldLookUp(bird.mesh.position); return lookUp; } else { return new THREE.Vector3(); } } blow(point) { this.blowing = false; this.initWind(point); } update() { // expire wind flowfield if (this.blowing && this.windClock.getElapsedTime() > this.windDuration) { removeByName("flowfield"); removeByName("bboxHelper"); this.flowFieldObj = null; this.windClock.stop(); this.blowing = false; } } flowfieldLookUp(lookup) { // Use flowField's local coordinate system const pos = lookup.clone(); this.flowFieldObj.worldToLocal(pos); var xCell = Math.floor(pos.x / params.flowFieldResolution); var yCell = Math.floor(pos.y / params.flowFieldResolution); var zCell = Math.floor(pos.z / params.flowFieldResolution); // check if out of bounds if ( xCell > this.xCols - 1 || xCell < 0 || yCell > this.yCols - 1 || yCell < 0 || zCell > this.zCols - 1 || zCell < 0 ) { return new THREE.Vector3(); } else { return this.grid3d[xCell][yCell][zCell].clone(); } } initWind(point) { /** Create a flowfield (wind) inside bounding box **/ const bBox = bbAroundPoint(point); drawBBoxHelper(bBox); // debug this.windDuration = getRandomNum(0.5, params.flowFieldMaxTime); const pMax = bBox.max; const pMin = bBox.min; const dimensions = new THREE.Vector3().subVectors(pMax, pMin); // compute number of cols this.xCols = Math.ceil(dimensions.x / params.flowFieldResolution); this.yCols = Math.ceil(dimensions.y / params.flowFieldResolution); this.zCols = Math.ceil(dimensions.z / params.flowFieldResolution); this.grid3d = perlin3dArray(this.xCols, this.yCols, this.zCols); this.flowFieldObj = createFlowField( this.xCols, this.yCols, this.zCols, this.grid3d ); if (pMin.x === Infinity || pMin.x === -Infinity) return; this.flowFieldObj.position.set(pMin.x, pMin.y, pMin.z); this.windClock = new THREE.Clock(); this.blowing = true; } }38:T648,class CameraTarget { constructor(mass) { this.position = new THREE.Vector3(); this.vel = new THREE.Vector3(); this.acc = new THREE.Vector3(); this.mass = mass; this.maxSpeed = params.maxSpeed; this.maxForce = params.align.maxForce; } arrive(target) { //console.log("steer", target); // get desired vector const desired = new THREE.Vector3(); desired.subVectors(target, this.position); // limit force when distance is bellow threshold var d = desired.length(); if (d < params.mainCamera.arriveDistance) { var m = map(d, 0, 10, 0, this.maxSpeed); // set magnitude desired.normalize(); desired.multiplyScalar(m); } else { // set magnitude desired.normalize(); desired.multiplyScalar(this.maxSpeed); } // Reynolds steering formula const steer = new THREE.Vector3(); steer.subVectors(desired, this.vel); // limit steering to max force if (steer.length() > this.maxForce) { steer.clampLength(0, this.maxForce); } this.applyForce(steer); } applyForce(force) { // console.log("force", force); const f = force.clone(); f.divideScalar(this.mass); this.acc.add(f); } update(target) { this.arrive(target); this.vel.add(this.acc); // limit velocity to max speed if (this.vel.length() > this.maxSpeed) { this.vel.clampLength(0, this.maxSpeed); } // update position this.position.add(this.vel); // reset accl this.acc.multiplyScalar(0); mainCamera.lookAt(this.position); return this.position; } }39:Tedd,class P5Noise { // adapted from https://github.com/processing/p5.js/blob/v1.4.0/src/math/noise.js#L36 constructor() { this.PERLIN_YWRAPB = 4; this.PERLIN_YWRAP = 1 << this.PERLIN_YWRAPB; this.PERLIN_ZWRAPB = 8; this.PERLIN_ZWRAP = 1 << this.PERLIN_ZWRAPB; this.PERLIN_SIZE = 4095; this.perlin_octaves = params.perlinOctaves; // default to medium smooth this.perlin_amp_falloff = 0.5; // 50% reduction/octave this.scaled_cosine = (i) => 0.5 * (1.0 - Math.cos(i * Math.PI)); this.perlin; // will be initialized lazily by noise() or noiseSeed() } noise(x, y = 0, z = 0) { if (this.perlin == null) { this.perlin = new Array(this.PERLIN_SIZE + 1); for (let i = 0; i < this.PERLIN_SIZE + 1; i++) { this.perlin[i] = Math.random(); } } if (x < 0) { x = -x; } if (y < 0) { y = -y; } if (z < 0) { z = -z; } let xi = Math.floor(x), yi = Math.floor(y), zi = Math.floor(z); let xf = x - xi; let yf = y - yi; let zf = z - zi; let rxf, ryf; let r = 0; let ampl = 0.5; let n1, n2, n3; for (let o = 0; o < this.perlin_octaves; o++) { let of = xi + (yi << this.PERLIN_YWRAPB) + (zi << this.PERLIN_ZWRAPB); rxf = this.scaled_cosine(xf); ryf = this.scaled_cosine(yf); n1 = this.perlin[of & this.PERLIN_SIZE]; n1 += rxf * (this.perlin[(of + 1) & this.PERLIN_SIZE] - n1); n2 = this.perlin[(of + this.PERLIN_YWRAP) & this.PERLIN_SIZE]; n2 += rxf * (this.perlin[(of + this.PERLIN_YWRAP + 1) & this.PERLIN_SIZE] - n2); n1 += ryf * (n2 - n1); of += this.PERLIN_ZWRAP; n2 = this.perlin[of & this.PERLIN_SIZE]; n2 += rxf * (this.perlin[(of + 1) & this.PERLIN_SIZE] - n2); n3 = this.perlin[(of + this.PERLIN_YWRAP) & this.PERLIN_SIZE]; n3 += rxf * (this.perlin[(of + this.PERLIN_YWRAP + 1) & this.PERLIN_SIZE] - n3); n2 += ryf * (n3 - n2); n1 += this.scaled_cosine(zf) * (n2 - n1); r += n1 * ampl; ampl *= this.perlin_amp_falloff; xi <<= 1; xf *= 2; yi <<= 1; yf *= 2; zi <<= 1; zf *= 2; if (xf >= 1.0) { xi++; xf--; } if (yf >= 1.0) { yi++; yf--; } if (zf >= 1.0) { zi++; zf--; } } return r; } noiseDetail(lod, falloff) { if (lod > 0) { this.perlin_octaves = lod; } if (falloff > 0) { this.perlin_amp_falloff = falloff; } } noiseSeed(seed) { // Linear Congruential Generator // Variant of a Lehman Generator const lcg = (() => { // Set to values from http://en.wikipedia.org/wiki/Numerical_Recipes // m is basically chosen to be large (as it is the max period) // and for its relationships to a and c const m = 4294967296; // a - 1 should be divisible by m's prime factors const a = 1664525; // c and m should be co-prime const c = 1013904223; let seed, z; return { setSeed(val) { // pick a random seed if val is undefined or null // the >>> 0 casts the seed to an unsigned 32-bit integer z = seed = (val == null ? Math.random() * m : val) >>> 0; }, getSeed() { return seed; }, rand() { // define the recurrence relationship z = (a * z + c) % m; // return a float in [0, 1) // if z = m then z / m = 0 therefore (z % m) / m < 1 always return z / m; } }; })(); lcg.setSeed(seed); this.perlin = new Array(this.PERLIN_SIZE + 1); for (let i = 0; i < this.PERLIN_SIZE + 1; i++) { this.perlin[i] = lcg.rand(); } } }3a:T6b7,birdMaterial = new THREE.ShaderMaterial({ side: THREE.DoubleSide, vertexShader: ` varying vec2 vUv; void main() { vec3 transformed = vec3( position ); vec4 mvPosition = vec4( transformed, 1.0 ); #ifdef USE_INSTANCING mvPosition = instanceMatrix * mvPosition; #endif //vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0); vec4 modelViewPosition = modelViewMatrix * mvPosition; vUv = uv; gl_Position = projectionMatrix * modelViewPosition; } `, fragmentShader: ` #define TWO_PI 6.28318530718 uniform float u_time; varying vec2 vUv; // Function from Iñigo Quiles // https://www.shadertoy.com/view/MsS3Wc vec3 hsb2rgb( in vec3 c ){ vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0) -1.0, 0.0, 1.0 ); rgb = rgb*rgb*(3.0-2.0*rgb); return c.z * mix( vec3(1.0), rgb, c.y); } void main () { // adapted from colorwheel example https://thebookofshaders.com/06/ vec3 topColor = vec3(0.0); vec3 bottomColor = vec3(0.0); float t = u_time*0.706; // oscillate on color wheel float constrain = 0.706; float offset = 4.404; float radius = 1.0; float angle = ((sin(t)*constrain) + offset); topColor = hsb2rgb(vec3((angle/TWO_PI)+0.5,radius,1.0)); gl_FragColor = vec4(topColor, 1.0); if (!gl_FrontFacing){ // oscillate from gray to white t = u_time*0.698; float a = (sin(t)*0.6)+1.0; bottomColor = vec3(a); gl_FragColor = vec4(bottomColor, 1.0); } } `, uniforms: { u_time: { value: 0 } } });3b:T433,// draw flowfield arrows function createFlowField(xCols, yCols, zCols, grid3d) { // delete previous from scene before creting new one const flowFieldName = "flowfield"; removeByName(flowFieldName); const halfCubeSize = params.flowFieldResolution / 2; const arrowGroup = new THREE.Group(); // birds use flowFieldObj.worldToLocal for spacial lookup const flowFieldObj = new THREE.Object3D(); flowFieldObj.name = flowFieldName; for (var i = 0; i < xCols; i++) { for (var e = 0; e < yCols; e++) { for (var j = 0; j < zCols; j++) { // position of the arrow const pos = new THREE.Vector3( i * params.flowFieldResolution + halfCubeSize, e * params.flowFieldResolution + halfCubeSize, j * params.flowFieldResolution + halfCubeSize ); const length = grid3d[i][e][j]; const arrow = createFlowfieldArrow(pos, length); arrowGroup.add(arrow); } } } if (viewof debugBtn.value) { flowFieldObj.add(arrowGroup); } scene.add(flowFieldObj); return flowFieldObj; }3c:T410,function updateBackground() { /** this will move and orient the background so it remains horizontal and at the same distance from the camera **/ // get camera orientation var cameraVector = new THREE.Vector3(); mainCamera.getWorldDirection(cameraVector); // update background position gradientBackground.position.copy(mainCamera.position); // move background away from camera const backgroundDistance = params.background.distanceFromCamera; gradientBackground.position.add( cameraVector.clone().normalize().multiplyScalar(backgroundDistance) ); // vector from backgrond container to camera const towardsCamera = new THREE.Vector3(); towardsCamera .subVectors(mainCamera.position, gradientBackground.position) .normalize(); // update background orientation const orientation = new THREE.Vector3( towardsCamera.x, 0, towardsCamera.z ).normalize(); const axis = new THREE.Vector3(-1, 0, 0).normalize(); gradientBackground.quaternion.setFromUnitVectors(axis, orientation.clone()); }3d:Tac8,function createBackground(colors) { // create container to allow relative positioning const backgroundContainer = new THREE.Object3D(); const name = "background"; removeByName(name); // cylinder settings define background geometry const distanceOffset = 0; // modify this only when making changes to the background geometry // needed for properly resizing background based on rander viewport real field of view const margin = 20; // in degrees const azimuth = THREE.MathUtils.radToDeg(getCylinderTheta() * 2) + margin; // total degrees of aperture for background const thetaFrom = 90 - azimuth / 2; const thetaTo = 180 - thetaFrom * 2; const thetaStart = THREE.MathUtils.degToRad(thetaFrom); const thetaLength = THREE.MathUtils.degToRad(thetaTo); const cylinderRadius = params.background.radius; const cylinderHeight = params.background.height; const radialSegments = 15; const heightSegments = 1; const openEnded = true; // colors and materials const first = colors[0]; const last = colors[colors.length - 1]; const topColor = new THREE.Color( `rgb(${first[0]}, ${first[1]}, ${first[2]})` ); const bottomColor = new THREE.Color( `rgb(${last[0]}, ${last[1]}, ${last[2]})` ); const topMaterial = new THREE.MeshBasicMaterial({ color: topColor, side: THREE.DoubleSide, fog: false }); const bottomMaterial = new THREE.MeshBasicMaterial({ color: bottomColor, side: THREE.DoubleSide, fog: false }); // geometries const cylinderGeometry = new THREE.CylinderGeometry( cylinderRadius, cylinderRadius, cylinderHeight, radialSegments, heightSegments, openEnded, thetaStart, thetaLength ); const planeGeometry = new THREE.PlaneGeometry( cylinderRadius, cylinderRadius * 2 ); // meshes const meshCylinder = new THREE.Mesh(cylinderGeometry, gradientMaterial); const topPlane = new THREE.Mesh(planeGeometry, topMaterial); const bottomPlane = new THREE.Mesh(planeGeometry, bottomMaterial); // offsets const vertical = params.background.verticalOffset; meshCylinder.position.set(distanceOffset, -vertical, 0); // too lazy to rotate shader meshCylinder.rotation.x = THREE.MathUtils.degToRad(180); topPlane.rotation.x = THREE.MathUtils.degToRad(90); topPlane.position.set(cylinderRadius / 2, cylinderHeight / 2 - vertical, 0); bottomPlane.rotation.x = THREE.MathUtils.degToRad(90); bottomPlane.position.set( cylinderRadius / 2, -cylinderHeight / 2 - vertical, 0 ); // add backgroundContainer.add(topPlane); backgroundContainer.add(bottomPlane); backgroundContainer.add(meshCylinder); backgroundContainer.name = name; scene.add(backgroundContainer); return backgroundContainer; }3e:[] 31:{"id":"9a8f8a7c702f4d22","slug":"plasma-boids-may-2022-update","title":"Plasma Boids - May 2022 Update","thumbnail":"bda4ec2622738a86e182ddabceaa5493180275bc94b7e47e9f1dbf02e3b31b55","access_level":"public","create_time":"$D2022-05-21T04:06:38.228Z","update_time":"$D2022-05-21T05:13:18.846Z","view_time":null,"first_public_time":"$D2022-05-21T05:13:53.998Z","has_unpublished_edits":null,"fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"a311b2c901bccd79","login":"esrs","name":"Esteban Serrano","avatar_url":"https://avatars-next.observableusercontent.com/ea4f125e103de7533553e6e6af913b86933bcf367d98be7a518da02ddeef349f","tier":"starter_2024"},"version":8426,"publish_version":8426,"role":null,"authored":false,"authors":[{"type":"individual","id":"5650f9dd9ce944dc","login":"esrs","name":"Esteban Serrano","avatar_url":"https://avatars-next.observableusercontent.com/ea4f125e103de7533553e6e6af913b86933bcf367d98be7a518da02ddeef349f","tier":null}],"members":[{"type":"individual","id":"5650f9dd9ce944dc","login":"esrs","name":"Esteban Serrano","avatar_url":"https://avatars-next.observableusercontent.com/ea4f125e103de7533553e6e6af913b86933bcf367d98be7a518da02ddeef349f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"42a2b538943db208","slug":"boids","title":"Boids","owner":{"id":"a311b2c901bccd79","login":"esrs","name":"Esteban Serrano"}},"type":"notebook","body":{"title":"Plasma Boids - May 2022 Update","cells":[{"id":6927,"value":"# Plasma Boids - May 2022 Update","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8124,"value":"#### Updates:\n- Replace background texture with custom shader\n- Double side color on birds\n- Tune colors\n- Background gradient animation\n- Bird colors animation\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7338,"value":"Click to create wind","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4765,"value":"renderOutput = mainRenderer.domElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8025,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6922,"value":"## Debug view\nDrag to rotate, scroll to zoom","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6465,"value":"debugRenderer.domElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4759,"value":"viewof fly = Inputs.toggle({ label: \"Run\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5743,"value":"viewof cameraFollow = Inputs.toggle({\n label: \"Camera follows flock\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5871,"value":"viewof debugBtn = Inputs.toggle({ label: \"Show debug gizmos\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7397,"value":"restartButton()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7345,"value":"blowWindButton()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2336,"value":"frameRate = {\n // from https://observablehq.com/@peter-hartmann/frame-rate-live\n let o = {},\n n = { c: 0 };\n while (true) {\n yield o.c;\n n = { s: ~~(Date.now() / 1000), c: n.c + 1 };\n o.s != n.s && ((o = { ...n }), (n.c = 0));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8038,"value":"## References\n- [Three.js Boids 3D](https://codepen.io/tksiiii/pen/jzBZdo)\n- [Nature of code](https://natureofcode.com/)\n- Inspiration [video](https://ve.media.tumblr.com/tumblr_q9t14xn7dM1vij12m.mp4)\n- Eventually, I would like to ~~know enough about compute shaders to be able to~~ port individual bird behavior to the GPU. See:\n - https://va3c.github.io/three.js/examples/webgl_gpgpu_birds.html#64\n - https://observablehq.com/@rreusser/gpgpu-boids","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8042,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7284,"value":"## Animation loop","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":761,"value":"{\n while (true) {\n if (fly) {\n wind.update();\n flock.update();\n updateBackground();\n }\n updateUniforms();\n mainRenderer.render(scene, mainCamera);\n debugRenderer.render(scene, debugCamera);\n yield;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6553,"value":"## Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7387,"value":"initBoids()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7537,"value":"wind = new Wind()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2051,"value":"flock = new Flock()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2812,"value":"noise = new P5Noise()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5002,"value":"cameraLookAtTarget = new CameraTarget(params.mainCamera.target.mass)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"### Scene","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6290,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"mainRenderer = {\n const renderer = new THREE.WebGLRenderer({\n antialias: true\n });\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n renderer.autoClear = true;\n renderer.domElement.addEventListener(\"wheel\", onWheel);\n renderer.domElement.addEventListener(\"click\", () => {\n wind.blow(flock.center);\n });\n invalidation.then(() => renderer.dispose());\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6452,"value":"debugRenderer = {\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n const controls = new THREE.OrbitControls(debugCamera, renderer.domElement);\n renderer.domElement.addEventListener(\"change\", () => renderer.render(scene, debugCamera));\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"mainCamera = {\n const fov = params.mainCamera.fov;\n const aspect = width / height;\n const near = params.mainCamera.near;\n const far = params.mainCamera.far;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(1000, 500, 1000);\n camera.lookAt(0, 0, 0);\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6444,"value":"debugCamera = {\n const fov = 45;\n const aspect = width / height;\n const near = 1;\n const far = 30000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.lookAt(new THREE.Vector3(0, 0, 0));\n camera.position.set(\n params.debugCamera.startPos.x,\n params.debugCamera.startPos.y,\n params.debugCamera.startPos.z\n );\n camera.layers.enable(1);\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x001b42);\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7655,"value":"### Bird behaviors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7666,"value":"function seek(bird, target) {\n // used by cohesion\n const maxSpeed = params.maxSpeed;\n const maxForce = params.seek.maxForce;\n\n const toGoalVector = new THREE.Vector3();\n // set goal to target - current mesh position\n toGoalVector.subVectors(target, bird.mesh.position);\n toGoalVector.normalize();\n toGoalVector.multiplyScalar(maxSpeed);\n\n const steerVector = new THREE.Vector3();\n steerVector.subVectors(toGoalVector, bird.velocity);\n // limit force\n if (steerVector.length() > maxForce) {\n steerVector.clampLength(0, maxForce);\n }\n\n return steerVector;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7633,"value":"function align(bird, distances) {\n const sumVector = new THREE.Vector3();\n let cnt = 0;\n const maxSpeed = params.maxSpeed;\n const maxForce = params.align.maxForce;\n const effectiveRange = params.align.effectiveRange;\n const steerVector = new THREE.Vector3();\n\n distances.forEach((targetBird) => {\n const dist = targetBird.distance\n if (dist > 0 && dist < effectiveRange) {\n sumVector.add(targetBird.velocity);\n cnt++;\n }\n });\n\n if (cnt > 0) {\n sumVector.divideScalar(cnt);\n sumVector.normalize();\n sumVector.multiplyScalar(maxSpeed);\n\n steerVector.subVectors(sumVector, bird.velocity);\n // limit force\n if (steerVector.length() > maxForce) {\n steerVector.clampLength(0, maxForce);\n }\n }\n return steerVector;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7660,"value":"function cohesion(bird, distances) {\n const sumVector = new THREE.Vector3();\n let cnt = 0;\n const effectiveRange = params.cohesion.effectiveRange;\n const steerVector = new THREE.Vector3();\n\n distances.forEach((targetBird) => {\n const dist = targetBird.distance;\n if (dist > 0 && dist < effectiveRange) {\n sumVector.add(bird.mesh.position);\n cnt++;\n }\n });\n if (cnt > 0) {\n sumVector.divideScalar(cnt);\n steerVector.add(seek(bird, sumVector));\n }\n return steerVector;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7651,"value":"function separate(bird, distances) {\n const sumVector = new THREE.Vector3();\n let cnt = 0;\n const maxSpeed = params.maxSpeed;\n const maxForce = params.separate.maxForce;\n const effectiveRange = params.separate.effectiveRange;\n const steerVector = new THREE.Vector3();\n\n distances.forEach((targetBird) => {\n const dist = targetBird.distance;\n if (dist > 0 && dist < effectiveRange) {\n let toMeVector = new THREE.Vector3();\n toMeVector.subVectors(bird.mesh.position, targetBird.position);\n toMeVector.normalize();\n toMeVector.divideScalar(dist);\n sumVector.add(toMeVector);\n cnt++;\n }\n });\n\n if (cnt > 0) {\n sumVector.divideScalar(cnt);\n sumVector.normalize();\n sumVector.multiplyScalar(maxSpeed);\n\n steerVector.subVectors(sumVector, bird.velocity);\n // limit force\n if (steerVector.length() > maxForce) {\n steerVector.clampLength(0, maxForce);\n }\n }\n return steerVector;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7646,"value":"\nfunction avoidLimits(bird, wall) {\n const upperBound = new THREE.Vector3(\n bird.mesh.position.x,\n wall,\n bird.mesh.position.z\n );\n\n const toMeVector = new THREE.Vector3();\n toMeVector.subVectors(bird.mesh.position, upperBound);\n\n const distance = toMeVector.length();\n const steerVector = toMeVector.clone();\n steerVector.normalize();\n steerVector.multiplyScalar(1 / Math.pow(distance, 2));\n //steerVector.multiplyScalar(1 / distance);\n steerVector.multiplyScalar(Math.pow(bird.velocity.length(), 3));\n return steerVector;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7640,"value":"function avoidSphereContainer(bird) {\n const containerRadius = params.containerRadius;\n const distance = containerRadius - bird.mesh.position.length();\n\n const steerVector = bird.mesh.position.clone();\n steerVector.normalize();\n steerVector.multiplyScalar(-1 / Math.pow(distance, 2));\n steerVector.multiplyScalar(Math.pow(bird.velocity.length(), 3));\n return steerVector;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7832,"value":"### Gizmos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5909,"value":"{\n if (debugBtn) {\n createGridHelper();\n createCameraHelper();\n redPoint.visible = true;\n greenPoint.visible = true;\n } else {\n removeByName(\"gridHelper\");\n removeByName(\"cameraHelper\");\n redPoint.visible = false;\n greenPoint.visible = false;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2950,"value":"redPoint = point(new THREE.Vector3(), \"red\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5549,"value":"greenPoint = point(new THREE.Vector3(), \"green\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"## Custom classes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2574,"value":"function createBirdHalfInstanceMesh(vertices) {\n const instanceName = \"meshBottom\";\n removeByName(instanceName);\n const geometry = new THREE.BufferGeometry();\n geometry.setAttribute(\"position\", new THREE.BufferAttribute(vertices, 3));\n const mesh = new THREE.InstancedMesh(geometry, birdMaterial, params.maxBirds)\n mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);\n mesh.instanceMatrix.needsUpdate = true;\n mesh.frustumCulled = false;\n mesh.name = instanceName;\n scene.add(mesh);\n return mesh;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8293,"value":"clock = new THREE.Clock()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7531,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4999,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2794,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8414,"value":"## Materials","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8134,"value":"gradientMaterial = new THREE.ShaderMaterial({\n side:THREE.DoubleSide,\n vertexShader: `\n varying vec2 vUv;\n void main () {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xyz, 1.0);\n }\n `,\n fragmentShader: `\n uniform float u_time;\n varying vec2 vUv;\n\n void main () {\n vec3 color = vec3(0.0);\n float y = vUv.y;\n\n float t = u_time;\n float a = 0.408+(abs(sin(t*0.398))/15.0);\n float b = 0.888+(abs(cos(t*0.108))/15.0);\n float c = 0.000+(abs(cos(t*0.272))/7.024);\n float d = 1.032+(abs(sin(t*0.336))/6.0);\n color.r = smoothstep(a,b,y);\n color.g = smoothstep(c,d,y);\n color.b = smoothstep(-0.440+(abs(sin(t*0.278))/3.0), 0.408+(abs(cos(t*0.288))/2.0), y);\n\n gl_FragColor = vec4(color, 1.0);\n }\n `,\n uniforms: {\n u_time: { value: 0 }\n }\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8176,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8289,"value":"function updateUniforms(){\n const timeDelta = clock.getDelta();\n birdMaterial.uniforms.u_time.value += timeDelta;\n gradientMaterial.uniforms.u_time.value += timeDelta;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7792,"value":"## Helper Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7797,"value":"### General Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7384,"value":"function initBoids(){\n for (let i = 0; i < params.maxBirds; i++) {\n const bird = new Bird();\n flock.putnew(bird);\n }\n flock.center = new THREE.Vector3();\n // flock.blowWind();\n wind.blow(flock.center)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5569,"value":"function removeByName(name) {\n const toDelete = scene.getObjectByName(name);\n if (toDelete) {\n scene.remove(toDelete);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5497,"value":"function findAveragePoint(points) {\n const averageVector = new THREE.Vector3();\n var cnt = 0;\n points.forEach((point) => {\n averageVector.add(point);\n cnt++;\n });\n if (cnt > 0) {\n averageVector.divideScalar(cnt)\n return averageVector\n } else {\n return new THREE.Vector3()\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7462,"value":"function filterDistance(orig, points){\n /** Returns points whithin some distance threshold**/\n const filteredPos = [];\n points.forEach((p) => {\n const d = orig.distanceTo(p);\n if (d < params.averageDistanceThreshold) {\n filteredPos.push(p);\n }\n });\n return filteredPos\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2251,"value":"function map(n, start1, stop1, start2, stop2) {\n return ((n - start1) / (stop1 - start1)) * (stop2 - start2) + start2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2834,"value":"getRandomFloat = (max = 0, min = 0) => Math.random() * (max + 1 - min) + min","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"getRandomNum = (max = 0, min = 0) => Math.floor(Math.random() * (max + 1 - min)) + min;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7953,"value":"### Camera motion","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7917,"value":"{\n /** \n A little workaround so I don't have to restart flock on cameraFollow toggle\n **/\n cameraFollow;\n if (mutable follow) {\n mutable follow = false;\n } else {\n mutable follow = true;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7920,"value":"mutable follow = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7489,"value":"function updateCameraTargetAndPosition(flockCenter) {\n /** Update camera's position and target based on flock's center, allows scrolling **/\n\n const cameraTarget = cameraLookAtTarget.update(flockCenter);\n\n // debug only\n greenPoint.position.copy(cameraTarget);\n redPoint.position.copy(flockCenter);\n\n // create offset vector\n const cameraPositionOffset = new THREE.Vector3(\n params.mainCamera.offset,\n mainCamera.position.y,\n params.mainCamera.offset\n );\n\n if (mutable follow) {\n // project target to \"floor\"\n const cp = new THREE.Vector3(cameraTarget.x, 0, cameraTarget.z);\n // add offset vector to final position\n cp.add(cameraPositionOffset);\n mainCamera.position.copy(cp);\n } else {\n mainCamera.position.copy(cameraPositionOffset);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5482,"value":"### Wind helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5554,"value":"function drawBBoxHelper(bBox) {\n if (viewof debugBtn.value) {\n const helperName = \"bboxHelper\";\n removeByName(helperName);\n\n // make a BoxBufferGeometry of the same size as Box3\n const dimensions = new THREE.Vector3().subVectors(bBox.max, bBox.min);\n const boxDummyGeo = new THREE.BoxBufferGeometry(\n dimensions.x,\n dimensions.y,\n dimensions.z\n );\n\n // move new mesh center so it's aligned with the original object\n const matrix = new THREE.Matrix4().setPosition(\n new THREE.Vector3().addVectors(bBox.min, bBox.max).multiplyScalar(0.5)\n );\n boxDummyGeo.applyMatrix4(matrix);\n boxDummyGeo.matrixWorldNeedsUpdate = true;\n\n const mesh = new THREE.Mesh(\n boxDummyGeo,\n new THREE.MeshBasicMaterial({ color: \"orange\", wireframe: true })\n );\n mesh.name = helperName;\n mesh.layers.set(1)\n scene.add(mesh);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5560,"value":"function bbAroundPoint(point) {\n const bBoxSize = new THREE.Vector3(1000, 700, 1000);\n const boundingBox = new THREE.Box3().setFromCenterAndSize(point, bBoxSize);\n return boundingBox;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2680,"value":"md`### Perlin Noise`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2790,"value":"function perlin3dArray(xCols, yCols, zCols) {\n // 2d perlin noise\n // adapted from nature of code example\n const field = make3Darray(xCols, yCols);\n //const field = []\n const twoPi = Math.PI * 2;\n noise.noiseSeed(Math.floor(getRandomFloat(10000)));\n var xoff = 0;\n for (var i = 0; i < xCols; i++) {\n var yoff = 0;\n for (var e = 0; e < yCols; e++) {\n var zoff = 0;\n for (var j = 0; j < zCols; j++) {\n var theta = map(noise.noise(xoff, yoff, zoff), 0, 1, 0, twoPi);\n //var theta = map(sin(xoff)+cos(yoff),-2,2,0,TWO_PI);\n // Polar to cartesian coordinate transformation to get x and y components of the vector\n field[i][e][j] = new THREE.Vector3(\n Math.cos(theta),\n Math.sin(theta),\n Math.tan(theta)\n );\n //field[i][j] = theta;\n zoff += 0.1;\n }\n yoff += 0.1;\n }\n xoff += 0.1;\n }\n return field;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2987,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2685,"value":"make3Darray = function (cols, rows) {\n // just empty array\n\n var array = [];\n for (var i = 0; i < cols; i++) {\n array[i] = [];\n for (var j = 0; j < rows; j++) {\n array[i][j] = [];\n }\n }\n return array;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3721,"value":"### Gizmo helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6569,"value":"function createCameraHelper() {\n const helperName = \"cameraHelper\";\n removeByName(helperName);\n const helper = new THREE.CameraHelper(mainCamera);\n helper.traverse(function (node) {\n node.layers.set(1);\n });\n helper.name = helperName\n scene.add(helper);\n return helper;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5904,"value":"function createGridHelper() {\n const helperName = \"gridHelper\";\n removeByName(helperName);\n const size = params.containerRadius * 2;\n const divisions = size / params.quadGridResolution;\n const gridHelper = new THREE.GridHelper(size, divisions);\n gridHelper.name = helperName;\n gridHelper.traverse(function (node) {\n node.layers.set(1);\n });\n scene.add(gridHelper);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2949,"value":"function point(point, color) {\n const helperName = \"pointHelper\";\n // just for testing\n const p = new THREE.Mesh(\n new THREE.SphereGeometry(15, 4, 2),\n new THREE.MeshBasicMaterial({\n color: color\n })\n );\n p.position.copy(point);\n p.name = helperName;\n p.layers.set(1);\n scene.add(p);\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5976,"value":"function createFlowfieldArrow(start, dir) {\n const name = \"arrowHelper\"\n removeByName(name)\n const length = 30;\n const dirCopy = dir.clone();\n dirCopy.normalize();\n const helper = new THREE.ArrowHelper(dirCopy, start, length, \"orange\");\n helper.traverse(function (node) {\n node.layers.set(1);\n });\n helper.name = name\n return helper;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6388,"value":"gradientBackground = createBackground(params.background.colors)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2570,"value":"### InstancedMesh","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2579,"value":"birdTopVertices = new Float32Array([\n -1,\n 0.7,\n -1,\n 0,\n 0,\n -0.5,\n 0,\n 0,\n 2,\n 0,\n 0,\n -0.5,\n 1,\n 0.7,\n -1,\n 0,\n 0,\n 2\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2620,"value":"function halfFlap(dummy) {\n //if (getRandomNum(0, 4) === 3) {\n // flip using matrix\n const scale = new THREE.Vector3(1, 1, 1);\n scale.y *= -1;\n dummy.mesh.scale.multiply(scale);\n //}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6638,"value":"### Fog Helper","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5813,"value":"### Background Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6436,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6389,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7033,"value":"function getRealFov() {\n // get FOV based on filmwidth and length\n // this will return FOV/2 in radians\n const w = mainCamera.getFilmWidth() / 2;\n const fl = mainCamera.getFocalLength();\n return Math.atan(w / fl);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7150,"value":"function getCylinderTheta() {\n // use the width and radius to get total apperture\n const w = getWidthAtDistance(\n params.background.radius + params.background.distanceFromCamera\n );\n const fl = params.background.radius;\n return Math.atan(w / fl);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7042,"value":"function getWidthAtDistance(d) {\n // this will return half camera width in scene units\n const a = getRealFov();\n const halfWidth = d * Math.tan(a);\n return halfWidth;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7377,"value":"### Button helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7351,"value":"restartButton = () => {\n const button = html``;\n button.onclick = () => {\n flock.reset()\n wind.blow(flock.center)\n initBoids();\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7336,"value":"blowWindButton = () => {\n const button = html``;\n button.onclick = () => {\n wind.blow(flock.center);\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7248,"value":"### Scroll event","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5781,"value":"function onWheel(event) {\n mainCamera.position.y += -event.deltaY;\n // apply camera limits\n if (\n mainCamera.position.y > params.mainCamera.topLimit ||\n mainCamera.position.y < params.mainCamera.bottomLimit\n ) {\n mainCamera.position.y += event.deltaY;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2043,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"THREE = {\n // \n const THREE = (window.THREE = await require(\"three@0.135.0/build/three.min.js\"));\n await require(\"three@0.135.0/examples/js/controls/OrbitControls.js\").catch(\n () => {}\n );\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1","titling":"auto"}} 32:"$31:body"