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();


fp.TAGS