scatter multiple images randomly within the canvas

We are currently working on an animation to make fallen leaves fall using the website below.

I tried to make cherry blossoms fall in Canvas|Oto Co., Ltd.|Staff Blog

I learned from the example on this site that I could move one kind of fallen leaves, but
In addition, I would like to randomly display images of several different leaves.

Example) leaf1.svg, leaf2.svg, leaf3.svg
(One image for site example)

The current code is as follows:

"·I do not use the ""cloud movement"" on the reference site, so I omit it."
·I have modified the canvas size a little.

var canvas= document.getElementById("canvas");
var container= document.getElementById('canvas_wrap');
varctx=canvas.getContext("2d");
sizing();
varimgCnt = 15;
variableImg=[];
variableCloud=[];
varcvsw = $(window).width();
varcvsh=$(window).height();
varimgBaseSizeW=15;
varimgBaseSizeH=20;
var aspectMax = 2;
var expectMin = 1;
var speedMax = 4;
var speedMin = 2;
variableAdd = 100;
var window = 200;
var newWind=20;
var windMax = 10;
varwindMin=5;
varimg = new Image();
img.src="resource/images/common/leaf.svg";
img.onload=flow_start;

function sizing() {
    canvas.height = container.offsetHeight;
    canvas.width = container.offsetWidth;
}


function setImagas(){
  var expect = 0;
  for(vari=0;i<imgCnt;i++){
     expect=Math.random()*(aspectMax-aspectMin)+aspectMin;
    US>aryImg.push({
      "posx": Math.random()*cvsw,
      "posy"—Math.random()*cvsh,
      "sizew": imgBaseSizeW*aspect,
      "sizeh": imgBaseSizeH*aspect,
      "speedy": Math.random()*(speedMax-speedMin) + speedMin,
      "angle": Math.random()*360,
    });
  }
}

varidx = 0;
varidxc = 0;
varcos = 0;
varsin = 0;
varrad = Math.PI/180;

function flow() {
  ctx.clearRect(0,0,cvsw,cvsh);
  for (idx=0; idx<imgCnt;idx++){
    aaryImg[idx].posx+=wind/aryImg[idx].sizew;
    aaryImg[idx].posy+=aryImg[idx].speedy;
    (idx%2) ? aaryImg[idx].angle+=1:aryImg[idx].angle-=1;
    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(img,0,0,aryImg[idx].sizew,aryImg[idx].sizeh);
    ctx.setTransform(1,0,0,1,0,0);
    if(aryImg[idx].posy>=cvsh){
      aaryImg[idx].posy=-aryImg[idx].sizeh;
      if(imgCnt<idx){
        aaryImg.splice(idx,1);
      }
    }
    if(aryImg[idx].posx>=cvsw){
      aaryImg[idx].posx=-aryImg[idx].sizew;
      if(imgCnt<idx){
        aaryImg.splice(idx,1);
      }
    }
  }
}

function windowChange(){
  newWind=Math.random()*(windMax-windMin)+windMin;
  setInterval(function(){
    if(newWind!=wind){
      (newWind>wind)?wind+=0:wind-=0;
    }
  },100);
}

function flow_start(){
  setImagas();
  setInterval (flow, 10);
}

What I've looked into and tried

The designated part of the image is

img.src="resource/images/common/leaf.svg";

The drawing part of the image in canvas is

ctx.drawImage(img,0,0,aryImg[idx].sizew,aryImg[idx].sizeh);

I think so, so I thought I might use the variable img here or do something with Math.random, but it doesn't work.
Please tell me how you can make it happen.Thank you for your cooperation.

javascript html5-canvas

2022-09-30 17:05

1 Answers

DrawImage draws images from img, so I think the method is correct.
If you have img in an array, you can draw using a variety of images as follows:

ctx.drawImage(img[idx%img.length], 0,0,aryImg[idx].sizew,aryImg[idx].sizeh);

If you want to use images at random, I think it's better to use them at random when you make an arrangement of img.

var canvas= document.getElementById("canvas");
var container= document.getElementById('canvas_wrap');
varctx=canvas.getContext("2d");
sizing();
varimgCnt = 15;
variableImg=[];
variableCloud=[];
varcvsw = $(window).width();
varcvsh=$(window).height();
varimgBaseSizeW=15;
varimgBaseSizeH=20;
var aspectMax = 2;
var expectMin = 1;
var speedMax = 4;
var speedMin = 2;
variableAdd = 100;
var window = 200;
var newWind=20;
var windMax = 10;
varwindMin=5;

varleafImages=[];
function addLeafImages (filename) {
  varimg = new Image();
  img.src=filename;
  img.onload=flow_start;
  leafImages.push(img);
}
addLeafImages("https://upload.wikimedia.org/wikipedia/commons/a/a8/Cannabis_leaf.svg");
addLeafImages("https://upload.wikimedia.org/wikipedia/commons/f/fd/Maple_Leaf.svg");

function sizing() {
    canvas.height = container.offsetHeight;
    canvas.width = container.offsetWidth;
}


function setImagas(){
  var expect = 0;
  for(vari=0;i<imgCnt;i++){
     expect=Math.random()*(aspectMax-aspectMin)+aspectMin;
    US>aryImg.push({
      "posx": Math.random()*cvsw,
      "posy"—Math.random()*cvsh,
      "sizew": imgBaseSizeW*aspect,
      "sizeh": imgBaseSizeH*aspect,
      "speedy": Math.random()*(speedMax-speedMin) + speedMin,
      "angle": Math.random()*360,
    });
  }
}

varidx = 0;
varidxc = 0;
varcos = 0;
varsin = 0;
varrad = Math.PI/180;

function flow() {
  ctx.clearRect(0,0,cvsw,cvsh);
  for (idx=0; idx<imgCnt;idx++){
    aaryImg[idx].posx+=wind/aryImg[idx].sizew;
    aaryImg[idx].posy+=aryImg[idx].speedy;
    (idx%2) ? aaryImg[idx].angle+=1:aryImg[idx].angle-=1;
    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%leafImages.length], 0, 0, aryImg[idx].sizew, aryImg[idx].sizeh);
    ctx.setTransform(1,0,0,1,0,0);
    if(aryImg[idx].posy>=cvsh){
      aaryImg[idx].posy=-aryImg[idx].sizeh;
      if(imgCnt<idx){
        aaryImg.splice(idx,1);
      }
    }
    if(aryImg[idx].posx>=cvsw){
      aaryImg[idx].posx=-aryImg[idx].sizew;
      if(imgCnt<idx){
        aaryImg.splice(idx,1);
      }
    }
  }
}

function windowChange(){
  newWind=Math.random()*(windMax-windMin)+windMin;
  setInterval(function(){
    if(newWind!=wind){
      (newWind>wind)?wind+=0:wind-=0;
    }
  },100);
}

var flowStartCount = 0;
function flow_start(){
  flowStartCount+=1;
  if(leafImages.length<=flowStartCount){
    setImagas();
    setInterval (flow, 10);
  }
}

#canvas_wrap{
       background-color:#000;
       width —500px;
       height —200px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<divid="canvas_wrap">
<canvas id="canvas"></canvas>
</div>

2022-09-30 17:05

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656