EffectHub.com: your best source for gaming

Recommendation

More Effects...

var regl = createREGL();

var mousePosition = [0.5, 0.5];

var palmsImageTexture = regl.texture(document.getElementById('palms-at-night'));
var palmsImageMapsTexture = regl.texture(document.getElementById('palms-at-night-maps'));

var drawBackground = regl({
  /**
   * Depth settings
   */
  depth: {
    enable: false
  },

/**
   * The vertex shader
   */
  vert: '\n    precision mediump float;\n\n    attribute vec2 a_position;\n    varying vec2 v_position;\n\n    void main() {\n      v_position = (a_position + 1.0) * 0.5;\n      v_position.y = 1.0 - v_position.y;\n      gl_Position = vec4(a_position, 0.0, 1.0);\n    }\n  ',

/**
   * The fragment shader
   */
  frag: '\n    precision mediump float;\n\n    varying vec2 v_position;\n\n    void main() {\n      vec2 position = v_position.xy;\n\n      vec3 vColor = vec3(0.035, 0.07, 0.098) * (position.y + 0.4) * 1.2;\n      gl_FragColor = vec4(vColor, 1.0);\n    }\n  ',

attributes: {
    a_position: [[-1, -1], [1, -1], [-1, 1], [-1, 1], [1, -1], [1, 1]]
  },

var drawStars = regl({
  /**
   * Blend settings
   */
  blend: blendWithBackground,

/**
   * Depth settings
   */
  depth: {
    enable: false
  },

/**
   * The vertex shader
   */
  vert: '\n    precision mediump float;\n\n    attribute vec4 a_position;\n    attribute vec4 a_size;\n\n    uniform float u_dpi;\n    uniform float u_tick;\n    uniform float u_image_clip_x;\n    uniform float u_image_clip_y;\n    uniform vec2 u_mouse;\n\n    vec2 clip(vec2 position) {\n      position.x = position.x * (2.0 - (2.0 * u_image_clip_x)) + u_image_clip_x - 1.0;\n      position.y = position.y * (2.0 - (2.0 * u_image_clip_y)) + u_image_clip_y - 1.0;\n      return position;\n    }\n\n    vec2 depth(vec2 position) {\n      vec2 intensity = vec2(0.01, 0.002);\n      return position + (intensity * u_mouse);\n    }\n\n    vec2 movement(vec2 position) {\n      float xRate = -0.0002;\n      float yRate = 0.00007;\n      return position + vec2(xRate * u_tick, yRate * u_tick) * u_dpi;\n    }\n\n    vec2 repeat(vec2 position) {\n      position = (position + 1.0) / 2.0;\n      position = fract(position);\n      position = (position * 2.0) - 1.0;\n      return position;\n    }\n\n    void main() {\n      vec2 position = a_position.xy;\n      position = depth(clip(position));\n      position = movement(position);\n      position = repeat(position);\n\n      gl_PointSize = 1.0 + (a_size.x * 2.0);\n      gl_Position = vec4(position, 0.0, 1.0);\n    }\n  ',

frag: '\n    precision mediump float;\n\n    void main() {\n      if (length(gl_PointCoord.xy - 0.5) > 0.5) {\n        discard;\n      }\n\n      gl_FragColor = vec4(1.0, 1.0, 1.0, 0.7);\n    }\n  ',

attributes: {
    a_position: {
      buffer: pointBuffer,
      stride: VERT_SIZE,
      offset: 0
    },
    a_size: {
      buffer: pointBuffer,
      stride: VERT_SIZE,
      offset: 8
    }
  },

uniforms: {
    u_dpi: window.devicePixelRatio || 1,
    u_image_clip_x: regl.prop('imageClipX'),
    u_image_clip_y: regl.prop('imageClipY'),
    u_tick: regl.context('tick'),
    u_mouse: regl.prop('mousePosition')
  },

primitive: 'points'
});

var drawPalms = regl({
  /**
   * Blend settings
   */
  blend: blendWithBackground,

/**
   * Depth settings
   */
  depth: {
    enable: false
  },

/**
   * The fragment shader
   */
  frag: '\n    precision mediump float;\n\n    #define PI 3.14159265359\n\n    varying vec2 v_position;\n    uniform float u_tick;\n    uniform sampler2D u_image;\n    uniform sampler2D u_maps;\n    uniform float u_image_clip_x;\n    uniform float u_image_clip_y;\n    uniform float u_dpi;\n    uniform vec2 u_resolution;\n\n    vec2 clip(vec2 position) {\n      position.x = position.x * (1.0 - (2.0 * u_image_clip_x)) + u_image_clip_x;\n      position.y = position.y * (1.0 - (2.0 * u_image_clip_y)) + u_image_clip_y;\n      return position;\n    }\n\n    vec2 pixel() {\n      return vec2(1.0 * u_dpi) / u_resolution;\n    }\n\n    float wave(float x, float freq, float speed){\n      return sin(x * freq + ((u_tick * (PI / 2.0)) * speed));\n    }\n\n    vec2 waves(vec2 position) {\n      float mask = texture2D(u_maps, position).b;\n\n      vec2 intensity = vec2(0.7, 0.4) * pixel();\n\n      vec2 waves = vec2(\n        wave(position.y, 19.0, 0.035),\n        wave(position.x, 10.0, 0.05)\n      );\n\n      return position + (waves * intensity * mask);\n    }\n\n    void main() {\n      vec2 position = clip(v_position.xy);\n\n      float mask = 1.0 - texture2D(u_maps, position).r;\n      vec2 turbulence = waves(position);\n      vec4 color = texture2D(u_image, turbulence) * mask;\n\n      gl_FragColor = vec4(color.rgb, mask);\n    }\n  ',

attributes: {
    a_position: [[-1, -1], [1, -1], [-1, 1], [-1, 1], [1, -1], [1, 1]]
  },

uniforms: {
    u_image: palmsImageTexture,
    u_maps: palmsImageMapsTexture,
    u_image_clip_x: regl.prop('imageClipX'),
    u_image_clip_y: regl.prop('imageClipY'),
    u_dpi: window.devicePixelRatio || 1,
    u_tick: regl.context('tick'),
    u_resolution: function u_resolution(_ref) {
      var viewportWidth = _ref.viewportWidth,
          viewportHeight = _ref.viewportHeight;
      return [viewportWidth, viewportHeight];
    }
  },

regl.frame(function (_ref2) {
  var viewportWidth = _ref2.viewportWidth,
      viewportHeight = _ref2.viewportHeight;

regl.clear({
    color: [0, 0, 0, 1],
    depth: 1
  });

var clips = getClips(palmsImageTexture.width, palmsImageTexture.height, viewportWidth, viewportHeight);

drawBackground();

drawStars({
    imageClipX: clips.x,
    imageClipY: clips.y,
    mousePosition: mousePosition
  });

drawPalms({
    imageClipX: clips.x,
    imageClipY: clips.y
  });
});

var curve = function curve(v) {
  var p = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.8;
  return v == 0 ? 0 : Math.pow(Math.abs(v), p) * (v / Math.abs(v));
};

var smooth = function smooth() {
  var n = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 6;

var samples = [];
  return function (v) {
    samples = samples.concat(v);
    if (samples.length > n) {
      samples = samples.slice(samples.length - n, samples.length);
    }

return samples.reduce(function (l, cur) {
      return l + cur;
    }) / samples.length;
  };
};

var isTouchDevice = 'ontouchstart' in document.documentElement;
var smoothX = smooth();
var smoothY = smooth();

/**
 * Listen to the mouse or device motion events
 */
if (!isTouchDevice) {
  window.addEventListener('mousemove', function (event) {
    mousePosition = [-curve(-1 + event.pageX / window.innerWidth * 2), -curve(-1 + event.pageY / window.innerHeight * 2)];
  });
}

if (isTouchDevice) {
  window.addEventListener('devicemotion', function (event) {
    mousePosition = [curve(smoothX(-event.accelerationIncludingGravity.x)) * 2, curve(smoothY(-event.accelerationIncludingGravity.y))];
  });
}

function getClips(imageWidth, imageHeight, containerWidth, containerHeight) {
  var clips = {
    x: 0,
    y: 0
  };

var imageRatio = imageWidth / imageHeight;
  var containerRatio = containerWidth / containerHeight;

if (imageRatio > containerRatio) {
    var scale = containerHeight / imageHeight;
    var width = imageWidth * scale;
    clips.x = Math.abs((containerWidth - width) / width / 2);
  } else {
    var _scale = containerWidth / imageWidth;
    var height = imageHeight * _scale;
    clips.y = Math.abs((containerHeight - height) / height / 2);
  }

return clips;
}

CSS

HTML

Recommendation

Join Effecthub.com