HOME  >   HTML5 CANVAS  >   How to Make HTML5 Canvas Golden Swirl Animation
How to Make HTML5 Canvas Golden Swirl Animation
BY Howard30 Nov,2020

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
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;
function do_something_with_texture(tex) {
  texture = tex;
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  texture.minFilter = THREE.LinearFilter;