タイトル:正月（1月）

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

プログラミングコード

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

//font設定
let font;

//獅子舞
let shishimaiImg,shishimai;

//鯛
let taiImg,tai;

//お飾り
let okazari;

//餅つき
let motituki;

//文字(Happy New Year)
let char;
let chars=[];

//雪
let snow;
let snows=[];

//凧のインスタンス変数
let kite;
//門松のインスタンス変数
let kadomatsu;



/******************
* プレロード
*******************/
function preload (){
//フォント読み込み
font=loadFont('fonts/Murecho-ExtraBold.ttf');  

//画像読み込み
shishimaiImg=loadImage('shishimai.png');  //獅子舞
okazari=loadImage('okazari.png');         //お飾り
motituki=loadImage('motituki.png');       //餅つき
taiImg=loadImage('tai.png');              //鯛
}


function setup() {

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

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


//インスタンス設定
kite=new Kite();            //凧
kadomatsu=new Kadomatsu();  //門松
shishimai=new Shishimai();  //獅子舞
tai=new Tai();              //鯛
char= new Char();           //Happy New Year

}

function draw(){
clear();

//メソッド設定
//凧
kite.move();
kite.show();

//鯛
tai.show();
tai.move();

//門松
kadomatsu.show();

//Happy New Year
char.show();

//獅子舞
shishimai.show();
shishimai.move();


//雪
if(random(1)>0.5){
snow=new Snow();
snows.push(snow);
}

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


if(windowWidth>=820){
image(okazari,-50,-150,100,100);
image(motituki,-300,40,250,200);
}else if(windowWidth < 820 && windowWidth>=450){
image(okazari,-50,-180,100,100);
image(motituki,-300,0,250,200);
}else if(windowWidth < 450){
image(okazari,-25,-75,50,50);
image(motituki,-150,20,125,100); 
}
}

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

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


/*********************************************
文字クラス(Happy New Year)
**********************************************/
//コンストラクタ
class Char{
constructor(){

if(windowWidth>=820){
this.pos=createVector(0,0);
this.vel=createVector(0,0).mult(1);
this.size=1;
}else if(windowWidth < 820 && windowWidth>=450){
this.pos=createVector(0,0);
this.vel=createVector(0,0).mult(1);
this.size=1;
}else if(windowWidth < 450){
this.pos=createVector(0,0);
this.vel=createVector(0,0).mult(1);
this.size=0.5;
}


}

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

push();
translate(this.pos.x-width/6,this.pos.y-height/3);
scale(this.size);

//テキストの設定
textFont(font);
textSize(40);
fill(random(255),random(255),random(255),random(0,255));
text('Happy New Year',0,0);

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

}

}



/*********************************************
鯛クラス
**********************************************/

class Tai{
//コンストラクタ
constructor(){
this.pos=createVector(0,0);
this.vel=createVector(0,0).mult(1);

if(windowWidth>=820){
this.amp=100;   //鯛の振幅
this.left=250;  //位置補正
this.top=0;
this.size=1;   //サイズ
}else if(windowWidth < 820 && windowWidth>=450){
this.amp=100; 
this.left=250;
this.top=0;
this.size=1;
}else if(windowWidth < 450){
this.amp=100; 
this.left=125;
this.top=50;
this.size=0.5;
}


this.deg=0;  //画像の向き
this.angle=0; //スピン運動角度

}

//鯛の動き
move(){
this.pos.add(this.vel);
//鯛の上下の動作
this.pos.y=this.amp*sin(this.deg);

if(this.deg>=270 && this.deg<=360){
//鯛のスピン運動 
this.angle=this.angle+frameCount/100;
}else{
this.angle=0;
}
//上下運動
if(this.deg!==360){
this.deg=this.deg+1
}else{
this.deg=0;
}

}

//鯛の描画
show(){
push();
translate(this.pos.x+this.left,this.pos.y+this.top);
scale(this.size);
rotateX(this.angle);
//画像設定
image(taiImg,this.pos.x,this.pos.y,100,100);
translate(-this.pos.x-this.left,-this.pos.y-this.top); 
pop();
}

}



/*********************************************
獅子舞クラス
**********************************************/
class Shishimai{
//コンストラクタ
constructor(){
this.pos=createVector(0,0);
this.vel=createVector(0,0).mult(1);

if(windowWidth>=820){
this.amp=50;   //獅子舞の振幅
this.left=250;  //位置補正
this.size=1;   //サイズ
}else if(windowWidth < 820 && windowWidth>=450){
this.amp=50; 
this.left=250;
this.size=1;
}else if(windowWidth < 450){
this.amp=30; 
this.left=125;
this.size=0.5;
}

} 
//獅子舞の動き
move(){
this.pos.add(this.vel);
this.pos.x=this.amp*sin(frameCount);
}

show(){

push()
translate(this.pos.x,this.pos.y);
rotateZ(3*sin(frameCount*10));  //ふわふわ動かす
scale(this.size);
//獅子舞の画像配置
image(shishimaiImg,this.pos.x,this.pos.y,200,200);
translate(-this.pos.x,-this.pos.y);
pop();

}

}



/*********************************************
門松クラス
**********************************************/

class Kadomatsu{
//コンストラクタ
constructor(){
if(windowWidth>=820){
this.x=150;
this.y=70;
this.size=0.5;
}else if(windowWidth < 820 && windowWidth>=450){
this.x=150;
this.y=40;
this.size=0.5;
}else if(windowWidth < 450){
this.x=80;
this.y=10;
this.size=0.35;
}

}  

//門松の描画
show(){

push();
translate(this.x,this.y);
scale(this.size);
//左
push();
stroke(0);
strokeWeight(3);
fill(0,150,0);
rect(this.x-33,this.y+125,30,150);
pop();

push();
stroke(0);
strokeWeight(3);
fill(random(150,200),random(150,200),0);
ellipse(this.x-33,this.y+45,30,40);
pop();

push();
stroke(0);
strokeWeight(3);
fill(0,100,0);

rect(this.x-33,this.y+100,30,2);
rect(this.x-33,this.y+150,30,2);
pop();


//右
push();
stroke(0);
strokeWeight(3);
fill(0,150,0);
rect(this.x+33,this.y+125,30,150);
pop();

push();
stroke(0);
strokeWeight(3);
fill(random(150,200),random(150,200),0);
ellipse(this.x+33,this.y+45,30,40);
pop();

push();
stroke(0);
strokeWeight(3);
fill(0,100,0);

rect(this.x+33,this.y+100,30,2);
rect(this.x+33,this.y+150,30,2);
pop();

//中央
push();
stroke(0);
strokeWeight(3);
fill(0,150,0);
rect(this.x,this.y+100,30,200);
pop();

push();
stroke(0);
strokeWeight(3);
fill(random(150,200),random(150,200),0);
ellipse(this.x,this.y,30,40);
pop();

push();
stroke(0);
strokeWeight(3);
fill(0,100,0);
rect(this.x,this.y+50,30,2);
rect(this.x,this.y+100,30,2);
rect(this.x,this.y+150,30,2);
pop();

//入れ物
push();
fill(150,150,100);
rect(this.x,this.y+180,120,50);
pop();


//松
push()
noStroke();
fill(150,200,100);
beginShape();
vertex(this.x,this.y+170);
bezierVertex(this.x,this.y+170,this.x+10,this.y+150,this.x+50,this.y+160);
bezierVertex(this.x+50,this.y+160,this.x+100,this.y+150,this.x+80,this.y+130);
bezierVertex(this.x+80,this.y+130,this.x+50,this.y+125,this.x+50,this.y+120);
bezierVertex(this.x+50,this.y+120,this.x,this.y+135,this.x,this.y+120);
vertex(this.x,this.y+170);
bezierVertex(this.x,this.y+170,this.x-10,this.y+150,this.x-50,this.y+160);
bezierVertex(this.x-50,this.y+160,this.x-100,this.y+150,this.x-80,this.y+130);
bezierVertex(this.x-80,this.y+130,this.x-50,this.y+125,this.x-50,this.y+120);
bezierVertex(this.x-50,this.y+120,this.x,this.y+135,this.x,this.y+120);
endShape(CLOSE);
pop()

//笹中央
push();
fill(100,150,0);
beginShape();
vertex(this.x+15,this.y+120);
vertex(this.x,this.y+200);
vertex(this.x-15,this.y+120);
endShape()
pop();

//笹左
push();
fill(100,150,0);
translate (this.x+20,this.y)
rotate(30)
translate (-this.x+20,-this.y)
beginShape();
vertex(this.x+15,this.y+120);
vertex(this.x,this.y+200);
vertex(this.x-15,this.y+120);
endShape()
pop();

//笹右
push();
fill(100,150,0);
translate (this.x-20,this.y)
rotate(-30)
translate (-this.x-20,-this.y)
beginShape();
vertex(this.x+15,this.y+120);
vertex(this.x,this.y+200);
vertex(this.x-15,this.y+120);
endShape()
pop();

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

}



/*********************************************
凧クラス
**********************************************/

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

this.pos=createVector(0,0);
this.vel=createVector(0,0).mult(1);

if(windowWidth>=820){
this.size=0.5;   //サイズ
}else if(windowWidth < 820 && windowWidth>=450){
this.size=0.5;
}else if(windowWidth < 450){
this.size=0.4;
}
//凧の回転移動
this.degree=1;


//凧の大きさ
this.w=100;
this.h=140;
//しっぽ
this.tailW=10;
this.tailH=100;
}

//凧の動き
move(){
this.pos.add(this.vel);
this.pos.x=-width/4+20*cos(this.degree);
this.pos.y=-height/8+20*sin(this.degree);
this.degree++;
}

//凧の描画
show(){

push ();
translate (this.pos.x,this.pos.y);
rotateX(30);
rotateY(60);
rotateZ(0);
scale(this.size);

//凧本体
push()
fill(255,255,255,255);
noStroke()
beginShape();
vertex(this.pos.x-this.w/2,this.pos.y-this.h/2);
bezierVertex(this.pos.x-this.w/2,this.pos.y-this.h/2,this.pos.x-this.w/2+sin(frameCount)*20,0,this.pos.x-this.w/2,this.pos.y+this.h/2);
vertex(this.pos.x-this.w/2,this.pos.y+this.h/2);
vertex(this.pos.x+this.w/2,this.pos.y+this.h/2);
bezierVertex(this.pos.x+this.w/2,this.pos.y+this.h/2,this.pos.x+this.w/2+sin(frameCount)*20,0,this.pos.x+this.w/2,this.pos.y-this.h/2);
vertex(this.pos.x+this.w/2,this.pos.y-this.h/2);

endShape(CLOSE);
pop()

//尻尾左
push();
noStroke();
fill(255,255,255,255);
beginShape();
vertex(this.pos.x-this.w/2,this.pos.y+this.h/2-10);
bezierVertex(this.pos.x-this.w/2,this.pos.y+this.h/2,this.pos.x-this.w/2+cos(frameCount*2)*10,0,this.pos.x-this.w/2,this.pos.y+this.h/2+this.tailH);
vertex(this.pos.x-this.w/2+cos(frameCount*20)*10,this.pos.y+this.h/2+this.tailH);
vertex(this.pos.x-this.w/2+this.tailW+sin(frameCount*20)*10,this.pos.y+this.h/2+this.tailH);
bezierVertex(this.pos.x-this.w/2+this.tailW,this.pos.y+this.h/2+this.tailH,this.pos.x-this.w/2+this.tailW,0,this.pos.x-this.w/2+this.tailW,this.pos.y+this.h/2);
vertex(this.pos.x-this.w/2+this.tailW,this.pos.y+this.h/2-10);
endShape(CLOSE);
pop();

//尻尾右
push();
noStroke();
fill(255,255,255,255);
beginShape();
vertex(this.pos.x+this.w/2,this.pos.y+this.h/2-10);

vertex(this.pos.x+this.w/2+cos(frameCount*20)*10,this.pos.y+this.h/2+this.tailH);
vertex(this.pos.x+this.w/2+this.tailW+sin(frameCount*20)*10,this.pos.y+this.h/2+this.tailH);
endShape(CLOSE);
pop();

//文字部分
push()
textFont(font);
fill (250,25,20,200);
textSize(50)
text('賀',this.pos.x-(this.w)/4+5*sin (frameCount),this.pos.y-(this.h)/8);
text('正',this.pos.x-(this.w)/4+5*sin (frameCount),this.pos.y+(this.h)/3);
pop()
translate (-this.pos.x,-this.pos.y);
pop ();

}

}


/******************
* 雪クラス手前
*******************/

class Snow{
//コンストラクタ
constructor(){
this.pos=createVector(random(-width/2,width/2),random(-height/2,-height/3));
this.vel=createVector(0,1).mult(1.5);  //ベクトル設定
this.alpha=random(150,255); //雪の透明度

if(windowWidth>=820){
this.r=random(1,3);  //雪のサイズ
}else if(windowWidth < 820 && windowWidth>=450){
this.r=random(1,3);  
}else if(windowWidth < 450){
this.r=random(0.5,1.5);  
}
}

//雪の動きメソッド
move(){
this.pos.add(this.vel);
}

//雪の除去判定メソッド
remove(){
if(this.pos.y>=height){
return true;
}else{
return false;
}
}

//雪の描画メソッド
show(){
push();
translate(this.pos.x,this.pos.y);
scale(this.r);
noStroke();
fill(255,255,255,this.alpha);
ellipse(this.pos.x,this.pos.y,5,5);
translate(-this.pos.x,-this.pos.y);
pop();
}

}