├── LICENSE
├── README.md
├── _config.yml
├── helperFns.js
├── main.html
├── pictures
    ├── boids1.png
    └── boids2.png
├── textures
    └── wood_texture.jpg
└── three.min.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Lucien David
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # THREE.js Crowd Animation
 2 | 
 3 | A demonstration of a THREE.js crowd animation scene.
 4 | You can quickly visualize it <a href="https://luludavid.github.io/THREE.js-Crowd-Animation/main.html">here</a>.
 5 | 
 6 | ## The scene
 7 | 
 8 | A light bulb swings left to right inside a wooden room, and a group of boids are following the bulb,
 9 | as moths would do.
10 | The camera travels around the room with a slow motion when coming closer to the light.
11 | 
12 | Left ...                  | ... and right
13 | --------------------------|--------------------------
14 | ![](./pictures/boids1.png)|![](./pictures/boids2.png)
15 | 
16 | ## The crowd settings
17 | 
18 | I decided of the following parameters to modulate the direction of boids (in order of priority)
19 | * Avoid the collision with the light at all costs
20 | * Pursuie the light
21 | * Avoid collisions between boids
22 | * Ensure boids are moving in the same direction
23 | * Ensure boids are flying close enough to eachother
24 | 
25 | # How to make it work
26 | 
27 | To make it work, download the repo, then use the following process: https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally
28 | 
29 | To sum it up, just run a localhost on your machine (I personally use python -m http.server), then go to your localhost on your browser and just admire the result.
30 | 
31 | If you have any suggestion, do not hesitate and leave a comment or a pull request, I'd be happy to add it to the project.
32 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman


--------------------------------------------------------------------------------
/helperFns.js:
--------------------------------------------------------------------------------
  1 | // INIT FUNCTION: I recommend you to play with the boid motion parameters, it is quite funny
  2 | 
  3 | function initParameters() {
  4 | 
  5 | 	// BULB PARAMETERS : 
  6 | 	// gravity constant, time, light intensity, pulsation of an approximate simple pendulum (small oscillations hypothesis), motion Ratio to decide
  7 | 	// of the speed ratio with real life (motionRatio = 1) at max speed, shiftRatio to decide how strong the wire bends around its middle point, and roomSize
  8 | 	g = 9.81
  9 | 	t = 0
 10 | 	lightIntensity = 2
 11 | 	theta = view.theta0*Math.PI/180;
 12 | 	length = view.length
 13 | 	z0 = view.z0
 14 | 	theorethicalPulse = Math.sqrt(g/length)
 15 | 	motionRatio = 3
 16 | 	w0 = theorethicalPulse*motionRatio
 17 | 	shiftRatio = 1/10
 18 | 	roomSize = 150
 19 | 
 20 | 	// BOIDS MOTION PARAMETERS :
 21 | 	// boids SpeedScale, number of boids, width of repartition of boids at t=0, surrounding distance, minimum distance to light, and continuityRatio, 
 22 | 	// the proportion of old speed vector kept in the new one
 23 | 	SpeedScale = 1
 24 | 	numberOfBoids = 50
 25 | 	boidSize = 0.4
 26 | 	startWidth = 200
 27 | 	surrounding_distance = 1.5
 28 | 	minDistanceLight = 1.5
 29 | 	continuityRatio = 0.7
 30 | 
 31 | 	// CAMERA MOTION PARAMETERS : 
 32 | 	// up camera motion boolean, period and pulsation of rotation, ellipse axe sizes, initial height, z(t) parameters, proportion of lookAt vectors (see updateCamera)
 33 | 	goingUp = true
 34 | 	T = 15
 35 | 	omega = 2*Math.PI/(60*T)
 36 | 	a = view.eye[0]
 37 | 	b = 40
 38 | 	z1 = view.eye[2]
 39 | 	zcons = z1
 40 | 	zstep = (z0-2*z1)/(60*T) 
 41 | 	p = 1
 42 | 
 43 | 	// TIME DILATATION PARAMETERS : 
 44 | 	// alpha = the time dilatation incrementing time, oscillating from maxTimeDilatation to minTimeDilatation at pulse angular speed 
 45 | 	// (pulse is defined such as it has a T/2 period and reaches minimum at T/4, thus when the camera is the closest to the bulb) with amp Amplitude with an additive
 46 | 	// constant cons (defined such as its max is maxTimeDilatation, reached every even*T/4 time, and its min is minTimeDilatation, reached every odd*T/4 time)
 47 | 	alpha = 1
 48 | 	maxTimeDilatation = 1
 49 | 	minTimeDilatation = 0.25
 50 | 	pulse = 4*Math.PI/(60*T)
 51 | 	amp = (maxTimeDilatation - minTimeDilatation)/2
 52 | 	cons = maxTimeDilatation - amp
 53 | 
 54 | }
 55 | 
 56 | function init() {
 57 | 	initParameters();
 58 | 	// Build scene
 59 | 	container = document.getElementById( 'container' );
 60 | 
 61 | 	view.camera = new THREE.PerspectiveCamera( view.fov, window.innerWidth / window.innerHeight, view.near, view.far );
 62 | 	view.camera.position.fromArray( view.eye );
 63 | 	view.camera.up.fromArray( view.up );
 64 | 
 65 | 	scene = new THREE.Scene();
 66 | 
 67 | 	// Create bulb mesh attached to a light + a weak ambient hemisphere light 
 68 | 	let geometry = new THREE.SphereGeometry( 1, 32, 32 );
 69 | 	var material = new THREE. MeshStandardMaterial({color:0x000000,emissive:0xffffff,emissiveIntensity:lightIntensity});
 70 | 	bulb = new THREE.Mesh( geometry, material );
 71 | 	light = new THREE.PointLight(0xF5DCAF,lightIntensity,Infinity,2)
 72 | 	light.power = lightIntensity*20000
 73 | 	light.position.set(0,length*Math.sin(theta),z0-length*Math.cos(theta))
 74 | 	light.add(bulb)
 75 | 	light.castShadow = true;
 76 | 	hemiLight = new THREE.HemisphereLight( 0xddeeff, 0x0f0e0d, 0.1 );
 77 | 	scene.add(hemiLight)
 78 | 	scene.add(light)
 79 | 
 80 | 	// Create the wire linking the bulb to the roof
 81 | 	var curveObject = drawSpline(light.position,{x:0,y:0,z:z0},0xffffff);
 82 | 	scene.add(curveObject)
 83 | 
 84 | 	// Create the room
 85 | 	var room = createRoom(z0)
 86 | 	scene.add(room)
 87 | 
 88 | 	//create a group of boids
 89 | 	boids = new THREE.Group()
 90 | 	for (let i=0;i<numberOfBoids;i++){
 91 | 		var boid = addABoid(boidSize,0x110f01,{x:i%2,y:i*startWidth/numberOfBoids-startWidth/2,z:30},boids)
 92 | 		var bulbPosition = new THREE.Vector3(light.position.x,light.position.y,light.position.z)
 93 | 		var boidPosition = new THREE.Vector3(boid.position.x,boid.position.y,boid.position.z)
 94 | 		// initial speed = translation towards the bulb
 95 | 		boid.speed = bulbPosition.addScaledVector(boidPosition,-1).normalize()
 96 | 	}
 97 | 	scene.add(boids)
 98 | 
 99 | 	// renderer settings
100 | 	renderer = new THREE.WebGLRenderer( { antialias: true } );
101 | 	renderer.setPixelRatio( window.devicePixelRatio );
102 | 	renderer.setSize( window.innerWidth, window.innerHeight );
103 | 
104 | 	//realistic lightning renderer
105 | 	renderer.physicallyCorrectLights = true;
106 | 	renderer.gammaInput = true;
107 | 	renderer.gammaOutput = true;
108 | 	renderer.shadowMap.enabled = true;
109 | 	renderer.toneMapping = THREE.ACESFilmicToneMapping;
110 | 
111 | 	container.appendChild( renderer.domElement );
112 | 
113 | 	animate();
114 | }
115 | 
116 | 
117 | 
118 | 
119 | 
120 | 
121 | 
122 | 
123 | 
124 | 
125 | 
126 | 
127 | // ANIMATE AND UPDATE FUNCTIONS
128 | 
129 | function animate(){
130 | 	// Updating time dilatation parameter, and then the time
131 | 	alpha = cons+amp*Math.cos(pulse*t)
132 | 	t += alpha
133 | 
134 | 
135 | 	// Update the camera motion sense (going up for t in [2kT;(2k+1)T] or going down for t in [(2k+1)T;(2k+2)T] for k >= 0)
136 | 	if (Math.floor(t/(T*60))%2 == 0){
137 | 		if (goingUp == false){
138 | 			goingUp=true;
139 | 			console.log("going up")
140 | 		}
141 | 		zcons=z1;
142 | 		zstep=(z0-2*z1)/(60*T);
143 | 	}
144 | 	else if (Math.floor(t/(T*60))%2 == 1){
145 | 		if (goingUp == true){
146 | 			goingUp=false;
147 | 			console.log("going down")
148 | 		}
149 | 		zcons=z0-z1;
150 | 		zstep=(2*z1-z0)/(60*T);
151 | 	}
152 | 
153 | 	// Boids update relies on next bulb position, thus update boids positions before bulb position
154 | 	animateBoids();
155 | 	animateBulb(); 
156 | 
157 | 	// Update the camera position
158 | 	animateCamera();
159 | 
160 | 	render();
161 | 	requestAnimationFrame( animate );
162 | 
163 | 	
164 | }
165 | 
166 | function animateBulb(){
167 | 
168 | 	// Recompute theta (motionRatio is an arbitrary parameter set to make the motion realistic)
169 | 	theta = Math.PI/180*view.theta0*Math.cos(w0*t/60)
170 | 	light.position.set(0,length*Math.sin(theta),z0-length*Math.cos(theta))
171 | 
172 | 	scene.children[2] = drawSpline(light.position,{x:0,y:0,z:z0},0xffffff)
173 | }
174 | 
175 | function animateBoids(){
176 | 
177 | 	for (let i=0;i<boids.children.length;i++){
178 | 		var boid = boids.children[i]
179 | 		animateBoid(boid)
180 | 	}
181 | }
182 | 
183 | function animateBoid(boid){
184 | 	// Update boid speed to time distortion
185 | 	let TemporarySpeedScale = alpha*SpeedScale
186 | 
187 | 	// Get Speed Vector for the first rule (Avoid Obstacle & Pursuit)
188 | 	let res = avoidObstacleSpeed(boid,minDistanceLight,continuityRatio)
189 | 	let SpeedVector = res[0]
190 | 	let NextBulbPosition = res[1]
191 | 
192 | 
193 | 	// Get Speed Vector for the third rule (Avoid Collision)
194 | 	let res2 = avoidCollisionSpeed(boid)
195 | 	let SpeedVectorCollision = res2[0]
196 | 	let surrounding_boids = res2[1]
197 | 	// Add it to the first one
198 | 	let SpeedVector2 = SpeedVector.clone().multiplyScalar(1).addScaledVector(SpeedVectorCollision,1).normalize()
199 | 	// Check the first rule is still respected
200 | 	if (checkObstacleAvoidanceRule(boid,SpeedVector2,NextBulbPosition,minDistanceLight,SpeedScale)){
201 | 		SpeedVector = SpeedVector2
202 | 	}
203 | 
204 | 
205 | 	// Get Speed Vector for the fourth rule (Alignment)
206 | 	let SpeedVectorAlignment  = ensureAlignmentSpeed(boid,surrounding_boids)
207 | 	// Add it to the previous one
208 | 	let SpeedVector3 = SpeedVector.clone().addScaledVector(SpeedVectorAlignment,1).normalize()
209 | 	// Check the first rule is still respected
210 | 	if (checkObstacleAvoidanceRule(boid,SpeedVector3,NextBulbPosition,minDistanceLight,SpeedScale)){
211 | 		SpeedVector = SpeedVector3
212 | 	}
213 | 
214 | 
215 | 	// Get Speed Vector for the fifth rule (Cohesion)
216 | 	let SpeedVectorCohesion  = ensureCohesionSpeed(boid,surrounding_boids)
217 | 	// Add it to the previous one
218 | 	let SpeedVector4 = SpeedVector.clone().addScaledVector(SpeedVectorCohesion,0).normalize()
219 | 	// Check the first rule is still respected
220 | 	if (checkObstacleAvoidanceRule(boid,SpeedVector4,NextBulbPosition,minDistanceLight,SpeedScale)){
221 | 		SpeedVector = SpeedVector4
222 | 	}
223 | 
224 | 	// Apply the final speed vector to the boid (rotate it towards its direction, then translate it of dilated time speed, and update its speed attribute)
225 | 	boid.quaternion.setFromUnitVectors(new THREE.Vector3(0,1,0),SpeedVector)
226 | 	boid.translateY(TemporarySpeedScale)
227 | 	boid.speed = SpeedVector
228 | }
229 | 
230 | function animateCamera(){
231 | 	// Ellipse in (Oxy) plan
232 | 	x = a*Math.cos(omega*t)
233 | 	y = b*Math.sin(omega*t)
234 | 	// Linear function upon z direction on a period T (up or down)
235 | 	z = zcons+zstep*(t%(T*60))
236 | 	view.camera.position.set(x,y,z)
237 | }
238 | 
239 | function render() {
240 | 
241 | 	updateSize();
242 | 
243 | 	var left = Math.floor( windowWidth * view.left );
244 | 	var top = Math.floor( windowHeight * view.top );
245 | 	var width = Math.floor( windowWidth * view.width );
246 | 	var height = Math.floor( windowHeight * view.height );
247 | 
248 | 	renderer.setViewport( left, top, width, height );
249 | 	renderer.setScissor( left, top, width, height );
250 | 	renderer.setScissorTest( true );
251 | 	renderer.setClearColor( view.background );
252 | 
253 | 	view.camera.aspect = width / height;
254 | 	view.camera.updateProjectionMatrix();
255 | 	// update the lookAt vector, staring p * bulb position + (1-p) * scene center position 
256 | 	view.updateCamera(view.camera,scene,bulb);
257 | 
258 | 	renderer.render( scene, view.camera );
259 | }
260 | 
261 | function updateSize() {
262 | 
263 | 	if ( windowWidth != window.innerWidth ) {
264 | 
265 | 		windowWidth = window.innerWidth;
266 | 		windowHeight = window.innerHeight;
267 | 
268 | 		renderer.setSize( windowWidth, windowHeight );
269 | 
270 | 	}
271 | 
272 | }
273 | 
274 | 
275 | 
276 | 
277 | 
278 | 
279 | 
280 | 
281 | 
282 | 
283 | // FUNCTIONS TO BUILD OBJECTS
284 | 
285 | // Build a Sphere and add it to parentNode
286 | function addASphere(size,clr,position,parentNode,shadows=true){
287 | 	let geometry = new THREE.SphereGeometry( size, 32, 32 );
288 | 	let material = new THREE. MeshPhongMaterial({color:clr});
289 | 	if (shadows == false) {
290 | 		material = new THREE. MeshBasicMaterial({color:clr});
291 | 	}
292 | 	let sphere = new THREE.Mesh( geometry, material );
293 | 	sphere.position.set(position.x,position.y,position.z);
294 | 	parentNode.add(sphere);
295 | 	return sphere; //only for other use, if needed
296 | }
297 | 
298 | // Build a boid (an open cone from 30° to 150°) and add it to parentNode
299 | function addABoid(size,clr,position,parentNode,shadows=true){
300 | 	let curveRatio = 0.5
301 | 	let wingGeometry = new THREE.ConeGeometry( size*curveRatio, size, 8 , 1, true, Math.PI/6, 5*Math.PI/6);
302 | 	let material = new THREE.MeshPhongMaterial({color:clr, side:THREE.DoubleSide});
303 | 	if (shadows == false) {
304 | 		material = new THREE.MeshBasicMaterial({color:clr, side:THREE.DoubleSide});
305 | 	}
306 | 	let boidWings = new THREE.Mesh( wingGeometry, material );
307 | 	boidWings.position.set(position.x,position.y,position.z);
308 | 	parentNode.add(boidWings);
309 | 	return boidWings; //only for other use, if needed
310 | }
311 | 
312 | // Build a plan with z coordinate fixed and length sizex upon x direction, and sizey upon y direction, with a wooden texture on it
313 | function GeneratePlane(z=0,sizex=roomSize,sizey=roomSize){
314 | 	let quadGeometry = new THREE.PlaneBufferGeometry(sizex,sizey)
315 | 
316 | 	let texture = new THREE.TextureLoader().load( 'textures/wood_texture.jpg' );
317 | 	let material = new THREE.MeshPhysicalMaterial({map:texture, side: THREE.DoubleSide})
318 | 	
319 | 	let plane = new THREE.Mesh(quadGeometry,material)
320 | 	plane.position.set(0,0,z)
321 | 	return plane
322 | }
323 | 
324 | // Build a spline representing the wire between the roof and the bulb. The new middle point is computed as the middle point shifted orthogonally from the lign by shiftRatio
325 | function drawSpline(beginning,end,clr){
326 | 	// Compute y sign to know which way to bend the wire
327 | 	let ySign = Math.sign((end.y+beginning.y)/2)
328 | 	// Compute the bending strength and multiply per Math.abs(beginning.y) to ensure it decreases as the bulb gets closer to the theta = 0 position, and also to ensure
329 | 	// that the shift is null if thete is null (no discontinuity in the wire movement)
330 | 	let appliedRatio = -shiftRatio*Math.abs(beginning.y)
331 | 	// Compute middle line position vector and the direction vector from the roof to the bulb
332 | 	let midVector = new THREE.Vector3( 0, (end.y+beginning.y)/2, (end.z+beginning.z)/2 )
333 | 	let positionVector = new THREE.Vector3(0,end.y-beginning.y,end.z-beginning.z)
334 | 	// Compute the orthogonal vector to the direction vector (opposite sense to the bending shift)
335 | 	let orthogVector = new THREE.Vector3(0,positionVector.z,-positionVector.y).normalize() 
336 | 
337 | 
338 | 	// Compute the curve passing by the three points
339 | 	var curve = new THREE.CatmullRomCurve3( [
340 | 		new THREE.Vector3( beginning.x, beginning.y, beginning.z ),
341 | 		midVector.clone().addScaledVector(orthogVector,ySign*appliedRatio),
342 | 		new THREE.Vector3( end.x, end.y, end.z ),
343 | 	]);
344 | 
345 | 	// Build the curve line object
346 | 	var points = curve.getPoints( 20 );
347 | 	var geometry = new THREE.BufferGeometry().setFromPoints( points );
348 | 	var material = new THREE.LineBasicMaterial( { color : clr } );
349 | 	
350 | 	// Create the final object to add to the scene
351 | 	var curveObject = new THREE.Line( geometry, material );
352 | 	return curveObject;
353 | }
354 | 
355 | // Build the room (one roof, one ground, 4 walls)
356 | function createRoom(z0){
357 | 	var room = new THREE.Group()
358 | 	// Create ground plane
359 | 	var ground = GeneratePlane()
360 | 	scene.add(ground)
361 | 
362 | 	//create roof
363 | 	var roof = GeneratePlane(z = z0)
364 | 	scene.add(roof)
365 | 
366 | 	//create walls
367 | 	var leftWall = GeneratePlane(z = z0/2,sizex=roomSize,sizey=z0)
368 | 	leftWall.translateY(-roomSize/2)
369 | 	leftWall.rotateX(Math.PI/2)
370 | 
371 | 	var rightWall = GeneratePlane(z = z0/2,sizex=roomSize,sizey=z0)
372 | 	rightWall.translateY(roomSize/2)
373 | 	rightWall.rotateX(Math.PI/2)
374 | 
375 | 	var frontWall = GeneratePlane(z = z0/2,sizex=z0,sizey=roomSize)
376 | 	frontWall.translateX(-roomSize/2)
377 | 	frontWall.rotateY(Math.PI/2)
378 | 
379 | 	var backWall = GeneratePlane(z = z0/2,sizex=z0,sizey=roomSize)
380 | 	backWall.translateX(roomSize/2)
381 | 	backWall.rotateY(Math.PI/2)
382 | 
383 | 	room.add(rightWall)
384 | 	room.add(leftWall)
385 | 	room.add(frontWall)
386 | 	room.add(backWall)
387 | 
388 | 	return room
389 | }
390 | 
391 | 
392 | 
393 | 
394 | 
395 | 
396 | 
397 | 
398 | 
399 | // CROWD ANIMATION VECTOR CONSTRUCTION
400 | // First rule : follow the bulb if it doesn't lead to collision, otherwise, flee the bulb
401 | function avoidObstacleSpeed(boid,minDistanceLight,continuityRatio){
402 | 	// Compute Next Bulb Position
403 | 	let length = view.length
404 | 	let z0 = view.z0
405 | 	let w0 = Math.sqrt(g/length)
406 | 	let theta = Math.PI/180*view.theta0*Math.cos(w0*(t+1)*1/20)
407 | 	var NextBulbPosition = new THREE.Vector3(0,length*Math.sin(theta),z0-length*Math.cos(theta))
408 | 
409 | 	// Compute Next Boid Position : continuityRatio is the proportion of old speed vector kept in new speed vector
410 | 	var boidPosition = new THREE.Vector3(boid.position.x,boid.position.y,boid.position.z)
411 | 	var NextBoidSpeed = ((NextBulbPosition.clone().addScaledVector(boidPosition,-1)).multiplyScalar(1-continuityRatio)).addScaledVector(boid.speed,continuityRatio).normalize()
412 | 	var NextBoidPosition = boidPosition.clone().addScaledVector(NextBoidSpeed,SpeedScale)
413 | 
414 | 	 // Check if there is no collision with bulb
415 | 	if (NextBoidPosition.distanceTo(NextBulbPosition)<=minDistanceLight){
416 | 		NextBoidSpeed = boidPosition.clone().addScaledVector(NextBulbPosition,-continuityRatio).addScaledVector(boid.speed,continuityRatio).normalize()
417 | 	}
418 | 	return [NextBoidSpeed, NextBulbPosition]
419 | }
420 | 
421 | // Second Rule : avoid collisions bewteen boids
422 | function avoidCollisionSpeed(boid){
423 | 	// Get surrounding boids
424 | 	let surrounding_boids = surroundingBoids(boid, surrounding_distance)
425 | 	let speedVector = new THREE.Vector3(0,0,0)
426 | 	let boidPosition = new THREE.Vector3(boid.position.x,boid.position.y,boid.position.z)
427 | 	var currentBoidPosition
428 | 	for (let i=0;i<surrounding_boids.length;i++){
429 | 		currentBoid = surrounding_boids[i]
430 | 		currentBoidPosition = new THREE.Vector3(currentBoid.position.x,currentBoid.position.y,currentBoid.position.z)
431 | 		speedVector.add(boidPosition.clone().addScaledVector(currentBoidPosition,-1))
432 | 	}
433 | 	return [speedVector.normalize(),surrounding_boids]
434 | }
435 | 
436 | // Third Rule : ensure boids tend to have the same alignment
437 | function ensureAlignmentSpeed(boid,surrounding_boids){
438 | 	let speedVector = new THREE.Vector3(0,0,0)
439 | 	for (let i=0;i<surrounding_boids.length;i++){
440 | 		speedVector.add(surrounding_boids[i].speed)
441 | 	}
442 | 	return speedVector.normalize()
443 | }
444 | 
445 | // Fourth Rule : ensure boids group has cohesion
446 | function ensureCohesionSpeed(boid,surrounding_boids){
447 | 	let averagePositionVector = new THREE.Vector3(0,0,0)
448 | 	let boidPosition = new THREE.Vector3(boid.position.x,boid.position.y,boid.position.z)
449 | 	for (let i=0;i<surrounding_boids.length;i++){
450 | 		currentBoid = surrounding_boids[i]
451 | 		currentBoidPosition = new THREE.Vector3(currentBoid.position.x,currentBoid.position.y,currentBoid.position.z)
452 | 		averagePositionVector.add(currentBoidPosition)
453 | 	}
454 | 	averagePositionVector.multiplyScalar(1/surrounding_boids.length)
455 | 	let speedVector = averagePositionVector.addScaledVector(boidPosition,-1)
456 | 	return speedVector.normalize()
457 | }
458 | 
459 | // Check if bulb avoidance and pursuit rule is still respected
460 | function checkObstacleAvoidanceRule(boid,SpeedVector,NextBulbPosition,minDistanceLight,SpeedScale){
461 | 	// Check if the first rule is still respected
462 | 	let boidPosition = new THREE.Vector3(boid.position.x,boid.position.y,boid.position.z)
463 | 	let NextBoidPosition = boidPosition.clone().addScaledVector(SpeedVector,SpeedScale)
464 | 	return NextBoidPosition.distanceTo(NextBulbPosition)>minDistanceLight
465 | 
466 | 	
467 | }
468 | 
469 | // Return all the boids surrounding boid (distance from boid inferior to surrounding_distance)
470 | function surroundingBoids(boid, surrounding_distance){
471 | 
472 | 	let res = []
473 | 	let boidPosition = new THREE.Vector3(boid.position.x,boid.position.y,boid.position.z)
474 | 	var currentBoid, currentBoidPosition, distance
475 | 	
476 | 	for (let i=0;i<boids.children.length;i++){
477 | 
478 | 		currentBoid = boids.children[i]
479 | 
480 | 		if (currentBoid != boid){
481 | 
482 | 			currentBoidPosition = new THREE.Vector3(currentBoid.position.x,currentBoid.position.y,currentBoid.position.z)
483 | 			distance = boidPosition.distanceTo(currentBoidPosition)
484 | 
485 | 			if (distance <= surrounding_distance){
486 | 				res.push(currentBoid)
487 | 			}
488 | 		} 
489 | 	}
490 | 	return res
491 | }
492 | 
493 | 
494 | 
495 | 
496 | 
497 | 
498 | 
499 | 
500 | 
501 | 
502 | 
503 | 
504 | 
505 | 
506 | 
507 | 
508 | 
509 | 
510 | 
511 | console.log("DBG: helperFns.js loaded");
512 | 


--------------------------------------------------------------------------------
/main.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>three.js assignment 2</title>
 5 | 		<meta charset="utf-8">
 6 | 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 7 | 		<style>
 8 | 			body {
 9 | 				color: #000;
10 | 				font-family:Monospace;
11 | 				font-size:13px;
12 | 				text-align:center;
13 | 
14 | 				background-color: #ffffff;
15 | 				margin: 0px;
16 | 				overflow: hidden;
17 | 			}
18 | 
19 | 			#info {
20 | 				position: absolute;
21 | 				top: 0px; width: 100%;
22 | 				padding: 5px;
23 | 				background-color: white;
24 | 			}
25 | 
26 | 			a {
27 | 				color: #0080ff;
28 | 			}
29 | 		</style>
30 | 
31 | 	</head>
32 | 	<body>
33 | 		<div id="container"></div>
34 | 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - assignment 2 - webgl</div>
35 | 		<script src="three.min.js"></script>
36 | 		<script src="helperFns.js"></script>
37 | 		<script>
38 | 
39 | 			var container, stats;
40 | 
41 | 			var views, scene, renderer;
42 | 
43 | 			var windowWidth, windowHeight;
44 | 
45 | 			view =
46 | 				{
47 | 					left: 0,
48 | 					top: 0,
49 | 					width: 1,
50 | 					height: 1,
51 | 					near:0.1,
52 | 					far:500,
53 | 					background: new THREE.Color( 0, 0, 0 ),
54 | 
55 | 					eye: [ 70, 0, 10],
56 | 					up: [ 0, 0, 1 ],
57 | 					fov: 60,
58 | 
59 | 					length: 35,
60 | 					theta0: 70,
61 | 
62 | 					x0:90,
63 | 					z0:40,
64 | 					
65 | 					updateCamera: function ( camera, scene, bulb ) {
66 | 						p = 0.5 - 0.5 * Math.cos(4*Math.PI*t/(60*T))
67 | 
68 | 						let bulbPosition = new THREE.Vector3(light.position.x,light.position.y,light.position.z);
69 | 						let initialLookAt = new THREE.Vector3(scene.position.x,scene.position.y,scene.position.z+20)
70 | 
71 | 						camera.lookAt( bulbPosition.multiplyScalar(p).addScaledVector(initialLookAt,1-p))
72 | 					}
73 | 				}
74 | 
75 | 			init();
76 | 
77 | 
78 | 		</script>
79 | 	</body>
80 | </html>


--------------------------------------------------------------------------------
/pictures/boids1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LuluDavid/THREE.js-Crowd-Animation/a308296bce912150047eaffe00fa4c3da8db785b/pictures/boids1.png


--------------------------------------------------------------------------------
/pictures/boids2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LuluDavid/THREE.js-Crowd-Animation/a308296bce912150047eaffe00fa4c3da8db785b/pictures/boids2.png


--------------------------------------------------------------------------------
/textures/wood_texture.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LuluDavid/THREE.js-Crowd-Animation/a308296bce912150047eaffe00fa4c3da8db785b/textures/wood_texture.jpg


--------------------------------------------------------------------------------