Rainbow Tube on JS uwi Follow 2010-06-18 19:39:43 License: MIT License Fork0 Fav8 View1854 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 61 lines HTML 4 lines CSS 7 lines Rainbow Tube on JS var RA = 120; var RB = 120; var AX = -100; var AY = 565; var BX = 565; var BY = -100; var OMEGAA = 0.16; var OMEGAB = 0.12345; var N = 40; var _t = -Math.random() * 99999999; var _canvas = document.getElementById("world"); var _cont = _canvas.getContext("2d"); setInterval(onTimer, 1000/60); function onTimer() { _cont.clearRect(0, 0, 465, 465); for(var i = 0;i < N;i++){ var theta = 2 * Math.PI * i / N; _cont.beginPath(); _cont.strokeStyle = color(360 * i / N + _t, 0.3); _cont.lineWidth = 10; _cont.moveTo(AX + RA * Math.cos(theta + OMEGAA * _t), AY + RA * Math.sin(theta + OMEGAA * _t)); _cont.lineTo(BX + RB * Math.cos(theta + OMEGAB * _t), BY + RB * Math.sin(theta + OMEGAB * _t)); _cont.stroke(); } _t++; } function color(h, alpha) { var ht = (((h %= 360) < 0) ? h + 360 : h) / 60; var hi = Math.floor(ht); var r, g, b; switch(hi){ case 0: r = 0xff; g = Math.round(0xff * (ht - hi)); b = 0; break; case 1: g = 0xff; r = Math.round(0xff * (1 - (ht - hi))); b = 0; break; case 2: g = 0xff; b = Math.round(0xff * (ht - hi)); r = 0; break; case 3: b = 0xff; g = Math.round(0xff * (1 - (ht - hi))); r = 0; break; case 4: b = 0xff; r = Math.round(0xff * (ht - hi)); g = 0; break; case 5: r = 0xff; b = Math.round(0xff * (1 - (ht - hi))); g = 0; break; default: break; } return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")"; } <canvas id='world' width="465" height="465"> </canvas> Rainbow Tube on JS body { background-color:#000000; margin:0; padding:0; overflow:hidden; } var RA = 120; var RB = 120; var AX = -100; var AY = 565; var BX = 565; var BY = -100; var OMEGAA = 0.16; var OMEGAB = 0.12345; var N = 40; var _t = -Math.random() * 99999999; var _canvas = document.getElementById("world"); var _cont = _canvas.getContext("2d"); setInterval(onTimer, 1000/60); function onTimer() { _cont.clearRect(0, 0, 465, 465); for(var i = 0;i < N;i++){ var theta = 2 * Math.PI * i / N; _cont.beginPath(); _cont.strokeStyle = color(360 * i / N + _t, 0.3); _cont.lineWidth = 10; _cont.moveTo(AX + RA * Math.cos(theta + OMEGAA * _t), AY + RA * Math.sin(theta + OMEGAA * _t)); _cont.lineTo(BX + RB * Math.cos(theta + OMEGAB * _t), BY + RB * Math.sin(theta + OMEGAB * _t)); _cont.stroke(); } _t++; } function color(h, alpha) { var ht = (((h %= 360) < 0) ? h + 360 : h) / 60; var hi = Math.floor(ht); var r, g, b; switch(hi){ case 0: r = 0xff; g = Math.round(0xff * (ht - hi)); b = 0; break; case 1: g = 0xff; r = Math.round(0xff * (1 - (ht - hi))); b = 0; break; case 2: g = 0xff; b = Math.round(0xff * (ht - hi)); r = 0; break; case 3: b = 0xff; g = Math.round(0xff * (1 - (ht - hi))); r = 0; break; case 4: b = 0xff; r = Math.round(0xff * (ht - hi)); g = 0; break; case 5: r = 0xff; b = Math.round(0xff * (1 - (ht - hi))); g = 0; break; default: break; } return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")"; } <canvas id='world' width="465" height="465"> </canvas> body { background-color:#000000; margin:0; padding:0; overflow:hidden; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author uwi twitter : @uwitenpen wonderfl : http://wonderfl.net/user/uwi わんだふるさーち。 : http://www5.pf-x.net/~uwi/wonderfl/index.php Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/zcLy/js"></script> Tweet Twitter Discussion Questions on this code? Tags AS3コンパチ canvas color iPad iPhone ドラッグ 色 Favorite by tkinjo nanlow paq 9re lespleen: canvas fantasista: canvascoloriPadiPhone ドラッグ色 mash: http://wonderfl.net/c/mrcB HapHands: AS3コンパチ