Geometric Art #4

Arrow feathers.

by nate

HTML

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

SCSS

body {
    background-image: url(http://images.pombs.com/extra_clean_paper.png);
    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

// Inspired by Geometry Daily
// http://geometrydaily.tumblr.com/

var i,
    parallelograms = 3,
    fall = 50,
    minHeight = 10,
    $art = $('#art'),
    $canvas = $art.find('canvas'),
    canvas = $canvas[0],
    context = canvas.getContext('2d'),
    hue = 0,
    saturation = '0%',
    lightness = '0%',
    opacity = 0.5;
    randInt = function (min, max) {
        return Math.round(Math.random() * (max - min) + min);                            
    };

// Turn a JavaScripty HSLA into a string
function hsla (hue, saturation, lightness, opacity) {
    return 'hsla(' + hue + ', ' + saturation + '%, ' + lightness + '%, ' + opacity + ')';
}

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

//context.globalAlpha = 0.5;

function drawParallelogram (start, end, fall, color, random) {
    var height,
        random = (random === true || random === false) ? random : true,
        position = (random === true) ? randInt(0, canvas.height - fall) : 0,
        maxHeight = canvas.height - fall - position;
    
    if (maxHeight > canvas.height / 4) {
        maxHeight = canvas.height / 4;
    }
    
    height = randInt(minHeight, maxHeight);
    
    context.beginPath();
    context.moveTo(start, position);
    context.lineTo(end, position + fall);
    context.lineTo(end, position + fall + height);
    context.lineTo(start, position + height);
    context.closePath();

    context.fillStyle = color;
    context.fill();
}

drawParallelogram(canvas.width / 8, canvas.width / 2, fall, hsla(hue, saturation, lightness, Math.random()), false);

for (i = 0; i < parallelograms; i += 1) {
    drawParallelogram(canvas.width / 8, canvas.width / 2, fall, hsla(hue, saturation, lightness, Math.random()));
}

for (i = 0; i < parallelograms; i += 1) {
    drawParallelogram(canvas.width - (canvas.width / 8), canvas.width / 2, fall, hsla(hue, saturation, lightness, Math.random()));
}