Polymer Colorful Triangulation

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

Adaptation of colorful triangulation (http://codepen.io/tibomahe/pen/ByBwmY) in a Polymer web component.

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
    <head>
	<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.5.1/webcomponents.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.5.1/polymer.js"></script>
	<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	<meta charset="utf-8">
	<title>Polymer Colorful triangulation</title>
</head>
<body>
	<polymer-element name="colorful-triangulation" attributes="animated">
		<template>
			<style>
				body {
					background: #fff;
					height: 100%;
					width: 100%;
				}
			</style>

			<canvas id="canvas" width="300" height="300"></canvas>
		</template>
		<script>
			Polymer('colorful-triangulation', {
				ctx: null,
				screenWidth: 300,
				screenHeight: 300,
				dots: 70,
				animated: false,
				rand: function(min, max){
					return Math.random()* (max - min) + min;
				},
				randColor: function (){
					var letters = '0123456789ABCDEF'.split('');
					var color = '#';
					for(var i = 0; i < 6; i++ ){
						color += letters[Math.round(Math.random() * 15)];
					}
					return color;
				},
				//creation of a point : position, velocity and default direction
				addDot: function(){
					var tabDirection = [-1, 1];
					var dot = {
						x: this.rand(0, this.screenWidth),
						y: this.rand(0, this.screenHeight),
						velocityX: this.rand(1, 20),
						velocityY: this.rand(1, 20),
						directionX: tabDirection[~~(Math.random() * 2)],
						directionY: tabDirection[~~(Math.random() * 2)],
					};
					this._dots.push(dot);
				},
				//point update : change direction and watch if the point doesn't leave the frame
				_updateDot: function(dot) {
					if(dot.x >= screenWidth || dot.x <= 0)
						dot.directionX = -dot.directionX;
					if(dot.y >= screenHeight || dot.y <= 0)
						dot.directionY = -dot.directionY;

					dot.x += dot.velocityX * dot.directionX / 10;
					dot.y += dot.velocityY * dot.directionY / 10;
				},
				//iteration of update on every point
				updateDots: function() {
					var that = this;
					$.each(that._dots, function(index, dot) {
						that._dots[index] = dot;
						if(dot.x >= that.screenWidth || dot.x <= 0)
						dot.directionX = -dot.directionX;
					if(dot.y >= that.screenHeight || dot.y <= 0)
						dot.directionY = -dot.directionY;

					dot.x += dot.velocityX * dot.directionX / 10;
					dot.y += dot.velocityY * dot.directionY / 10;
					});
				},
				//point animation : (updates & edges drawing)
				animate: function(){
					this.ctx.clearRect(0, 0, this.screenWidth, this.screenHeight);
					var i, j, x1, x2, y1, y2, 
						squareHypotenuse,
						squareHypotenuseMin = 70 * 70;

					this.updateDots();
					for(i = 0; i < this._dots.length; i++){					
						for(j = i + 1; j < this._dots.length; j++){
							x1 = this._dots[i].x;
							x2 = this._dots[j].x;
							y1 = this._dots[i].y;
							y2 = this._dots[j].y;

							squareHypotenuse = ((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1));
							if(squareHypotenuse <= squareHypotenuseMin){
								var strokeColor = this.randColor();
								this.ctx.save();
								this.ctx.beginPath();
								this.ctx.strokeStyle = strokeColor;
								this.ctx.lineWidth = 1.2;
								this.ctx.moveTo(this._dots[i].x, this._dots[i].y);
								this.ctx.lineTo(this._dots[j].x, this._dots[j].y);
								this.ctx.stroke();
								this.ctx.closePath();
								this.ctx.restore();
							}
						}
					}
					requestAnimationFrame(this.animate.bind(this));
				},
				//points creation and loop
				ready: function() {
					this.canvas = this.$.canvas;
					this.ctx = this.canvas.getContext('2d');
					this.canvas.width = this.screenWidth;
					this.canvas.height = this.screenHeight;
					this._dots = [];

					for (var i = 0; i < this.dots; i++) {
						this.addDot();
					}
					if (this.animated) {	
						setInterval(this.animate(), 1);
					}
												
				},
			});
		</script>
	</polymer-element>

	<colorful-triangulation animated>
	</colorful-triangulation>

	<colorful-triangulation animated>
	</colorful-triangulation>

	<colorful-triangulation animated>
	</colorful-triangulation>
</body>

/*Downloaded from https://www.codeseek.co/tibomahe/polymer-colorful-triangulation-NPWWKO */
    /*
Adaptation of colorful triangulation (https://codepen.io/tibomahe/pen/ByBwmY) 
in a Polymer web component.
*/


/*Downloaded from https://www.codeseek.co/tibomahe/polymer-colorful-triangulation-NPWWKO */
    

Comments