タイトル:梅雨（6月）

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

プログラミングコード

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

let cv;
let pg;

//雨の数
const num=50;
//雨の配列設定


//雨の数
const num=50;
//雨の配列設定
let rain;
let rains=[];

let katatumuri;



function setup(){

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

cv.parent("#myCanvas1");
angleMode(DEGREES);

//インスタンス作成
for(let i=0;i<num;i++){
rain=new Rain(random(-width,width),-height/2-random(height),10,10);
rains.push(rain);
}

}


function draw(){
//画面のクリア
clear()

//雨
for(let i=0;i<rains.length;i++){
rains[i].move();  //雨の動きメソッド
rains[i].show(); //雨の描画メソッド
}

}


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

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


/*********************************************
カタツムリクラス
**********************************************/

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

  this.vel=createVector(1,0).mult(1);
//位置とサイズ
  if(windowWidth>=820){
      this.pos=createVector(-pg.width/2+100,-pg.height/2+70);
      this.sizeX=1;
      this.sizeY=1;
  }else if(windowWidth < 820 && windowWidth>=450){
      this.pos=createVector(-pg.width/2-80,-pg.height/2+120);
      this.sizeX=0.8;
      this.sizeY=0.8;
  }else if(windowWidth < 450){
      this.pos=createVector(-pg.width/2+pg.width/2*1.3,-pg.height/2+pg.height/2);
      this.sizeX=0.5;
      this.sizeY=0.5;
  }

}

move(){
this.pos.add(this.vel);

if(this.pos.x < -width/2){
  this.vel.x=-this.vel.x;

  if(windowWidth>=820){
      this.sizeX=1;
  }else if(windowWidth < 820 && windowWidth>=450){
      this.sizeX=0.8;
  }else if(windowWidth < 450){
      this.sizeX=0.5;
  }

}else if(this.pos.x>width/2){
  this.vel.x=-this.vel.x;

  if(windowWidth>=820){
      this.sizeX=-1;
  }else if(windowWidth < 820 && windowWidth>=450){
      this.sizeX=-0.8;
  }else if(windowWidth < 450){
      this.sizeX=-0.5;
  }
}

}

//描画メソッド
show(){
  push ();
  translate (this.pos.x,this.pos.y);
  scale(this.sizeX,this.sizeY);
  pg.textAlign(CENTER, CENTER);
  rectMode(CENTER);
  pg.textSize(pg.width * 0.8);
  pg.text('🐌', pg.width / 2, pg.height / 2);

  noStroke();
  for (let i = 0; i < width; i +=5) {
  for (let j = 0; j < height; j +=5) {
  let c = pg.get(i, j);
  if(c[0]+c[1]+c[2]>150){
  fill(c[0],c[1],c[2],random(100,255));
  ellipse(i,j,5);
  }
  }
  }
  translate (-this.pos.x,-this.pos.y);
  pop ()
}
}



/************************************/
/***************雨クラス*******************/
/************************************/

class Rain{
//コンストラクタ
constructor(x,y,vx,vy){
this.pos=createVector(x,y);
this.vel=createVector(vx,vy).mult(5);
this.length=random(50,100)  //雨の線の長さ
}

//雨の動作メソッド
move(){
this.pos.add(this.vel);
//雨が地面に到達したときの処理
if(this.pos.y>height/2-30){
stroke(200,200,200,100);
fill(200,200,200,100);

//雨の反射（画面サイズごとに変更）
if(windowWidth>=820){
ellipse(this.pos.x,this.pos.y-10,20,10);
}else if(windowWidth<820 && windowWidth>=450){
ellipse(this.pos.x,this.pos.y,20,10);
}else if(windowWidth<450){
ellipse(this.pos.x,this.pos.y+15,15,5);
}

//再度雨を降らせる
this.pos.x=random(-width,width);
this.pos.y=-height/2-random(height);
}

}

//雨の描画メソッド
show(){
push();
stroke(200,200,255,150);
translate(this.pos.x,this.pos.y)
line(0,0,this.length,this.length);
translate(-this.pos.x,-this.pos.y)
pop();
}

}