Celebrating Republic Day in India!! :)

Developer
Size
5,201 Kb
Views
34,408

How do I make an celebrating republic day in india!! :)?

(Pls open in FULL-PAGE :) )Celebrations of Republic Day in India..To celebrate it with the CODEPEN party, this is my tribute to the Indian National Flag :) modified a previous effort of mine (at http://www.jecj.in/ufo/unmeshcamcloth.html).. Used Three.js and Cloth Simulation..Many thanks to @mrdoob 's resources & examples thru which I learnt all of it.. :). What is a celebrating republic day in india!! :)? How do you make a celebrating republic day in india!! :)? This script and codes were developed by Unmesh Shukla on 03 September 2022, Saturday.

Celebrating Republic Day in India!! :) Previews

Celebrating Republic Day in India!! :) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Celebrating Republic Day in India!! :)</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body, iframe{width:100%; height:100%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Celebrating Republic Day in India!! :) - Script Codes CSS Codes

body, iframe{width:100%; height:100%;
}

Celebrating Republic Day in India!! :) - Script Codes JS Codes

$('body').append("<iframe frameborder='0' src='http://www.jecj.in/ufo/RepublicDay.html'></iframe>");
//Change the properties and celebrate the Indian Republic Day with us :) Do view it in FULLSCREEN..thts truly beautiful :)
//The National Song of India plays in the background :)
//Very Sorry.. didn't use it here because of some drawbacks in the code for image resources..I am giving all the code here..in commented form....
//use the following code after including three.min.js and dat.gui.min.js
/*
var DAMPING = 0.03;
var DRAG = 1 - DAMPING;
var MASS = 0.09;
var restDistance = 20;
var xSegs = 74; //
var ySegs = 25; //
var clothFunction = plane(window.innerWidth, window.innerHeight);
var cloth = new Cloth(xSegs, ySegs);
var GRAVITY = -981 * 1.4;
var gravity = new THREE.Vector3( 0, -GRAVITY, 0 ).multiplyScalar(MASS);
var TIMESTEP = 18 / 1000;
var TIMESTEP_SQ = TIMESTEP * TIMESTEP;
var pins = [];
var WIND = true;
var WIND_STRENGTH = 0;
var windForce = new THREE.Vector3(0,1,0);
var tmpForce = new THREE.Vector3();
var lastTime;
var i = 0;
function plane(width, height) {	return function(u, v) {	var x = (u-0.5) * width;	var y = (v+0.5) * height;	var z = 0;	return new THREE.Vector3(x, y, z);	};
}
function Particle(x, y, z, mass) {	this.position = clothFunction(x, y); // position	this.previous = clothFunction(x, y); // previous	this.original = clothFunction(x, y);	this.a = new THREE.Vector3(0, 0, 0); // acceleration	this.mass = mass;	this.invMass = 1 / mass;	this.tmp = new THREE.Vector3();	this.tmp2 = new THREE.Vector3();
}
// Force -> Acceleration
Particle.prototype.addForce = function(force) {	this.a.add(	this.tmp2.copy(force).multiplyScalar(this.invMass)	);
};
// Performs verlet integration
Particle.prototype.integrate = function(timesq) {	var newPos = this.tmp.subVectors(this.position, this.previous);	newPos.multiplyScalar(DRAG).add(this.position);	newPos.add(this.a.multiplyScalar(timesq));	this.tmp = this.previous;	this.previous = this.position;	this.position = newPos;	this.a.set(0, 0, 0);
}
var diff = new THREE.Vector3();
function satisifyConstrains(p1, p2, distance) {	diff.subVectors(p2.position, p1.position);	var currentDist = diff.length();	if (currentDist==0) return; // prevents division by 0
var correction = diff.multiplyScalar(1 - distance/currentDist);	var correctionHalf = correction.multiplyScalar(0.5);	p1.position.add(correctionHalf);	p2.position.sub(correctionHalf);
}
function Cloth(w, h) {	this.w = w;	this.h = h;	var particles = [];	var constrains = [];	var u, v;	// Create particles	for (v=0;v<=h;v++) {	for (u=0;u<=w;u++) {	particles.push(new Particle(u/w, v/h, 0, MASS));	}	}	// Structural	for (v=0;v<h;v++) {	for (u=0;u<w;u++) {	constrains.push([	particles[index(u, v)],	particles[index(u, v+1)],	restDistance	]);	constrains.push([	particles[index(u, v)],	particles[index(u+1, v)],	restDistance	]);	}	}	for (u=w, v=0;v<h;v++) {	constrains.push([	particles[index(u, v)],	particles[index(u, v+1)],	restDistance	]);	}	for (v=h, u=0;u<w;u++) {	constrains.push([	particles[index(u, v)],	particles[index(u+1, v)],	restDistance	]);	}	this.particles = particles;	this.constrains = constrains;	function index(u, v) {return u + v * (w + 1);}	this.index = index;
}
function simulate(time) {	if (!lastTime) {	lastTime = time;	return;	}
var i, il, particles, particle, pt, constrains, constrain;	// Aerodynamics forces	if (WIND) {	var face, faces = clothGeometry.faces, normal;	particles = cloth.particles;	for (i=0,il=faces.length;i<il;i++) {	face = faces[i];	normal = face.normal;
tmpForce.copy(normal).normalize().multiplyScalar(normal.dot(windForce));	particles[face.a].addForce(tmpForce);	particles[face.b].addForce(tmpForce);	particles[face.c].addForce(tmpForce);	}	}
for(particles = cloth.particles, i=0, il = particles.length	; i<il; i++)
{ particle = particles[i]; particle.addForce(gravity); particle.integrate(TIMESTEP_SQ);
}
// Start Constrains
constrains = cloth.constrains,
il = constrains.length;
for (i=0;i<il;i++) { constrain = constrains[i]; satisifyConstrains(constrain[0], constrain[1], constrain[2]); }	// Pin Constrains
function pinupdate() { for (i=0, il=noofsegs;i<noofsegs;i++) {	var xy = pins[i];	var p = particles[xy];	p.position.copy(p.original);	p.previous.copy(p.original);	} }
pinupdate();
}
var tex1;
var pinsFormation = [];
var noofsegs = 75;
var pins = [];
function pinsHang(segs){ for(ii = 0;ii<(segs);ii++) { pins[ii] = ii; }
pinsFormation.push( pins );
}
pinsHang(noofsegs);
var camera, scene, renderer;
var clothGeometry;
var clothMaterial;
var object;
var cam1;
getCamera();
function camDat()
{ this.WIND = true; this.WIND_X_FORCE = 2; this.WIND_Y_FORCE = 25; this.WIND_Z_FORCE = 25; this.WIREFRAME = false; this.FIX_FLAG = false; this.BACKGROUND_COLOR = "#000000"; this.HANGING_PINS = noofsegs; this.SHININESS = 100; this.DAMPING = 0.03; this.GRAVITY = 0; this.PARTIAL_FIX = 0;
}
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.y = 0;
camera.position.z = 1400;
scene.add( camera );	// lights
var light, materials;
scene.add( new THREE.AmbientLight( 0xffffff ) );
light = new THREE.DirectionalLight( 0xdfebff, 0.8 );
light.position.set( 50, 200, 100 );
light.position.multiplyScalar( 1.3 );
light.castShadow = true;
light.shadowMapWidth = 2048;
light.shadowMapHeight = 2048;
var d = 0;
light.shadowCameraLeft = -d;
light.shadowCameraRight = d;
light.shadowCameraTop = d;
light.shadowCameraBottom = -d;
light.shadowCameraFar = 1000;
light.shadowDarkness = 0.5;
scene.add( light );	// cloth material
tex1 = new THREE.ImageUtils.loadTexture("textures/indianflag.jpg");
tex1.flipY = false;
clothMaterial = new THREE.MeshPhongMaterial( { alphaTest: 0.5, ambient: 0xdddddd, color: "#555555", specular: 0xffffff, emissive: 0x000000,wireframe:(cam1.WIREFRAME), shininess: (cam1.SHININESS), map: tex1 , side: THREE.DoubleSide } );
// cloth geometry
clothGeometry = new THREE.ParametricGeometry( clothFunction, cloth.w, cloth.h, true );
clothGeometry.computeFaceNormals();
// cloth mesh
object = new THREE.Mesh( clothGeometry, clothMaterial );
object.position.set( 0, 0, 0 );
object.castShadow = true;
object.receiveShadow = true;
object.rotation.set(0,Math.PI,0);
scene.add( object );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
window.addEventListener( 'resize', onWindowResize, false );
}
//
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function toggleMyPins(segs2) { for(ii = 0;ii < noofsegs;ii++) { if(ii < (segs2)) pins[ii] = ii; else pins[ii] = 0; } pinsFormation.push( pins );
}
//
function initDATGUI(){ cam1 = new camDat(); gui = new dat.GUI(); gui.add(cam1, 'WIND'); gui.add(cam1, 'WIND_X_FORCE', 0, 100); gui.add(cam1, 'WIND_Y_FORCE', 0, 100); gui.add(cam1, 'WIND_Z_FORCE', 0, 100); gui.add(cam1, 'WIREFRAME'); gui.add(cam1, 'FIX_FLAG'); gui.addColor(cam1, 'BACKGROUND_COLOR'); gui.add(cam1, 'HANGING_PINS', 1, noofsegs); gui.add(cam1, 'SHININESS', 0, 100); gui.add(cam1, 'DAMPING', 0, 1); gui.add(cam1, 'GRAVITY', -4, 5); gui.add(cam1, 'PARTIAL_FIX', 0, ((xSegs+1)*(ySegs + 1)));
}
//
function getCamera() { initDATGUI(); init(); animate();
}
function animate() {
requestAnimationFrame( animate );
var time = Date.now();
toggleMyPins(cam1.HANGING_PINS);
WIND = cam1.WIND;
windStrengthX = Math.cos( time / 7000 ) * 20 + parseInt(cam1.WIND_X_FORCE);
windStrengthY = Math.cos( time / 7000 ) * 20 + parseInt(cam1.WIND_Y_FORCE);
windStrengthZ = Math.cos( time / 7000 ) * 20 + parseInt(cam1.WIND_Z_FORCE);
windxx = Math.sin( time / 2000 )* windStrengthX;
windyy = Math.cos( time / 3000 )* windStrengthY;
windzz = Math.sin( time / 1000 )* windStrengthZ;
windForce.set( windxx ,windyy ,windzz );
simulate(time);
render();
}
function render() {	var p = cloth.particles; if(cam1.FIX_FLAG == false)
{
for ( var i = parseInt(cam1.PARTIAL_FIX) , il = p.length; i < il ; i += 1 )
clothGeometry.vertices[ i ].copy( p[ i ].position );
}	DAMPING = cam1.DAMPING;	DRAG = 1 - DAMPING; GRAVITY = 981 * 1.4 * (cam1.GRAVITY + 1);
gravity = new THREE.Vector3( 0, -GRAVITY, 0 ).multiplyScalar(MASS);	clothMaterial.shininess = cam1.SHININESS;	clothMaterial.wireframe = cam1.WIREFRAME;	clothGeometry.computeFaceNormals();	clothGeometry.computeVertexNormals();	clothGeometry.normalsNeedUpdate = true;	clothGeometry.verticesNeedUpdate = true;
document.body.style.backgroundColor = cam1.BACKGROUND_COLOR;	if ( tex1 ) tex1.needsUpdate = true;	camera.lookAt( scene.position );	renderer.render( scene, camera );
}
*/
Celebrating Republic Day in India!! :) - Script Codes
Celebrating Republic Day in India!! :) - Script Codes
Home Page Home
Developer Unmesh Shukla
Username unmeshpro
Uploaded September 03, 2022
Rating 3.5
Size 5,201 Kb
Views 34,408
Do you need developer help for Celebrating Republic Day in India!! :)?

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!

Unmesh Shukla (unmeshpro) Script Codes
Create amazing art & images 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!