Permalink
Browse files

improve animation speed and efficiency.

1. only call setInterval once for all elements, instead of separately
for each element.
2. store animation data (e.g., element position) in an object we can
reference later instead of referring back to the DOM (e.g., calling
$(element).position())
  • Loading branch information...
abachman committed May 24, 2012
1 parent e6ad61f commit a2c3351e682309c95edb340ef490eecb0e62bf38
Showing with 100 additions and 36 deletions.
  1. +17 −12 index.html
  2. +51 −24 js/application.js
  3. +32 −0 js/underscore.js
View
@@ -4,8 +4,10 @@
<meta charset="utf-8" />
<title>The Second Baltimore Hackathon</title>
<link rel="stylesheet" href="css/application.css" media="all" />
+ <!--
@kchau

kchau May 24, 2012

Why did you remove this?

<script type="text/javascript" src="http://use.typekit.com/ibt2sup.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+ -->
</head>
<body>
@@ -95,7 +97,7 @@ <h2>Awards</h2>
<li>Best Civic Service Project - $350</li>
<li>Audience Favorite - $150 </li>
</ul>
- </div>
+ </div>
<div class="column">
<h2>How do I participate?</h2>
@@ -116,13 +118,14 @@ <h2>How do I participate?</h2>
<br class="clear" />
</section>
+
<!--
<section>
<div class="column full">
<h2>Participants</h2>
<div id="second-hackathon" class="attendees"></div>
</div>
-
+
<div class="column">
<h2>Judges</h2>
<ul class="judges">
@@ -134,17 +137,18 @@ <h2>Judges</h2>
<p>
<em>Judges will be announced soon.</em>
</p>
- </div>
-
+ </div>
+
<br class="clear" />
</section>
-->
+
<section>
<div class="column full sponsors">
<h2>Lead Sponsor</h2>
-
-
+
+
<div class="lead-sponsor"><a href="http://www.northropgrumman.com/"><img src="images/logos/ng_logo_transparent.gif" width="700" alt="Northrop Grumman" /></a></div>
<h2>Our Sponsors</h2>
@@ -172,8 +176,8 @@ <h2>Our Sponsors</h2>
<br class="clear" />
<div class="sponsor"><a href="http://www.mindovermachines.com/"><img src="images/logos/MindOverMachines_Logo300.jpg" alt="Mind Over Machines" /></a></div>
<div class="sponsor"><a href="http://www.gbtechcouncil.org/"><img src="images/logos/GBTC_logo_RGB.gif" style="width:150px;" alt="Greater Baltimore Tech Council" /></a></div>
--->
- <br class="clear" />
+-->
+ <br class="clear" />
</div>
<div style="text-align: right; margin-right: 15px">
<p>Want to <a href="mailto:matthew.forr@gmail.com">sponsor?</a></p>
@@ -217,11 +221,11 @@ <h2><a href="http://twitter.com/bmorehackathon" class="twitter">On Twitter</a></
}).render().setUser('bmorehackathon').start();
</script>
</div>
-
+
</div>
<br class="clear" />
</section>
-
+
</div><!-- #wrapper -->
<footer>
@@ -232,10 +236,11 @@ <h2><a href="http://twitter.com/bmorehackathon" class="twitter">On Twitter</a></
</footer>
<!--<div id="octopus"></div>-->
</div><!-- #container -->
-
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script src="js/jquery.eventbrite.js"></script>
+ <script src="js/underscore.js"></script>
<script src="js/application.js"></script>
</body>
View
@@ -1,37 +1,53 @@
-var refresh = 50;
+var rate = 50;
var wWidth, wHeight;
var cloud_files = [ 'cloud1.png', 'cloud2.png', 'cloud3.png', 'cloud4.png'];
var files = ['dirigible.png', 'airship-boat.png'];
+var floaters = {}, floatCount = 0;
+
+function animate() {
+ var values = _.values(floaters),
@kchau

kchau May 24, 2012

Should there be a semi-colon instead of a comma?

+ setInterval(function () { _.each(values, updateFloater) }, rate);
+}
$(function()
{
- iHeight = $(document).height() + 150;
+ iHeight = $(document).height();
iWidth = window.innerWidth;
for(var i=50; i > 0; i--)
clouds();
for(var i=5; i > 0; i--)
dirigibles();
+ animate();
});
function create_floater(file, klass, x, y, delta)
{
var ratio = Math.random();
- var spd = Math.ceil(ratio*delta);
+ var spd = Math.ceil(ratio * delta);
var amp = 5 * Math.random() + .1;
var shift = 2 * Math.PI * Math.random();
var image = $('<img/>', {
src: 'images/' + file,
- style: 'width: ' + Math.floor(ratio*100) + '%;'
+ style: 'width: ' + Math.floor(ratio * 100) + '%;'
}).appendTo($('<div/>', {
'class': klass,
style: 'position: absolute; z-index: 100; opacity: ' + ratio + '; left: ' + x + 'px; top: ' + y + 'px; width: 60px; height: 60px;'
}).appendTo('#container'));
- var elem = image.parent();
- var t = setInterval(function(){move_right(elem, spd); bob(elem, y, .1, amp, shift)}, refresh);
- elem.attr('spd', spd);
- elem.attr('int', t);
+ var elem = image.parent(),
+ elem_id = 'floater-' + floatCount++;
+ elem.attr('id', elem_id);
+ floaters[elem_id] = {
+ element: elem,
+ speed: spd,
+ amplitude: amp,
+ shift: shift,
+ animate: true,
+ x: x,
+ y: y
+ };
+
return elem;
}
@@ -58,34 +74,45 @@ function dirigibles()
dirig.css('width', image.clientWidth);
dirig.css('height', image.clientHeight);
dirig.click(function() {
- var d = Number($(this).attr('spd'));
- var i = $(this).attr('int');
- clearInterval(i);
- loop($(this), d);
+ var floater = floaters[$(this).attr('id')];
+ floater.animate = false;
+ loop(floater);
});
}
-function loop(elem, spd)
+function loop(floater)
{
- elem.addClass('loop');
+ floater.element.addClass('loop');
setTimeout(function() {
- elem.removeClass('loop');
- var i = setInterval(function(){move_right(elem, Number(spd))}, refresh);
- elem.attr('int', i);
+ floater.element.removeClass('loop');
+ floater.animate = true;
}, 1000);
}
-function move_right(elem, spd)
+function updateFloater(floater) {
+ if (floater.animate) {
+ move_right(floater);
+ bob(floater);
+ }
+}
+
+// reset after passing right boundary
+function move_right(floater)
{
- if( elem.position().left < window.innerWidth + 250)
- elem.css('left', elem.position().left + spd + 'px');
- else
- elem.css('left', '-100px');
+ if(floater.x < window.innerWidth + 75) {
+ floater.x += floater.speed;
+ } else {
+ floater.x = -75;
+ }
+ floater.element.css('left', floater.x + 'px');
}
-function bob(elem, y, feq, amp, shift)
+function bob(floater)
{
- elem.css('top', y + amp * Math.sin(feq * elem.position().left + shift) + 'px');
+ var feq = 0.1;
+ floater.element.css('top', floater.y +
+ floater.amp * Math.sin(feq * floater.x + floater.shift) +
@kchau

kchau May 24, 2012

You named it 'amplitude', so it's not getting the correct value to do the bobbing of the floater.

+ 'px');
}
// $('#second-hackathon').eventbrite_attendees({
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit a2c3351

Please sign in to comment.