Triangle Split Plane

Developer
Timo Hausmann
Size
3,263 Kb
Views
14,168
  1. Triangle Split Plane Previews
  2. Triangle Split Plane HTML Codes
  3. Triangle Split Plane CSS Codes
  4. Triangle Split Plane JS Codes

How do I make an triangle split plane?

What is it good for? Absolutely nothing.. What is a triangle split plane? How do you make a triangle split plane? This script and codes were developed by Timo Hausmann on 16 October 2022, Sunday.

Triangle Split Plane Previews
IQ Test

Triangle Split Plane - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Triangle Split Plane</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="myCanvas" width="400" height="300"></canvas> <script src="js/index.js"></script>
</body>
</html>

Triangle Split Plane - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
body { background: #111; overflow:hidden;
}
canvas { display: block;
}

Triangle Split Plane - Script Codes JS Codes

window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); };
})();
/* * FX is our main object */
FX = {};
/* * Triangle */
var Triangle = function( points ) { this.points = points; this.color = '#ff0066'; this.alpha = 0.9;
};
/* * create base lines */
Triangle.prototype.draw = function() {	var	ctx = FX.ctx,	p = this.points;	ctx.beginPath();	ctx.moveTo( p[0][0], p[0][1] );	ctx.lineTo( p[1][0], p[1][1] );	ctx.lineTo( p[2][0], p[2][1] );	ctx.closePath();	ctx.strokeStyle = this.color;	ctx.stroke();	if( this.alpha > 0 ) this.flash();	return this;
};
/* * Flash */
Triangle.prototype.flash = function() {	var	ctx = FX.ctx,	p = this.points;	ctx.fillStyle = 'rgba(0,196,255,' + this.alpha + ')';	ctx.fill();	this.alpha -= 0.03;	return this;
};
/* * Split */
Triangle.prototype.split = function() {	var	start	= this.points[0],	end	= this.points[1],	degree	= Math.getDegree( start[0], start[1], end[0], end[1] ),	length	= Math.getDistance( start[0], start[1], end[0], end[1] ),	min	= length/4,	max	= length - min,	pos	= Math.randMinMax( min, max ),	splitpoint = [	start[0] - (Math.cos( degree * Math.TO_RAD ) * pos),	start[1] - (Math.sin( degree * Math.TO_RAD ) * pos)	];	FX.triangles.push( new Triangle([	this.points[0],	this.points[2],	splitpoint	]) );	//100ms delay for second new triangle	(function( that ) {	FX.flashTimeout = window.setTimeout(function() {	FX.triangles.push( new Triangle([	that.points[1],	that.points[2],	splitpoint	]) );	}, 100);	})( this );	this.isDead = true;	return this;
};
/* * create the two initial triangles */
FX.init = function() {	var	padding	= 10,	height	= FX.height,	centerTop	= FX.width/2 + Math.randMinMax(-FX.width/5,FX.width/5),	centerBottom	= FX.width/2 + Math.randMinMax(-FX.width/10,FX.width/10),	widthTop	= Math.randMinMax( FX.width/3, FX.width/2 ),	widthBottom	= Math.randMinMax( FX.width/1.5, FX.width/1.2 ),	topLeft	= [centerTop-(widthTop/2), padding+Math.randMinMax(0,height/10)],	topRight	= [centerTop+(widthTop/2), padding+Math.randMinMax(0,height/10)],	bottomLeft	= [centerBottom-(widthBottom/2), FX.height-padding-Math.randMinMax(0,height/10)],	bottomRight	= [centerBottom+(widthBottom/2), FX.height-padding-Math.randMinMax(0,height/10)];	FX.triangles = [];	FX.triangles.push( new Triangle([ topLeft, topRight, bottomRight ]) );	FX.triangles.push( new Triangle([ topLeft, bottomLeft, bottomRight ]) );	FX.splitTimeout = window.setTimeout( FX.splitRandom, 500 );
};
/* * main loop */
FX.loop = function() {	var	ctx = FX.ctx,	k = FX.triangles.length,	i = 0,	triangle; ctx.fillStyle = 'rgba(0,0,0,1)'; ctx.fillRect(0, 0, FX.width, FX.height); while( i < k ) {	triangle = FX.triangles[ i ];	if( typeof triangle === 'undefined' ) break;	if( triangle.isDead ) {	FX.triangles.splice(i, 1);	} else {	triangle.draw();	i = i + 1;	}	} requestAnimFrame(FX.loop);
};
/* * split a random triangle */
FX.splitRandom = function() {	var	k = Math.randMinMax(0, FX.triangles.length-1, true);	FX.triangles[ k ].split();	FX.splitTimeout = window.setTimeout( FX.splitRandom, 100 );
};
/* * full screen canvas */
FX.setFullscreen = function() {	FX.width = FX.canvas.width = window.innerWidth;	FX.height = FX.canvas.height = window.innerHeight;
};
/* * calculate degrees into radian */
Math.TO_RAD = Math.PI/180;
/* * returns -1 for negative numbers, +1 for positive */
Math.sign = function( value ) {	return value > 0 ? 1 : value < 0 ? -1 : 0;
};
/* * return a random float number within given min & max values */
Math.randMinMax = function(min, max, round) {	var val = min + (Math.random() * (max - min));	if( round ) val = Math.round( val );	return val;
};
/* * return the degree between two points */
Math.getDegree = function( x1, y1, x2, y2 ) {	var	dx = x1 - x2,	dy = y1 - y2;	return Math.atan2(dy,dx) / Math.TO_RAD;
};
/* * return the distance between two points */
Math.getDistance = function( x1, y1, x2, y2 ) {	var	xs = x2 - x1,	ys = y2 - y1;	xs *= xs;	ys *= ys;	return Math.sqrt( xs + ys );
};
//funny codepen timeout bugfix
window.setTimeout(function() {
FX.canvas = document.getElementById('myCanvas');
FX.ctx = FX.canvas.getContext('2d');
FX.ctx.strokeStyle = '#00ccff';
FX.setFullscreen();
FX.init();
FX.loop();
}, 100);
window.addEventListener('resize', FX.setFullscreen );
window.addEventListener('mousedown', function() {	window.clearTimeout( FX.flashTimeout );	window.clearTimeout( FX.splitTimeout );	FX.init();
});
Triangle Split Plane - Script Codes
Triangle Split Plane - Script Codes
Home Page Home
Developer Timo Hausmann
Username timohausmann
Uploaded October 16, 2022
Rating 3
Size 3,263 Kb
Views 14,168
Do you need developer help for Triangle Split Plane?

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!

Timo Hausmann (timohausmann) Script Codes
Name
Tunnel Quest
Particle Button
Tekken Particles
Valentines Day
The final countup
Bloody Thursday
IPad Page Flip
Stream of Cables
Use your mousewheel
Another Particle Demo
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!