<! DOCTYPE html>
<meta charset=utf-8>
<title> Particle Effects Demo </title>
<meta name= "description" content= "Html5/canvas demo, particles to play around with."/>
<meta name= "keywords" content= "Html5,canvas,javascript,particles,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: #00CBCB;
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>
<body>
<div id= "outer" >
<div id= "Canvascontainer" >
<canvas id= "Maincanvas" width= "+" height= "560" ></canvas>
<div id= "Output" ></div>
</div>
</div>
<script type= "Text/javascript" >
JavaScript section
(function () {
var pi_2 = Math.PI * 2;
var canvasw = 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 (' Good for you ');
}
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 = CANVASW * 0.86;
var stirdist = CANVASW * 0.125;
var blowdist = CANVASW * 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.ran Dom () *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>
Particle Effects Demo
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
