BLiu1's Blog

Pixel Toys

January 24, 2016

Pixels for the win! TI-Basic programs meet HTML5 Canvases in the ultimate old school meets new school combo. Check out The Pixel Tracer and PixelCrank now.

The Pixel Tracer/Toy

What started as a 3 line TI-84 Basic program has now ballooned into a full scale, full 16-bit color, scalable webtoy. Originally, there was prgmBOUNCE that was put together in the boredom of ninth and tenth grade math classes. See below.


I know that line 2 is probably an unnecessary one-liner, but memory is limited and variables are expensive in TI-Basic. Besides, BOUNCE2 and BOUNCE3, two variations of the original, had it even longer. The Pixel Tracer (previously named The Pixel Toy) is based on BOUNCE3 below.


For comparison, the two main functions in The Pixel Tracer are below.

function backAndForth(x, k) {
	return Math.round(Math.abs(Math.abs(((Math.round(x)) % (2*k)) - k) - k));

function update() {
	// FPS meter
	for (var y = 0; y < speed; y++) {
			backAndForth(0.99 * iter, width),
			backAndForth(iter++, height)

In JS, the modulus operator was used instead of a remainder function. As you can see, in the port, I left much of the code condensed in the backAndForth function; that's just how I code. Also, if you plot out the graph of backAndForth on a Cartesian plane, you will find the basis of the bounce, a triangle wave.

In the JS port, I also decided to increase the screen resolution by two in each direction for a different effect.


The second pixel plaything took less effort than the first, but I had to tweak the cPixLib library in the process. Making random pixels pop on a canvas is not particularly tricky with a library, so I took it to the next level with dat.GUI.

The handy tool called dat.GUI is basically a settings menu you see in the top right that allows specific variables to be changed in real time. Yesterday, I got really bored with it, so I made the sliders logarithmically scaled, added two presets, and made the colors editable. The last feature took the longest to implement—2 days.



BLiu1's Blog - Pixel Toys

comments powered by Disqus
eXTReMe Tracker