Plasma

TypeScript goes plasma

by Jeremy Likness

HTML

<canvas id="plasma">Loading</canvas>

CSS

#plasma {
  border: solid black 1px;
  width: 320px;
  height: 200px; 
}

TypeScript

const screenHeight: number = 200;
const screenWidth: number = 320; 

var requestAnimFrame = (callback) => 
     		  window.requestAnimationFrame(callback)       || 
              window.webkitRequestAnimationFrame(callback) || 
              window.mozRequestAnimationFrame(callback)    || 
              window.oRequestAnimationFrame(callback)      || 
              window.msRequestAnimationFrame     || 
              ((callback) => {
                window.setTimeout(callback, 1000 / 60);
              });
  
interface IColor {
	r: number;
  g: number;
  b: number;
}

class Color implements IColor {
	constructor(public r: number, public g: number, public b: number) {
  }
}

class Plasma {

	private pos1: number = 0;
  private pos3: number = 0;
  private tpos1: number = 0;
  private tpos2: number = 0;
  private tpos3: number = 0;
  private tpos4: number = 0;
  
  private sine: number[];
  private palette: IColor[];
  private pixelBuffer: IColor[];
  
  private cv: any;
  private cv1: any;
  private cv1ctx: any;

	private createSineTable(): void {
  	var i: number, rad: number; 
    for (i = 0; i < this.sine.length; i+=1) {
    	rad = i * 0.703125 * 0.0174532;
      this.sine[i] = Math.sin(rad) * 1024;
    }
  }
  
  private createPalette(): void {
  	var i: number, r: number, g: number, b: number;
    for (i = 0; i < 64; i += 1) {
    	r = i << 2; 
      g = 255 - ((i << 2) + 1);
      this.palette[i] = new Color(r, g, 0); 
      g = (i << 2) + 1;
      this.palette[i + 64] = new Color (255, g, 0);
      r = 255 - ((i << 2) + 1);
      g = r;
      this.palette[i + 128] = new Color(r, g, 0);
      g = (i << 2) + 1;
      this.palette[i + 192] = new Color(0, g, 0);
    }
  }
  
  public computeFrame(): void {
  	var i: number, j: number, x: number, index: number, color: IColor;
    
    this.tpos4 = 0;
    this.tpos3 = this.pos3; 
    
    for (i = 0; i < screenHeight; i+=1) {
    	this.tpos1 = this.pos1 + 5; 
      this.tpos2 = 3; 
      this.tpos3 &= 511;
     ...