<canvas id="canvas"></canvas>

body{
  background-image: url('https://dl.dropbox.com/s/gwsif91r20w9rer/fall.jpg?dl=0');
  background-size: cover;
}

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const imgCnt = 50;
const aryImg = [];
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const imgBaseSizeW = 60;
const imgBaseSizeH = 60;
const aspectMax = 1.5;
const aspectMin = 0.5;
const speedMax = 2;
const speedMin = 0.5;
const angleAdd = 4;

//画像の読み込み
const leafImages = [];
function addLeafImages(fileName) {
  let img = new Image();
  img.src = fileName;
  img.onload = flow_start;
  leafImages.push(img);
}

addLeafImages("https://illustimage.com/photo/dl/22204.png?20211031");
addLeafImages("https://illustimage.com/photo/dl/6100.png?20180712");
addLeafImages("https://illustimage.com/photo/dl/407.png?20160705");


//画像のパラメータ設定
function setImages() {
  aspect = 0;
  for (let i = 0; i < imgCnt; i++){
    aspect = Math.random()*(aspectMax-aspectMin)+aspectMin;
    aryImg.push({
      "posX": Math.random() * canvas.width,
      "posY": Math.random() * canvas.height,
      "sizeW": imgBaseSizeW * aspect,
      "sizeH": imgBaseSizeH*aspect,
      "speedY": Math.random() * (speedMax - speedMin) + speedMin,
      "angle": Math.random() * 360,
    });
  }
}

//描画パラメータの更新
function flow() {
  let idx = 0;
  let cos = 0;
  let sin = 0;
  let rad = Math.PI / 180;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let idx = 0; idx < imgCnt; idx++){
    aryImg[idx].posY += aryImg[idx].speedY;
    aryImg[idx].angle += Math.random() * angleAdd;
    cos = Math.cos(aryImg[idx].angle * rad);
    sin = Math.sin(aryImg[idx].angle * rad);
    ctx.setTransform(cos, sin, sin, cos, aryImg[idx].posX, aryImg[idx].posY);
    ctx.drawImage(leafImages[idx % 3], 0, 0, aryImg[idx].sizeW, aryImg[idx].sizeH);
    

    ctx.setTransform(1, 0, 0, 1, 0, 0);
    if (aryImg[idx].posY >= canvas.height) {
      aryImg[idx].posY = -aryImg[idx].sizeH;
    }
  }
}


//requestAnimationFrameを使うと早すぎるのでsetIntervalを使用
function flow_start() {
  setImages();
  setInterval(flow,50);
}