Created
November 21, 2013 08:36
-
-
Save nyango/7577958 to your computer and use it in GitHub Desktop.
2012-10-17 描画の練習
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| なんかストレンジアトラクタとか欲しかったし練習で書いてみた。 | |
| クリックすると再描画しますー | |
| ーー | |
| js覚えたてのとき書いたもの | |
| http://jsdo.it/jag/gMbb/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { background-color: #DDDDDD; font: 30px sans-serif; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body onload="draw();" onclick="draw();"> | |
| <canvas id="tutorial" width="600" height="600"></canvas> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function draw(){ | |
| var canvas = document.getElementById('tutorial'); | |
| if (canvas.getContext){ | |
| var ctx = canvas.getContext('2d'); | |
| ctx.clearRect(0,0,9999,9999); | |
| ctx.globalAlpha = 0.3; | |
| NUM = 10000; | |
| bairitu = 20; | |
| WIDTH = canvas.width; | |
| arraymaker(); | |
| maxBound = 500; | |
| minBound = 500; | |
| var g = b = 0; | |
| var drawX,drawY; | |
| for(i = 1; i < NUM; i++){ | |
| ctx.beginPath(); | |
| var markColor = 128*Math.floor(2 * i/NUM); | |
| r = markColor; | |
| ctx.strokeStyle = 'rgb(' + r + ',' + g + ',' + b + ')'; | |
| tmpDraw = miliDraw(seqX[i-1],seqY[i-1],seqZ[i-1]); | |
| ctx.moveTo(tmpDraw[0],tmpDraw[1]); | |
| tmpDraw = miliDraw(seqX[i],seqY[i],seqZ[i]); | |
| ctx.lineTo(tmpDraw[0],tmpDraw[1]); | |
| ctx.stroke(); | |
| } | |
| } | |
| } | |
| function miliDraw(x,y,z){ | |
| X1 = -(x - y)*0.7; | |
| Y1 = (x + y)*0.408 + z*0.81; | |
| Y1 *= -1; | |
| X1 *= bairitu; | |
| Y1 *= bairitu; | |
| X1 += WIDTH/2; | |
| Y1 += WIDTH/2; | |
| return [X1,Y1]; | |
| } | |
| function boundCheck(tmp){ | |
| if (tmp > maxBound){ | |
| tmp = maxBound; | |
| } | |
| if (tmp < minBound){ | |
| tmp = minBound; | |
| } | |
| return tmp; | |
| } | |
| function arraymaker(){ | |
| seqX = new Array(NUM); | |
| seqY = new Array(NUM); | |
| seqZ = new Array(NUM); | |
| seqX[0] = Math.random(); | |
| seqY[0] = 0; | |
| seqZ[0] = 0; | |
| a = b = 0.2; | |
| c = 10*Math.random(); | |
| maxBound = 500; | |
| minBound = -500; | |
| dt = 0.01; | |
| for(i = 1; i < NUM; i++){ | |
| tmpX = boundCheck(seqX[i-1]); | |
| tmpY = boundCheck(seqY[i-1]); | |
| tmpZ = boundCheck(seqZ[i-1]); | |
| seqX[i] = tmpX + dt*(- tmpY - tmpZ); | |
| seqY[i] = tmpY + dt*(a*tmpY + tmpX); | |
| seqZ[i] = tmpZ + dt*(tmpZ*(tmpX - c) + b); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment