タイトル：春の蝶々(4月）

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

プログラミングコード

   
//蝶の数
const num=10;
//蝶の配列
let butterfly;
let butterflys=[];
//蝶の色の設定
let col=["red","green","blue"];


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);
rectMode(CENTER);

frameRate(200);

//蝶のインスタンス作成
for(let i=0;i<num;i++){
butterfly=new Butterfly(random(width/2),random(height/2),random(0.05,0.2),col[i%3],random(360));
butterflys.push(butterfly);
}

}



function draw(){
//画面クリア設定
background(0,0,0,0);

//木の位置（デバイスサイズごとに変更）
if(windowWidth>=820){
translate(-400,0,-300);
}else if(windowWidth<820 && windowWidth>=450){
translate(-200,-50,-250);
}else if(windowWidth<450){
translate(-300,30,-1600);
}


//蝶の配置
for(let i=0;i<num;i++){
butterflys[i].move(); //moveメソッド呼出し
butterflys[i].show(); //showメソッド呼出し
butterflys[i].area(); //areaメソッド呼出し
}



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

//木の枝　branch関数呼び出し(数値で木の枝変化)
branch(100);

}

//ブラウザ幅を変更したときの設定
function windowResized() {
if(windowWidth>=820){
resizeCanvas(970, 430);
}else if(windowWidth<820){
resizeCanvas(windowWidth, 430);
}
}


//蝶のクラス
class Butterfly{
constructor(x,y,size,c,delta){
this.pos=createVector(x,y);
this.vel=createVector(random(20),random(20)).mult(1,1);
this.angle=random(10,360);
this.flingWidth=150;  //羽の幅
this.size=size; //蝶のサイズ
this.c=c; //カラー
this.delta=delta;
this.speed=10;
}


//蝶の動きメソッド
move(){
//頭の角度
this.angle=this.angle+random(-10,10);
//回転方向
this.vel.x=15*cos(this.angle-90);
this.vel.y=15*sin(this.angle-90);
this.pos.add(this.vel);

}


//画面からはみ出ると１８０度反転
area(){
if(this.pos.x>width/2+400 ||this.pos.x<-width/2+400||this.pos.y>height/2-100||this.pos.y<-height/2-100){
this.angle=this.angle+180;

}
}


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

push();
beginShape();
noStroke();

translate(this.pos.x,this.pos.y,sin(frameCount));
scale(this.size);
rotate(this.angle);

rotateY(frameCount);
fill(this.c);

//胴体部分の描画
rect(0,0,10,100,20);
endShape();

//触覚右
beginShape();
stroke(this.c,0,0);
vertex(0,-50);
bezierVertex(10,-100,15,-100,20,-100);
endShape();

//触覚左
beginShape();
stroke(this.c,0,0);
vertex(0,-50);
bezierVertex(-10,-100,-15,-100,-20,-100);
endShape();

//蝶の色変化
let r=abs(sin(frameCount+45+this.delta)*255);
let g=abs(sin(frameCount+90+this.delta)*255);
let b=abs(sin(frameCount+135+this.delta)*255);

//右側の羽
beginShape();
fill(r,g,b);
noStroke();

vertex(5,-25);
bezierVertex(200,-200,random(-this.flingWidth,this.flingWidth),200,100,random(-this.flingWidth,this.flingWidth),50,0,0);
vertex(50,0);
bezierVertex(155,95,random(-this.flingWidth,this.flingWidth),20,120,random(-this.flingWidth,this.flingWidth),5,25,0);
endShape();
//pop();


//左側の羽
beginShape();
fill(r,g,b);
noStroke();

vertex(-5,-25);
bezierVertex(-200,-200,random(-this.flingWidth,this.flingWidth),-200,100,random(-this.flingWidth,this.flingWidth),-50,0,0);
vertex(-50,0);
bezierVertex(-155,95,random(-this.flingWidth,this.flingWidth),-20,120,random(-this.flingWidth,this.flingWidth),-5,25,0);
endShape();
pop();
}

}


//木の部分
function branch(len){

//ambientMaterial(255, 200, 25); //緑色を含む
if(len>30){
//木の右半分
push();
stroke(100,50,50);
strokeWeight(map(len,7,100,1,15)) ;  //先端にいくほど枝を細くする
rotate(map(mouseX,0,width,60,40)) ; //マウスで木が動く
line(0,0,0,-len);
translate(0,-len);
branch(0.75*len);
pop();
//木の左半分
push();
stroke(100,50,50);
strokeWeight(map(len,7,100,1,15)) ;   //先端にいくほど枝を細くする
rotate(map(mouseY,0,width,-50,-30)) ; //マウスで木が動く
line(0,0,0,-len);
translate(0,-len);
branch(0.75*len);
pop();
}else{

//葉っぱの部分
beginShape();
fill(200,240,100);  //葉っぱの色
strokeWeight(1);
let rad = 20;
for (let i = 45; i < 135; i++) {
let x = rad * cos(i);
let y = rad * sin(i);
vertex(x, y);
}
for (let i = 135; i > 45; i--) {
let x = rad * cos(i);
let y = rad * sin(-i) + 20;
vertex(x, y);
}
endShape(CLOSE);
}

}