Tuesday, December 16th, 2008

JavaScript Raster Bar Effect

Category: Canvas

This is a fun canvas demo by Stefan Pettersson that brings you back to your Amiga days (if you remember those, or weren’t an Atari man).

You can check out the JavaScript that makes the world turn.

function start() {
        var resolution = 25;
        var speed = 0.02;
        var position = 150;
        var size = 50;

        var step = Math.PI * 2 / resolution;

        var bars = [];

        bars.push( new RasterBar(step, size, speed, getColor1) );
        bars.push( new RasterBar(step, size, speed, getColor2) );
        bars.push( new RasterBar(step, size, speed, getColor3) );

        var t = 0;
        setInterval(function() {

            t += 0.03;
            if (t > Math.PI*2) t = 0;

            for (var i = 0; i < bars.length; i++) {
                bars[i].oldPos = bars[i].newPos;
                bars[i].newPos = position + Math.round(100 * Math.sin(t + i*(Math.PI*2) / 3));

                if (bars[i].oldPos >= bars[i].newPos) {

            for (var i = 0; i < bars.length; i++) {
                if (bars[i].oldPos < bars[i].newPos) {

        }, 25);

And as Stafan says, listen to this in the background!

Posted by Dion Almaer at 1:00 pm

4 rating from 23 votes


Comments feed TrackBack URI

Amiga? Atari? Bah, these machines were much too powerful for Raster Bars, like having a Copper chip coprocessor to doing them. Back in the Commie 64 dayz, we did it the hard way, with cycle accurate delay timing of register pokes, and the code was smaller! :)

wait lda $d012
cmp #$20
bne wait
ldx #$0
loop lda colorTable, x
sta $d020
ldy delayTable, x
spin dey
bne spin
cpx #8
bne loop

(ok, you wouldn’t use lda $d012/cmp/bne, but use a raster interrupt)

Comment by cromwellian — December 16, 2008

And you tell that to the young kids of today, and they won’t believe you…

Comment by starkraving — December 16, 2008

Yeah! Retro. This brings me back to the good old days. jmp #fc0000

Comment by Spocke — December 16, 2008

You wouldn’t use cos/sin Math, but use a lookup table instead ;-)

Comment by PieturP — December 16, 2008

Whoops, didn’t read cromwellian well enough…

Comment by PieturP — December 16, 2008

Yeah, 6502 doesn’t even have sin/cos unless you want to do powerseries expansion. I would typically write a short basic program to generate a table by poking values into memory at $c000, and then I’d use an ML monitor to hex dump these into ASM data sections.

My favorite table was to use an exponentially decaying cosine table to implement a ‘bounce’ gravity effect, something like

for i = 0 to 4
for j = 0 to 64
poke 49152 + i * 64 + j, cos(j/64 * pi/2) / exp(i)
next j
next i

(apologies, I forgot most of basic)

Comment by cromwellian — December 16, 2008

That’s what I have been growing up with and these hacking days still influence me today.
Many among the best are from this period.

Great !

Comment by rlopes — December 16, 2008

— *RESPECT*…!! :P

Comment by ThomasHansen — December 16, 2008

hei wait a second, I’m pretty sure “RasterBar” is not a built in type, and I don’t see it defined anywhere in that code. What are you trying to pull here?

Comment by Breton — December 17, 2008

nice one!

Comment by aurora — December 17, 2008

sys 64802

Comment by Diodeus — December 17, 2008

Leave a comment

You must be logged in to post a comment.