1. sketch#2



     





    クリックで再生成




    Branch.js




    var Branch = (function() {

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

    var _life = life;
    var _max_length = Math.random() * canvas.width / _life * 0.5 + canvas.width * 0.05;
    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 _stroke = stroke;

    var _max = 100;

    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+9,_rad + vRad,_processing,_tree,_stroke);
    _tree.addBranch(branch);
    }
    }

    }

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


    }

    return Branch;
    })();


    Tree.js




    var Tree = (function() {

    function Tree(x,y,processing) {

    const MAX_BRANCH = 100;
    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,Math.random() * 230 + 25);
    _branches.push(branch);

    }

    return Tree;
    })();


    main.js




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

    const NUM_TREES = 200;
    var _w = canvas.width;
    var _h = canvas.width;
    var _trees = [];

    var _init = function(){
    for(var i=0;i<NUM_TREES;i++){
    var tree = new Tree(Math.random() * _w,_h,processing);
    _trees.push(tree);
    }
    }

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

    }

    // 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);

    for(var i=0;i<_trees.length;i++){
    var tree = _trees[i];
    tree.update();
    tree.draw();
    }



    };

    processing.mousePressed = function(){
    for(var i=0;i<_trees.length;i++){
    var tree = _trees[i];
    tree.destroy();
    }

    _init();
    }



    }

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

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