タイトル:青紅葉（10月）

使用言語:p5.js（Javascriptフレームワーク）

プログラミングコード

   

/******************
* 変数設定
*******************/
const num=10;
//紅葉格納配列
let maple;
let maples=[];
//紅葉の色配列
let col=[[150,200,10,80],[50,250,100,80],[200,200,100,80]];

//秋風
let wind;


function setup(){

//描画するキャンバス設定
//responsible用
if(windowWidth>=820){
cv=createCanvas(970,430,WEBGL);
}else if(windowWidth < 820 && windowWidth>=450){
cv=createCanvas(windowWidth,430,WEBGL);
}else if(windowWidth < 450){
cv=createCanvas(windowWidth,170,WEBGL);
}
cv.parent('#myCanvas1');


angleMode(DEGREES);
//インスタンス設定
for(let i=0;i < num;i++){
maple=new Maple(random(-width/2,width/2),-height/2-random(height/2),col[i%3]); 
maples.push(maple);
}

}


function draw(){
//画面クリア設定
clear();


//紅葉インスタンス
for(let i=0;i < maples.length;i++){
maples[i].move(); //紅葉の動作メソッド
maples[i].show(); //紅葉の描画メソッド
}

//秋風
wind=new Wind();
wind.show();

}

/*********************************************
ブラウザ幅を変更したときのキャンバスサイズ再設定
**********************************************/
function windowResized() {
if(windowWidth>=820){
resizeCanvas(970, 430);
}else if(windowWidth < 820){
resizeCanvas(windowWidth, 430);
}
}


/*********************************************
秋風クラス
**********************************************/

class Wind{
//コンストラクタ
constructor(){

if(windowWidth>=820){
this.pos=createVector(0,-70);
}else if(windowWidth < 820 && windowWidth>=450){
this.pos=createVector(0,-100);
}else if(windowWidth < 450){
this.pos=createVector(0,0);
}

this.vel=createVector(1,0).mult(1);
// this.vel=createVector(0,1).mult(1);

//サイズ（画面サイズによって変更）
this.size=10;
}

//秋風の描画
show(){
push();
translate(this.pos.x,this.pos.y);
scale(this.size);
rotate(10*sin(frameCount))

noFill();
stroke(random(100),random(100,255),random(255),random(0,55));

angleMode(DEGREES);

beginShape();
for(let j=1;j < 3;j++){

for(let i=-360;i < 360;i++){
this.pos.x=i/1.5*j
this.pos.y=5*sin(i+frameCount*10);
vertex(this.pos.x,this.pos.y)
vertex(this.pos.x+5*j,this.pos.y+0.1*sin(frameCount)+j*2)
}

}
endShape();     

translate(-this.pos.x,-this.pos.y);
pop();
}
}



/*********************************************
紅葉クラス
**********************************************/

class Maple {
//コンストラクタ
constructor(x,y,col){
this.pos=createVector(x,y);
this.vel=createVector(0,random(1.5,3.5)).mult(3);
this.col=col;
this.angle=180+random(180);
//紅葉のサイズ（画面サイズごとに変更）
if(windowWidth>=820){
this.size=0.3*random(0.6);
}else if(windowWidth < 820 && windowWidth>=450){
this.size=0.2*random(0.6);
}else if(windowWidth < 450){
this.size=0.1*random(0.6);
}
}

//動作メソッド
move(){

this.pos.add(this.vel);
this.pos.x=this.pos.x+2*sin(frameCount/5);

if(this.pos.y>height/2){
this.pos.x=random(-width/2,width/2);
this.pos.y=-height/2-random(height);
}

}

//描画メソッド
show(){

push();
translate(this.pos.x,this.pos.y);
scale(this.size);
rotate(this.angle+frameCount);
rotateY(this.angle+frameCount);
rotate(this.angle+frameCount);

/*紅葉右半分描画*/
beginShape();
fill(this.col);
vertex(0,100);
vertex(5,100);
vertex(5,25);
bezierVertex(5,25,50,100,100,100);
bezierVertex(100,100,100,50,80,20);
bezierVertex(80,20,100,50,200,0);
bezierVertex(200,0,150,-50,100,-50);
bezierVertex(100,-50,150,-100,150,-150);
bezierVertex(150,-150,50,-130,50,-80);
bezierVertex(50,-80,50,-130,0,-200);
endShape();

/*紅葉左半分描画*/
beginShape();
vertex(0,100);
vertex(-5,100);
vertex(-5,25);
bezierVertex(-5,25,-50,100,-100,100);
bezierVertex(-100,100,-100,50,-80,20);
bezierVertex(-80,20,-100,50,-200,0);
bezierVertex(-200,0,-150,-50,-100,-50);
bezierVertex(-100,-50,-150,-100,-150,-150);
bezierVertex(-150,-150,-50,-130,-50,-80);
bezierVertex(-50,-80,-50,-130,0,-200);
endShape();

//ライン部
beginShape();
stroke(0,0,0);
line(100,100,0,0);
line(200,0,0,0);
line(150,-150,0,0);
line(0,-200,0,0);
line(-100,100,0,0);
line(-200,0,0,0);
line(-150,-150,0,0);
endShape();

translate(-this.pos.x,-this.pos.y);
pop();
}

}