Permalink
Browse files

A pretty cool particle demo using HTML5 canvas

  • Loading branch information...
0 parents commit 0cc8f2d8af3b1dd5ba92c763174a8a2dfaf64242 @codepo8 committed Aug 24, 2011
Binary file not shown.
No changes.
@@ -0,0 +1,77 @@
+* {
+ margin:0;
+ padding:0
+}
+body {
+ background:#000;
+ color:#fff;
+ margin:0;
+ overflow: hidden;
+ font-family:futura,helvetica,sans-serif;
+}
+#logo {
+ position:absolute;
+ bottom:0;
+ width:100%;
+ height:200px;
+ background:url(../img/5logo.png) no-repeat bottom center;
+}
+header {
+ display:block;
+ position:absolute;
+ top:10px;
+ right:10px;
+}
+form {
+ position:absolute;
+ top:10px;
+ left:10px;
+ width:300px;
+ margin:0;
+ padding:0;
+ background:rgba(0,0,0,.8);
+ opacity:.1;
+}
+h1 {
+ font-weight:normal;
+}
+form:hover {
+ opacity:1;
+}
+footer {
+ font-size:10px;
+ display:block;
+ position:absolute;
+ bottom:10px;
+ right:10px;
+ z-index:10;
+}
+footer p {
+ color:#333;
+}
+footer p a {
+ color:#666;
+}
+input[ type=number ] {
+ width:4em;
+}
+label {
+ padding:0 .5em;
+}
+form div{
+ padding-bottom:10px;
+}
+fieldset{
+ border:none;
+}
+legend{
+ border-bottom:2px solid #ccc;
+ display:block;
+ width:300px;
+ color:lime;
+ margin-bottom:10px;
+ padding-bottom:5px;
+}
+form p{
+ color:#666;
+}
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<head>
+<title>The browser fountain</title>
+<link rel="stylesheet" href="css/browserfountain.css" type="text/css">
+</head>
+<body>
+ <header><h1>The Browser Fountain</h1></header>
+ <section></section>
+ <canvas><figure><img src="img/browserfountain.jpg" alt="screenshot of the browser fountain in action"><figcaption>This is a demo showing off how easy it is to write particle systems with HTML5 canvas.</figcaption></figure></canvas>
+ <footer>
+ <p>Written by
+ <a href="http://twitter.com/codepo8">Chris Heilmann</a>, using a library by <a href="http://twitter.com/seb_ly">Seb-Lee Delisle</a> and logos by <a href="http://twitter.com/paul_irish">Paul Irish</a>.
+ </p>
+ </footer>
+ <script src="js/ImageParticle.js"></script>
+ <script src="js/browserfountain.js"></script>
+</body>
+</html>
Binary file not shown.
@@ -0,0 +1,123 @@
+/**
+ * ImageParticle - simple physics particle simulation
+ * Written by Seb Lee-Delisle as part of the Creative JavaScript training
+ * course.
+ * http://sebleedelisle.com/training/
+ */
+var TO_RADIANS = Math.PI / 180;
+
+function ImageParticle(img, posx, posy) {
+
+ // the position of the particle
+ this.posX = posx;
+ this.posY = posy;
+ // the velocity
+ this.velX = 0;
+ this.velY = 0;
+
+ // multiply the particle size by this every frame
+ this.shrink = 1;
+ this.size = 1;
+ // if maxSize is a positive value, limit the size of
+ // the particle (this is for growing particles).
+ this.maxSize = -1;
+
+ // if true then make the particle flicker
+ this.shimmer = false;
+
+ // multiply the velocity by this every frame to create
+ // drag. A number between 0 and 1, closer to one is
+ // more slippery, closer to 0 is more sticky. values
+ // below 0.6 are pretty much stuck :)
+ this.drag = 1;
+
+ // add this to the yVel every frame to simulate gravity
+ this.gravity = 0;
+
+ // current transparency of the image
+ this.alpha = 1;
+ // subtracted from the alpha every frame to make it fade out
+ this.fade = 0;
+
+ // the amount to rotate every frame
+ this.spin = 0;
+ // the current rotation
+ this.rotation = 0;
+
+ // the blendmode of the image render. 'source-over' is the default
+ // 'lighter' is for additive blending.
+ this.compositeOperation = 'source-over';
+
+ // the image to use for the particle.
+ this.img = img;
+
+ this.update = function() {
+
+ // simulate drag
+ this.velX *= this.drag;
+ this.velY *= this.drag;
+
+ // add gravity force to the y velocity
+ this.velY += this.gravity;
+
+ // and the velocity to the position
+ this.posX += this.velX;
+ this.posY += this.velY;
+
+ // shrink the particle
+ this.size *= this.shrink;
+ // if maxSize is set and we're bigger, resize!
+ if((this.maxSize>0) && (this.size>this.maxSize))
+ this.size = this.maxSize;
+
+ // and fade it out
+ this.alpha -= this.fade;
+ if(this.alpha<0) this.alpha = 0;
+
+ // rotate the particle by the spin amount.
+ this.rotation += this.spin;
+
+ };
+
+ this.render = function(c) {
+
+ // if we're fully transparent, no need to render!
+ if(this.alpha ==0) return;
+
+ // save the current canvas state
+ c.save();
+
+ // move to where the particle should be
+ c.translate(this.posX, this.posY);
+
+ // scale it dependent on the size of the particle
+ var s = this.shimmer ? this.size * Math.random() : this.size;
+ c.scale(s,s);
+
+ // and rotate
+ c.rotate(this.rotation * TO_RADIANS);
+
+ // move the draw position to the center of the image
+ c.translate(img.width*-0.5, img.width*-0.5);
+
+ // set the alpha to the particle's alpha
+ c.globalAlpha = this.alpha;
+
+ // set the composition mode
+ c.globalCompositeOperation = this.compositeOperation;
+
+ // and draw it!
+ c.drawImage(img,0,0);
+
+ // and restore the canvas state
+ c.restore();
+
+ };
+
+
+}
+
+
+function randomRange(min, max) {
+ return ((Math.random()*(max-min)) + min);
+}
Oops, something went wrong. Retry.

0 comments on commit 0cc8f2d

Please sign in to comment.