If this isn't the
wackiest piece of code I've ever written, then it is pretty close. There are three components to the page: a randomly
generated grid, the changing letter sizes, and the "awesome song" in the background.
Random Grid
The toughest
part was generating the random grid. The grid is made up of two types of components. The grid itself, and the blocks.
Each the grids and blocks are have a visual and a data component. The visual components is handled by css,
Grid size
The first step is to determine the
number of rows and columns that the grid will have. This is done by taking the ceiling of the quotient of the width or
height of the container divided by the height or width of the cell. In this case the cells are 50x50 (40px with 10px
of padding). I used the ceiling function rather than the floor because I wanted to fill the screen. Also the number of
cells is recalculated on window resize.
$(window).resize(function(){
hcells = Math.ceil($grid.width()/50); //collumns
vcells = Math.ceil($grid.height()/50); //rows
}).resize();
Representing grid and shapes
Both the grid and the shapes are represented by 2-dimensional boolean matrices. The
grid is initialized so that every cell contains a false value (meaning that grid position is not occupied).
for(i = 0; i < hcells; i++){
grid.push([]);
for(j = 0; j < vcells; j++){
grid[i].push(false);
}
}
Likewise, each of the block shapes has a shape array where the positions occupied by the shape are represented by a true
value.
//default shape, single square block
oneSquare = {
shape: [ [true] ],
className: "oneSquare"
};
//three wide by one tall
threeXOne = {
className: "threeXone",
shape: [ [true], [true], [true] ]
};
Placing Blocks
After the grid is initialized, each position is looped through and a block shape is chosen at
random. Then the shape array of the block is compared the the grid starting at the current position. The block is placed
into the grid if all the positions that will be take up by this shape are unoccupied.
function placeBlock(i, j, shape){
//loop over space checking for occupation
for(x = 0; x < shape.length; x++){
for(y = 0; y < shape[x].length; y++){
if (grid[x + i][y + j] || x+i >= grid.length || y+j >= grid[x+i].length) {
return false;
}
}
}
//go back and mark spots as taken up
for (x = 0; x < shape.length; x++) {
for (y = 0; y < shape[x].length; y++) {
grid[x + i][y + j] = true;
}
}
return true;
}
If the function returns true then the block is placed absolutely in the grid using the cell size and i,j coordinates.
The process of emptying the grid and filling it with random block is set to repeat 10 times a second. This makes the
grid a pretty interesting browser benchmark.
Title
To spice up the title a little bit. I use the
lettering.js a jQuery plugin to wrap each of the letters in
there own div. Then on an interval the letters are looped through and a random size (within bounds) is chosen for each
letter, and it is assigned one of 4 colors;
var colors = ["#0099FF", "#800080", "#0FF000", "#FF0000"];
function logoDance(){
$logo.children("span").each(function(){
randy = Math.random();
$(this).css({
fontSize: Math.round(randy*150)+75,
color: colors[Math.floor(4 * randy)]
});
});
}
Audio
The music is played through an HTML audio tag.To get the OGG version of the file I used
Firefogg.
Summary
That pretty much covers it. Some arrays operations to create
and fill the grid, lettering.js to jazz up the title page, and some quick html audio for the background music.