const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const imgCnt = 20;
const aryImg = [];
canvas.width = window.innerWidth;
const w = canvas.width;
canvas.height = window.innerHeight;
const h = canvas.height;
const imgBaseSizeW = 30;
const imgBaseSizeH = 33;

//aspect
const aspectMax = 2.5;
const aspectMin = 0.5;

//speed
const speedMax = 4;
const speedMin = 1;

//angle
const angleAdd = 3;

//画像の読み込み
let img = new Image();
img.src = "https://drive.google.com/uc?export=view&id=1OJ7vp-KjCF7HHZYdrAzCQu41xlkDDZ4O";
img.onload = flow_start;

//画像のパラメーターを設定
function setImages() {
    let aspect = 0;
    for (let i = 0; i < imgCnt; i++) {

        //アスペクト比をランダムで生成
        aspect = Math.random() * (aspectMax - aspectMin) + aspectMin;

        aryImg.push({
            x: Math.random() * w,
            y: Math.random() * h,
            sw: imgBaseSizeW * aspect, //画像の横
            sh: imgBaseSizeH * aspect, //画像の縦
            sp: Math.random() * (speedMax - speedMin) + speedMin,
            an: Math.random() * 180,
        });
    }
}

//描画、パラメータの更新
let i = 0;
let cos = 0;
let sin = 0;
let rad = Math.PI / 270;

function flow() {
    ctx.clearRect(0, 0, w, h);
    for (i = 0; i < imgCnt; i++) {
        aryImg[i].y += aryImg[i].sp;
        aryImg[i].an += Math.random() * angleAdd;

        cos = Math.sin(aryImg[i].an * rad);
        sin = Math.cos(aryImg[i].an * rad);

        ctx.setTransform(cos, sin, sin, cos, aryImg[i].x, aryImg[i].y);
        ctx.drawImage(img, 0, 0, aryImg[i].sw, aryImg[i].sh);
        ctx.setTransform(1, 0, 0, 1, 0, 0);

        //範囲外に描画された画像を上に戻す
        if (aryImg[i].y >= h) {
            aryImg[i].y = -aryImg[i].sh;
        }
    }
}

function flow_start() {
    setImages();
    setInterval(flow, 10);

}