Boids i

Developer
Khalkeus
Size
3,564 Kb
Views
12,144
  1. Boids i Previews
  2. Boids i HTML Codes
  3. Boids i CSS Codes
  4. Boids i JS Codes

How do I make an boids i?

What is a boids i? How do you make a boids i? This script and codes were developed by Khalkeus on 11 November 2022, Friday.

Boids i Previews
IQ Test

Boids i - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>boids i</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head>	<meta charset = utf-8>	<title>></title>	<style>	</style>
</head>
<body id = "b">
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Boids i - Script Codes CSS Codes

/* click and drag to rotate */
/* scroll to zoom */
body{	width: 100%;	height: 100%;	margin: 0px;	padding: 0px;	overflow: hidden;
}

Boids i - Script Codes JS Codes

var mouseDown = false;
var dx = 0;
var dy = 0;
var zoomD = 0;
var mouse = [0,0];
var mouseNormalized = new THREE.Vector2(-1, -1);
var mouseSlowFactor = 333;
function onMouseMove(e){	e.preventDefault();	if(mouseDown){	dx += e.clientX - mouse[0];	dy += e.clientY - mouse[1];	mouse = [e.clientX, e.clientY];	}	mouseNormalized.x = (e.clientX/window.innerWidth)*2 - 1;	mouseNormalized.y = -(e.clientY/window.innerHeight)*2 + 1;
}
function onKeyDown(e) {
}
function onTouchMove(e) {	e.preventDefault();	var t = e.touches[0];	dx += (t.pageX - mouse[0])/2;	dy += (t.pageY - mouse[1])/2;	mouse = [e.pageX, e.pageY];
}
function onMouseDown(e){	e.preventDefault();	mouseDown = true;	mouse = [e.clientX, e.clientY];
}
function onMosueUp(e){	e.preventDefault();	mouseDown = false;
}
function onLeaveWindow(e){	mouseDown = false;
}
function onScroll(e){	e.preventDefault();	var d = e.wheelDelta;	if(d === undefined){	d = -e.detail;	}	zoomD += d;
}
function onResize(){	renderer.setSize(window.innerWidth, window.innerHeight);	camera.aspect = window.innerWidth / window.innerHeight;	camera.updateProjectionMatrix();
}
function doMouse(c){	canvas.addEventListener('mousemove', onMouseMove);	canvas.addEventListener('touchmove', onTouchMove);	canvas.addEventListener('mousedown', onMouseDown);	canvas.addEventListener('mouseup', onMosueUp);	canvas.addEventListener('mouseout', onLeaveWindow);	canvas.addEventListener('DOMMouseScroll', onScroll);	canvas.addEventListener('mousewheel', onScroll);	document.addEventListener('keydown', onKeyDown);	window.onresize = onResize;
}
function updateRotation(){	if(zoomD > 0){	camera.position.z += 5;	if(zoomD > 5){	zoomD -= 5;	}else{	zoomD = 0;	}	}else if (zoomD < 0){	camera.position.z -= 5;	if(zoomD > 5){	zoomD -= 5;	}else{	zoomD = 0;	}	}	if(flock != undefined){	flock.obj.rotation.y += dx/mouseSlowFactor;	dx -= dx/5;	flock.obj.rotation.x += dy/(mouseSlowFactor);	dy -= dy/5;	}
}
var scene, camera, renderer, canvas, ctx;
window.onload = function(){	init();
}
function initThree(){	renderer = new THREE.WebGLRenderer({});	scene = new THREE.Scene();	camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);	renderer.setSize(window.innerWidth, window.innerHeight);	document.body.appendChild(renderer.domElement);	camera.position.z = 100;	scene.background = new THREE.Color(0xffffff);	canvas = document.querySelector('#b canvas');	doMouse(canvas);
}
var render = function () {	flock.updateFlock();	requestAnimationFrame(render);	renderer.render(scene, camera);
}
var flock, g;
function init() {	initThree();	flock = new flockOfBoids(150);	render();
}
var maxSpeed = .5;
var boundingBox = 45;
var maxDist = .3;
var radius = 5;
function flockOfBoids(size){	this.obj = new THREE.Group();	this.flock = [];	var box = new THREE.Mesh(new THREE.SphereGeometry(boundingBox, 6, 3), new THREE.MeshBasicMaterial({wireframe: true, color: 0xff0000}))	this.obj.add(box);	for(var i = 0; i < size; i++){	this.flock.push(new boid(Math.random() * 2 * boundingBox - boundingBox, Math.random() * 2 * boundingBox - boundingBox, Math.random() * 2 * boundingBox - boundingBox));	this.obj.add(this.flock[i].obj);	}	scene.add(this.obj);	this.empty = new THREE.Vector3(0, 0, 0);	this.updateFlock = function(){	if(!mouseDown){	this.obj.rotation.x += .005;	this.obj.rotation.y += .005;	this.obj.rotation.z += .005;	}	updateRotation();	var v1, v2, v3, v4;	var c = this.empty.clone();	for(var i = 0; i < this.flock.length; i++){	c.x += this.flock[i].obj.position.x;	c.y += this.flock[i].obj.position.y;	c.z += this.flock[i].obj.position.z;	}	c = new THREE.Vector3(c.x/this.flock.length, c.y/this.flock.length, c.z/this.flock.length);	for(var i = 0; i < this.flock.length; i++){	v1 = new THREE.Vector3(c.x - this.flock[i].obj.position.x, c.y - this.flock[i].obj.position.y, c.z - this.flock[i].obj.position.z)	v2 = this.empty.clone();	v3 = this.empty.clone();	var n = 0;	for(var j = 0; j < this.flock.length; j++){	if(i != j){	if(Math.abs(this.flock[i].obj.position.x - this.flock[j].obj.position.x) +	Math.abs(this.flock[i].obj.position.y - this.flock[j].obj.position.y) +	Math.abs(this.flock[i].obj.position.z - this.flock[j].obj.position.z) < maxDist	){	//don't collide	v2.x += (this.flock[i].obj.position.x - this.flock[j].obj.position.x)*50;	v2.y += (this.flock[i].obj.position.y - this.flock[j].obj.position.y)*50;	v2.z += (this.flock[i].obj.position.z - this.flock[j].obj.position.z)*50;	}	if(this.flock[i].obj.position.distanceTo(this.flock[j].obj.position) < radius){	v3.x += this.flock[j].velocity.x;	v3.y += this.flock[j].velocity.y;	v3.z += this.flock[j].velocity.z;	n+= 1;	}	}	}	//match velocity w/ nearby	if(n > 0){	v3.x = (v3.x/n)/8;	v3.y = (v3.y/n)/8;	v3.z = (v3.z/n)/8;	}	//stay within bounding sphere	v4 = this.empty.clone()	if(this.flock[i].obj.position.distanceTo(this.empty) > boundingBox){	v4.x = -this.flock[i].obj.position.x	v4.y = -this.flock[i].obj.position.y	v4.z = -this.flock[i].obj.position.z	}	this.flock[i].holdVel.x += v1.x/100 + v2.x * 100 + v3.x + v4.x/(boundingBox * 10);	this.flock[i].holdVel.y += v1.y/100 + v2.y * 100 + v3.y + v4.y/(boundingBox * 10);	this.flock[i].holdVel.z += v1.z/100 + v2.z * 100 + v3.z + v4.z/(boundingBox * 10);	//bound speed	if(this.flock[i].holdVel.length() > maxSpeed){	this.flock[i].holdVel = this.flock[i].velocity.normalize();	this.flock[i].holdVel.x *= maxSpeed;	this.flock[i].holdVel.y *= maxSpeed;	this.flock[i].holdVel.z *= maxSpeed;	}	}	for(var i = 0; i < this.flock.length; i++){	this.flock[i].velocity = this.flock[i].holdVel;	this.flock[i].obj.position.x += this.flock[i].velocity.x;	this.flock[i].obj.position.y += this.flock[i].velocity.y;	this.flock[i].obj.position.z += this.flock[i].velocity.z;	var aim = new THREE.Vector3();	aim.copy(this.flock[i].obj.position).add(this.flock[i].velocity);	this.flock[i].obj.lookAt(aim);	}	}
}
var mat = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true})
var size = 2;
function boid(x, y, z) {	this.position = new THREE.Vector3(x, y, z);	this.velocity = (new THREE.Vector3(Math.random()*2 - 1, Math.random()*2 - 1, Math.random()*2 - 1)).normalize();	this.holdVel = this.velocity;	var geo = new THREE.ConeBufferGeometry(size/5, size, 3);	geo.rotateX(Math.PI / 2);	this.obj = new THREE.Mesh(geo, mat);	this.obj.position.x = x;	this.obj.position.y = y;	this.obj.position.z = z;
}
Boids i - Script Codes
Boids i - Script Codes
Home Page Home
Developer Khalkeus
Username khalkeus
Uploaded November 11, 2022
Rating 3
Size 3,564 Kb
Views 12,144
Do you need developer help for Boids i?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Khalkeus (khalkeus) Script Codes
Name
Rasterization
Flowers
Live pixel sorting
Capybaras
City generator
Boids iii
Metaballs
Character generator
Particle fire
Waves
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!