Line Study

index.html

<canvas id="canvas"></canvas>

Line Study.markdown

Line Study

Winning entry for creative code contest by Awwwards Conference and Prize-Giving 2015.

A Pen by Sim Boon Long on CodePen.

License.

script.js

(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 );

scripts

<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>

style.css

* {
  -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;
}