タイトル:ひな祭り（3月）

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

プログラミングコード

   

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

//インスタンス
let pair,ume,ball,flower;

//玉の配列
let num1=1;
let balls=[];

//flower用変数
let num2=1;
let flowers=[];
let n,d,r;

//梅の表示周期用変数
let angle=0;
let freq;

//キャンバス変数
let cv,pg,pg2;


/******************
* setup
*******************/

function setup(){

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

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

//インスタンス設定
pair=new Pair();   //ペア
ume=new Ume();    //梅

//玉
for(let i=0;i < num1;i++){
ball=new Ball();
balls.push(ball);
}

//フラワー関数
flower=new Flower();
}


/******************
* draw
*******************/

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

//ペアーメソッド
pair.show(); 
ume.show();


//梅の表示、非表示周期
freq=sin(angle);
angle+=1

if(freq>0){
// if(random(1)>0.9){
for(let i=0;i < num1;i++){
ball=new Ball();
balls.push(ball);
}
// }
}

for(let i=0;i < balls.length;i++){
if(!balls[i].remove()){
balls[i].move();
balls[i].show();
}else{
balls.splice(i,1);
}

}

//フラワー関数表示
flower.show();

}


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

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


/*********************************************
フラワークラス（背景の花）
**********************************************/

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

//位置とサイズ設定
if(windowWidth>=820){
this.pos=createVector(0,0);
this.size=1;
}else if(windowWidth < 820 && windowWidth>=450){
this.pos=createVector(0,0);
this.size=1;
}else if(windowWidth < 450){
this.pos=createVector(0,10);
this.size=0.3;
}
}

show(){
//フラワーの描画切り替え
let A=sin(frameCount);

if(A>0){
n=100*sin(frameCount/50);
d=frameCount/100;
r=150;
}else if(A < 0){
n=100*sin(frameCount/100);
d=frameCount/120;
r=150;
}
//フラワー関数設定
push ();
translate (this.pos.x,this.pos.y);
scale(this.size);
rotate (frameCount)
stroke(255*sin(frameCount),255*cos(frameCount),255*sin(frameCount),random(100,255));
noFill();
//フラワー関数
beginShape();
for(let i=0;i < 360*d;i+=1){
let rad=r*sin(i*(n/d));
let x=rad*cos(i);
let y=rad*sin(i);
vertex(x,y);
}

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




/*********************************************
玉クラス
**********************************************/

class Ball{
//コンストラクタ
constructor(){
//位置とサイズ
this.pos=createVector(0,0);
this.vel=p5.Vector.random3D().mult(1);
this.R=random(100,255);
this.G=random(100,255);
this.B=random(100,255);

if(windowWidth>=820){
this.origin=createVector(-180,-100,0);
this.size=random(1,5);
}else if(windowWidth < 820 && windowWidth>=450){
this.origin=createVector(-300,-80,0);
this.size=random(1,5);
}else if(windowWidth < 450){
this.origin=createVector(-100,-40,0);
this.size=random(1,3);
}
}
//動作メソッド
move(){
this.pos.add(this.vel);

}

//配列除去メソッド
remove(){
if(dist(this.pos.x+this.origin.x,this.pos.y+this.origin.y,this.pos.z+this.origin.z,this.origin.x,this.origin.y,this.origin.z)>random(400)){
return true;
}else{
return false;
}
}

//描画メソッド
show(){
push ();
translate (this.pos.x+this.origin.x,this.pos.y+this.origin.y);
scale(this.size);
noStroke();
fill(this.R,this.G,this.B,random(255));
ellipse(this.pos.x,this.pos.y,5);
translate (-this.pos.x-this.origin.x,-this.pos.y-this.origin.y);
pop ()
}
}



/*********************************************
ペアークラス（ひな人形）
**********************************************/

class Pair{
//コンストラクタ
constructor(){
//位置とサイズ
if(windowWidth>=820){
this.pos=createVector(-pg.width/2,-pg.height/2+70);
this.size=1;
}else if(windowWidth < 820 && windowWidth>=450){
this.pos=createVector(-pg.width/2-80,-pg.height/2+120);
this.size=0.8;
}else if(windowWidth < 450){
this.pos=createVector(-pg.width/2+pg.width/2*0.2,-pg.height/2+pg.height/2*0.8);
this.size=0.8;
}
}


//描画メソッド
show(){
push ();
translate (this.pos.x,this.pos.y);
scale(this.size);
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]>100){
fill(c[0],c[1],c[2],random(100,255));
ellipse(i,j,5);
}
}
}
translate (-this.pos.x,-this.pos.y);
pop ()
}
}



/*********************************************
梅クラス
**********************************************/

class Ume{
//コンストラクタ
constructor(){
//位置サイズ設定
if(windowWidth>=820){
this.pos=createVector(-pg2.width+pg.width*0.08,-pg2.height/2-pg2.height/2*0.2);
this.size=0.5;
}else if(windowWidth < 820 && windowWidth>=450){
this.pos=createVector(-pg2.width-pg.width*0.2,-pg2.height/2-pg2.height/2*0.1);
this.size=0.5;
}else if(windowWidth < 450){
this.pos=createVector(-pg2.width+pg.width*0.1,-pg2.height/2-5);
this.size=0.5;
}

}

//梅の花表示メソッド
show(){
push ();
translate (this.pos.x,this.pos.y);
scale(this.size);
pg2.textAlign(CENTER, CENTER);
rectMode(CENTER);
pg2.textSize(pg2.width * 0.8);
pg2.text('🌺', pg2.width / 2, pg2.height / 2);

noStroke();
for (let i = 0; i < width; i +=8) {
for (let j = 0; j < height; j +=8) {
let c = pg2.get(i, j);
if(c[0]+c[1]+c[2]>200){
fill(c[0],c[1],c[2],freq*255);  //freqで表示非表示切り替え
ellipse(i,j,8);
}
}
}

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