タイトル：彼岸(9月）

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

プログラミングコード

   

/******************
* 変数設定
*******************/
//赤とんぼ
let dragonflys=[];
const num=5;

//彼岸花
let higanbanaImg;

/******************
* 画像設定
*******************/

function preload(){
higanbanaImg=loadImage('higanbana.png');
}


/******************
* 初期設定
*******************/

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

//トンボ
for(let i=0;i < num;i++){
dragonfly=new Dragonfly();
dragonflys.push(dragonfly);
}

frameRate(24);

}

/******************
* 描画
*******************/
function draw(){

background(255,0,0,random(40,50));

//赤とんぼ
for(let i=0;i < num;i++){
dragonflys[i].show();
dragonflys[i].move();
dragonflys[i].area();
}

//画面クリア設定
image(higanbanaImg,-450,-50,300,300);

}


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


/************************
* Dragonfly（赤トンボ）
************************/
//蝶のクラス
class Dragonfly{
constructor(){
this.pos=createVector(random(-width/4,width/4),random(-height/4,height/4));  //初期位置
this.vel=createVector(0,0).mult (0.1,0.1);  //速度
this.size=0.15;       //サイズ
this.angle=90;        //角度
this.flingWidth=150;  //羽の幅0.1
}


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

//動作メソッド
area(){
if(this.pos.x>width/3 ||this.pos.x < -width/3){
this.angle=this.angle+180;
this.vel.x=-this.vel.x;
}

if(this.pos.y>height/4||this.pos.y < -height/4){
this.angle=this.angle+180;
this.vel.y=-this.vel.y;
}
}


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

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

//胴体
push();
noStroke();
fill(200,0,0);
rect(0,50,10,200,20);
pop();

//右目
push();
beginShape();
stroke(200,0,0);
circle(10,-50,20);
fill(0);
circle(10,-50,10);
endShape();
pop();

//左目
push();
beginShape();
stroke(200,0,0);
circle(-10,-50,20);
fill(0);
circle(-10,-50,10);
endShape();
pop();

//羽
push();
fill(255,255,255,100);
beginShape();
vertex(2,-20);
bezierVertex(2,-20,0,100,-40,0,180,-30,random(-this.flingWidth,this.flingWidth));
bezierVertex(180,-30,0,250,0,0,180,20,random(-this.flingWidth,this.flingWidth));
bezierVertex(180,20,0,100,40,0,-10,10,random(-this.flingWidth,this.flingWidth));
endShape(CLOSE);
pop(); 

push();
fill(255,255,255,100);
beginShape();
vertex(2,15);
bezierVertex(2,15,0,100,0,0,150,30,random(-this.flingWidth,this.flingWidth));
bezierVertex(150,30,0,180,50,0,150,70,random(-this.flingWidth,this.flingWidth));
bezierVertex(150,70,0,100,70,0,-10,30,random(-this.flingWidth,this.flingWidth));
endShape(CLOSE);
pop();

push();
beginShape();
fill(255,255,255,100);
vertex(-2,-20);
bezierVertex(-2,-20,0,-100,-40,0,-180,-30,random(-this.flingWidth,this.flingWidth));
bezierVertex(-180,-30,0,-250,0,0,-180,20,random(-this.flingWidth,this.flingWidth));
bezierVertex(-180,20,0,-100,40,0,10,10,random(-this.flingWidth,this.flingWidth));
endShape(CLOSE);
pop();

push();
beginShape();
fill(255,255,255,100);
vertex(-2,15);
bezierVertex(-2,15,0,-100,0,0,-150,30,random(-this.flingWidth,this.flingWidth));
bezierVertex(-150,30,0,-180,50,0,-150,70,random(-this.flingWidth,this.flingWidth));
bezierVertex(-150,70,0,-100,70,0,10,30,random(-this.flingWidth,this.flingWidth));
endShape(CLOSE);
pop();

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