"TEST: nebula"
Bootstrap 3.1.0 Snippet by mrmccormack

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2 >Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
http://www.professorcloud.com/mainsite/canvas-nebula.htm
<h1>Experiment - HTML5 Canvas Nebula</h1>
<canvas style="display:none" id="canvas" width="285" height="285">ABC</canvas>
<canvas style="display:none" id="canvas3" width="570" height="570">efg</canvas>
<canvas id="canvas2" width="570" height="570">*** THIS BROWSER DOES NOT SUPPORT THE CANVAS ELEMENT ***</canvas>
<h3>How it Works</h3>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//////////////////////////////////////////////////////////////////////////////////
// A demonstration of a Canvas nebula effect
// (c) 2010 by R Cecco. <http://www.professorcloud.com>
// MIT License
//
// Please retain this copyright header in all versions of the software if
// using significant parts of it
//////////////////////////////////////////////////////////////////////////////////
$(document).ready(function(){
(function ($) {
// The canvas element we are drawing into.
var $canvas = $('#canvas');
var $canvas2 = $('#canvas2');
var $canvas3 = $('#canvas3');
var ctx2 = $canvas2[0].getContext('2d');
var ctx = $canvas[0].getContext('2d');
var w = $canvas[0].width, h = $canvas[0].height;
var img = new Image();
// A puff.
var Puff = function(p) {
var opacity,
sy = (Math.random()*285)>>0,
sx = (Math.random()*285)>>0;
this.p = p;
this.move = function(timeFac) {
p = this.p + 0.3 * timeFac;
opacity = (Math.sin(p*0.05)*0.5);
if(opacity <0) {
p = opacity = 0;
sy = (Math.random()*285)>>0;
sx = (Math.random()*285)>>0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit

Questions / Comments: