Particle effect demonstration and particle demonstration
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = UTF-8>
<Title> particle effect demonstration </title>
<Meta name = "description" content = "HTML5/canvas demo, 500 participation to play around with."/>
<Meta name = "keywords" content = "html5, canvas, javascript, participant, interactive, velocity, programming, flash"/>
<Style type = "text/css">
Html, body {
Text-align: center;
Margin: 0;
Padding: 0;
Background: #000000;
Color: #666666;
Line-height: 1.25em;
}
# Outer {
Position: absolute;
Top: 50%;
Left: 50%;
Width: 1px;
Height: 1px;
Overflow: visible;
}
# CanvasContainer {
Position: absolute;
Width: 1000px;
Height: 560px;
Top:-280px;
Left:-500px;
}
Canvas {
Border: 1px solid #333333;
}
A {
Color: #00 CBCB;
Text-decoration: none;
Font-weight: bold;
}
A: hover {
Color: # FFFFFF;
}
# Output {
Font-family: Arial, Helvetica, sans-serif;
Font-size: 0.75em;
Margin-top: 4px;
}
# Footer {
Font-size: 0.6em;
Font-family: Arial, Helvetica, sans-serif;
Position: absolute;
Bottombottom: 8px;
Width: 98%;
}
</Style>
</Head>
<Body>
<Div id = "outer">
<Div id = "canvasContainer">
<Canvas id = "mainCanvas" width = "1000" height = "560"> </canvas>
<Div id = "output"> </div>
</Div>
</Div>
<Script type = "text/javascript">
// Javascript part
(Function (){
Var PI_2 = Math. PI * 2;
Var canvasws = 1000;
Var canvasH = 560;
Var numMovers = 600;
Var friction = 0.96;
Var movers = [];
Var canvas;
Var ctx;
Var canvasDiv;
Var outerDiv;
Var mouseX;
Var mouseY;
Var mouseVX;
Var mouseVY;
Var prevMouseX;
Var prevMouseY;
Var isMouseDown;
Function init (){
Canvas = document. getElementById ("mainCanvas ");
If (canvas. getContext ){
Setup ();
SetInterval (run, 33 );
Trace ('Hello guys ');
}
Else {
Trace ("Sorry, needs a recent version of Chrome, Firefox, Opera, Safari, or Internet Explorer 9 .");
}
}
Function setup (){
OuterDiv = document. getElementById ("outer ");
CanvasDiv = document. getElementById ("canvasContainer ");
Ctx = canvas. getContext ("2d ");
Var I = numMovers;
While (I --){
Var m = new Mover ();
M. x = canvasW * 0.5;
M. y = canvasH * 0.5;
M. vX = Math. cos (I) * Math. random () * 34;
M. vY = Math. sin (I) * Math. random () * 34;
Movers [I] = m;
}
MouseX = prevMouseX = canvasW * 0.5;
MouseY = prevMouseY = canvasH * 0.5;
Document. onmousedown = onDocMouseDown;
Document. onmouseup = onDocMouseUp;
Document. onmousemove = onDocMouseMove;
}
Function run (){
Ctx. globalCompositeOperation = "source-over ";
Ctx. fillStyle = "rgba (8,8, 12, 0.65 )";
Ctx. fillRect (0, 0, canvasW, canvasH );
Ctx. globalCompositeOperation = "lighter ";
MouseVX = mouseX-prevMouseX;
MouseVY = mouseY-prevMouseY;
PrevMouseX = mouseX;
PrevMouseY = mouseY;
Var toDist = canvas w * 0.86;
Var stirDist = canvas w * 0.125;
Var blowDist = canvas w * 0.5;
Var Mrnd = Math. random;
Var Mabs = Math. abs;
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 = Math. sqrt (dX * dX + dY * dY) | 0.001;
DX/= d;
DY/= d;
If (isMouseDown ){
If (d <blowDist ){
Var blowAcc = (1-(d/blowDist) * 14;
VX + = dX * blowAcc + 0.5-Mrnd ();
VY + = dY * blowAcc + 0.5-Mrnd ();
}
}
If (d <toDist ){
Var toAcc = (1-(d/toDist) * canvasW * 0.0014;
VX-= dX * toAcc;
VY-= dY * toAcc;
}
If (d <stirDist ){
Var mAcc = (1-(d/stirDist) * canvasW * 0.00026;
VX + = mouseVX * mAcc;
VY + = mouseVY * mAcc;
}
VX * = friction;
VY * = friction;
Var avgVX = Mabs (vX );
Var avgVY = Mabs (vY );
Var avgV = (avgVX + avgVY) * 0.5;
If (avgVX <. 1) vX * = Mrnd () * 3;
If (avgVY <. 1) vY * = Mrnd () * 3;
Var SC = avgV * 0.45;
SC = Math. max (Math. min (SC, 3.5), 0.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, PI_2, true );
Ctx. closePath ();
Ctx. fill ();
}
}
Function onDocMouseMove (e ){
Var ev = e? E: window. event;
MouseX = ev. clientX-outerDiv. offsetLeft-canvasDiv. offsetLeft;
MouseY = ev. clientY-outerDiv. offsetTop-canvasDiv. offsetTop;
}
Function onDocMouseDown (e ){
IsMouseDown = true;
Return false;
}
Function onDocMouseUp (e ){
IsMouseDown = false;
Return false;
}
Function Mover (){
This. color = "rgb (" + Math. floor (Math. random () * 255) + "," + Math. floor (Math. random () * 255) + "," + Math. floor (Math. random () * 255) + ")";
This. y = 0;
This. x = 0;
This. vX = 0;
This. vY = 0;
This. size = 1;
}
Function rect (context, x, y, w, h ){
Context. beginPath ();
Context. rect (x, y, w, h );
Context. closePath ();
Context. fill ();
}
Function trace (str ){
Document. getElementById ("output"). innerHTML = str;
}
Window. onload = init;
})();
</Script>
</Body>
</Html>