タイトル:十五夜（9月）

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

プログラミングコード

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

//月用変数
let r=80;      //月の半径
let waves=[];  //波の配列設定
let num=5;     //波の数
let step=10;   //波の間隔
let pg;        //ウサギ用キャンバス

//雲の変数
let cloud;
let clouds=[];
let cloud_num=3;

//ススキ
let susukiImg;

/******************
* 画像読み込み
*******************/

function preload(){

susukiImg=loadImage('susuki.png'); //ススキの画

}


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,220,WEBGL);
pg=  createGraphics(300,300);
}

cv.parent("#myCanvas1");

angleMode(DEGREES);


// cloud=new Cloud();

//waveのインスタンス設定
for(let i=0;i < num;i++){
waves[i]=new Wave(i*step);
}

//cloudのインスタンス設定
for(let i=0;i < cloud_num;i++){
cloud=new Cloud();
clouds.push(cloud);
}

}


function draw(){
//背景
clear ();
background(0,0,0,150);


//月のメソッド
for(let i=0;i < num;i++){
waves[i].show();
waves[i].move();
}


//雲のメソッド
for(let i=0;i < clouds.length;i++){
clouds[i].show();
clouds[i].move();
}

//ススキの配置
if(windowWidth>=820){
image(susukiImg,-450,-100,400,400);
}else if(windowWidth < 820 && windowWidth>=450){
image(susukiImg,-450,-150,400,400);
}else if(windowWidth < 450){
image(susukiImg,-230,-80,200,200);
}


}



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

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


/*********************************************
Cloudクラス (雲の動き)
**********************************************/
class Cloud{

constructor(){
//雲の初期位置,速度
this.pos=createVector(random(-width/2,width/2),random(-height/2,0));
this.vel=createVector(random(-1,1),0).mult(2,4);
//雲の形状パラメータ
this.numX=floor(random(30,300));
this.numY=floor(random(10,20));

//雲のサイズ
if(windowWidth>=820){
this.size=1;
}else if(windowWidth < 820 && windowWidth>=450){
this.size=0.8;
}else if(windowWidth < 450){
this.size=0.5;
}

}

//雲の動きメソッド

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

if(this.pos.x>width/2 || this.pos.x<-width/2){
this.vel=createVector(random(-1,1),0).mult(2,4);
this.numX=floor(random(30,300));
this.numY=floor(random(10,20));

if(this.vel.x>0){
this.pos.x=-width/2;
}else if(this.vel.x < 0){
this.pos.x=width/2;
}else{
this.vel=createVector(random(-1,1),0).mult(2,4);
}
}
}

//雲の描画メソッド

show(){
push ();
translate(this.pos.x,this.pos.y);
scale (this.size);
noStroke();
fill(100,100,100,50);
let f=frameCount*2;  //雲の盛り上がり速度

for(let y=0;y < this.numY;y+=1){
for(let x=0;x < this.numX;x+=10){
circle (x+this.pos.x,y+50*noise(x,y),max(20,50-abs(x-f*noise(y)*10%1e3)/10));
}
}

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


}



/*********************************************
waveクラス (月の中の波形の動き)
**********************************************/

class Wave{
//コンストラクター
constructor(shift){

this.pos=createVector(-width/3,-height/4);  //全体位置
//波の動きのパラメータ
this.shift=shift; 
this.angle=0;
this.movement=0;
this.period=3;

//雲のサイズ
if(windowWidth>=820){
this.size=1;
}else if(windowWidth < 820 && windowWidth>=450){
this.size=0.8;
}else if(windowWidth < 450){
this.size=0.5;
}

}


move(){
this.angle+=10;
this.movement=1+cos (this.angle);
}

//月の描画
show(){

push ();
translate (this.pos.x,this.pos.y);
scale(this.size);
push();
//月
noStroke();
fill (255,255,random(255),5);
ellipse(0,0,r*2,r*2);
pop ();

//ウサギ
push();
translate (-width/7,-height/3);
pg.textAlign(CENTER, CENTER);
rectMode(CENTER);
pg.textSize(pg.width * 0.3);
pg.text('🐇', pg.width / 2, pg.height / 2);
noStroke();
for (let i = 0; i < width; i +=8) {
for (let j = 0; j < height; j +=8) {
let c = pg.get(i, j);
if(c[0]+c[1]+c[2]>100){
fill(c[0],c[1],c[2]);
ellipse(i,j,4);
}
}
}
pop();


//波の描画
push ();
fill(150,150,random(0,150),250);
for(let i=0;i < 360;i+=5){
let x=map(i,0,360,-r,r);
let amp=r*sqrt (1-pow ((x/r),2));
let y=amp*sin ((i+this.angle+this.shift*this.movement)*this.period);
ellipse(x,y,3,3);
}
pop ();

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

}

}