How to Make HTML5 Canvas Golden Swirl Animation

How to Make HTML5 Canvas Golden Swirl Animation: BY Howard30 Nov,2020; Tags:
HTML5 Canvas HTML5 Animation

Introduction

HTML5 animation technology has been fully utilized on Canvas. We have also shared many animation effects based on HTML5 Canvas before. This time we bring you another super cool HTML5 Canvas golden vortex animation. The water waves in the vortex are very realistic.

How to Make HTML5 Canvas Golden Swirl Animation

Instructions

HTML Body Code

uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform float u_time;
  uniform sampler2D u_noise;
  
  #define PI 3.141592653589793
  #define TAU 6.283185307179586
  
  const int octaves = 2;
  const float seed = 43758.5453123;
  const float seed2 = 73156.8473192;
    
  float r1 = 0.2;
  float r2 = 0.9;
  
  vec2 cCis(float r);
  vec2 cLog(vec2 c); 
  vec2 cInv(vec2 c);
  float cArg(vec2 c);
  float cAbs(vec2 c);
  
  vec2 cMul(vec2 a, vec2 b);
  vec2 cDiv(vec2 a, vec2 b);

  vec2 cCis(float r)
  {
    return vec2( cos(r), sin(r) );
  }
  vec2 cExp(vec2 c)
  {
    return exp(c.x) * cCis(c.y);
  }
  vec2 cConj(vec2 c)
  {
    return vec2(c.x, -c.y);
  }

Css Code

body {
  margin: 0;
  padding: 0;
}

#container {
  touch-action: none;
}

Js Code

var container = void 0;
var camera = void 0,scene = void 0,renderer = void 0;
var uniforms = void 0;

var loader = new THREE.TextureLoader();
var texture = void 0;
loader.setCrossOrigin("anonymous");
loader.load(
'noise.png',
function do_something_with_texture(tex) {
  texture = tex;
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  texture.minFilter = THREE.LinearFilter;
  init();
  animate();
});

VIEW NOW