BLiu1's Blog

Pixel Toys

January 24, 2016
Edited

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.

PROGRAM:BOUNCE
:For(X,1,99999)
:Pxl-Change(abs(abs(remainder(X,124)-62)-62),abs(abs(remainder(X,188)-94)-94))
:End

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.

PROGRAM:BOUNCE3
:For(X,0,99999)
:Pxl-Change(abs(abs(remainder(X,124)-62)-62),round(abs(abs(remainder(round(.99*X,0),188)-94)-94),0))
:End

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
	meter.tickStart();
	for (var y = 0; y < speed; y++) {
		cp.pixelChange(
			backAndForth(0.99 * iter, width),
			backAndForth(iter++, height)
		);
	};
	meter.tick();
}

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.

PixelCrank

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.

Tags:

Comments

BLiu1's Blog - Pixel Toys

comments powered by Disqus
eXTReMe Tracker