Tree in the breeze

clockmaker

2010-06-22 22:06:22

License: MIT License

Fork: 35

Fav: 63

View: 11988

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 102 lines
HTML 1 lines
CSS 6 lines

Tree in the breeze
@author clockmaker
@see http://clockmaker.jp/blog/
forked from wonderfl
http://wonderfl.net/c/9KQy/

Tree in the breeze

/**
 * Tree in the breeze
 *
 * @author clockmaker
 * @see http://clockmaker.jp/blog/
 *
 * forked from wonderfl
 * http://wonderfl.net/c/9KQy/
 */
// -----------------------------------------
// 定数
// -----------------------------------------

var FPS = 60; // フレームレート
var INTERVAL_SEC = 1000 / FPS >> 0; // インターバル時間

// -----------------------------------------
// 初期化
// -----------------------------------------

// 変数の初期化
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var step = 0.0;
var toRadian = Math.PI / 180;

// イベントハンドラの登録
setInterval(intervalHandler, INTERVAL_SEC);

// -----------------------------------------
// イベントハンドラ
// -----------------------------------------

/**
 * インターバルハンドラー
 */
function intervalHandler(){
    context.clearRect(0, 0, 465, 465);
    creatTree(context, 232, 465, 90, 180, 5); // 上方向
    creatTree(context, 232, 465, 60, 120, 4); // 右方向
    creatTree(context, 232, 465, 120, 120, 4); // 左方向
    step += (Math.PI / 80) % Math.PI;
}

// -----------------------------------------
// いろいろ
// -----------------------------------------

/**
 * 木を描きます
 * @param {Context} g
 * @param {Number} px
 * @param {Number} py
 * @param {Number} angle
 * @param {Number} len
 * @param {int} n
 */
function creatTree(g, px, py, angle, len, n){
    if (n > 0) {
        angle += 3 * Math.cos(step) - 2;
        
        // よく伸びる幹
        var x1 = px + 0.1 * len * Math.cos(angle * toRadian);
        var y1 = py - 0.1 * len * Math.sin(angle * toRadian);
        
        // あまり伸びない幹
        var x2 = px + len * Math.cos(angle * toRadian);
        var y2 = py - len * Math.sin(angle * toRadian);
        
        // 線を描く
        drawLine(g, n - 1, px, py, x2, y2);
        
        var angleLeft = angle + 30;
        var angleRight = angle - 30;
        
        // すこしずつ伸びなくする
        len = len * 2 / 3;
        creatTree(g, x2, y2, angle - 3 * Math.sin(step), len, n - 1); // 上方向の幹
        creatTree(g, x1, y1, angleLeft, len * 2 / 3, n - 1); // 左方向の幹
        creatTree(g, x1, y1, angleRight, len * 2 / 3, n - 1); // 右方向の幹
        creatTree(g, x2, y2, angleLeft, len * 2 / 3, n - 1); // 左方向の幹
        creatTree(g, x2, y2, angleRight, len * 2 / 3, n - 1); // 右方向の幹
    }
}

/**
 * 線を描きます
 * @param {Context} g
 * @param {int} n
 * @param {Number} x1
 * @param {Number} y1
 * @param {Number} x2
 * @param {Number} y2
 */
function drawLine(g, n, x1, y1, x2, y2){
    g.beginPath();
    g.lineWidth = n > 0 ? n : 1;
    g.strokeStyle = "rgb(0, 128, 32)";
    g.moveTo(x1, y1);
    g.lineTo(x2, y2);
    g.stroke();
}

Tree in the breeze

Tree in the breeze @author clockmaker @see http://clockmaker.jp/blog/ forked from wonderfl http://wonderfl.net/c/9KQy/ /** * Tree in the breeze * * @author clockmaker * @see http://clockmaker.jp/blog/ * * forked from wonderfl * http://wonderfl.net/c/9KQy/ */ // ----------------------------------------- // 定数 // ----------------------------------------- var FPS = 60; // フレームレート var INTERVAL_SEC = 1000 / FPS >> 0; // インターバル時間 // ----------------------------------------- // 初期化 // ----------------------------------------- // 変数の初期化 var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var step = 0.0; var toRadian = Math.PI / 180; // イベントハンドラの登録 setInterval(intervalHandler, INTERVAL_SEC); // ----------------------------------------- // イベントハンドラ // ----------------------------------------- /** * インターバルハンドラー */ function intervalHandler(){ context.clearRect(0, 0, 465, 465); creatTree(context, 232, 465, 90, 180, 5); // 上方向 creatTree(context, 232, 465, 60, 120, 4); // 右方向 creatTree(context, 232, 465, 120, 120, 4); // 左方向 step += (Math.PI / 80) % Math.PI; } // ----------------------------------------- // いろいろ // ----------------------------------------- /** * 木を描きます * @param {Context} g * @param {Number} px * @param {Number} py * @param {Number} angle * @param {Number} len * @param {int} n */ function creatTree(g, px, py, angle, len, n){ if (n > 0) { angle += 3 * Math.cos(step) - 2; // よく伸びる幹 var x1 = px + 0.1 * len * Math.cos(angle * toRadian); var y1 = py - 0.1 * len * Math.sin(angle * toRadian); // あまり伸びない幹 var x2 = px + len * Math.cos(angle * toRadian); var y2 = py - len * Math.sin(angle * toRadian); // 線を描く drawLine(g, n - 1, px, py, x2, y2); var angleLeft = angle + 30; var angleRight = angle - 30; // すこしずつ伸びなくする len = len * 2 / 3; creatTree(g, x2, y2, angle - 3 * Math.sin(step), len, n - 1); // 上方向の幹 creatTree(g, x1, y1, angleLeft, len * 2 / 3, n - 1); // 左方向の幹 creatTree(g, x1, y1, angleRight, len * 2 / 3, n - 1); // 右方向の幹 creatTree(g, x2, y2, angleLeft, len * 2 / 3, n - 1); // 左方向の幹 creatTree(g, x2, y2, angleRight, len * 2 / 3, n - 1); // 右方向の幹 } } /** * 線を描きます * @param {Context} g * @param {int} n * @param {Number} x1 * @param {Number} y1 * @param {Number} x2 * @param {Number} y2 */ function drawLine(g, n, x1, y1, x2, y2){ g.beginPath(); g.lineWidth = n > 0 ? n : 1; g.strokeStyle = "rgb(0, 128, 32)"; g.moveTo(x1, y1); g.lineTo(x2, y2); g.stroke(); }<canvas id='myCanvas' width="465" height="465"></canvas>body { margin: 0; padding: 0; overflow: hidden; background: #fff; }

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/2nrG/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/clockmaker/tree2d" title="Tree in the breeze">Tree in the breeze - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip