タイトル:蛍（8月）

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

プログラミングコード

   
   
/******************
 * 変数設定
 *******************/

//蛍
let num=50;
let firefly;
let fireflies=[];

//川
let river;

function setup(){

    //描画するキャンバス設定
    //responsible用
    if(windowWidth>=820){
     cv=createCanvas(970,500,WEBGL);
    }else if(windowWidth < 820 && windowWidth>=450){
     cv=createCanvas(windowWidth,500,WEBGL);
    }else if(windowWidth < 450){
     cv=createCanvas(windowWidth,220,WEBGL);
    }

    cv.parent('#myCanvas1');
    colorMode(HSB,255,100,100,100);

    //蛍のインスタンス
    for(let i=0;i < num;i++){
    firefly=new Firefly(random(-width,width),random(-height,height),random(-1,1),random(-1,1));
    fireflies.push(firefly);
    }
}

function draw(){
    //画面クリア
    clear();
    //座標移動
    translate (width/2,height/2);
    //背景色
    background(0,0,0,65);

    //蛍の描画
    for(let b of fireflies){
    b.move();  //蛍の動作メソッド
    b.show();  //蛍の描画メソッド
    }


    //天の川
      river=new River();
      river.show();

}

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



/*********************************************
川クラス
**********************************************/

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

if(windowWidth>=820){
 this.pos=createVector(0,-70);
}else if(windowWidth < 820 && windowWidth>=450){
 this.pos=createVector(0,0);
}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);
 
    noFill();
    stroke(200,random(100,255),random(255),random(0,55));
    
    angleMode(DEGREES);


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

     endShape();

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


/*****************/
/*蛍クラス*/
/*****************/

class Firefly{
 //コンストラクタ
  constructor(x,y,vx,vy){
    this.pos=createVector(x,y);
    this.vel=createVector(vx,vy).mult(1);
  //飛ぶ範囲のランダム設定
    this.w=random(width);  
    this.h=random(height);
    this.time=random(360);  //蛍の光のタイミング

  }

  //蛍の動作メソッド
  move(){
    this.pos.add(this.vel);
    
    //ふわふわ動かす
    this.pos.x=this.pos.x+random(-0.5,0.5)*sin(360*noise(frameCount));
    this.pos.y=this.pos.y+random(-0.5,0.5)*cos(360*noise(frameCount));
  
    //端に来たら反転
    if(this.pos.x <= -this.w || this.pos.x >= this.w){
      this.vel.x=(-1)*(this.vel.x);
    }

    if(this.pos.y <= -this.h || this.pos.y >= this.h){
      this.vel.y=(-1)*(this.vel.y);
    }
  
  }
//蛍の描画
  show(){
    push ();
    noStroke();
    colorMode(HSB, 360, 100, 100, 100);
    fill(70, 100, 100, 100);
    translate (this.pos.x,this.pos.y);
    //ほたるの光
    ellipse(0,0,10*sin(frameCount/100+this.time)*sin(frameCount/1000+this.time));
    translate (-this.pos.x,-this.pos.y);
    pop ();
  }

}