User:Lbattich/canvas experiments

<!DOCTYPE html>

<html>

 <head>
   <meta content="text/html; charset=utf-8" http-equiv="content-type">
   <meta name="author" content="Lucas Battich">
   <meta name="description" content="PROUN GENERATOR - PROTOTYPE by LUCAS BATTICH, 2014">
   <title>PROUN GENERATOR - PROTOTYPE</title>
 </head>
 <body style="text-align:center; background-color:black">
 <canvas id="proun" onclick="clear()">
     Aw noes! Your browser does not support the HTML5 canvas tag - try using
     Chrome or Safari. Tech up! </canvas>

   <script language="JavaScript">

var x=document.getElementById("proun"); //declare global var x for canvas
var y1,y2,y3,x1,m1;
//var i=0;
var ctx=x.getContext("2d");
window.onload = function(){start();setInterval(function(){choose()},700)};


function start()
{
x.width=window.innerWidth-30;
x.height=window.innerHeight-30;
ctx.fillStyle=colourme()+"1)"; //first colour
ctx.fillRect(0,0,x.width,x.height);
ctx.fill();
four();
}
//choose btw different shapes
function choose() {

       var numb=Math.floor(Math.random()*4);
       if (numb==0){four()}
       else if (numb==1){four()}
       else if (numb==2){four()}
       else if (numb==3){four()}
       }

//functions:
//create a 4 sided shape:
function four() 
{
var x4,y4;
y4=Math.floor((x.height+1)*Math.random());
x4=Math.floor((x.width+1)*Math.random());
ctx.beginPath();
ctx.moveTo(x4,y4);
y4=Math.floor((x.height+1)*Math.random());
x4=Math.floor((x.width+1)*Math.random());
ctx.lineTo(x4,y4);
y4=Math.floor((x.height+1)*Math.random());
x4=Math.floor((x.width+1)*Math.random());
ctx.lineTo(x4,y4);
y4=Math.floor((x.height+1)*Math.random());
x4=Math.floor((x.width+1)*Math.random());
ctx.lineTo(x4,y4);
y4=Math.floor((x.height+1)*Math.random());
x4=Math.floor((x.width+1)*Math.random());
ctx.lineTo(x4,y4);
ctx.closePath();
var grd=ctx.createLinearGradient(x.width/2,y4,x4,x.height);
grd.addColorStop(0,colourme()+"1)");
grd.addColorStop(1,colourme()+"1)");
ctx.fillStyle=grd;
ctx.fill();
}
//pick a random colour
function colourme()
{
var a = Math.floor(256*Math.random());
var b = Math.floor(256*Math.random());
var c = Math.floor(256*Math.random());
var colour = "rgba("+a+","+b+","+c+",";
return colour;
}
</script>

 </body>

</html>