Tree in the breeze clockmaker Follow 2010-06-22 22:06:22 License: MIT License Fork35 Fav63 View11988 Tree in the breeze @author clockmaker @see http://clockmaker.jp/blog/ forked from wonderfl http://wonderfl.net/c/9KQy/ 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(); } <canvas id='myCanvas' width="465" height="465"></canvas> Tree in the breeze body { margin: 0; padding: 0; overflow: hidden; background: #fff; } 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; } use an iframe compat browser, deer 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 tags Tweet twitter Tags 3D Creative HTML5 algorithm animation blow breeze, canvas cool js tree tree, wind wind, 移植 Favorite by Tamotsu.Senn.. xor sharakuya Mezriss k_nanba scriptgeni rein.chang happi_tan1 xiuxing 1073 Kezako sv_junic day_bee ctkjapan takishiki nehahelo seeker syouyusekai jason_fp bitrocker canvastag OKASUKE siouxcitizen.. MyOuterWorld.. sinketu arahaya Motoishi gakkaridesu ckazu urunao yoshimax 36t m90_kazuki _wonder demouth kswbr_mshr narutohyper Nyarineko t-matsuda sugyan plankton obake nyamogera laishin17: animationcanvasCreative ynakajima: algorithmcanvastree mthd: HTML5Creative Docfive: recursividad jscoder: animationbreeze,tree,wind, US428: 3Danimation toliademidov..: canvasдерево pivotdg: 3DHTML5animationねむたいよー civet: 移植 calmbooks: 3DHTML5 bushymark: blowtreewindcanvas sigmarion101..: treeblowwindcooljs nakamura001: canvasツリーの描画 xxxYukihirox..: 半年後には・・・。 hiloki: canvas bkzen: 木 paq: 催眠術 hokaccha: canvas matsu: つりー chomeconic: お昼寝したくなってきた(夜だけど Forked sort new page view favorite forked forked: Tree in the breeze nanamuh 00 3views 103/1/6 forked: Tree in the breeze gawao 00 31views 105/1/6 forked: Tree in the breeze osawakesukee.. 00 21views 103/1/6 forked: Tree in the breeze osawakesukee.. 00 19views 103/1/6 1 2 3 4 5 6 7 8 9NEXT>>