JSFiddle - React, Tailwind, and code Playground

by marlanga

HTML

<canvas id="lienzo1" width="750" height="750"></canvas>

JavaScript

String.prototype.pad = function( n, p ) {
    var s = '', n = Math.max( 0, n - this.length );
    while( n-- ) {
        s = p.toString() + s;
    }
    return s + this;
};

function retornarLienzo(x) {
  var canvas = document.getElementById(x);
  if (canvas.getContext) {
    var lienzo = canvas.getContext("2d");   
    return lienzo;
  } else
    return false;
}
/*dibujar 250 cuadrados que vayan del negro al rojo en 50 columnas y 5 filas */

function dibujar(lienzo, ep) {
 var lon = 5; 
//ME GUSTARIA QUE ME EXPLICARAIS ESTA PARTE DEL CODIGO 
  if (lienzo){
    var r=0;
    //var g=0;
    //var b=0;
    for(var fil=1;fil<=100;fil++) {
      for(var col=1;col<=100;col++) {
        var red = 128 + Math.floor(128*Math.tan(r));
          var green = 128 + Math.floor(128*Math.cos(r));
          var blue = 128 + Math.floor(128*Math.sin(r));
        lienzo.fillStyle="#"+red.toString(16).pad(2,0)+green.toString(16).pad(2,0)+blue.toString(16).pad(2,0);
        lienzo.fillRect(col*lon,fil*lon,lon,lon);
         r+=ep;
      }
    }      

  }
  
}

var lienzo=retornarLienzo("lienzo1");
var epsylon = 0.001;
var repeticion=0;
setInterval(function(){
    repeticion++;
    dibujar(lienzo, epsylon*repeticion);
},10);