How HTML5 Canvas Realizes the Animation of Willow Branches Waving in the Wind

How HTML5 Canvas Realizes the Animation of Willow Branches Waving in the Wind: BY Charles4 Nov,2020; Tags:
HTML5 Canvas HTML5 Animation

Introduction

This is an animated special effect that uses HTML5 Canvas to simulate willow trees swaying in the wind. First of all, the simulation of willow branches and willow leaves is realized through CSS. Although it is not very realistic, this is not the focus of this animation. The point is that when we hover the mouse over the willow branches, it is like a breeze blowing over the willow branches and willow leaves. In the meantime, you can learn how to use HTML5 technology to implement animation on the Canvas drawing board.

How HTML5 Canvas Realizes the Animation of Willow Branches Waving in the Wind

Instructions

Css Code

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  user-select:none;
  background-color: #1D0D21;
  align-items: center;
  justify-content: center;
}
canvas {
  flex-shrink: 0;
  background-color: #222;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  object-fit: contain;
}

#message{
  color:white;
  font-family:sans-serif;
  position:absolute;
  left:50%;
  top:40%;
  transform:translate(-50%,-50%);
  text-align:center;
}
h1,h4{
  margin:0;
}
h1{
  font-size:10vmin;
}

h4{
 font-size:4vmin;
}

Js Code

function lerpColor(a, b, amount) {
  var ah = parseInt(a.replace(/#/g, ""), 16),
    ar = ah >> 16,
    ag = (ah >> 8) & 0xff,
    ab = ah & 0xff,
    bh = parseInt(b.replace(/#/g, ""), 16),
    br = bh >> 16,
    bg = (bh >> 8) & 0xff,
    bb = bh & 0xff,
    rr = ar + amount * (br - ar),
    rg = ag + amount * (bg - ag),
    rb = ab + amount * (bb - ab);

  return (
    "#" + (((1 << 24) + (rr << 16) + (rg << 8) + rb) | 0).toString(16).slice(1)
  );
}

const PI = Math.PI,
  TWO_PI = Math.PI * 2;

const Util = {};
Util.timeStamp = function() {
  return window.performance.now();
};
Util.random = function(min, max) {
  return min + Math.random() * (max - min);
};
Util.map = function(a, b, c, d, e) {
  return (a - b) / (c - b) * (e - d) + d;
};
Util.lerp = function(value1, value2, amount) {
  return value1 + (value2 - value1) * amount;
};
Util.clamp = function(value, min, max) {
  return Math.max(min, Math.min(max, value));
};

VIEW NOW