タイトル:紅葉（11月）

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

プログラミングコード

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


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);
}

frameRate(200);

}


function draw(){
//背景
background(255,100,100,50);

//紅葉の設定
for(let i=0;i < maples.length;i++){
maples[i].move();  //紅葉の移動メソッド
maples[i].show();  //紅葉の描画メソッド
}

//紅葉の樹の配置（x,y,z）
if(windowWidth>=820){
translate(-500,100,-500);
}else if(windowWidth < 820 && windowWidth>=450){
translate(-300,100,-500);
}else if(windowWidth < 450){
translate(-300,150,-1500);
}

//木の根っこ
push();
stroke(100,50,50);
strokeWeight(20);
line(0,0,0,height/2);
translate(0,height/2);
pop();

branch(50);

}


/*********************************************
ブラウザ幅を変更したときのキャンバスサイズ再設定
**********************************************/

function windowResized() {
if(windowWidth>=820){
resizeCanvas(970, 430);
}else if(windowWidth < 820){
resizeCanvas(windowWidth, 430);
}
}

/******************
* 舞う紅葉クラス
*******************/

class Maple {
//コンストラクタ
constructor(x,y,col){
this.pos=createVector(x,y);
this.vel=createVector(0,random(5,10)).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();
}

}

/******************
* 紅葉の木関数
*******************/
function branch(len){

//ambientMaterial(255, 200, 225); //緑色を含む
if(len>20){
//木の右半分
push();
stroke(100,50,50);
strokeWeight(map(len,7,100,1,15));
rotate(map(sin(frameCount*30),-1,1,45,55));
line(0,0,0,-len);
translate(0,-len);
branch(0.8*len);
pop();
//木の左半分
push();
stroke(100,50,50);
strokeWeight(map(len,7,100,1,15));
rotate(map(sin(frameCount*30),-1,1,-45,-55));
line(0,0,0,-len);
translate(0,-len);
branch(0.8*len);
pop();
}else{


//葉っぱの部分
push();
scale(0.2);

//葉っぱの部分（右半分）
beginShape();
strokeWeight(1);
stroke(100,0,0);
fill(255,100,0,80);
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();
pop();
}

}