Colorful Triangulation

In this example below you will see how to do a Colorful Triangulation with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by tibomahe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tibomahe ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Colorful Triangulation</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>colorful triangulation</title>
		<meta name="viewport" content="width=device-width">

		<link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" href="css/style.css" media="all" type="text/css" />

	</head>
	<body>

		<p>
			<a id="btn-black">Black</a>
			 - 
			<a id="btn-white">White</a>
		</p>

		<canvas id="canvas" width="300" height="300"></canvas>

		<script src="js/script.js"></script>
	</body>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/tibomahe/colorful-triangulation-ByBwmY */
body {
	background: #fff;
	height: 100%;
	width: 100%;
}
canvas {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -150px;
	margin-left: -150px;
	background: transparent;
}
p {
  position: absolute;
	top: 40%;
	left: 50%;
  margin-left: -500px;
	background: transparent;
	color: #222;
	border: none;
	font-size: 20px;
	font-family: 'Lato';
	font-weight: 300;
	text-transform: uppercase;
}
#btn-white {
	color: #757575;
}
p a:hover {
	cursor: pointer;
}


/*Downloaded from https://www.codeseek.co/tibomahe/colorful-triangulation-ByBwmY */
var canvas, ctx, screenWidth, screenHeight;

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
 
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

function rand(min, max){
	return Math.random()* (max - min) + min;
};

function Dot(){
	this.x = rand(0, screenWidth);
	this.y = rand(0, screenHeight);

	this.velocityX = rand(1, 10);
	this.velocityY = rand(1, 10);

	var tabDirection = [-1, 1];

	this.directionX = tabDirection[~~(Math.random() * 2)];
	this.directionY = tabDirection[~~(Math.random() * 2)];
};

Dot.prototype.update = function(ctx){
	if(this.x >= screenWidth || this.x <= 0) this.directionX = -this.directionX;
	if(this.y >= screenHeight || this.y <= 0) this.directionY = -this.directionY;
	
	this.x += this.velocityX * this.directionX / 10;
	this.y += this.velocityY * this.directionY / 10;
};

function Draw(ctx){
	this.ctx = ctx;
	this.particles = [];
	this.dotQuantity = 70;

	for(var i = 0; i < this.dotQuantity; i++)
	{
		var dot = new Dot();
		this.particles.push(dot);
	}

	this.animate();
};

function randColor(){
	var letters = '0123456789ABCDEF'.split('');
	var color = '#';
	for (var i = 0; i < 6; i++ )
	{
		color += letters[Math.round(Math.random() * 15)];
	}
	return color;
};

Draw.prototype.animate = function(){
	this.ctx.clearRect(0, 0, screenWidth, screenHeight);
	var i, j, x1, x2, y1, y2, squareHypotenuse
	squareHypotenuseMin = 70 * 70;
	for(i = 0; i < this.particles.length; i++)
	{
		this.particles[i].update(this.ctx);
		for(j = i + 1; j < this.particles.length; j++)
		{
			x1 = this.particles[i].x;
			x2 = this.particles[j].x;
			y1 = this.particles[i].y;
			y2 = this.particles[j].y;

			squareHypotenuse = ((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1));
			if(squareHypotenuse <= squareHypotenuseMin)
			{
				var strokeColor = randColor();
				this.ctx.save();
				this.ctx.beginPath();
				this.ctx.strokeStyle = strokeColor;
				this.ctx.lineWidth = 1.2;
				this.ctx.moveTo(this.particles[i].x, this.particles[i].y);
				this.ctx.lineTo(this.particles[j].x, this.particles[j].y);
				this.ctx.stroke();
				this.ctx.closePath();
				this.ctx.restore();
			}
		}
	}
	requestAnimationFrame(this.animate.bind(this));
};

window.onload = function(){
	canvas = document.getElementById('canvas');
	ctx = canvas.getContext('2d');
	screenWidth = 300;
	screenHeight = 300;
	canvas.width = screenWidth;
	canvas.height = screenHeight;
	
	var newDraw = new Draw(ctx);
}

document.getElementById('btn-black').onclick = function() {
	document.body.style.background = "#222";
	document.getElementById('btn-black').style.color = "#757575";
	document.getElementById('btn-white').style.color = "#fff";
}
document.getElementById('btn-white').onclick = function() {
	document.body.style.background = "#fff";
	document.getElementById('btn-black').style.color = "#222";
	document.getElementById('btn-white').style.color = "#757575";
}

Comments