Geometric Art #3

Intersecting shaded areas.

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,
    originalX,
    originalY,
    x,
    y,
    lines = 20,
    $art = $('#art'),
    $canvas = $art.find('canvas'),
    canvas = $canvas[0],
    context = canvas.getContext('2d'),
    hue = 0,
    line = function (minHeight, maxHeight, minWidth, maxWidth, opacity) {     
        
        x = Math.round(Math.random() * maxWidth - minWidth);
        y = Math.round(Math.random() * maxHeight - minHeight);
        
        context.lineTo(x, y);
        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();

context.beginPath();

x = originalX = Math.round(Math.random() * canvas.width);
y = originalY = Math.round(Math.random() * canvas.height);

context.moveTo(x, y);

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

context.lineTo(originalX, originalY);

context.fill();