Lightning v3 rotaions

canvas vein generation with rotation

by rob Davis

HTML

<body>
    <div>
        <canvas id="myCanvas" 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 canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var width = 500;
var height = 500;
context.translate(width/2,height/2);
    context.fillStyle='#00f';
    context.fillRect(0,0,4,4);

for (var a=0;a<360;a+=15) {
    genArm(0,height/2, height / 8, 90, 0.24, 0, 5, '#f00');
    context.rotate(deg2Rad(a));
    genArm(0,height/2, height / 8, 90, 0.24, 0, 5, '#0f0');
}

// Generate an arm and try and create two branches at the end
function genArm(pPointX, pPointY, pLength, pAngle, pAngleRange, count, maxCount, style) {
    count += 1;
    if (count >= maxCount) return; // no more branches to make
    var length = (pLength * getRandomRange(0.2,1)); // this 10% may need to be tuned
    var angle = pAngle // WTF! = (pAngle - pAngleRange) + (pAngleRange * 2) * getRandom();
    
    var angleRad = deg2Rad(angle);
    var x = pPointX + (0-length) * Math.cos(angleRad);
    var y = pPointY + (0-length) * Math.sin(angleRad);
    context.save();
    context.beginPath();
    context.moveTo(pPointX, pPointY);
    context.lineTo(x, y);
    context.strokeStyle=style;
    context.stroke();
    context.restore();

    // two new arms from this point
    genArm(x, y, length, angle - (angle * getRandomRange(0.1,pAngleRange)), pAngleRange, count, maxCount, style);
    genArm(x, y, length, angle + (angle * getRandomRange(0.1,pAngleRange)), pAngleRange, count, maxCount, style);
}

// return random value between 0 and 1.0
function getRandom() {
    return Math.random();
}

// return random value between min and max
function getRandomRange(min,max) {
    return min+( max * getRandom());
}

function deg2Rad(deg) {
    return deg * Math.PI / 180;
}