JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<canvas id='world' width="450" height="450"></canvas>

CSS

body { background-color: #DDDDDD; font: 30px sans-serif; }

JavaScript

/* define global variable */
var FPS = 1000 / 30 >> 0// Frame Per Seconds
,   canvas
,   ctx
,   canvas_backcolor
,   rainbow_spec
,   rainbow_wave
;

var Rainbow_wave = function(spec) {
  var that = {}
  ,   _width = spec.width 
  ,   _height = spec.height
  ,   _weight = spec.weight
  ,   _heave = spec.heave
  ,   _vel = _speed = spec.speed
  ,   _x, _y, _num, _color
  ;

    that.draw = function () {
    for(_x = 0; _x < _width; _x++) {
      _num = 0;
      for (_color in spec.color) {
        _y = _heave * Math.cos( (_x + _vel) * Math.PI / 180 ) + (_num++) * _weight + _height;
        ctx.fillStyle = 'rgb(' + spec.color[_color] + ')';
        ctx.fillRect(_x, _y, 1, _weight);
      }
    }
    _vel += _speed;
    };
    return that;
};

/* initialize my definitions */
var init = function() {
  canvas = document.getElementById( 'world' );
  ctx = canvas.getContext( '2d' );
  canvas_backcolor = '48, 48, 96';
  rainbow_spec = {
    width: 450,
    height: 100,
    weight: 10,
    heave: 25,
    speed: 10 ,
    color: {
      red: '255, 0, 0',
      orange: '255, 153, 0',
      yellow: '255, 255, 0',
      green: '0, 255, 0',
      blue: '0, 0, 255',
      indigo: '51,51,153',
      purple: '102, 0, 153'
    }
  };
  rainbow_wave = new Rainbow_wave(rainbow_spec);
};

var main = function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'rgb(' + canvas_backcolor + ')';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  rainbow_wave.draw();
};

/* run main function */
(function() {
  init(); // initialize
  setInterval(function() {
    main();
  }, FPS);
})();