Random Abstract Art

by wrxsti85

HTML

<label>Object Iterations:</label><input name="objit" type="number" value="200" /><button name="go">GO!</button><br /><br />
<canvas id="canvas"></canvas>

CSS

#canvas {
    width:600px;
    height:400px;
    border: solid 1px #000;
}

input[name="objit"] {
    width: 80px;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var rc = function(){ // Random Hex Color
    return '#'+Math.floor(Math.random()*16777215).toString(16);
};

var rd = function(){ // Random Destination
    return Math.ceil(Math.random() * 300);
};

var plot = function(){
    ctx.fillStyle = rc();
    ctx.fillRect(rd(), rd(), rd(), rd());    
    
    ctx.beginPath();
    ctx.moveTo(rd(), rd());
    ctx.bezierCurveTo(rd(), rd(), rd(), rd(), rd(), rd());
    ctx.bezierCurveTo(rd(), rd(), rd(), rd(), rd(), rd());
    ctx.bezierCurveTo(rd(), rd(), rd(), rd(), rd(), rd());
    
    // complete custom shape
    ctx.closePath();
    ctx.lineWidth = 5;
    ctx.strokeStyle = rc();
    ctx.stroke();
};

var cGen = function(iterations){
    var oc = 0;
    while(oc <= iterations){
        oc++;
        plot();
    }
};

$('button[name="go"]').click(function(){
    cGen( $('input[name="objit"]').val() );
});