<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	
	xmlns:georss="http://www.georss.org/georss"
	xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
	>

<channel>
	<title>particle | Web活メモ帳</title>
	<atom:link href="https://blog.verygoodtown.com/tag/particle/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.verygoodtown.com</link>
	<description>WEB開発者が使える世界の情報を発信します</description>
	<lastBuildDate>Sat, 12 Jun 2010 16:29:13 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.9.10</generator>
<site xmlns="com-wordpress:feed-additions:1">122803348</site>	<item>
		<title>HTML5とCanvasで作られたパーティクルエンジン</title>
		<link>https://blog.verygoodtown.com/2010/06/javascript/</link>
					<comments>https://blog.verygoodtown.com/2010/06/javascript/#respond</comments>
		
		<dc:creator><![CDATA[linja]]></dc:creator>
		<pubDate>Sun, 13 Jun 2010 00:28:05 +0000</pubDate>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[Canvas]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[particle]]></category>
		<guid isPermaLink="false">http://blog.verygoodtown.com/?p=4553</guid>

					<description><![CDATA[<p>JavaScriptで出来たパーティクルエンジンをご紹介。 コード量も多くないので、カスタマイズして使えそうです。 デモ 画面を表示すると、マウスの動きに合わせてパーティクルも動くようになっています。 500個ほど表示さ [&#8230;]</p>
The post <a href="https://blog.verygoodtown.com/2010/06/javascript/">HTML5とCanvasで作られたパーティクルエンジン</a> first appeared on <a href="https://blog.verygoodtown.com">Web活メモ帳</a>.]]></description>
										<content:encoded><![CDATA[<p>JavaScriptで出来たパーティクルエンジンをご紹介。<br />
コード量も多くないので、カスタマイズして使えそうです。</p>
<p><img loading="lazy" src="https://blog.verygoodtown.com/wordpress/wp-content/uploads/2010/06/20100613-011-600x338.jpg" alt="20100613-01" title="20100613-01" width="600" height="338" class="alignnone size-large wp-image-4559" srcset="https://blog.verygoodtown.com/wordpress/wp-content/uploads/2010/06/20100613-011-600x338.jpg 600w, https://blog.verygoodtown.com/wordpress/wp-content/uploads/2010/06/20100613-011-300x169.jpg 300w, https://blog.verygoodtown.com/wordpress/wp-content/uploads/2010/06/20100613-011.jpg 1016w" sizes="(max-width: 600px) 100vw, 600px" /><br />
<span id="more-4553"></span></p>
<p><a class="comments_l" target="_blank" href="http://spielzeugz.de/html5/liquid-particles.html">デモ</a></p>
<p>画面を表示すると、マウスの動きに合わせてパーティクルも動くようになっています。<br />
500個ほど表示させているようですが、動きもすごくスムーズですね。</p>
<p>以下のようなコードで動作させているようです。</p>
<pre class="brush:js;">
function  run()
{
        ctx.globalCompositeOperation = "source-over";
        ctx.fillStyle = "rgba(8,8,12,.65)";
        ctx.fillRect( 0 , 0 , canvasW , canvasH );
        ctx.globalCompositeOperation = "lighter";
       
        mouseVX    = mouseX - prevMouseX;
        mouseVY    = mouseY - prevMouseY;
        prevMouseX = mouseX;
        prevMouseY = mouseY;
       
        var toDist   = canvasW / 1.15;
        var stirDist = canvasW / 8;
        var blowDist = canvasW / 2;
       
        var Mrnd   = Math.random;
        var Mabs   = Math.abs;
        var Msqrt  = Math.sqrt;
        var Mcos   = Math.cos;
        var Msin   = Math.sin;
        var Matan2 = Math.atan2;
        var Mmax   = Math.max;
        var Mmin   = Math.min;
       
        var i = numMovers;
        while( i-- )
        {
                var m  = movers[i];
                var x  = m.x;
                var y  = m.y;
                var vX = m.vX;
                var vY = m.vY;
               
                var dX = x - mouseX;
                var dY = y - mouseY;
                var d = Msqrt( dX * dX + dY * dY );
                var a = Matan2( dY , dX );
                var cosA = Mcos( a );
                var sinA = Msin( a );
               
                if( isMouseDown )
                {
                        if( d <blowDist )
                        {
                                var blowAcc = ( 1 - ( d / blowDist ) ) * 14;
                                vX += cosA * blowAcc + .5 - Mrnd();
                                vY += sinA * blowAcc + .5 - Mrnd();
                        }
                }
               
                if( d <toDist )
                {
                        var toAcc = ( 1 - ( d / toDist ) ) * canvasW * .0014;
                        vX -= cosA * toAcc;
                        vY -= sinA * toAcc;
                }
               
                if( d <stirDist )
                {
                        var mAcc = ( 1 - ( d / stirDist ) ) * canvasW * .00022;
                        vX += mouseVX * mAcc;
                        vY += mouseVY * mAcc;         
                }
               
               
                vX *= friction;
                vY *= friction;
               
                var avgVX = Mabs( vX );
                var avgVY = Mabs( vY );
                var avgV = ( avgVX + avgVY ) * .5;
               
                if( avgVX <.1 ) vX *= Mrnd() * 3;
                if( avgVY <.1 ) vY *= Mrnd() * 3;
               
                var sc = avgV * .45;
                sc = Mmax( Mmin( sc , 3.5 ) , .4 );
               
               
                var nextX = x + vX;
                var nextY = y + vY;
               
                if( nextX> canvasW )
                {
                        nextX = canvasW;
                        vX *= -1;
                }
                else if( nextX <0 )
                {
                        nextX = 0;
                        vX *= -1;
                }
               
                if( nextY> canvasH )
                {
                        nextY = canvasH;
                        vY *= -1;
                }
                else if( nextY <0 )
                {
                        nextY = 0;
                        vY *= -1;
                }
               
                m.vX = vX;
                m.vY = vY;
                m.x  = nextX;
                m.y  = nextY;
               
                ctx.fillStyle = m.color;
                ctx.beginPath();
                ctx.arc( nextX , nextY , sc , 0 , radCirc , true );
                ctx.closePath();
                ctx.fill();          
        }
}
</pre>
<p>Flashでなくとも、こういった表現ができるのは嬉しいですね。</p>The post <a href="https://blog.verygoodtown.com/2010/06/javascript/">HTML5とCanvasで作られたパーティクルエンジン</a> first appeared on <a href="https://blog.verygoodtown.com">Web活メモ帳</a>.]]></content:encoded>
					
					<wfw:commentRss>https://blog.verygoodtown.com/2010/06/javascript/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">4553</post-id>	</item>
	</channel>
</rss>
