Eiffel Tower

Developer
Matei Copot
Size
3,692 Kb
Views
36,432
  1. Eiffel Tower Previews
  2. Eiffel Tower HTML Codes
  3. Eiffel Tower CSS Codes
  4. Eiffel Tower JS Codes

How do I make an eiffel tower?

French, we stand with You. What is a eiffel tower? How do you make a eiffel tower? This script and codes were developed by Matei Copot on 30 August 2022, Tuesday.

Eiffel Tower Previews
IQ Test

Eiffel Tower - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Eiffel Tower</title> <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! */ canvas {	position: absolute;	top: 0;	left: 0;	background: linear-gradient( 90deg, #f66 20%, #fff 30%, #fff 70%, #66f 80% )
}
p {	font: 29px Verdana;	position: absolute;	left: 0;	top: -30px;	width: 100%;	text-align: center;	background-color: rgba(255,255,255,.2);	padding-bottom: 6px;	padding-top: 10px
}
span {	font: 13px Verdana;	position: absolute;	left: 0;	top: 50px;	width: 100%;	text-align: center;	background-color: rgba(255,255,255,.2);	padding-bottom: 10px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas id=c></canvas>
<p>French, we stand with You</p>
<span>this is to all of you who have lost people you care about</span> <script src="js/index.js"></script>
</body>
</html>

Eiffel Tower - Script Codes CSS Codes

canvas {	position: absolute;	top: 0;	left: 0;	background: linear-gradient( 90deg, #f66 20%, #fff 30%, #fff 70%, #66f 80% )
}
p {	font: 29px Verdana;	position: absolute;	left: 0;	top: -30px;	width: 100%;	text-align: center;	background-color: rgba(255,255,255,.2);	padding-bottom: 6px;	padding-top: 10px
}
span {	font: 13px Verdana;	position: absolute;	left: 0;	top: 50px;	width: 100%;	text-align: center;	background-color: rgba(255,255,255,.2);	padding-bottom: 10px;
}

Eiffel Tower - Script Codes JS Codes

var w = c.width = window.innerWidth,	h = c.height = window.innerHeight,	ctx = c.getContext( '2d' ),	opts = {	baseHalfSize: 62,	baseDetatchement: 30, // can't find the exact value for the detatchement	topHalfSize: 5, // also making this one up	height: 324, // actual proportions according to the wiki	splits: 20, // the number of points will be splits*16	steepnessFactor: 1.57, // must be between 0 and Math.PI / 2 not including	floors: [	{ layer: 4, height: 2 },	{ layer: 8, height: 2 }	],	rotYVel: .01,	translate: {	x: 0,	y: 150,	z: 250	},	focalLength: 250,	vanishPoint: {	x: w / 2,	y: h / 2	}	},	rotY = 0,	cos = 1,	sin = 0,	points = [];
for( var i = 0; i < opts.splits; ++i ){	var linear = i / opts.splits,	// multiplier = Math.sin( linear * Math.PI / 2 )	// multiplier must be between 0 and 1.	// multiplier is 1 when linear is 1	// multiplier is 0 when linear is 0	// but multiplier is Math.sin( stF ) when linear is 0	// subtract sin( stF ) and multiplier is 0 when linear is 0	// but now multiplier is 1 - sin( stF ) when linear is 1	// so we need to multiply the multiplier in order to get a value between 0 and 1	// to do that we do a bit of magic with equations	multiplier = ( Math.sin( opts.steepnessFactor + linear * ( Math.PI / 2 - opts.steepnessFactor ) ) - Math.sin( opts.steepnessFactor ) ) / ( 1 - Math.sin( opts.steepnessFactor ) );	getLegLayer( linear, multiplier, 1, 1 );	getLegLayer( linear, multiplier, 1, -1 );	getLegLayer( linear, multiplier, -1, 1 );	getLegLayer( linear, multiplier, -1, -1 );
}
function getLegLayer( linear, multiplier, x, z ){	// part 1	points.push( new Point( x * ( ( opts.baseHalfSize - opts.baseDetatchement ) + multiplier * ( opts.baseDetatchement - opts.baseHalfSize ) ),	-linear * opts.height,	z * ( opts.baseHalfSize + multiplier * ( opts.topHalfSize - opts.baseHalfSize ) )	) );	// part 2	points.push( new Point( x * ( opts.baseHalfSize + multiplier * ( opts.topHalfSize - opts.baseHalfSize ) ),	-linear * opts.height,	z * ( opts.baseHalfSize + multiplier * ( opts.topHalfSize - opts.baseHalfSize ) )	) );	// part 3	points.push( new Point( x * ( opts.baseHalfSize + multiplier * ( opts.topHalfSize - opts.baseHalfSize ) ),	-linear * opts.height,	z * ( ( opts.baseHalfSize - opts.baseDetatchement ) + multiplier * ( opts.baseDetatchement - opts.baseHalfSize ) )	) );	// part 4	points.push( new Point( x * ( ( opts.baseHalfSize - opts.baseDetatchement ) + multiplier * ( opts.baseDetatchement - opts.baseHalfSize ) ),	-linear * opts.height,	z * ( ( opts.baseHalfSize - opts.baseDetatchement ) + multiplier * ( opts.baseDetatchement - opts.baseHalfSize ) )	) );
}
function Point( x, y, z ){	this.x = x;	this.y = y;	this.z = z;	this.connections = [];
}
Point.prototype.link = function( link ){	this.connections.push( link );
}
Point.prototype.update = function(){	var x = this.x,	y = this.y,	z = this.z;	// apply rotation on the y	var X = x;	x = x * cos - z * sin;	z = z * cos + X * sin;	// translate	x += opts.translate.x;	y += opts.translate.y;	z += opts.translate.z;	// find screen position	var scale = opts.focalLength / z;	this.sx = opts.vanishPoint.x + x * scale;	this.sy = opts.vanishPoint.y + y * scale;
}
Point.prototype.render = function(){	for( var i = 0; i < this.connections.length; ++i ){	ctx.moveTo( this.sx, this.sy );	ctx.lineTo( this.connections[ i ].sx, this.connections[ i ].sy );	}
}
// now you gotta link them
// iterate for every layer
for( var i = 0; i < points.length; i += 16 ){	// iterate for every leg	for( var j = 0; j < 16; j += 4 ){	// iterate for every part	for( var k = 0; k < 4; ++k ){	var n = i + j + k;	points[ n ].link( points[ i + j + ( ( k + 1 ) % 4 ) ] );	if( i < points.length - 16 ){	points[ n ].link( points[ ( i + 16 ) + j + k ] );	points[ n ].link( points[ ( i + 16 ) + j + ( ( k + 1 ) % 4 ) ] );	points[ n ].link( points[ ( i + 16 ) + j + ( ( k + 3 ) % 4 ) ] );	}	}	}
}
// some more specific connections to make the floors
for( var i = 0; i < opts.floors.length; ++i ){	var floor = opts.floors[ i ];	for( var j = 0; j < floor.height; ++j ){	// side 1	points[ ( j + floor.layer ) * 16 + 1 ].link( points[ ( j + floor.layer ) * 16 + 5 ] );	points[ ( j + floor.layer ) * 16 + 1 ].link( points[ ( j + floor.layer ) * 16 + 13 ] );	if( j + 1 < floor.height )	points[ ( j + floor.layer ) * 16 + 1 ].link( points[ ( j + 1 + floor.layer ) * 16 + 5 ] );	if( j - 1 >= 0 )	points[ ( j + floor.layer ) * 16 + 1 ].link( points[ ( j - 1 + floor.layer ) * 16 + 5 ] );	// side 2	points[ ( j + floor.layer ) * 16 + 5 ].link( points[ ( j + floor.layer ) * 16 + 13 ] );	points[ ( j + floor.layer ) * 16 + 5 ].link( points[ ( j + floor.layer ) * 16 + 9 ] );	if( j + 1 < floor.height )	points[ ( j + floor.layer ) * 16 + 5 ].link( points[ ( j + 1 + floor.layer ) * 16 + 13 ] );	if( j - 1 >= 0 )	points[ ( j + floor.layer ) * 16 + 5 ].link( points[ ( j - 1 + floor.layer ) * 16 + 13 ] );	// side 3	points[ ( j + floor.layer ) * 16 + 13 ].link( points[ ( j + floor.layer ) * 16 + 9 ] );	if( j + 1 < floor.height )	points[ ( j + floor.layer ) * 16 + 13 ].link( points[ ( j + 1 + floor.layer ) * 16 + 9 ] );	if( j - 1 >= 0 )	points[ ( j + floor.layer ) * 16 + 13 ].link( points[ ( j - 1 + floor.layer ) * 16 + 9 ] );	// side 1	points[ ( j + floor.layer ) * 16 + 9 ].link( points[ ( j + floor.layer ) * 16 + 1 ] );	if( j + 1 < floor.height )	points[ ( j + floor.layer ) * 16 + 9 ].link( points[ ( j + 1 + floor.layer ) * 16 + 1 ] );	if( j - 1 >= 0 )	points[ ( j + floor.layer ) * 16 + 9 ].link( points[ ( j - 1 + floor.layer ) * 16 + 1 ] );	}
}
function anim(){	window.requestAnimationFrame( anim );	rotY += opts.rotYVel;	sin = Math.sin( rotY );	cos = Math.cos( rotY );	points.map( function( point ){ point.update(); } );	ctx.clearRect( 0, 0, w, h );	ctx.strokeStyle = 'black';	ctx.lineWidth = .3;	ctx.beginPath();	points.map( function( point ){ point.render(); } );	ctx.stroke();
}
anim();
window.addEventListener( 'resize', function(){	w = c.width = window.innerWidth;	h = c.height = window.innerHeight;	opts.vanishPoint.x = w / 2;	opts.vanishPoint.y = h / 2;
});
Eiffel Tower - Script Codes
Eiffel Tower - Script Codes
Home Page Home
Developer Matei Copot
Username towc
Uploaded August 30, 2022
Rating 4
Size 3,692 Kb
Views 36,432
Do you need developer help for Eiffel Tower?

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!

Matei Copot (towc) Script Codes
Name
Neon hexagon-forming particles
Turret of Order
Webgl fireworks
Superimpositional garden
Neural Network visualization
Plasma background
Rainbow Firestorm recreation
Rotating tunnel of rainbowness
Springing Particles
Experiment with basic 3d on 2d canvas
Create amazing blog posts 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!