DIR : /home/kozerus/public_html/jkwii/js/jsdoit/branchgrow/index.js

/home/kozerus/public_html/jkwii/js/jsdoit/branchgrow

PI_2 = Math.PI * 2

function $(selector){
    return document.querySelectorAll(selector)
}

function randrangeFloat(min, max){
    return Math.random() * (max - min) + min
}

var requestAnimationFrame = window.requestAnimationFrame ||
                            window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame ||
                            window.oRequestAnimationFrame ||
                            window.msRequestAnimationFrame ||
                            function(frame){ setTimeout(frame, 1000 / 60)}

function Branch(x, y, radius, length, angle, duration, age){
    this.x = x
    this.y = y
    this.radius = radius
    this.length = length
    this.angle = angle
    this.duration = duration
    this.age = age

    this.vx = Math.cos(angle) * length / duration
    this.vy = Math.sin(angle) * length / duration
    
    this.frame = 0
    this.isActive = true
}

Branch.prototype = {
    draw: function(context){
        this.frame++
        this.x += this.vx
        this.y += this.vy
        context.moveTo(this.x, this.y)
        context.arc(this.x, this.y, this.radius, 0, PI_2, true)

        if(this.duration < this.frame){
            this.isActive = false
        }
    }
}

function BranchWorks(context){
    this.context = context
    this.width = context.canvas.width
    this.height = context.canvas.height
    this.branches = []
    this.frame = 0
}

BranchWorks.prototype = {
    recursion: 5,
    branching: 5,
    radius: 2,
    branchingRate: 0.4,
    angleDelta: PI_2 / 12,
    newBranchPerFrame: 20,
    
    draw: function(){
        if(this.frame % this.newBranchPerFrame === 0){
            this.createFirstBranch()
        }
        this.drawBranches()
        this.frame++
        if(this.branches.length){
            var self = this
            requestAnimationFrame(function(){
                self.draw()
            })
        }
    },
    
    drawBranches: function(){
        this.context.beginPath()
        var nextBranches = []
        for(var i = 0; i < this.branches.length; i++){
            var branch = this.branches[i]
            branch.draw(this.context)
            if(branch.isActive === false){
                if(branch.age < this.recursion){
                    this.createBranch(branch, nextBranches)
                }
            }else{
                nextBranches.push(branch)
            }
        }
        this.branches = nextBranches
        this.context.fill()
    },
    
    createFirstBranch: function(){
        for(var i = 0; i < this.branching; i++){
            this.branches.push(new Branch(
                this.width / 2,
                this.height / 2,
                this.radius,
                randrangeFloat(30, 50),
                Math.random() * PI_2,
                randrangeFloat(20, 25),
                1))
        }
    },
    
    createBranch: function(parent, nextBranches){
        for(var i = 0; i < this.branching; i++){
            if(Math.random() < this.branchingRate){
                var branch = new Branch(
                    parent.x,
                    parent.y,
                    parent.radius * 0.8,
                    randrangeFloat(parent.length * 0.8, parent.length * 0.9),
                    parent.angle + randrangeFloat(-this.angleDelta, this.angleDelta),
                    randrangeFloat(20, 25),
                    parent.age + 1
                )
                nextBranches.push(branch)
            }
        }
    },
    
    removeBranch: function(branch){
        var index = this.branches.indexOf(branch)
        this.branches.splice(index, 1)
    }
}

window.onload = function(){
    var canvas = $("#world")[0]
    canvas.width = document.documentElement.clientWidth
    canvas.height = document.documentElement.clientHeight
    var context = canvas.getContext("2d")
    context.globalCompositeOperation = "lighter"
    context.fillStyle = "#469"
    
    branchWorks = new BranchWorks(context)
    branchWorks.draw()
}