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.
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>
© 2024 OneMinuteCode. All rights reserved.