Spikey Iris RED

early experiements

by rob Davis

HTML

<body>
    <div>
        <canvas id="canvasId" width="500" height="500"></canvas>
    </div>
</body>

CSS

body {
          margin: 0px;
          padding: 0px;
            background-color:black;
          }
div { background-color:white;  width:500px; height:500px }

JavaScript

var angle = 0;
        function convertToRadians(degree) {
            return degree*(Math.PI/180);
        }

	var startx = 0;
	var starty = 50;
	var endx = 0;
	var endy = 250;
doDraw();
	
function doDraw() 
{
	var context;
	context = document.getElementById('canvasId').getContext("2d");

    for (var c = 0; c < 1800; c++) {
        angle = Math.random()*360;
        len = Math.random()*250;
		line(angle,len,context);
    }
}


function line(angle,len,context) {
	context.save();                
	context.beginPath();
	endy=len;
	gradient = context.createLinearGradient(startx,starty,endx,endy);
	gradient.addColorStop(0, 'rgba(255,0,0,255)');
	gradient.addColorStop(1, 'rgba(100,100,100,0)');
	context.strokeStyle=gradient;
	context.translate(250,250);
	context.rotate(convertToRadians(angle));
	context.moveTo(startx,starty);
	context.lineWidth = 1;
	context.lineJoin = "round";	
	context.lineTo(endx,endy);
	context.stroke();
	context.closePath();
	context.restore();
}