Rasterbars
Rasterbar was very popular demo effect from the 80's and 90's user in many intros on Commodore 64 and Amiga computers.
Rasterbar function in javascript:
function RasterBar(canvas_ctx, raster_gfx, pos_y, height, speed, step, num_rasters) {
this.num = num_rasters;
this.step = step
this.speed = speed;
this.spiner = 0;
this.y = pos_y;
this.h = height;
this.grad = Math.PI / 360;
this.raster_gfx = raster_gfx;
this.canvas_ctx = canvas_ctx;
this.draw = function() {
var l = this.raster_gfx.length;
var r = 0;
this.spiner += speed;
for (i = 0; i < this.num; i++) {
var y1 = this.y + Math.floor(Math.sin((this.spiner + step * i) * this.grad) * this.h);
this.canvas_ctx.drawImage(this.raster_gfx[r], 0, y1);
r++;
if (r >= l) {
r = 0;
}
}
}
}
Init rasterbar:
var WIDTH = 640; var HEIGHT = 480; var canvas; var raster; var ctx; var raster_bar = new Array(); canvas = document.getElementById("demo_canvas"); ctx = canvas.getContext("2d"); raster_bar[0] = new Image(); raster_bar[1] = new Image(); raster_bar[2] = new Image(); raster_bar[3] = new Image(); raster_bar[0].src = "/files/canvas/4/gfx/rasterbar1.png"; raster_bar[1].src = "/files/canvas/4/gfx/rasterbar2.png"; raster_bar[2].src = "/files/canvas/4/gfx/rasterbar3.png"; raster_bar[3].src = "/files/canvas/4/gfx/rasterbar4.png"; raster = new RasterBar(ctx, raster_bar, 190, 130, 3, 20, 16); draw();