Tuesday, December 16th, 2008
JavaScript Raster Bar Effect
Category: Canvas
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() {
ctx.clearRect(0,0,600,400);
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) {
bars[i].draw(bars[i].newPos);
}
}
for (var i = 0; i < bars.length; i++) {
if (bars[i].oldPos < bars[i].newPos) {
bars[i].draw(bars[i].newPos);
}
}
}, 25);
}
And as Stafan says, listen to this in the background!
Related Content:
4.3 rating from 18 votes
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
inx
cpx #8
bne loop
(ok, you wouldn’t use lda $d012/cmp/bne, but use a raster interrupt)
And you tell that to the young kids of today, and they won’t believe you…
Yeah! Retro. This brings me back to the good old days. jmp #fc0000
You wouldn’t use cos/sin Math, but use a lookup table instead ;-)
Whoops, didn’t read cromwellian well enough…
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)
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 !
@cromwellian
— *RESPECT*…!! :P
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?
nice one!
sys 64802