フラクタルの木
HTML5のCanvasでフラクタルの木を描くことができます。
枝の角度と、枝の太さ、枝の色はランダムです。
下の黒枠内をパソコンでクリックもしくは、スマホ・タブレット端末でタッチすると、その場所にフラクタルの木が描画されます。
(端末が描画に対応していない場合があります。)
ソースコード
以下が上記のプログラムのソースコードです。
HTML
1 2 3 4 5 6 | <div class="wrapper"> <canvas id="wood"></canvas> </div> <div style="text-align:center;margin-top:10px;"> <button id="clear">クリア</button> </div> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | //キャンバスの幅をラッパーにに合わせる var w = $('.wrapper').width(); var h = $('.wrapper').height(); $('#wood').attr('width', w); $('#wood').attr('height', h); //クリアボタン $('#clear').click(function(){ var w = $('.wrapper').width(); var h = $('.wrapper').height(); var canvas = document.getElementById('wood'); if (canvas.getContext){ var context = canvas.getContext('2d'); context.clearRect(0,0,w,h); } }); //線を描く function drawLine(context, p1, p2) { context.beginPath(); context.lineWidth=Math.floor( Math.random() * 3 ) + 1; context.strokeStyle='rgb(' + Math.floor(Math.random()*64) + ',' + Math.floor(Math.random()*256 )+ ',' + Math.floor(Math.random()*128+128) + ')'; context.moveTo(p1.x,p1.y); context.lineTo(p2.x,p2.y); context.stroke(); } //木を描く function drawTree(context, x1, y1, n, c, r, d1,d2, depth) { var x2=x1+r*Math.cos(c); var y2=y1+r*Math.sin(c); drawLine(context,{x:x1,y:y1},{x:x2,y:y2}) if(depth<0){ drawTree(context,x2,y2,n,c+d1,r,d1,d2,depth-1); drawTree(context,x2,y2,n,c-d2,r,d1,d2,depth-1); } } //キャンバス上のクリックイベントバンドラ $('#wood').on('click', function(e) { var canvas = document.getElementById('wood'); if (canvas.getContext){ var context = canvas.getContext('2d'); var n = 25; var r = (Math.random()*0.25+0.75)*n; var d1=(Math.random()-0.5)*Math.PI/2; var d2=(Math.random()-0.5)*Math.PI/2; drawTree(context, e.offsetX, e.offsetY, n, -Math.PI/2, r, d1,d2, 8); } }); |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .wrapper{ border:1px solid; width:100%; height:400px; max-height:400px; } #clear { background: -moz-linear-gradient(top,#0099CC 0%,#006699); background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699)); border: 1px solid #DDD; color:#FFF; width: 100px; padding: 10px 0; } |