After staring at the live wallpaper for my Android phone for a while, I started to wonder if I could recreate the animations using JavaScript and jQuery. At first it looked like it would be a pain due to keeping track of tiles, colors, flipping the colors, coloring neighboring tiles near the plasma ‘heads’, etc. Then I realized it’s just a simple image being dragged across the field!
Here’s the gist of the code… When the page loads we create a new ‘plasma’ element, which is one of the moving colors across the grid. After the first one has been created, we wait a random amount of time and load another one. This gives us the result of having a random number of plasma’s created at random intervals. We also set a random speed on the plasma’s, just to keep things interesting, along with a random color and cardinal direction.
Go to the homepage to take a look (which should be up for at least a few weeks), or take a look at the example page. You can also download all files, which includes the Photoshop files.
The code is actually pretty simple. Below you’ll see the source for the HTML, CSS, and JS files:
INDEX.HTM:
<html>
<head>
<title>Nexus: A peak inside the neural network</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="nexus.js"></script>
<link rel="stylesheet" href="nexus.css" type="text/css" media="screen" />
</head>
<body>
<div id="arena"></div>
<p>Inspired by the Nexus Android Live Wallpaper. Developed in jQuery by
<a href="http://www.thomashunter.name">Renowned Media</a>.</p>
</body>
</html>NEXUS.CSS:
#arena {
background: black url("nexus/background.png") repeat;
width: 912px;
height: 240px;
overflow: hidden;
position: relative;
}
.plasma {
background-color: transparent;
background-repeat: no-repeat;
overflow: hidden;
position: absolute;
}
.plasma-vert {
width: 24px;
height: 256px;
}
.plasma-horz {
width: 256px;
height: 24px;
}NEXUS.JS:
var colors = new Array('blue', 'red', 'green', 'yellow');
var directions = new Array('north', 'south', 'east', 'west');
var arenaSelector = "#arena";
var arenaWidth, arenaHeight, widthToHeight;
var itemShort = 24;
var itemLong = 256;
var counter = 0;
var blockSize = 8;
var minSpeed = 4000;
var maxSpeed = 5000;
var minRespawn = 100;
var maxRespawn = 1000;
$(function() {
$arena = $("#arena");
arenaWidth = Math.floor($arena.width() / blockSize);
arenaHeight = Math.floor($arena.height() / blockSize);
widthToHeight = arenaWidth / arenaHeight;
spawnPlasma();
});
function spawnPlasma() {
var direction = random(0,4);
var color = random(0,4);
var speed = random(minSpeed, maxSpeed);
var startLeft, startTop, stopLeft, stopTop;
switch (direction) {
case 0:
// NORTH
offset = random(0, arenaWidth);
startLeft = (offset * 8 - 8) + 'px';
stopLeft = (offset * 8 - 8) + 'px';
startTop = itemLong + arenaHeight * blockSize + 'px';
stopTop = -itemLong + 'px';
orientation = 'vert';
break;
case 1:
// SOUTH
offset = random(0, arenaWidth);
startLeft = (offset * 8 - 8) + 'px';
stopLeft = (offset * 8 - 8) + 'px';
startTop = -itemLong + 'px';
stopTop = itemLong + arenaHeight * blockSize + 'px';
orientation = 'vert';
break;
case 2:
// EAST
offset = random(0, arenaHeight);
startLeft = -itemLong + 'px';
stopLeft = itemLong + arenaWidth * blockSize + 'px'
startTop = (offset * 8 - 8) + 'px';
stopTop = (offset * 8 - 8) + 'px';
orientation = 'horz';
speed *= widthToHeight;
break;
case 3:
// WEST
offset = random(0, arenaHeight);
startLeft = itemLong + arenaWidth * blockSize + 'px'
stopLeft = -itemLong + 'px';
startTop = (offset * 8 - 8) + 'px';
stopTop = (offset * 8 - 8) + 'px';
orientation = 'horz';
speed *= widthToHeight;
break;
}
$(arenaSelector).append("<div class='plasma' id='plasma-" + counter + "'></div>");
$plasma = $("#plasma-"+counter);
counter++;
$plasma.addClass("plasma-"+orientation)
.css("background-image", "url(" + colors[color]+ "-" + directions[direction] + ".png)");
$plasma.css({left: startLeft, top: startTop})
.animate({top: stopTop, left: stopLeft}, speed, 'linear', function() {$(this).remove()});
setTimeout ("spawnPlasma()", random(minRespawn, maxRespawn));
}
function random(min, max) {
return Math.floor(Math.random() * ( max - min )) + min;
}These animations are copyright Google. The graphics and code are copyright 2010 Renowned Media, and are released under the BSD license.