Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

performance milestone. lots of debug on.

  • Loading branch information...
commit ce948e002bc0091ec2846e676b2f755711b28f32 1 parent abbc4ee
Andy Skelton skeltoac authored

Showing 2 changed files with 145 additions and 111 deletions. Show diff stats Hide diff stats

  1. +6 3 index.html
  2. +139 108 js/canvas.js
9 index.html
@@ -7,21 +7,24 @@
7 7 <style type="text/css">
8 8 * { margin: 0; padding 0; }
9 9 body { background:#000; color: #ddd; }
10   - canvas#fireworks { cursor: pointer; width:100%; height:600px; }
  10 + canvas#fireworks { cursor: pointer; width:800px; height:600px; }
11 11 </style>
12 12 </head>
13 13 <body>
14 14 <canvas id="fireworks"></canvas>
  15 + <p id="pause">PAUSE</p>
15 16 <div id="debug"></div>
16 17 <div id="debug2"></div>
  18 + <div id="debug3"></div>
17 19 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
18 20 <script src="js/canvas.js"></script>
19 21 <script>
20   - var timeline = [[],[[12,0,12],[0,11,12],[12,10,0],[12,13,0]],[[13,12,0],[0,12,12]],[[0,19,10]],[[13,0,0]],[[15,14,10]],[[17,13,20],[0,16,14]],[[20,18,16],[13,13,0],[0,0,13]],[[0,14,11],[14,12,0],[12,10,11]],[[0,12,0],[14,0,0]],[[0,13,13]],[[0,12,0],[0,12,0],[11,13,0],[0,0,12]],[[0,13,15],[22,0,19]],[],[[13,10,0],[13,13,0]],[[0,14,0],[0,13,0],[0,10,13],[0,0,14]],[[0,12,14],[14,11,0]],[[0,0,13]],[[0,0,12]],[[17,11,10],[12,0,12]],[],[[13,0,12]],[[0,14,0]],[[11,12,12],[0,12,10],[11,11,0],[0,12,0]],[[11,12,11]],[[0,12,0],[12,0,0],[12,0,0]],[[12,0,0],[12,0,0],[12,0,0],[0,12,0]],[[12,0,0],[12,0,11],[13,0,12],[12,0,11]],[[11,10,15],[0,13,13],[13,12,0],[13,0,13]],[[11,13,10]],[[12,13,0],[13,0,0],[13,0,12]],[[16,13,10],[0,11,13],[12,0,0]],[[0,0,12],[14,12,10]],[[10,12,14],[13,13,0],[13,0,11],[11,0,0]],[[12,0,0]],[[0,12,0],[13,12,0],[15,0,13],[10,13,11]],[[13,10,12],[11,12,11],[0,0,12],[11,0,0]],[[0,12,13]],[[13,12,12]],[[13,0,13],[16,11,11]],[[0,12,0]],[[13,11,0],[0,12,12],[14,0,13],[14,0,15]],[[18,13,0],[13,14,12],[0,13,13],[0,17,15]],[[11,12,0],[0,12,0]],[[11,0,13]],[[10,12,11],[12,13,10],[10,12,0]],[[0,13,11],[10,15,17]],[[0,0,12],[12,12,0]],[[13,11,14]],[[0,13,0],[12,0,0],[14,0,0]],[[0,12,0],[12,14,0],[14,10,11],[13,0,12]],[[15,0,0],[16,17,0]],[],[[0,15,15],[10,14,13]],[[10,14,11],[12,0,0],[0,12,0]],[],[[11,12,12],[13,15,11],[11,0,12]],[[10,12,12],[12,12,0]],[[13,12,0],[11,13,0],[0,10,13],[12,0,0]],[[0,13,17],[0,0,12]],[[10,0,13],[12,12,0]],[[0,13,12],[13,0,13]],[[0,13,0],[12,10,18]],[],[[11,15,14],[14,0,11]],[],[[0,13,0],[10,11,13]],[],[[12,13,0]],[[15,20,17],[11,0,14]],[[11,13,0],[12,0,10],[11,0,14]],[[13,0,12]],[[13,0,0]],[[0,0,13],[0,0,13]],[[16,21,20]],[[13,0,15]],[[0,13,12],[12,10,13],[11,13,0],[11,13,14]],[[12,17,13]],[[15,0,11]],[[13,10,20]],[[11,14,11],[0,0,15],[0,0,15],[0,14,0]],[[0,18,0],[15,0,0],[0,16,22],[11,18,0]],[[15,16,24],[0,26,0],[0,24,12]],[[27,0,11],[17,17,31],[24,12,0]],[[0,12,10]],[[11,14,19],[10,16,12]],[[11,16,0],[13,0,0]],[[11,15,10],[16,13,11],[26,21,10]],[[16,11,0]],[[0,0,13]],[[10,12,15],[0,13,13],[0,11,13]],[],[[10,13,0],[0,13,0]],[[14,11,10],[11,0,0]],[[0,0,13],[0,11,13]],[[13,10,11],[11,13,11],[12,10,13]],[[13,0,15]],[[13,0,11],[12,11,0],[11,12,10],[11,0,12]],[[11,16,10]],[[11,10,13],[0,13,12],[0,11,0]],[[13,0,0],[12,10,14],[17,12,11]],[[12,10,16],[13,0,0]],[[13,0,0]],[[0,11,13],[13,11,0],[16,0,0],[10,0,13]],[[13,11,0]],[],[[13,11,0],[12,0,11],[13,0,10],[0,0,13]],[[13,0,10],[10,14,11]],[],[[13,13,0]],[[13,0,10],[0,13,0],[13,10,11],[12,0,0]],[[13,11,0]],[[0,0,12],[0,12,0],[11,0,13],[14,13,0]],[[14,13,15]],[[11,12,0],[16,14,13],[0,12,0],[16,12,13]],[[12,0,0]],[[18,17,22],[12,0,0],[13,0,0],[14,0,0]],[[0,14,0]],[[16,0,13]],[[12,15,0]],[[10,11,13]],[[0,15,12],[13,10,11],[0,0,13],[12,0,0]],[[11,11,12],[14,12,10],[15,13,11],[14,10,0]],[[0,0,13],[15,0,0]],[[0,13,0]],[[0,13,0]],[[11,0,12],[10,11,12],[0,10,13],[10,11,16]],[[12,0,11]],[[16,13,11],[15,10,14],[13,0,14],[14,14,13]],[],[],[],[[11,0,12],[12,11,10],[0,11,13],[14,11,13]],[],[],[[12,15,11],[11,13,0],[0,12,0]],[[14,11,14],[13,0,10]],[[0,12,0],[14,14,12]],[[0,12,10],[12,0,10],[12,0,11],[11,12,13]],[[12,0,0],[11,13,15]],[[0,0,15]],[[13,10,12]],[[0,16,11]],[[11,10,12]],[[12,0,12],[0,11,12],[0,13,13],[14,15,13]],[[0,0,12],[12,0,0],[0,12,0],[0,14,0]],[[14,0,20]],[[13,10,18],[12,13,0],[13,14,0],[13,11,18]],[],[[11,14,0],[12,11,13],[13,0,13]],[[12,0,0],[11,12,10],[12,11,0],[0,12,0]],[],[[10,12,0],[0,0,12],[0,11,0],[12,0,0]],[[0,0,12],[13,12,0],[13,12,10]],[],[[0,0,12],[12,0,11],[0,0,12],[0,13,14]],[],[[13,0,0],[14,11,0]],[[10,11,13]],[[13,16,13],[13,11,12],[12,0,0],[13,0,0]],[[11,12,0],[0,13,0],[11,13,0],[11,12,13]],[[12,13,13],[13,0,0]],[[0,12,0],[15,13,14],[0,11,0],[11,11,0]],[[12,10,0]],[[0,11,13],[12,0,0],[0,11,11],[11,13,10]],[[39,70,70],[13,13,10]],[],[[0,12,0],[10,12,13]],[[13,14,11]],[[12,0,11],[17,16,11]],[],[[0,14,13],[10,12,0]],[],[[11,0,13],[15,12,14],[13,0,12],[12,0,11]],[[0,0,12]],[[0,11,12],[0,11,0],[0,0,11],[12,12,0]],[[0,12,0],[0,0,12],[13,10,12],[0,12,0]],[[12,10,0]],[[0,0,11],[11,0,12]],[[12,11,12],[0,13,13]],[[0,11,14]],[[0,12,11]],[[12,0,12]],[[0,12,13]],[[0,12,0],[12,10,0]],[[0,0,12],[0,14,10],[11,13,10]],[[10,0,12],[17,11,11]],[[0,0,12],[0,12,0],[10,11,14]],[],[],[[13,13,13]],[[0,0,13]],[[11,14,11]],[[0,11,12]],[[12,14,0],[0,12,11]],[[13,0,0],[0,0,12]],[[12,0,12],[0,13,16],[13,16,15],[10,12,0]],[],[],[[11,11,0],[0,10,12],[0,0,13],[12,0,0]],[[17,13,17],[0,12,0],[16,0,11]],[[0,13,0],[14,13,14],[13,0,0]],[[12,10,0],[14,15,13],[15,13,13]],[[15,11,12]],[[17,16,10],[0,11,12],[0,0,13]],[[11,12,15],[12,0,0],[12,10,13],[15,13,11]],[[0,0,12],[0,12,11]],[[13,10,11]],[[11,12,11],[11,12,0],[11,13,14]],[],[[10,0,12],[12,11,13],[0,12,10],[0,11,12]],[[0,0,12]],[[19,14,12]],[[12,17,0],[11,15,17]],[[10,0,12]],[[11,12,12],[0,10,12],[12,16,0],[13,12,0]],[[0,11,12],[0,12,0],[11,11,12]],[],[[10,11,12]],[[12,0,12],[13,11,11]],[[0,13,10]],[[11,11,13]],[[10,0,13]],[[13,17,14],[0,12,10]],[[13,0,11]],[[14,19,0],[12,0,13],[0,14,15]],[[13,0,0],[0,13,0],[13,12,11]],[],[[11,0,11],[11,11,15]],[[0,13,0]],[[12,16,12]],[[10,11,13]],[[12,0,10],[12,11,0],[12,12,13]],[[0,12,16],[10,11,14]],[[11,13,11]],[[11,13,10]],[[11,12,0]],[[12,0,12],[12,11,0],[13,0,0]],[[12,11,14],[12,14,13],[12,0,10],[0,0,12]],[[12,0,0],[10,12,0],[0,11,0],[12,10,0]],[[12,0,0],[12,0,0],[0,0,12],[12,0,10]],[[12,12,0],[15,13,21],[10,13,11]],[[12,12,0]],[[12,12,14],[14,13,0]],[[0,12,10],[14,14,0],[0,11,10],[12,0,11]],[[0,12,11]],[[14,15,13],[10,0,12]],[[13,0,13],[12,12,0]],[[14,13,16]],[[12,0,10],[11,0,12],[0,0,12]],[[12,11,10],[10,0,0]],[[14,13,15]],[[12,13,13]],[[16,19,26]],[[11,0,0]],[[10,11,0],[11,11,10],[0,12,0],[12,10,0]],[[10,13,12]],[[11,0,10],[12,0,0],[11,0,0],[11,0,0]],[[13,0,11],[12,0,0],[11,12,11]],[[11,12,13],[16,11,12]],[[13,0,0]],[[11,12,11],[12,11,0],[13,11,12],[14,12,0]],[[13,15,10],[14,0,0]],[[0,13,15]],[[11,11,12]],[[14,15,13]],[[12,0,12],[14,0,0],[0,13,0],[13,12,0]],[],[[0,12,11],[13,12,12]],[[0,22,0],[18,0,0],[12,0,0],[12,12,10]],[],[],[[10,11,11],[14,15,13],[11,12,16]],[],[],[[0,0,11],[11,15,0]],[[13,0,12]],[[12,10,12]],[[11,11,13]],[[0,11,12],[13,10,0],[0,10,13]],[[12,0,10]],[[10,0,12],[13,10,0]],[],[[16,13,15]],[[0,11,12]],[[13,11,10],[0,12,11],[12,0,0],[14,15,12]],[[17,11,14],[0,11,0],[0,10,12]],[[0,15,12]],[[11,10,12]],[[17,19,27],[12,11,12]],[],[[12,13,11]],[[10,12,11],[0,12,0]],[],[[14,10,12]],[[10,12,0],[11,14,12]],[[12,13,17],[13,0,10]],[[13,11,0],[13,11,13]],[],[[11,0,12]],[[11,12,0]],[[16,16,11]],[[12,0,11],[11,0,0],[13,13,12]],[],[[13,12,11]],[[10,13,11],[10,12,11]],[[0,12,0],[10,13,12],[12,0,13]],[[13,14,12]],[[12,10,0],[0,12,11]],[],[[11,13,12],[13,15,13]],[[0,10,11],[0,0,12],[18,16,13]],[],[[0,13,11]],[[13,11,12]],[[0,12,0]],[[12,13,11]],[[16,12,10]],[[11,11,13],[12,0,12]],[[0,16,17],[11,0,12]],[],[[13,13,10],[21,15,14]],[[12,11,13],[0,0,12]],[[10,0,12]],[[12,10,0],[10,12,11],[12,15,12],[15,12,16]],[[12,0,10]],[[11,0,12],[11,11,12],[11,15,15],[12,10,0]],[[11,11,15]],[[0,0,12]],[[12,0,11]],[[16,13,12],[10,12,11]],[]];
  22 + var timeline = [[],[[12,0,12],[0,11,12],[12,10,0],[12,13,0]],[[13,12,0],[0,12,12]],[[0,19,10]],[[13,0,0]],[[15,14,10]],[[17,13,20],[0,16,14]],[[20,18,16],[13,13,0],[0,0,13]],[[0,14,11],[14,12,0],[12,10,11]],[[0,12,0],[14,0,0]],[[0,13,13]],[[0,12,0],[0,12,0],[11,13,0],[0,0,12]],[[0,13,15],[22,0,19]],[],[[13,10,0],[13,13,0]],[[0,14,0],[0,13,0],[0,10,13],[0,0,14]],[[0,12,14],[14,11,0]],[[70,70,13]],[[0,0,12]],[[17,11,10],[12,0,12]],[],[[13,0,12]],[[0,14,0]],[[11,12,12],[0,12,10],[11,11,0],[0,12,0]],[[11,12,11]],[[0,12,0],[12,0,0],[12,0,0]],[[12,0,0],[12,0,0],[12,0,0],[0,12,0]],[[12,0,0],[12,0,11],[13,0,12],[12,0,11]],[[11,10,15],[0,13,13],[13,12,0],[13,0,13]],[[11,13,10]],[[12,13,0],[13,0,0],[13,0,12]],[[16,13,10],[0,11,13],[12,0,0]],[[0,0,12],[14,12,10]],[[10,12,14],[13,13,0],[13,0,11],[11,0,0]],[[12,0,0]],[[0,12,0],[13,12,0],[15,0,13],[10,13,11]],[[13,10,12],[11,12,11],[0,0,12],[11,0,0]],[[70,42,70]],[[13,12,12]],[[13,0,13],[16,11,11]],[[0,12,0]],[[13,11,0],[0,12,12],[14,0,13],[14,0,15]],[[18,13,0],[13,14,12],[0,13,13],[0,17,15]],[[11,12,0],[0,12,0]],[[11,0,13]],[[10,12,11],[12,13,10],[10,12,0]],[[0,13,11],[10,15,17]],[[0,0,12],[12,12,0]],[[13,11,14]],[[0,13,0],[12,0,0],[14,0,0]],[[0,12,0],[12,14,0],[14,10,11],[13,0,12]],[[15,0,0],[16,17,0]],[],[[0,15,15],[10,14,13]],[[10,14,11],[12,0,0],[0,12,0]],[],[[11,12,12],[13,15,11],[11,0,12]],[[10,12,12],[12,12,0]],[[13,12,0],[11,13,0],[0,10,13],[12,70,70]],[[0,13,17],[0,0,12]],[[10,0,13],[12,12,0]],[[0,13,12],[13,0,13]],[[0,13,0],[12,10,18]],[],[[11,15,14],[14,0,11]],[],[[0,13,0],[10,11,13]],[],[[12,13,0]],[[15,20,17],[11,0,14]],[[11,13,0],[12,0,10],[11,0,14]],[[13,0,12]],[[13,0,0]],[[0,0,13],[0,0,13]],[[16,21,20]],[[13,0,15]],[[0,13,12],[12,10,13],[11,13,0],[11,13,14]],[[12,17,13]],[[15,0,11]],[[13,10,20]],[[11,14,11],[0,0,15],[0,0,15],[0,14,0]],[[0,18,0],[15,0,0],[0,16,22],[11,18,0]],[[15,16,24],[0,26,0],[0,24,12]],[[27,0,11],[17,17,31],[24,12,0]],[[70,42,50]],[[11,14,19],[10,16,12]],[[11,16,0],[13,0,0]],[[11,15,10],[16,13,11],[26,21,10]],[[16,11,0]],[[0,0,13]],[[10,12,15],[0,13,13],[0,11,13]],[],[[10,13,0],[0,13,0]],[[14,11,10],[11,0,0]],[[0,0,13],[0,11,13]],[[13,10,11],[11,13,11],[12,10,13]],[[13,0,15]],[[13,0,11],[12,11,0],[11,12,10],[11,0,12]],[[11,16,10]],[[11,10,13],[0,13,12],[0,11,0]],[[13,0,0],[12,10,14],[17,12,11]],[[12,10,16],[13,0,0]],[[13,0,0]],[[0,11,13],[13,11,0],[16,0,0],[10,0,13]],[[13,11,0]],[],[[13,11,0],[12,0,11],[13,0,10],[0,0,13]],[[13,70,70],[10,14,11]],[],[[13,13,0]],[[13,0,10],[0,13,0],[13,10,11],[12,0,0]],[[13,11,0]],[[0,0,12],[0,12,0],[11,0,13],[14,13,0]],[[14,13,15]],[[11,12,0],[16,14,13],[0,12,0],[16,12,13]],[[12,0,0]],[[18,17,22],[12,0,0],[13,0,0],[14,0,0]],[[0,14,0]],[[16,0,13]],[[12,15,0]],[[10,11,13]],[[0,15,12],[13,10,11],[0,0,13],[12,0,0]],[[11,11,12],[14,12,10],[15,13,11],[14,10,0]],[[0,0,13],[15,0,0]],[[0,13,0]],[[0,13,0]],[[11,0,12],[10,11,12],[0,10,13],[10,11,16]],[[12,0,11]],[[16,13,11],[15,10,14],[13,0,14],[14,14,13]],[],[],[],[[70,70,70],[12,11,10],[0,11,13],[14,11,13]],[],[],[[12,15,11],[11,13,0],[0,12,0]],[[14,11,14],[13,0,10]],[[0,12,0],[14,14,12]],[[0,12,10],[12,0,10],[12,0,11],[11,12,13]],[[12,0,0],[11,13,15]],[[0,0,15]],[[13,10,12]],[[0,16,11]],[[11,10,12]],[[12,0,12],[0,11,12],[0,13,13],[14,15,13]],[[0,0,12],[12,0,0],[0,12,0],[0,14,0]],[[14,0,20]],[[13,10,18],[12,13,0],[13,14,0],[13,11,18]],[],[[11,14,0],[12,11,13],[13,0,13]],[[12,0,0],[11,12,10],[12,11,0],[0,12,0]],[],[[10,12,0],[0,0,12],[0,11,0],[12,0,0]],[[0,0,12],[13,12,0],[13,12,10]],[],[[0,0,12],[12,0,11],[0,0,12],[0,13,14]],[],[[13,0,0],[14,11,0]],[[10,11,13]],[[13,16,13],[13,11,12],[12,0,0],[13,0,0]],[[11,12,0],[0,13,0],[11,13,0],[11,12,13]],[[12,13,13],[13,0,0]],[[0,12,0],[15,13,14],[0,11,0],[11,11,0]],[[12,10,0]],[[0,11,13],[12,0,0],[0,11,11],[11,13,10]],[[39,70,70],[13,13,10]],[],[[0,12,0],[10,12,13]],[[13,14,11]],[[12,0,11],[17,16,11]],[],[[0,14,13],[10,12,0]],[],[[11,0,13],[15,12,14],[13,0,12],[12,0,11]],[[0,0,12]],[[0,11,12],[0,11,0],[0,0,11],[12,12,0]],[[0,12,0],[0,0,12],[13,10,12],[0,12,0]],[[12,10,0]],[[0,0,11],[11,0,12]],[[12,11,12],[0,13,13]],[[0,11,14]],[[0,12,11]],[[12,0,12]],[[0,12,13]],[[0,12,0],[12,10,0]],[[0,0,12],[0,14,10],[11,13,10]],[[10,0,12],[17,11,11]],[[0,0,12],[0,12,0],[10,11,14]],[],[],[[13,13,13]],[[0,0,13]],[[11,14,11]],[[0,11,12]],[[12,14,0],[0,12,11]],[[13,0,0],[0,0,12]],[[12,0,12],[0,13,16],[13,16,15],[10,12,0]],[],[],[[11,11,0],[0,10,12],[0,0,13],[12,0,0]],[[17,13,17],[0,12,0],[16,0,11]],[[0,13,0],[14,13,14],[13,0,0]],[[12,10,0],[14,15,13],[15,13,13]],[[15,11,12]],[[17,16,10],[0,11,12],[0,0,13]],[[11,12,15],[12,0,0],[12,10,13],[15,13,11]],[[0,0,12],[0,12,11]],[[13,10,11]],[[11,12,11],[11,12,0],[11,13,14]],[],[[10,0,12],[12,11,13],[0,12,10],[0,11,12]],[[0,0,12]],[[19,14,12]],[[12,17,0],[11,15,17]],[[10,0,12]],[[11,12,12],[0,10,12],[12,16,0],[13,12,0]],[[0,11,12],[0,12,0],[11,11,12]],[],[[10,11,12]],[[12,0,12],[13,11,11]],[[0,13,10]],[[11,11,13]],[[10,0,13]],[[13,17,14],[0,12,10]],[[13,0,11]],[[14,19,0],[12,0,13],[0,14,15]],[[13,0,0],[0,13,0],[13,12,11]],[],[[11,0,11],[11,11,15]],[[0,13,0]],[[12,16,12]],[[10,11,13]],[[12,0,10],[12,11,0],[12,12,13]],[[0,12,16],[10,11,14]],[[11,13,11]],[[11,13,10]],[[11,12,0]],[[12,0,12],[12,11,0],[13,0,0]],[[12,11,14],[12,14,13],[12,0,10],[0,0,12]],[[12,0,0],[10,12,0],[0,11,0],[12,10,0]],[[12,0,0],[12,0,0],[0,0,12],[12,0,10]],[[12,12,0],[15,13,21],[10,13,11]],[[12,12,0]],[[12,12,14],[14,13,0]],[[0,12,10],[14,14,0],[0,11,10],[12,0,11]],[[0,12,11]],[[14,15,13],[10,0,12]],[[13,0,13],[12,12,0]],[[14,13,16]],[[12,0,10],[11,0,12],[0,0,12]],[[12,11,10],[10,0,0]],[[14,13,15]],[[12,13,13]],[[16,19,26]],[[11,0,0]],[[10,11,0],[11,11,10],[0,12,0],[12,10,0]],[[10,13,12]],[[11,0,10],[12,0,0],[11,0,0],[11,0,0]],[[13,0,11],[12,0,0],[11,12,11]],[[11,12,13],[16,11,12]],[[13,0,0]],[[11,12,11],[12,11,0],[13,11,12],[14,12,0]],[[13,15,10],[14,0,0]],[[0,13,15]],[[11,11,12]],[[14,15,13]],[[12,0,12],[14,0,0],[0,13,0],[13,12,0]],[],[[0,12,11],[13,12,12]],[[0,22,0],[18,0,0],[12,0,0],[12,12,10]],[],[],[[10,11,11],[14,15,13],[11,12,16]],[],[],[[0,0,11],[11,15,0]],[[13,0,12]],[[12,10,12]],[[11,11,13]],[[0,11,12],[13,10,0],[0,10,13]],[[12,0,10]],[[10,0,12],[13,10,0]],[],[[16,13,15]],[[0,11,12]],[[13,11,10],[0,12,11],[12,0,0],[14,15,12]],[[17,11,14],[0,11,0],[0,10,12]],[[0,15,12]],[[11,10,12]],[[17,19,27],[12,11,12]],[],[[12,13,11]],[[10,12,11],[0,12,0]],[],[[14,10,12]],[[10,12,0],[11,14,12]],[[12,13,17],[13,0,10]],[[13,11,0],[13,11,13]],[],[[11,0,12]],[[11,12,0]],[[16,16,11]],[[12,0,11],[11,0,0],[13,13,12]],[],[[13,12,11]],[[10,13,11],[10,12,11]],[[0,12,0],[10,13,12],[12,0,13]],[[13,14,12]],[[12,10,0],[0,12,11]],[],[[11,13,12],[13,15,13]],[[0,10,11],[0,0,12],[18,16,13]],[],[[0,13,11]],[[13,11,12]],[[0,12,0]],[[12,13,11]],[[16,12,10]],[[11,11,13],[12,0,12]],[[0,16,17],[11,0,12]],[],[[13,13,10],[21,15,14]],[[12,11,13],[0,0,12]],[[10,0,12]],[[12,10,0],[10,12,11],[12,15,12],[15,12,16]],[[12,0,10]],[[11,0,12],[11,11,12],[11,15,15],[12,10,0]],[[11,11,15]],[[0,0,12]],[[12,0,11]],[[16,13,12],[10,12,11]],[]];
21 23 $("#fireworks")
22   - .fireworks({timeline:[[[0,70,0]],[],[]]})
  24 + // .fireworks({timeline:[[[0,70,0]],[],[],[],[[0,10,0]],[],[],[]]})
23 25 .fireworks({timeline:timeline})
24 26 .fireworks("start");
  27 + $("#pause").click(function(){$("#fireworks").fireworks("pause")});
25 28 </script>
26 29 </body>
27 30 </html>
247 js/canvas.js
@@ -19,9 +19,15 @@
19 19 white = "#FFFFFF";
20 20
21 21 var defaults = {
  22 + debug : true,
  23 + frameRateMin : 12.5,
  24 + frameRateMax : 20,
22 25 frameInterval : 50, // ms between rendered frames
  26 + stepIntervalMin : 60,
  27 + stepIntervalMax : 20,
23 28 stepInterval : 20, // ticks between timeline steps
24   - frameCacheSize : 20, // number of frame to generate in advance
  29 + lastStepTick : -100, // tick of last timeline step
  30 + frameCacheSize : 20, // number of frames to generate in advance
25 31 drag : 0.01, // velocity lost per frame
26 32 gravity : 0.5, // downward acceleration
27 33 wind : -0.2, // horizontal slide applied to everything each frame
@@ -42,7 +48,7 @@
42 48 core : [orange, yellow, blue, white, moss],
43 49 shell : [green, red, orange, tan, green, white, white, white, sky, blue],
44 50 ring : [red, orange, white, sky, tan],
45   - logo : [blue, green, orange, sky],
  51 + logo : [blue, green, orange, sky]
46 52 },
47 53 fov : 500,
48 54 imgs : {}, // loaded sprites
@@ -53,12 +59,16 @@
53 59 step : 0, // one per timeline event
54 60 timer : null, // from setInterval
55 61 stopped : false,
56   - maxParticleDensity : 1.5,
57   - minParticleDensity : 0.5,
  62 + particleDensityMax : 2.00,
  63 + particleDensityMin : 0.25,
58 64 particleDensity : 1,
59 65 frameCache : [],
60 66 frameCacheIndex : 0,
61 67 startCallback : null,
  68 + burnoutMod : 100, // modulo for early burnout. higher number allows particles to last longer.
  69 + renderQuality : 100, // on a scale of 0-100
  70 + renderQualityAcc : 0,
  71 + renderQualityCt : 0,
62 72 };
63 73
64 74 var methods = {
@@ -97,15 +107,10 @@
97 107 this.displayCanvas = canvas;
98 108 this.displayCanvas.width = this.displayCanvas.clientWidth;
99 109 this.displayCanvas.height = this.displayCanvas.clientHeight;
  110 + this.w2 = this.displayCanvas.width / 2;
  111 + this.h2 = this.displayCanvas.height / 2;
100 112 this.displayContext = this.displayCanvas.getContext("2d");
101 113
102   - // This is the canvas that we draw frames on.
103   - this.canvas = document.createElement("canvas");
104   - this.canvas.width = this.displayCanvas.clientWidth;
105   - this.canvas.height = this.displayCanvas.clientHeight;
106   - this.w2 = this.canvas.width / 2;
107   - this.h2 = this.canvas.height / 2;
108   - this.context = this.canvas.getContext("2d");
109 114 /*
110 115 var self = this;
111 116 $(canvas).bind('mousedown.fireworks', function() {self.isMouseDown = true;});
@@ -117,16 +122,25 @@
117 122 return this;
118 123 };
119 124
  125 + Fireworks.prototype.newCanvas = function() {
  126 + this.canvas = document.createElement("canvas");
  127 + this.canvas.width = this.displayCanvas.width;
  128 + this.canvas.height = this.displayCanvas.height;
  129 + this.context = this.canvas.getContext("2d");
  130 + };
  131 +
120 132 Fireworks.prototype.start = function() {
121 133 this.stopped = false;
122   - this.lastRenderTime = 1;
123   - this.render();
  134 + this.frameDueTime = (new Date()).getTime() + 100;
  135 + var self = this;
  136 + this.timer = setInterval(function(){self.nextFrame()}, 1);
  137 + setTimeout(function(){self.render()}, 50);
124 138 return this;
125 139 };
126 140
127 141 Fireworks.prototype.stop = function() {
128 142 this.stopped = true;
129   - clearTimeout(this.timer);
  143 + clearInterval(this.timer);
130 144 return this;
131 145 };
132 146
@@ -331,7 +345,7 @@
331 345 do {
332 346 imgs.push(this.imgs.shell.random());
333 347 } while ( Math.random() > 0.7 );
334   - var numP = this.scaleParticleCount(mag * 8);
  348 + var numP = this.scaleParticleCount(20 + mag * 2);
335 349 var myPos = new Vector3(pos.x, pos.y, pos.z);
336 350 // Spawn a symmetrical pair of particles at a time
337 351 for ( var i = 0; i < numP; i += 2 ) {
@@ -374,7 +388,7 @@
374 388 var rZ = 1 - 2 * Math.random();
375 389 var scale = 0.15 + Math.random() * 0.1;
376 390 var img = this.imgs.ring.random();
377   - var numP = this.scaleParticleCount(mag * 2);
  391 + var numP = this.scaleParticleCount(mag);
378 392 var myPos = new Vector3(pos.x, pos.y, pos.z);
379 393 for ( var i = 0; i < numP; ++i ) {
380 394 vel.rotateY(Math.random() * 3);
@@ -412,7 +426,7 @@
412 426 var root = Math.sqrt(mag) / 3;
413 427 var vel = new Vector3(root, root, root);
414 428 var cont = function(p) { return --p.timer > 0 || Math.random() > 0.25; }
415   - var numP = 5 + this.scaleParticleCount(mag / 20);
  429 + var numP = 2 + this.scaleParticleCount(mag / 20);
416 430 for ( var i = 0; i < numP; ++i ) {
417 431 vel.rotate(Math.random() * 3, Math.random() * 3, Math.random() * 3);
418 432 var myVel = vel.copy().multiplyEq( Math.random() / 2 + .25);
@@ -481,6 +495,10 @@
481 495 return c * this.particleDensity;
482 496 };
483 497
  498 + Fireworks.prototype.scaleByQuality = function(min, max) {
  499 + return min + this.renderQuality * ( max - min ) / 100;
  500 + };
  501 +
484 502 Fireworks.prototype.getParticle = function(opts) {
485 503 var particle;
486 504 if (this.spareParticles.length == 0) {
@@ -494,6 +512,31 @@
494 512 return particle;
495 513 };
496 514
  515 + Fireworks.prototype.drawSpotlights = function() {
  516 + // Draw some spotlights on the sky
  517 + this.context.beginPath();
  518 + this.context.moveTo(Math.floor(this.canvas.width / 3), this.canvas.height);
  519 + this.context.lineTo(Math.floor(this.canvas.width / 2 + 200 * Math.sin(this.tick / 19)), 0);
  520 + this.context.lineTo(Math.floor(this.canvas.width / 2 + 200 * Math.sin(this.tick / 19) + 100), 0);
  521 + this.context.lineTo(Math.floor(this.canvas.width / 3 + 15), this.canvas.height);
  522 + this.context.fillStyle = "rgba(5,5,40,0.2)";
  523 + this.context.fill();
  524 + this.context.beginPath();
  525 + this.context.moveTo(Math.floor(2 * this.canvas.width / 3), this.canvas.height);
  526 + this.context.lineTo(Math.floor(this.canvas.width / 2 + 180 * Math.sin(this.tick / 23)) - 100, 0);
  527 + this.context.lineTo(Math.floor(this.canvas.width / 2 + 180 * Math.sin(this.tick / 23)), 0);
  528 + this.context.lineTo(Math.floor(2 * this.canvas.width / 3 + 15), this.canvas.height);
  529 + this.context.fillStyle = "rgba(15,5,30,0.2)";
  530 + this.context.fill();
  531 + this.context.beginPath();
  532 + this.context.moveTo(Math.floor(2 * this.canvas.width / 3) + 40, this.canvas.height);
  533 + this.context.lineTo(Math.floor(this.canvas.width / 2 + 180 * Math.sin(this.tick / 29)) - 100, 0);
  534 + this.context.lineTo(Math.floor(this.canvas.width / 2 + 180 * Math.sin(this.tick / 29)), 0);
  535 + this.context.lineTo(Math.floor(2 * this.canvas.width / 3) + 55, this.canvas.height);
  536 + this.context.fillStyle = "rgba(5,15,30,0.2)";
  537 + this.context.fill();
  538 + };
  539 +
497 540 Fireworks.prototype.draw3Din2D = function(particle) {
498 541 if ( particle.scale > 0 ) {
499 542 var mult = 6;
@@ -506,34 +549,28 @@
506 549 particle.x2d = ( particle.pos.x - particle.vel.x ) * scaleOld + this.w2;
507 550 particle.y2d = ( particle.pos.y - particle.vel.y ) * scaleOld + this.h2;
508 551 }
509   - this.context.save();
510   -
511 552 // Think of transforms as LIFO: the first one called is the last one applied.
512 553 this.context.translate( x2d, y2d ); // 5: move the particle into position
513 554 this.context.scale(scale, scale); // 4: scale for distance (pos.z)
514   -
515 555 // Motion blur
516   - var distance = 0;
517 556 if ( particle.stretch && !this.isMouseDown ) {
518 557 var dx = x2d - particle.x2d;
519 558 var dy = y2d - particle.y2d;
520 559 var angle = Math.atan2( dy, dx );
521 560 if ( angle < 0 )
522 561 angle += Math.PI * 2;
523   - distance = Math.sqrt( Math.pow( dx, 2 ) + Math.pow( dy, 2 ) );
  562 + var distance = Math.sqrt( Math.pow( dx, 2 ) + Math.pow( dy, 2 ) );
524 563 this.context.rotate(angle); // 3: rotate to direction of motion
525 564 this.context.translate(- distance / 2, 0); // 2: move center backward along direction of motion
526 565 this.context.scale(1 + distance / mult * particle.stretch, 1); // 1: scale by 2d projected distance
527 566 }
528   -
529 567 this.context.globalAlpha = particle.alpha;
530   -
531 568 // draw image centered at origin
532   - this.context.drawImage(particle.img, - particle.scale * mult, - particle.scale * mult, particle.scale * 2 * mult, particle.scale * 2 * mult);
533   -
534   - // undo transforms
535   - this.context.restore();
536   -
  569 + var scaleMult = particle.scale * mult;
  570 + this.context.drawImage(particle.img, - scaleMult, - scaleMult, 2 * scaleMult, 2 * scaleMult);
  571 + // reset to identity matrix
  572 + this.context.setTransform(1, 0, 0, 1, 0, 0);
  573 + // save 2D projection coords for stretch
537 574 particle.x2d = x2d;
538 575 particle.y2d = y2d;
539 576 }
@@ -544,116 +581,110 @@
544 581 var self = this;
545 582 if ( this.loading > 0 ) {
546 583 this.frameDueTime = (new Date()).getTime() + 100;
547   - this.timer = setTimeout(function(){self.render();}, 1);
  584 + setTimeout(function(){self.render();}, 5);
548 585 return;
549 586 }
550 587 if ( this.frameCache.length >= this.frameCacheSize ) {
551 588 this.nextFrame();
552   - setTimeout(function(){self.render();}, 1);
  589 + setTimeout(function(){self.render();}, 5);
553 590 return;
554 591 }
555   -
556 592 if ( typeof this.startCallback == "function" ) {
557 593 var delay = parseInt(this.startCallback.call());
558 594 this.startCallback = null;
559 595 if ( delay > 0 ) {
560   - this.timer = setTimeout(function(){self.render();}, delay);
  596 + setTimeout(function(){self.render();}, delay);
561 597 return;
562 598 }
563 599 }
564   -
565 600 this.nextFrame();
566   -
567   - var i;
568   - if ( !this.isMouseDown ) {
569   - for ( var frames = Math.floor( this.lastRenderTime / this.frameInterval ) + 1; frames > 0; frames = 0 * Math.floor(frames / 2) ) {
570   - if ( frames > 1 ) {
571   - for ( i = 0; i < this.particles.length; i++ ) {
572   - if ( this.particles[i].enabled ) {
573   - this.particles[i].disable();
574   - i += 6;
575   - }
576   - }
577   - this.particleDensity -= (this.particleDensity - this.minParticleDensity) / 20;
578   - } else {
579   - this.particleDensity += (this.maxParticleDensity - this.particleDensity) / 200;
580   - }
581   - if ( this.tick % this.stepInterval == 0 ) {
582   - for ( var i = 0; i < this.timeline[this.step].length; ++i )
583   - this.launchRocket(i);
584   - this.step = ++this.step % this.timeline.length; // loop
585   - }
586   - ++this.tick;
587   - for (i = 0; i < this.particles.length; i++) {
588   - if ( i % 100 == 0 && this.frameCache.length > 0 )
589   - this.nextFrame();
590   - this.particles[i].update(i);
591   - }
592   - }
593   - this.context.fillStyle = "rgba(0,0,0,0.25)";
  601 + if ( this.tick >= this.lastStepTick + this.stepInterval ) {
  602 + for ( var i = 0; i < this.timeline[this.step].length; ++i )
  603 + this.launchRocket(i);
  604 + this.step = ++this.step % this.timeline.length; // loop
  605 + this.lastStepTick = this.tick;
  606 + }
  607 + ++this.tick;
  608 + // If the frame we're drawing is already late then skip the cache.
  609 + var pushFrame = true;
  610 + if ( this.frameCache.length == 0 && frameStartTime >= this.frameDueTime ) {
  611 + pushFrame = false;
  612 + this.canvas = this.displayCanvas;
  613 + this.context = this.displayContext;
  614 + this.fadeFrame();
  615 + this.frameDueTime = frameStartTime + this.frameInterval;
594 616 } else {
595   - for (i = 0; i < this.particles.length; i++) {
596   - this.particles[i].pos.rotateY((this.lastMouseX - this.mouseX) * 0.01);
597   - this.particles[i].vel.rotateY((this.lastMouseX - this.mouseX) * 0.01);
598   - }
599   - this.context.fillStyle = "rgba(0,0,0,0.5)";
  617 + this.newCanvas();
600 618 }
601   - // Fade the previous frame
602   - this.context.globalCompositeOperation = "source-over";
603   - this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
604 619 this.context.globalCompositeOperation = "lighter";
605   - this.lastMouseX = this.mouseX;
606   -
607 620 // Draw particles (unsorted because order is irrelevant in "lighter" mode)
608 621 //this.particles.sort(this.compareZPos);
609 622 for (i = 0; i < this.particles.length; i++) {
610   - if ( i % 100 == 0 && this.frameCache.length > 0 )
  623 + // Periodically check whether the next frame is due.
  624 + if ( pushFrame ) // && i % 5 == 0 )
611 625 this.nextFrame();
612   - if ( this.particles[i].enabled )
613   - this.draw3Din2D(this.particles[i]);
  626 + // Particles burn out at a faster rate when the cache is thin.
  627 + if ( this.particles[i].expendable && (i + this.tick) % this.burnoutMod == 0 ) {
  628 + this.particles[i].disable();
  629 + } else {
  630 + this.particles[i].update(i);
  631 + if ( this.particles[i].enabled )
  632 + this.draw3Din2D(this.particles[i]);
  633 + }
614 634 }
615 635 this.context.globalAlpha = 1;
616   -
617   - // Draw some spotlights on the sky
618   - this.context.beginPath();
619   - this.context.moveTo(Math.floor(this.canvas.width / 3), this.canvas.height);
620   - this.context.lineTo(Math.floor(this.canvas.width / 2 + 200 * Math.sin(this.tick / 19)), 0);
621   - this.context.lineTo(Math.floor(this.canvas.width / 2 + 200 * Math.sin(this.tick / 19) + 100), 0);
622   - this.context.lineTo(Math.floor(this.canvas.width / 3 + 15), this.canvas.height);
623   - this.context.fillStyle = "rgba(5,5,40,0.2)";
624   - this.context.fill();
625   - this.context.beginPath();
626   - this.context.moveTo(Math.floor(2 * this.canvas.width / 3), this.canvas.height);
627   - this.context.lineTo(Math.floor(this.canvas.width / 2 + 180 * Math.sin(this.tick / 23)) - 100, 0);
628   - this.context.lineTo(Math.floor(this.canvas.width / 2 + 180 * Math.sin(this.tick / 23)), 0);
629   - this.context.lineTo(Math.floor(2 * this.canvas.width / 3 + 15), this.canvas.height);
630   - this.context.fillStyle = "rgba(15,5,30,0.2)";
631   - this.context.fill();
632   - this.context.beginPath();
633   - this.context.moveTo(Math.floor(2 * this.canvas.width / 3) + 40, this.canvas.height);
634   - this.context.lineTo(Math.floor(this.canvas.width / 2 + 180 * Math.sin(this.tick / 29)) - 100, 0);
635   - this.context.lineTo(Math.floor(this.canvas.width / 2 + 180 * Math.sin(this.tick / 29)), 0);
636   - this.context.lineTo(Math.floor(2 * this.canvas.width / 3) + 55, this.canvas.height);
637   - this.context.fillStyle = "rgba(5,15,30,0.2)";
638   - this.context.fill();
639   -
640   - this.lastRenderTime = (new Date()).getTime() - frameStartTime;
641   - this.frameCache.push( this.context.getImageData(0, 0, this.canvas.width, this.canvas.height) );
  636 + this.drawSpotlights();
  637 + if ( pushFrame )
  638 + this.frameCache.push( this.canvas );
642 639 this.nextFrame();
643 640 setTimeout(function(){self.render();}, 1);
  641 + this.renderQualityAcc += this.renderQuality;
  642 + this.renderQualityCt += 1;
644 643 };
645 644
646   - Fireworks.prototype.nextFrame = function(d, i) {
  645 + Fireworks.prototype.fadeFrame = function() {
  646 + // Fade the previous frame
  647 + this.displayContext.globalCompositeOperation = "source-over";
  648 + this.displayContext.fillStyle = "rgba(0,0,0,0.25)";
  649 + this.displayContext.fillRect(0, 0, this.canvas.width, this.canvas.height);
  650 + };
  651 +
  652 + Fireworks.prototype.nextFrame = function() {
647 653 if ( this.stopped )
648 654 return;
649   - if ( this.frameCache.length == 0 )
650   - return;
651 655 var time = (new Date()).getTime();
652   - if ( time < this.frameDueTime )
  656 + var late = time - this.frameDueTime;
  657 + // Better to render a tiny bit early than very late.
  658 + if ( late < -2 )
653 659 return;
654   -
655   - this.displayContext.putImageData( this.frameCache.shift(), 0, 0 );
656   - this.frameDueTime = time + this.frameInterval;
  660 + if ( this.debug ) $("#debug").html("cache " + (new Array(this.frameCache.length + 1)).join("|"));
  661 + if ( this.debug ) $("#debug2").html("late " + (new Array(parseInt(Math.max(0, late + 1)))).join("|"));
  662 + if ( this.frameCache.length == 0 )
  663 + return;
  664 + // Slow and simplify the animation when the cache is thin
  665 + this.updateRenderQuality(late);
  666 + if ( this.debug ) $("#debug3").html("frameInterval " + this.frameInterval + "<br>density " + this.particleDensity + "<br>burnout " + this.burnoutMod + "<br>stepInterval " + this.stepInterval + "<br>renderQuality " + this.renderQuality + "<br>avgRenderQuality " + (this.renderQualityAcc/this.renderQualityCt));
  667 + this.fadeFrame();
  668 + // Add the next frame
  669 + this.displayContext.globalCompositeOperation = "lighter";
  670 + this.displayContext.drawImage( this.frameCache.shift(), 0, 0 );
  671 + this.frameDueTime = time + this.frameInterval - Math.min(late, 10);
  672 + };
  673 +
  674 + Fireworks.prototype.updateRenderQuality = function(late) {
  675 + var newQ = parseInt( this.frameCache.length / ( this.frameCacheSize - 2 ) * 100 );
  676 + if ( late > 5 )
  677 + this.renderQuality = Math.max( 1, this.renderQuality - Math.min(10, late) );
  678 + else if ( this.tick < 50 )
  679 + null;
  680 + else if ( newQ < this.renderQuality )
  681 + this.renderQuality = newQ;
  682 + else
  683 + this.renderQuality = Math.min( 100, this.renderQuality + Math.max( 0.2, (100 - this.renderQuality) / 50 ) );
  684 + this.frameInterval = parseInt( 1000 / this.scaleByQuality(this.frameRateMin, this.frameRateMax) );
  685 + this.particleDensity = this.scaleByQuality( this.particleDensityMin, this.particleDensityMax );
  686 + this.burnoutMod = parseInt( this.scaleByQuality( 10, 100 ) );
  687 + this.stepInterval = parseInt( this.scaleByQuality( this.stepIntervalMin, this.stepIntervalMax ) );
657 688 };
658 689
659 690 Fireworks.prototype.compareZPos = function(a, b) {

0 comments on commit ce948e0

Please sign in to comment.
Something went wrong with that request. Please try again.