Seen.js - Noisy Wave Patch

Example from seen.js website

by Alex

HTML

<script src="https://s3.amazonaws.com/f.cl.ly/items/0B3d1N2T0E0I1x3u3e1v/seen.min.js"></script>
<canvas id="seen-canvas"></canvas>
<!--<div id="color"></div>
<div id="mask"></div>-->

<!--<svg id="seen-canvas"></svg>-->

CSS

body,
svg,
canvas {
  margin: 0;
  width: 100vw;
  height: 100vh;
}

#mask, #color {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0px;
  left: 0px;
  
}
#mask{
  background-image: url(https://purr.is/img/PURR-cutout.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  z-index: 99; 
  display:none;
}
#color{
  background-color: rgba(80, 227, 194, 1);
  /*background-blend-mode: multiply;*/
  mix-blend-mode: multiply;
  z-index:98;
  
  
  background: linear-gradient(23deg, #50e3c2, #fc4058, #f4f4f0, #6653ff, #50e3c2, #50e3c2);
  background-size: 1200% 1200%;
  -webkit-animation: AnimationName 59s ease infinite;
  -moz-animation: AnimationName 59s ease infinite;
  -o-animation: AnimationName 59s ease infinite;
  animation: AnimationName 59s ease infinite;
  
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 79%}
    50%{background-position:100% 22%}
    100%{background-position:0% 79%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 79%}
    50%{background-position:100% 22%}
    100%{background-position:0% 79%}
}
@keyframes AnimationName { 
    0%{background-position:0% 79%}
    50%{background-position:100% 22%}
    100%{background-position:0% 79%}
}

JavaScript

var context, equilateralAltitude, height, noiser, patch_height, patch_width, scene, shape, t, triangleScale, width;

width = window.innerWidth;
height = window.innerHeight;
document.getElementById('seen-canvas').width = width;
document.getElementById('seen-canvas').height = height;

equilateralAltitude = Math.sqrt(2.0) / 2.0;
triangleScale = 25;
patch_width = width * 1.5;
patch_height = height * 1.5;


shape = seen.Shapes.patch(
    patch_width / triangleScale / equilateralAltitude,
    patch_height / triangleScale
  )
  .scale(triangleScale*3)
  .translate(-patch_width / 2, -patch_height / 2 )
  .rotx(-0.3);

seen.Colors.randomSurfaces(shape, 0.1, 0.8);
//seen.Colors.randomSurfaces2(shape, 0.1, 0.5, 0.4);

scene = new seen.Scene({
  model: seen.Models["default"]().add(shape),
  viewport: seen.Viewports.center(width, height),
  fractionalPoints: true
});

context = seen.Context('seen-canvas', scene).render();

noiser = new seen.Simplex3D(shape);

context.animate().onBefore(function(t, d) {
  var i, j, len, len1, p, ref, ref1, results, surf;
  ref = shape.surfaces;
  results = [];
  for (i = 0, len = ref.length; i < len; i++) {
    surf = ref[i];
    ref1 = surf.points;
    for (j = 0, len1 = ref1.length; j < len1; j++) {
      p = ref1[j];
      p.z = 8 * noiser.noise(p.x / 8, p.y / 8, t * 2e-4);
    }
    results.push(surf.dirty = true);
  }
  
  shape
    .rotz( Math.sin(d/10000) )
  	//.roty( Math.sin(d/1000) * 5e-2)
  
  return results;
}).start();