Colorful Spring Particle JS version matsu4512 Follow 2010-06-19 11:52:32 License: MIT License Fork20 Fav52 View9191 Colorful Spring Particle http://wonderfl.net/c/9nuR * の Javascript バージョン Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 110 lines HTML 3 lines CSS 3 lines Colorful Spring Particle http://wonderfl.net/c/9nuR * の Javascript バージョン Colorful Spring Particle JS version jQuery v1.4.2 /* * Colorful Spring Particle http://wonderfl.net/c/9nuR * の Javascript バージョン */ var canvas = document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var W=465; var H=465; var balls = new Array(); var gradations = new Array(); function init(){ for(var i = 0; i < 50; i++){ balls.push(new Ball(Math.random()*W, Math.random()*H, Math.random()*10-5,Math.random()*10-5, Math.random()*20+20, Math.random()*255>>0,Math.random()*255>>0,Math.random()*255>>0)); //グラデーションの設定 gradations.push("rgba(" + 255 + "," + 255 + "," + 255 + ","); gradations.push("rgba(" + 0 + "," + 0 + "," + 0 + ","); gradations.push("rgba(" + balls[i].r + "," + balls[i].g + "," + balls[i].b + ","); } setInterval(draw,33); } function draw(){ $("#canvas").css({"opacity":1,"display":"block"}); var star = new Array(10); //黒く塗りつぶす ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = "rgba(0, 0, 0, 0.5)"; ctx.fillRect(0, 0, W, H); //BlendMode.ADD的な感じ？ ctx.globalCompositeOperation = "lighter"; //描画 for(i=0; i<balls.length; i++){ ctx.beginPath(); var b = balls[i]; var gradblur = ctx.createRadialGradient(b.x, b.y, 0, b.x, b.y, b.size); b.alpha += (b.toAlpha-b.alpha)/4.0; if(b.alpha > 1) b.alpha = 1; gradblur.addColorStop(0,gradations[i*3+1]+(b.alpha)+")"); gradblur.addColorStop(0.4,gradations[i*3+1]+(b.alpha)+")"); gradblur.addColorStop(0.65,gradations[i*3+2]+(b.alpha*0.9)+")"); gradblur.addColorStop(0.65,gradations[i*3]+(b.alpha)+")"); gradblur.addColorStop(0.75,gradations[i*3]+(b.alpha)+")"); gradblur.addColorStop(0.75,gradations[i*3+2]+(b.alpha*0.9)+")"); gradblur.addColorStop(1,gradations[i*3+1]+(b.alpha)+")"); b.toAlpha = 0; ctx.fillStyle = gradblur; ctx.arc(b.x, b.y, b.size, 0, Math.PI*2, false); ctx.fill(); b.x += b.vx; b.y += b.vy; if(b.x < -20) b.x = W+20; if(b.y < -20) b.y = H+20; if(b.x > W+20) b.x = -20; if(b.y > H+20) b.y = -20; for (var j = i + 1; j < 50; j++) { spring(b, balls[j]); } } } function spring(b1, b2){ var dx = b2.x - b1.x; var dy = b2.y - b1.y; var dist = Math.sqrt(dx * dx + dy * dy); if(dist < 100){ //グラデーションの生成 var grad = ctx.createLinearGradient(b1.x, b1.y, b2.x, b2.y); grad.addColorStop(0,'rgba('+b1.r+','+b1.g+','+b1.b+','+(1-dist/100)+')'); grad.addColorStop(1,'rgba('+b2.r+','+b2.g+','+b2.b+','+(1-dist/100)+')'); ctx.strokeStyle = grad; //線の描画 ctx.beginPath(); ctx.moveTo(b1.x,b1.y); ctx.lineTo(b2.x,b2.y); ctx.closePath(); ctx.stroke(); b1.toAlpha += 0.1; b2.toAlpha += 0.1; var ax = dx * 0.0075; var ay = dy * 0.0075; b1.vx += ax / b1.size; b1.vy += ay / b1.size; b2.vx -= ax / b2.size; b2.vy -= ay / b2.size; } } var Ball = function(x,y,vx,vy,size,r,g,b){ this.r = r; this.g = g; this.b = b; this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.size = size; this.toAlpha=0.0; this.alpha = 1.0; } <body onload="init();"> <canvas id='canvas' width='465' height='465'></canvas> </body> Colorful Spring Particle JS version body { background-color: #FFFFFF;margin:0px;padding:0px;overflow:hidden;} html,body{width:100%;height:100%;} #canvas{width:465;height:465;} Colorful Spring Particle http://wonderfl.net/c/9nuR * の Javascript バージョン /* * Colorful Spring Particle http://wonderfl.net/c/9nuR * の Javascript バージョン */ var canvas = document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var W=465; var H=465; var balls = new Array(); var gradations = new Array(); function init(){ for(var i = 0; i < 50; i++){ balls.push(new Ball(Math.random()*W, Math.random()*H, Math.random()*10-5,Math.random()*10-5, Math.random()*20+20, Math.random()*255>>0,Math.random()*255>>0,Math.random()*255>>0)); //グラデーションの設定 gradations.push("rgba(" + 255 + "," + 255 + "," + 255 + ","); gradations.push("rgba(" + 0 + "," + 0 + "," + 0 + ","); gradations.push("rgba(" + balls[i].r + "," + balls[i].g + "," + balls[i].b + ","); } setInterval(draw,33); } function draw(){ $("#canvas").css({"opacity":1,"display":"block"}); var star = new Array(10); //黒く塗りつぶす ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = "rgba(0, 0, 0, 0.5)"; ctx.fillRect(0, 0, W, H); //BlendMode.ADD的な感じ？ ctx.globalCompositeOperation = "lighter"; //描画 for(i=0; i<balls.length; i++){ ctx.beginPath(); var b = balls[i]; var gradblur = ctx.createRadialGradient(b.x, b.y, 0, b.x, b.y, b.size); b.alpha += (b.toAlpha-b.alpha)/4.0; if(b.alpha > 1) b.alpha = 1; gradblur.addColorStop(0,gradations[i*3+1]+(b.alpha)+")"); gradblur.addColorStop(0.4,gradations[i*3+1]+(b.alpha)+")"); gradblur.addColorStop(0.65,gradations[i*3+2]+(b.alpha*0.9)+")"); gradblur.addColorStop(0.65,gradations[i*3]+(b.alpha)+")"); gradblur.addColorStop(0.75,gradations[i*3]+(b.alpha)+")"); gradblur.addColorStop(0.75,gradations[i*3+2]+(b.alpha*0.9)+")"); gradblur.addColorStop(1,gradations[i*3+1]+(b.alpha)+")"); b.toAlpha = 0; ctx.fillStyle = gradblur; ctx.arc(b.x, b.y, b.size, 0, Math.PI*2, false); ctx.fill(); b.x += b.vx; b.y += b.vy; if(b.x < -20) b.x = W+20; if(b.y < -20) b.y = H+20; if(b.x > W+20) b.x = -20; if(b.y > H+20) b.y = -20; for (var j = i + 1; j < 50; j++) { spring(b, balls[j]); } } } function spring(b1, b2){ var dx = b2.x - b1.x; var dy = b2.y - b1.y; var dist = Math.sqrt(dx * dx + dy * dy); if(dist < 100){ //グラデーションの生成 var grad = ctx.createLinearGradient(b1.x, b1.y, b2.x, b2.y); grad.addColorStop(0,'rgba('+b1.r+','+b1.g+','+b1.b+','+(1-dist/100)+')'); grad.addColorStop(1,'rgba('+b2.r+','+b2.g+','+b2.b+','+(1-dist/100)+')'); ctx.strokeStyle = grad; //線の描画 ctx.beginPath(); ctx.moveTo(b1.x,b1.y); ctx.lineTo(b2.x,b2.y); ctx.closePath(); ctx.stroke(); b1.toAlpha += 0.1; b2.toAlpha += 0.1; var ax = dx * 0.0075; var ay = dy * 0.0075; b1.vx += ax / b1.size; b1.vy += ay / b1.size; b2.vx -= ax / b2.size; b2.vy -= ay / b2.size; } } var Ball = function(x,y,vx,vy,size,r,g,b){ this.r = r; this.g = g; this.b = b; this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.size = size; this.toAlpha=0.0; this.alpha = 1.0; } <body onload="init();"> <canvas id='canvas' width='465' height='465'></canvas> </body> body { background-color: #FFFFFF;margin:0px;padding:0px;overflow:hidden;} html,body{width:100%;height:100%;} #canvas{width:465;height:465;} use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/mfpp/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/matsu4512/mfpp" title="Colorful Spring Particle JS version">Colorful Spring Particle JS version - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags Tweet twitter Tags 3D Creative [particle][パーティクル] animation canvas game graphics html5 javascript javascript,animation js版 light particle particles グラデーション パーティクル 光 Favorite by calmbooks mihonak fabiodan kyosuke.w shirayuki pypupypa suitap sibukixxx ksymeon kk.ayataka shamotron ksk1015 Arwym memememomo kiris Joost.Galjar.. phi sv_junic syouyusekai y3i12 tkinjo shimoyama zamiang sanesashi ishiduca Aitjcize siouxcitizen.. nanlow liquidfunc clockmaker atsu k0rin ds729: グラデーションcanvas[particle][パーティクル] kyosuke.w: アニメーション chimanaco: particles leader22: html5canvas fallen: 3D petewarrior: particlegraphicsanimation laishin17: canvasjavascript,animation[particle][パーティクル] rintaro2039: canvas cojicoji.gra..: canvasグラデーション光 happi_tan1: 癒し ye117: グラデーション sharavsambuu..: gamegraphicswow mthd: CreativeHTML5 Docfive: canvas composite horiuchi: light光 webid: javascriptcanvashtml5js canvas m1m0r1: ビジュアル系 kogurek1: 美しいです！ HapHands: js版particleパーティクル光 paq: particle Forked sort new page view favorite forked forked: Colorful Spring Partic.. Cody09 00 7views 111/3/3 forked: Colorful Spring Partic.. Koshino.Mako.. 00 12views 111/3/3 forked: Colorful Spring Partic.. kutu 00 12views 111/3/3 forked: Colorful Spring Partic.. p0w3r3dby_ad.. 00 20views 111/3/3 1 2 3 4 5 6 7 8 9NEXT>>
