1. sketch#1







    クリックで再生成




    Branch.js




    var Branch = (function() {

    function Branch(x,y,life,rad,processing,tree) {

    var _life = life;
    var _max_length = 600 / _life;
    var _x = x;
    var _y = y;
    var _rad = rad;
    var _count = 0;
    var _targetX = _x;
    var _targetY = _y;
    var _processing = processing;
    var _tree = tree;

    var _max = 300;

    var _vx = Math.cos(_rad) * _max_length / _max;
    var _vy = Math.sin(_rad) * _max_length / _max;

    this.update = function(){
    _count++;
    if(_count >= _max){
    _count = _max;
    return;
    }

    _targetX += _vx;
    _targetY += _vy;

    if(_count > _max / 6){
    if(Math.random() < 0.0175){
    var vRad = Math.random() * Math.PI / 4;
    if(Math.random() < 0.5){
    vRad *= -1;
    }
    var branch = new Branch(_targetX,_targetY,_life+2,_rad + vRad,_processing,_tree);
    _tree.addBranch(branch);
    }
    }

    }

    this.draw = function(){
    _processing.line(_x,_y,_targetX,_targetY);
    }


    }

    return Branch;
    })();


    Tree.js




    var Tree = (function() {

    function Tree(x,y,processing) {

    const MAX_BRANCH = 1500;
    var _branches = [];

    var _x = x;
    var _y = y;
    var _processing = processing;

    this.update = function(){
    for(var i=0;i < _branches.length ; i++){
    var branch = _branches[i];
    branch.update();

    }
    }

    this.draw = function(){
    for(var i=0;i < _branches.length ; i++){
    var branch = _branches[i];
    branch.draw();

    }
    }

    this.addBranch = function(branch){
    if(_branches.length > MAX_BRANCH){
    return;
    }
    _branches.push(branch);
    }

    this.destroy = function(){
    _branches = [];
    }

    var branch = new Branch(_x,_y,1,-Math.PI / 2,processing,this);
    _branches.push(branch);

    }

    return Tree;
    })();


    main.js




    // Simple way to attach js code to the canvas is by using a function
    function sketchProc(processing) {

    var _w = canvas.width;
    var _h = canvas.width;
    var _tree = new Tree(_w / 2,_h,processing);

    console.log(_w,_h);

    processing.setup = function(){
    processing.size(_w,_h);

    }

    // Override draw function, by default it will be called 60 times per second
    processing.draw = function() {

    processing.stroke(255);
    processing.strokeWeight(1);
    processing.background(0);

    _tree.update();
    _tree.draw();



    };

    processing.mousePressed = function(){
    _tree.destroy();
    _tree = new Tree(_w / 2,_h,processing);
    }



    }

    var canvas = document.getElementById("canvas1");
    var p = new Processing(canvas, sketchProc);
    // p.exit(); to detach it

    Posted by Takeya Hikage on 2013年04月25日
    Categories javascript processing sketch