Winning entry for creative code contest by Awwwards Conference and Prize-Giving 2015.
A Pen by Sim Boon Long on CodePen.
<canvas id="canvas"></canvas> |
Winning entry for creative code contest by Awwwards Conference and Prize-Giving 2015.
A Pen by Sim Boon Long on CodePen.
(function( window, document, undefined ){ | |
'use strict'; | |
var canvas = document.getElementById('canvas'), | |
ctx = canvas.getContext('2d'), | |
scale = 15, | |
thickness = 2, | |
lineCap = 'round', | |
lines = [], | |
count = 0; | |
function CreateLineA(i,x,y,step,thickness) { | |
this.i = i; | |
this.x = x; | |
this.y = y; | |
this.step = step; | |
this.thickness = thickness; | |
this.draw = function() { | |
ctx.lineWidth = this.thickness; | |
ctx.beginPath(); | |
ctx.moveTo(this.x,this.y); | |
ctx.lineTo(this.x+this.step,this.y+this.step); | |
ctx.stroke(); | |
} | |
this.animate = function() { | |
var r = Math.random(); | |
TweenMax.fromTo(this, 5, {step:0}, { step:this.step, delay:0.0005*this.i, ease:Expo.easeInOut, repeat:-1, yoyo:true }); | |
TweenMax.fromTo(this, 7, {thickness:r}, { thickness:this.thickness, delay:0.0005*this.i, ease:Expo.easeInOut, repeat:-1, yoyo:true }); | |
}; | |
this.animate(); | |
} | |
function CreateLineB(i,x,y,step,thickness) { | |
this.i = i; | |
this.x = x; | |
this.y = y; | |
this.step = step; | |
this.thickness = thickness; | |
this.draw = function() { | |
ctx.lineWidth = this.thickness; | |
ctx.beginPath(); | |
ctx.moveTo(this.x+this.step,this.y); | |
ctx.lineTo(this.x,this.y+this.step); | |
ctx.stroke(); | |
}; | |
this.animate = function() { | |
var r = Math.random(); | |
TweenMax.fromTo(this, 5, {step:0}, { step:this.step, delay:0.0005*this.i, ease:Expo.easeInOut, repeat:-1, yoyo:true }); | |
TweenMax.fromTo(this, 7, {thickness:r}, { thickness:this.thickness, delay:0.0005*this.i, ease:Expo.easeInOut, repeat:-1, yoyo:true }); | |
}; | |
this.animate(); | |
} | |
function fillGrid() { | |
var _w = canvas.width, | |
_h = canvas.height, | |
_step = scale; | |
for ( var iy = 0; iy < _h; iy+=_step ) { | |
for ( var ix = 0; ix < _w; ix+=_step ) { | |
count++; | |
var _toggle = (Math.random() * 2) | 0; | |
var _thickness = Math.random()*thickness; | |
if( _toggle === 0 ) { | |
var line = new CreateLineA(count,ix,iy,_step,_thickness); | |
lines.push(line); | |
} else { | |
var line = new CreateLineB(count,ix,iy,_step,_thickness); | |
lines.push(line); | |
} | |
} | |
} | |
} | |
function onWindowResize() { | |
canvas.width = window.innerWidth; | |
canvas.height = window.innerHeight; | |
ctx.lineWidth = thickness; | |
ctx.strokeStyle = "#19A598"; | |
ctx.lineCap = lineCap; | |
ctx.globalCompositeOperation="lighter"; | |
render(); | |
} | |
function render() { | |
ctx.clearRect(0,0,canvas.width,canvas.height); | |
for (var i = lines.length; i--;) { | |
lines[i].draw(); | |
}; | |
} | |
function animate() { | |
requestAnimationFrame(animate); | |
render(); | |
} | |
function init() { | |
onWindowResize(); | |
$(window).on('resize', onWindowResize ); | |
fillGrid(); | |
} | |
$( document ).ready(function() { | |
init(); | |
animate(); | |
}); | |
})( this, this.document ); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script> |
* { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
margin: 0; | |
padding: 0; | |
} | |
body { | |
overflow:hidden; | |
} | |
#canvas { | |
background-color: #000; | |
} |