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.

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.

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.

## Comments

## BLiu1's Blog - Pixel Toys

comments powered by Disqus