var canvas=document.getElementById("c");

var ctx=canvas.getContext("2d");

var W, H;

var colors=[

  "#2e942a",

  "#e0d041",

  "#31a194",

  "#ae2c2b",

  "#3f4187"

];

var background="#fbf4e4";

var limit=5;

function choose(array){

  var random=Math.floor(array.length*Math.random());

  return array[random];

}

​

function generateNoise(opacity) {

  var noiseCanvas=document.getElementById("noise");

  noiseCanvas.width=window.innerWidth;

  noiseCanvas.height=window.innerHeight;

  noiseCtx=noiseCanvas.getContext("2d");

  var x, y;

  var number;

  for (x=0; x<noiseCanvas.width; x++) {

    for (y=0; y<noiseCanvas.height; y++) {

      number = Math.floor(Math.random()*60 + 180);

      noiseCtx.fillStyle = "rgba(" + number + "," + number + "," + number + "," + opacity + ")";

      noiseCtx.fillRect(x, y, 1, 1);

    }

  }

}

​

​

​

function resizeCanvas(){

  W = window.innerWidth;

  H = 0.9*window.innerHeight;

  canvas.width = W;

  canvas.height = H;

}

function drawBackground(){

  document.body.style.background = background;

  ctx.beginPath();

  ctx.rect(0, 0, W, H);

  ctx.fillStyle = background;

  ctx.fill();

}

​

function sqrt(x){

  return Math.pow(x, 0.5);

}

​

​

function triangle(xTop, yTop, length){

  var color=choose(colors);

​

  ctx.fillStyle=color;

  ctx.beginPath();

  ctx.moveTo(xTop, yTop);

  ctx.lineTo(xTop + 0.5*length, yTop + length*sqrt(3)/2);

  ctx.lineTo(xTop - 0.5*length, yTop + length*sqrt(3)/2);

  ctx.lineTo(xTop, yTop);

  ctx.closePath();

  ctx.fill();

}

​

function triangles(xTop, yTop, length, i){

  if(i==limit){

    triangle(xTop, yTop, length/2);

    triangle(xTop + 0.5*length/2, yTop + length*sqrt(3)/4, length/2);

    triangle(xTop - 0.5*length/2, yTop + length*sqrt(3)/4, length/2);

  }else if(i<limit){

    i+=1;

    triangles(xTop, yTop, length/2, i);

    triangles(xTop + 0.5*length/2, yTop + length*sqrt(3)/4, length/2, i);

    triangles(xTop - 0.5*length/2, yTop + length*sqrt(3)/4, length/2, i);

  }

}

​

function draw(){

  resizeCanvas();

  drawBackground();

  triangles(W/2,0, H*1.1, 0);

}

window.onresize=draw;

​

​

generateNoise(0.1)

draw();