EffectHub.com: your best source for gaming

Recommendation

More Effects...

'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

var raf = function () {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback, element) {
    window.setTimeout(callback, 1000 / 60);
  };
}();

var events = {
  on: function on(element, event, callback, capture) {
    !element.addEventListener && (event = 'on' + event);
    (element.addEventListener || element.attachEvent).call(element, event, callback, capture);
    return callback;
  },

off: function off(element, event, callback, capture) {
    !element.removeEventListener && (event = 'on' + event);
    (element.removeEventListener || element.detachEvent).call(element, event, callback, capture);
    return callback;
  }
};

var select = {
  one: function one(selector, parent) {
    parent || (parent = document);
    return parent.querySelector(selector);
  },

all: function all(selector, parent) {
    parent || (parent = document);
    var selection = parent.querySelectorAll(selector);
    return Array.prototype.slice.call(selection);
  }
};

var dom = {
  events: events,
  select: select
};;
var Mouse = { x: 0, y: 0, nX: 0, nY: 0 };
var Window = { w: window.innerWidth, h: window.innerHeight };

var Plane = function (_THREE$Object3D) {
  _inherits(Plane, _THREE$Object3D);

function Plane() {
    _classCallCheck(this, Plane);

var _this = _possibleConstructorReturn(this, _THREE$Object3D.call(this));

_this.geometry = new THREE.PlaneBufferGeometry(10, 10);
    _this.uniforms = {
      uTime: { value: 0 },
      uResolution: { value: new THREE.Vector2(Window.w, Window.h) }
    };
    _this.material = new THREE.ShaderMaterial({
      uniforms: _this.uniforms,
      vertexShader: dom.select.one('#iceVertex').textContent,
      fragmentShader: dom.select.one('#iceFragment').textContent,
      side: THREE.DoubleSide
    });
    _this.mesh = new THREE.Mesh(_this.geometry, _this.material);
    _this.add(_this.mesh);
    _this.update = _this.update.bind(_this);
    return _this;
  }

Plane.prototype.update = function update(d) {
    this.uniforms.uTime.value += d * 0.001;
    this.uniforms.uResolution.value.x = Window.w;
    this.uniforms.uResolution.value.y = Window.h;
    // this.rotation.y += 0.01
    // this.rotation.z += 0.01
  };

return Plane;
}(THREE.Object3D);

var Xp = function () {
  function Xp() {
    _classCallCheck(this, Xp);

this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(45, Window.w / Window.h, 1, 1000);
    this.camera.position.z = 1;
    // this.controls = new THREE.OrbitControls( this.camera )
    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    this.renderer.setSize(Window.w, Window.h);
    dom.select.one('.app').appendChild(this.renderer.domElement);

this.DELTA_TIME = 0;
    this.LAST_TIME = Date.now();

this.bind();
    this.initLights();
    this.initMeshes();
  }

Xp.prototype.bind = function bind() {
    var _this2 = this;

['update', 'resize'].forEach(function (fn) {
      return _this2[fn] = _this2[fn].bind(_this2);
    });
  };

Xp.prototype.initMeshes = function initMeshes() {
    this.plane = new Plane();
    this.scene.add(this.plane);
  };

Xp.prototype.initLights = function initLights() {
    var ambientLight = new THREE.AmbientLight(0x111111);
    this.scene.add(ambientLight);

var light = new THREE.DirectionalLight(0x4f4f4f);
    light.position.set(1, 1, 1);
    this.scene.add(light);

var light2 = new THREE.DirectionalLight(0x4f4f4f);
    light2.position.set(-1, -1, -1);
    this.scene.add(light2);
  };

Xp.prototype.update = function update() {
    this.DELTA_TIME = Date.now() - this.LAST_TIME;
    this.LAST_TIME = Date.now();
    this.plane.update(this.DELTA_TIME);
    this.renderer.render(this.scene, this.camera);
  };

Xp.prototype.resize = function resize() {
    this.camera.aspect = Window.w / Window.h;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize(Window.w, Window.h);
  };

return Xp;
}();

var App = function () {
  function App() {
    _classCallCheck(this, App);

this.bind();
    this.addListeners();
    this.xp = new Xp();
  }

App.prototype.bind = function bind() {
    var _this3 = this;

['onResize', 'onMouseMove', 'update'].forEach(function (fn) {
      return _this3[fn] = _this3[fn].bind(_this3);
    });
  };

App.prototype.addListeners = function addListeners() {
    dom.events.on(window, 'resize', this.onResize);
    dom.events.on(window, 'mousemove', this.onMouseMove);
  };

App.prototype.init = function init() {
    this.update();
  };

App.prototype.onResize = function onResize() {
    Window.w = window.innerWidth;
    Window.h = window.innerHeight;
    this.xp.resize();
  };

App.prototype.onMouseMove = function onMouseMove(e) {
    e.preventDefault();
    Mouse.x = e.clientX || Mouse.x;
    Mouse.y = e.clientY || Mouse.y;
    Mouse.nX = Mouse.x / Window.w * 2 - 1;
    Mouse.nY = Mouse.y / Window.h * 2 + 1;
  };

App.prototype.update = function update() {
    this.xp.update();
    raf(this.update);
  };

return App;
}();

var ShaolinApp = new App();

dom.events.on(window, 'DOMContentLoaded', function () {
  ShaolinApp.init();
});

CSS

@import url("https://fonts.googleapis.com/css?family=Oswald:300,500");
.center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: 62.5%;
}

.credits {
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: #FFFFFF;
  text-align: right;
  font-family: 'Oswald';
}
.credits__title {
  font-size: 1.5rem;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.credits__link {
  text-decoration: none;
  font-weight: 300;
  color: #FFFFFF;
  font-size: 1.3rem;
  position: relative;
}
.credits__link:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #FFFFFF;
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: -webkit-transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
  will-change: transform;
}
.credits__link:hover:after {
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

HTML

<div class="app"></div>
<script type="x-shader/vertex-shader" id="iceVertex">
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }
  </script>
  <script type="x-shader/fragment-shader" id="iceFragment">
    precision highp float;
    //
    // GLSL textureless classic 2D noise "cnoise",
    // with an RSL-style periodic variant "pnoise".
    // Author:  Stefan Gustavson (stefan.gustavson@liu.se)
    // Version: 2011-08-22
    //
    // Many thanks to Ian McEwan of Ashima Arts for the
    // ideas for permutation and gradient selection.
    //
    // Copyright (c) 2011 Stefan Gustavson. All rights reserved.
    // Distributed under the MIT license. See LICENSE file.
    // https://github.com/stegu/webgl-noise
    //
    
    vec4 mod289(vec4 x)
    {
      return x - floor(x * (1.0 / 289.0)) * 289.0;
    }
    
    vec4 permute(vec4 x)
    {
      return mod289(((x*34.0)+1.0)*x);
    }
    
    vec4 taylorInvSqrt(vec4 r)
    {
      return 1.79284291400159 - 0.85373472095314 * r;
    }
    
    vec2 fade(vec2 t) {
      return t*t*t*(t*(t*6.0-15.0)+10.0);
    }
    
    // Classic Perlin noise
    float cnoise(vec2 P)
    {
      vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
      vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
      Pi = mod289(Pi); // To avoid truncation effects in permutation
      vec4 ix = Pi.xzxz;
      vec4 iy = Pi.yyww;
      vec4 fx = Pf.xzxz;
      vec4 fy = Pf.yyww;
    
      vec4 i = permute(permute(ix) + iy);
    
      vec4 gx = fract(i * (1.0 / 41.0)) * 2.0 - 1.0 ;
      vec4 gy = abs(gx) - 0.5 ;
      vec4 tx = floor(gx + 0.5);
      gx = gx - tx;
    
      vec2 g00 = vec2(gx.x,gy.x);
      vec2 g10 = vec2(gx.y,gy.y);
      vec2 g01 = vec2(gx.z,gy.z);
      vec2 g11 = vec2(gx.w,gy.w);
    
      vec4 norm = taylorInvSqrt(vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11)));
      g00 *= norm.x;  
      g01 *= norm.y;  
      g10 *= norm.z;  
      g11 *= norm.w;  
    
      float n00 = dot(g00, vec2(fx.x, fy.x));
      float n10 = dot(g10, vec2(fx.y, fy.y));
      float n01 = dot(g01, vec2(fx.z, fy.z));
      float n11 = dot(g11, vec2(fx.w, fy.w));
    
      vec2 fade_xy = fade(Pf.xy);
      vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
      float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
      return 2.3 * n_xy;
    }
    
    // Classic Perlin noise, periodic variant
    float pnoise(vec2 P, vec2 rep)
    {
      vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
      vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
      Pi = mod(Pi, rep.xyxy); // To create noise with explicit period
      Pi = mod289(Pi);        // To avoid truncation effects in permutation
      vec4 ix = Pi.xzxz;
      vec4 iy = Pi.yyww;
      vec4 fx = Pf.xzxz;
      vec4 fy = Pf.yyww;
    
      vec4 i = permute(permute(ix) + iy);
    
      vec4 gx = fract(i * (1.0 / 41.0)) * 2.0 - 1.0 ;
      vec4 gy = abs(gx) - 0.5 ;
      vec4 tx = floor(gx + 0.5);
      gx = gx - tx;
    
      vec2 g00 = vec2(gx.x,gy.x);
      vec2 g10 = vec2(gx.y,gy.y);
      vec2 g01 = vec2(gx.z,gy.z);
      vec2 g11 = vec2(gx.w,gy.w);
    
      vec4 norm = taylorInvSqrt(vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11)));
      g00 *= norm.x;  
      g01 *= norm.y;  
      g10 *= norm.z;  
      g11 *= norm.w;  
    
      float n00 = dot(g00, vec2(fx.x, fy.x));
      float n10 = dot(g10, vec2(fx.y, fy.y));
      float n01 = dot(g01, vec2(fx.z, fy.z));
      float n11 = dot(g11, vec2(fx.w, fy.w));
    
      vec2 fade_xy = fade(Pf.xy);
      vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
      float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
      return 2.3 * n_xy;
    }
    #define USE_MAP true
    uniform vec2 uResolution;
    uniform float uTime;
    
    #define NUM_OCTAVES 3
    
    float fbm ( vec2 st) {
        float v = 0.0;
        float a = 0.7;
        vec2 shift = vec2(10.0);
        mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.50));
        for (int i = 0; i < NUM_OCTAVES; ++i) {
          v += a * abs(cnoise(st));
          st = rot * st * 2.0 + shift;
          a *= 0.5;
        }
        return v;
    }
    void main() {
      //vec2 st = vUv * 2.;
      vec2 st = gl_FragCoord.xy/uResolution.xy*3.;
      vec3 color;
      vec2 q = vec2(0.);
      q.x = fbm(st + vec2(uTime * 0.15, uTime * 0.35));
      q.y = fbm(st);
  
      vec2 r = vec2(0.);
      r.x = fbm(st + 3.0*q + vec2(2.6,6.2));
      r.y = fbm(st + 2.0*q + vec2(8.7,7.8));

float f = fbm(st+r);

color = smoothstep(cos(uTime*0.5), 0.5+cos(uTime*0.5), mix(vec3(0.077,0.547,0.820), vec3(0.052,0.872,0.975), clamp((f*f)*4.0,0.0,1.0)));
      color = mix(color, vec3(0.601,0.183,0.615), clamp(length(q),0.0,1.0));
      color = mix(color, vec3(0.236,0.386,0.645), clamp(length(r.x),0.0,1.0));

gl_FragColor = vec4(f*color,1.);
    }
  </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>

Recommendation

Join Effecthub.com