Geometric Art #2

Colored lines.

by nate

HTML

<div id="art">
    <canvas></canvas>
</div>
<h1>Geometric Art</h1>

SCSS

body {
    padding: 50px;
}

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans);

#art {
    xborder: 1px solid red;
    float: left;
    height: 400px;
    margin: {
        right: 10px;
    }
    width: 200px;    
}

h1 {
    font: {
        family: "Josefin Sans", monospace, sans-serif;
        size: 48px;
    }
    text-transform: uppercase;
}

JavaScript

var i,
    lines = 20,
    $art = $('#art'),
    $canvas = $art.find('canvas'),
    canvas = $canvas[0],
    context = canvas.getContext('2d'),
    hue = 0,
    line = function (minHeight, maxHeight, minWidth, maxWidth, opacity) {
        context.beginPath();
        context.moveTo(Math.round(Math.random() * maxWidth - minWidth), Math.round(Math.random() * maxHeight - minHeight));
        context.lineTo(Math.round(Math.random() * maxWidth - minWidth), Math.round(Math.random() * maxHeight - minHeight));
        context.strokeStyle = 'hsla(' + hue + ', 50%, 50%, ' + opacity + ')';
        context.lineCap = 'butt';
        context.lineWidth = 3;
        context.stroke();

        hue += 20;
        hue %= 360;      
    };

canvas.width = $art.width();
canvas.height = $art.height();

for (i = 0; i < lines; i += 1) {
    line(1, canvas.height, 1, canvas.width, 0.5);
}