Birds

Developer
XORXOR
Size
5,934 Kb
Views
4,048
  1. Birds Previews
  2. Birds HTML Codes
  3. Birds CSS Codes
  4. Birds JS Codes

How do I make an birds?

Rendering variation for the three.js flocking example.A kind of direction-dependent billboarding, which we developed and used first for the bird rendering of our dance theatre play, Silhouette Cinema.. What is a birds? How do you make a birds? This script and codes were developed by XORXOR on 27 January 2023, Friday.

Birds Previews
IQ Test

Birds - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Birds</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>	<body>	</body>
<!-- shader for bird's position -->	<script id="fragmentShaderPosition" type="x-shader/x-fragment">	uniform float time;	uniform float delta;	void main()	{	vec2 uv = gl_FragCoord.xy / resolution.xy;	vec4 tmpPos = texture2D( texturePosition, uv );	vec3 position = tmpPos.xyz;	vec3 velocity = texture2D( textureVelocity, uv ).xyz;	float phase = tmpPos.w;	phase = mod( ( phase + delta +	length( velocity.xz ) * delta * 3. +	max( velocity.y, 0.0 ) * delta * 6. ), 62.83 );	gl_FragColor = vec4( position + velocity * delta * 15. , phase );	}	</script>	<!-- shader for bird's velocity -->	<script id="fragmentShaderVelocity" type="x-shader/x-fragment">	uniform float time;	uniform float testing;	uniform float delta; // about 0.016	uniform float seperationDistance; // 20	uniform float alignmentDistance; // 40	uniform float cohesionDistance; //	uniform float freedomFactor;	uniform vec3 predator;	const float width = resolution.x;	const float height = resolution.y;	const float PI = 3.141592653589793;	const float PI_2 = PI * 2.0;	// const float VISION = PI * 0.55;	float zoneRadius = 40.0;	float zoneRadiusSquared = 1600.0;	float separationThresh = 0.45;	float alignmentThresh = 0.65;	const float UPPER_BOUNDS = BOUNDS;	const float LOWER_BOUNDS = -UPPER_BOUNDS;	const float SPEED_LIMIT = 9.0;	float rand(vec2 co){	return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);	}	void main() {	zoneRadius = seperationDistance + alignmentDistance + cohesionDistance;	separationThresh = seperationDistance / zoneRadius;	alignmentThresh = ( seperationDistance + alignmentDistance ) / zoneRadius;	zoneRadiusSquared = zoneRadius * zoneRadius;	vec2 uv = gl_FragCoord.xy / resolution.xy;	vec3 birdPosition, birdVelocity;	vec3 selfPosition = texture2D( texturePosition, uv ).xyz;	vec3 selfVelocity = texture2D( textureVelocity, uv ).xyz;	float dist;	vec3 dir; // direction	float distSquared;	float seperationSquared = seperationDistance * seperationDistance;	float cohesionSquared = cohesionDistance * cohesionDistance;	float f;	float percent;	vec3 velocity = selfVelocity;	float limit = SPEED_LIMIT;	dir = predator * UPPER_BOUNDS - selfPosition;	dir.z = 0.;	// dir.z *= 0.6;	dist = length( dir );	distSquared = dist * dist;	float preyRadius = 150.0;	float preyRadiusSq = preyRadius * preyRadius;	// move birds away from predator	if (dist < preyRadius) {	f = ( distSquared / preyRadiusSq - 1.0 ) * delta * 100.;	velocity += normalize( dir ) * f;	limit += 5.0;	}	// if (testing == 0.0) {}	// if ( rand( uv + time ) < freedomFactor ) {}	// Attract flocks to the center	vec3 central = vec3( 0., 0., 0. );	dir = selfPosition - central;	dist = length( dir );	dir.y *= 2.5;	velocity -= normalize( dir ) * delta * 5.;	for (float y=0.0;y<height;y++) {	for (float x=0.0;x<width;x++) {	vec2 ref = vec2( x + 0.5, y + 0.5 ) / resolution.xy;	birdPosition = texture2D( texturePosition, ref ).xyz;	dir = birdPosition - selfPosition;	dist = length(dir);	if (dist < 0.0001) continue;	distSquared = dist * dist;	if (distSquared > zoneRadiusSquared ) continue;	percent = distSquared / zoneRadiusSquared;	if ( percent < separationThresh ) { // low	// Separation - Move apart for comfort	f = (separationThresh / percent - 1.0) * delta;	velocity -= normalize(dir) * f;	} else if ( percent < alignmentThresh ) { // high	// Alignment - fly the same direction	float threshDelta = alignmentThresh - separationThresh;	float adjustedPercent = ( percent - separationThresh ) / threshDelta;	birdVelocity = texture2D( textureVelocity, ref ).xyz;	f = ( 0.5 - cos( adjustedPercent * PI_2 ) * 0.5 + 0.5 ) * delta;	velocity += normalize(birdVelocity) * f;	} else {	// Attraction / Cohesion - move closer	float threshDelta = 1.0 - alignmentThresh;	float adjustedPercent = ( percent - alignmentThresh ) / threshDelta;	f = ( 0.5 - ( cos( adjustedPercent * PI_2 ) * -0.5 + 0.5 ) ) * delta;	velocity += normalize(dir) * f;	}	}	}	// this make tends to fly around than down or up	// if (velocity.y > 0.) velocity.y *= (1. - 0.2 * delta);	// Speed Limits	if ( length( velocity ) > limit ) {	velocity = normalize( velocity ) * limit;	}	gl_FragColor = vec4( velocity, 1.0 );	}	</script>	<script type="x-shader/x-vertex" id="birdVS">	attribute vec2 reference;	attribute float frameId;	uniform sampler2D texturePosition;	uniform sampler2D textureVelocity;	varying vec2 vUV;	varying mat2 vUVRot;	varying float vFrameId;	uniform float time;	void main() {	vec3 pos = texture2D( texturePosition, reference ).xyz;	vec3 vel = normalize( texture2D( textureVelocity, reference ).xyz );	vec4 mvPos = modelViewMatrix * vec4( pos, 1.0 );	gl_PointSize = 20.0 * ( 800.0 / -mvPos.z );	vUV = vec2( vel.x * 0.5 + 0.5, vel.y * 0.5 + 0.5 );	vUV = floor( vUV * 11.0 ) / 11.0 + 0.5 / 11.0; // TODO: better movement later	vUVRot = mat2( 1, 0, 0, 1 );	vFrameId = floor( mod( frameId + time * 0.5, 9.0 ) );	gl_Position = projectionMatrix * mvPos;	}	</script>	<!-- bird geometry shader -->	<script type="x-shader/x-fragment" id="birdFS">	uniform sampler2D texturesBird[ 9 ];	varying vec2 vUV;	varying mat2 vUVRot;	varying float vFrameId;	uniform vec3 color;	void main() {	vec2 uv = 0.9 * vec2( 1.0 / 11.0 ) * ( gl_PointCoord - 0.5 ) * vUVRot + vUV;	int id = int( vFrameId );	vec4 col;	if ( id == 0 ) { col = texture2D( texturesBird[ 0 ], uv ); }	else if ( id == 1 ) { col = texture2D( texturesBird[ 1 ], uv ); }	else if ( id == 2 ) { col = texture2D( texturesBird[ 2 ], uv ); }	else if ( id == 3 ) { col = texture2D( texturesBird[ 3 ], uv ); }	else if ( id == 4 ) { col = texture2D( texturesBird[ 4 ], uv ); }	else if ( id == 5 ) { col = texture2D( texturesBird[ 5 ], uv ); }	else if ( id == 6 ) { col = texture2D( texturesBird[ 6 ], uv ); }	else if ( id == 7 ) { col = texture2D( texturesBird[ 7 ], uv ); }	else if ( id == 8 ) { col = texture2D( texturesBird[ 8 ], uv ); }	gl_FragColor = col;	}	</script>
</html> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/three.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/GPUComputationRenderer.js'></script> <script src="js/index.js"></script>
</body>
</html>

Birds - Script Codes CSS Codes

body {	background-color: #ffffff;	margin: 0px;	overflow: hidden;	font-family:Monospace;	font-size:13px;	text-align:center;	text-align:center;	cursor: pointer;	}	a {	color:#0078ff;	}

Birds - Script Codes JS Codes

/* TEXTURE WIDTH FOR SIMULATION */	var WIDTH = 32;	var BIRDS = WIDTH * WIDTH;	var container;	var camera, scene, renderer, geometry, i, h, color;	var mouseX = 0, mouseY = 0;	var windowHalfX = window.innerWidth / 2;	var windowHalfY = window.innerHeight / 2;	var BOUNDS = 800, BOUNDS_HALF = BOUNDS / 2;	var last = performance.now();	var gpuCompute;	var velocityVariable;	var positionVariable;	var positionUniforms;	var velocityUniforms;	var birdUniforms;	var birdTextures = [];	init();	function init() {	container = document.createElement( 'div' );	document.body.appendChild( container );	loader = new THREE.TextureLoader();	birdTextures[ 0 ] = loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/crow-00.png' );	birdTextures[ 1 ] = loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/crow-01.png' );	birdTextures[ 2 ] = loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/crow-02.png' );	birdTextures[ 3 ] = loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/crow-03.png' );	birdTextures[ 4 ] = loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/crow-04.png' );	birdTextures[ 5 ] = loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/crow-05.png' );	birdTextures[ 6 ] = loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/crow-06.png' );	birdTextures[ 7 ] = loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/crow-07.png' );	birdTextures[ 8 ] = loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/crow-08.png' );	camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );	camera.position.z = 350;	scene = new THREE.Scene();	scene.fog = new THREE.Fog( 0xffffff, 100, 1000 );	renderer = new THREE.WebGLRenderer();	renderer.setClearColor( scene.fog.color );	renderer.setPixelRatio( window.devicePixelRatio );	renderer.setSize( window.innerWidth, window.innerHeight );	container.appendChild( renderer.domElement );	initComputeRenderer();	document.addEventListener( 'mousemove', onDocumentMouseMove, false );	document.addEventListener( 'touchstart', onDocumentTouchStart, false );	document.addEventListener( 'touchmove', onDocumentTouchMove, false );	//	window.addEventListener( 'resize', onWindowResize, false );	var effectController = {	seperation: 20.0,	alignment: 20.0,	cohesion: 20.0,	freedom: 0.75	};	var valuesChanger = function() {	velocityUniforms.seperationDistance.value = effectController.seperation;	velocityUniforms.alignmentDistance.value = effectController.alignment;	velocityUniforms.cohesionDistance.value = effectController.cohesion;	velocityUniforms.freedomFactor.value = effectController.freedom;	};	valuesChanger();	initBirds();	animate();	}	function initComputeRenderer() {	gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer );	var dtPosition = gpuCompute.createTexture();	var dtVelocity = gpuCompute.createTexture();	fillPositionTexture( dtPosition );	fillVelocityTexture( dtVelocity );	velocityVariable = gpuCompute.addVariable( "textureVelocity", document.getElementById( 'fragmentShaderVelocity' ).textContent, dtVelocity );	positionVariable = gpuCompute.addVariable( "texturePosition", document.getElementById( 'fragmentShaderPosition' ).textContent, dtPosition );	gpuCompute.setVariableDependencies( velocityVariable, [ positionVariable, velocityVariable ] );	gpuCompute.setVariableDependencies( positionVariable, [ positionVariable, velocityVariable ] );	positionUniforms = positionVariable.material.uniforms;	velocityUniforms = velocityVariable.material.uniforms;	positionUniforms.time = { value: 0.0 };	positionUniforms.delta = { value: 0.0 };	velocityUniforms.time = { value: 1.0 };	velocityUniforms.delta = { value: 0.0 };	velocityUniforms.testing = { value: 1.0 };	velocityUniforms.seperationDistance = { value: 1.0 };	velocityUniforms.alignmentDistance = { value: 1.0 };	velocityUniforms.cohesionDistance = { value: 1.0 };	velocityUniforms.freedomFactor = { value: 1.0 };	velocityUniforms.predator = { value: new THREE.Vector3() };	velocityVariable.material.defines.BOUNDS = BOUNDS.toFixed( 2 );	velocityVariable.wrapS = THREE.RepeatWrapping;	velocityVariable.wrapT = THREE.RepeatWrapping;	positionVariable.wrapS = THREE.RepeatWrapping;	positionVariable.wrapT = THREE.RepeatWrapping;	var error = gpuCompute.init();	if ( error !== null ) { console.error( error );	}	}	function initBirds() {	var geometry = new THREE.BufferGeometry();	var positions = new Float32Array( BIRDS * 3 );	var references = new THREE.BufferAttribute( new Float32Array( BIRDS * 2 ), 2 );	var frameIds = new THREE.BufferAttribute( new Float32Array( BIRDS ), 1 );	geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );	geometry.addAttribute( 'reference', references );	geometry.addAttribute( 'frameId', frameIds );	for( var i = 0; i < BIRDS; i++ ) {	var x = (i % WIDTH) / WIDTH;	var y = ~~(i / WIDTH) / WIDTH;	references.array[ i * 2 ] = x;	references.array[ i * 2 + 1 ] = y;	frameIds.array[ i ] = Math.random() * 9.0;	}	// For Vertex and Fragment	birdUniforms = {	texturesBird: { value: birdTextures },	color: { value: new THREE.Color( 0xff2200 ) },	texturePosition: { value: null },	textureVelocity: { value: null },	time: { value: 1.0 },	delta: { value: 0.0 }	};	var shaderMaterial = new THREE.ShaderMaterial( {	uniforms: birdUniforms,	vertexShader: document.getElementById( 'birdVS' ).textContent,	fragmentShader: document.getElementById( 'birdFS' ).textContent,	depthTest: false,	transparent: true	});	var particles = new THREE.Points( geometry, shaderMaterial );	scene.add( particles );	}	function fillPositionTexture( texture ) {	var theArray = texture.image.data;	for ( var k = 0, kl = theArray.length; k < kl; k += 4 ) {	var x = Math.random() * BOUNDS - BOUNDS_HALF;	var y = Math.random() * BOUNDS - BOUNDS_HALF;	var z = Math.random() * BOUNDS - BOUNDS_HALF;	theArray[ k + 0 ] = x;	theArray[ k + 1 ] = y;	theArray[ k + 2 ] = z;	theArray[ k + 3 ] = 1;	}	}	function fillVelocityTexture( texture ) {	var theArray = texture.image.data;	for ( var k = 0, kl = theArray.length; k < kl; k += 4 ) {	var x = Math.random() - 0.5;	var y = Math.random() - 0.5;	var z = Math.random() - 0.5;	theArray[ k + 0 ] = x * 10;	theArray[ k + 1 ] = y * 10;	theArray[ k + 2 ] = z * 10;	theArray[ k + 3 ] = 1;	}	}	function onWindowResize() {	windowHalfX = window.innerWidth / 2;	windowHalfY = window.innerHeight / 2;	camera.aspect = window.innerWidth / window.innerHeight;	camera.updateProjectionMatrix();	renderer.setSize( window.innerWidth, window.innerHeight );	}	function onDocumentMouseMove( event ) {	mouseX = event.clientX - windowHalfX;	mouseY = event.clientY - windowHalfY;	}	function onDocumentTouchStart( event ) {	if ( event.touches.length === 1 ) {	event.preventDefault();	mouseX = event.touches[ 0 ].pageX - windowHalfX;	mouseY = event.touches[ 0 ].pageY - windowHalfY;	}	}	function onDocumentTouchMove( event ) {	if ( event.touches.length === 1 ) {	event.preventDefault();	mouseX = event.touches[ 0 ].pageX - windowHalfX;	mouseY = event.touches[ 0 ].pageY - windowHalfY;	}	}	//	function animate() {	requestAnimationFrame( animate );	render();	}	function render() {	var now = performance.now();	var delta = (now - last) / 1000;	if (delta > 1) delta = 1; // safety cap on large deltas	last = now;	positionUniforms.time.value = now;	positionUniforms.delta.value = delta;	velocityUniforms.time.value = now;	velocityUniforms.delta.value = delta;	birdUniforms.time.value = now;	birdUniforms.delta.value = delta;	velocityUniforms.predator.value.set( 0.5 * mouseX / windowHalfX, - 0.5 * mouseY / windowHalfY, 0 );	mouseX = 10000;	mouseY = 10000;	gpuCompute.compute();	birdUniforms.texturePosition.value = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;	birdUniforms.textureVelocity.value = gpuCompute.getCurrentRenderTarget( velocityVariable ).texture;	renderer.render( scene, camera );	}
Birds - Script Codes
Birds - Script Codes
Home Page Home
Developer XORXOR
Username xorxor_hu
Uploaded January 27, 2023
Rating 4.5
Size 5,934 Kb
Views 4,048
Do you need developer help for Birds?

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!

XORXOR (xorxor_hu) Script Codes
Name
Grid of Birds
Pipes
Kaleidoscope
Pastel Pump
Complex Form with Black and White Bands
Morphing Tubes
2050
Cubic Tunnel
Complex Form with Black and White Spirals
The Walking Raymarcher
Create amazing Facebook ads 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!