Visualizing Profiling Data with Google Chrome

This isn't a new feature in Chrome, but I just found out that we can use Google Chrome to visualize inline profiling data, rather than write our own visualization tool. This is done via chrome://tracing (see http://www.altdevblogaday.com/2012/08/21/using-chrometracing-to-view-your-inline-profiling-data/).

All we have to do is write the profiling data in a format that the Chrome viewer accepts (https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU) and load it up in the viewer. Awesome!

Sidequest Updated: Blast

Two posts ago, I talked about creating a mash-up of Geometry Wars and Rez. I present to you Blast, an audio toy where shooting stuff paints a tone matrix. In this initial version, you control a simple ship to blast circles in order to colour cells on the tone matrix. Coloured cells then determine what sounds are played. It's still lacking a lot of feedback, but the general idea is there. I think the audio generated is pretty interesting.

In hindsight, coding everything with EaselJS was probably a bad idea, as I had to write out a lot of stuff on my own; stuff like motion and collision detection which could have been done easily with a framework like Phaser. I'll probably be porting everything over to Phaser before adding more stuff like particles and more interesting enemies. Chiny pointed me to a sprite generation tool that could come in handy for creating enemies. I'll see what I can come up with them. Maybe exploding enemies that colour multiple tiles in one go.

Quick and Dirty Checkerboard Spritesheet

Need a checkerboard transition but don't want to code it out? Want to use a spritesheet for it instead? Don't want to have to do it by hand? Then this script is for you!

Just came up with a quick and dirty script using ImageMagick to generate a checkerboard transition spritesheet.

	#!/bin/bash
	# Quick script to generate a checkerboard transition spritesheet with ImageMagick.
	# This script makes PNGs with the names 'tile*.png', 'tmp.png', 'phase1_*.png',
	# 'phase2_*.png' and 'checkerboard.png' in the current directory.
	SIDE=20 # Width in pixels for each square
	MAXN=5 # Number of steps - 1 to fill a square
	TILES_ACROSS=16 # Number of squares across the checkerboard
	TILES_DOWN=9 # Number of squares down the checkerboard
	convert -size "$SIDE"x"$SIDE" xc:none tile0.png
	for i in `seq 1 $MAXN`
	do
	WIDTH=$(($i*$SIDE/$MAXN))
	convert -size "$SIDE"x"$SIDE" xc:none -fill black -draw "rectangle 0,0 $WIDTH,$SIDE" tile$i.png
	done
	IMG_W=$(($TILES_ACROSS*$SIDE))
	IMG_H=$(($TILES_DOWN*$SIDE))
	for i in `seq 0 $MAXN`
	do
	montage tile0.png tile$i.png tile$i.png tile0.png -background none -tile 2x2 -geometry +0+0 tmp.png
	convert -size "$IMG_W"x"$IMG_H" -background transparent tile:tmp.png phase1_$i.png
	montage tile$i.png tile$MAXN.png tile$MAXN.png tile$i.png -background none -tile 2x2 -geometry +0+0 tmp.png
	convert -size "$IMG_W"x"$IMG_H" -background transparent tile:tmp.png phase2_$i.png
	done
	montage phase1_*.png phase2_*.png -background none -geometry +0+0 checkerboard.png

view raw checkerboard.sh hosted with ❤ by GitHub

Not the best way to do things, but at least it serves to help me remember the ImageMagick options that I tend to use.