タイトル:七夕（7月）

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

プログラミングコード

/******************
* 変数設定
*******************/
//短冊
const num=2;
let tanzaku;
let tanzakus=[];
//星
let star;
let stars=[];

//天の川
let amanogawa;

//織姫彦星
let pearImg;
let pear;

//笹の葉
let sasanohaImg;

/******************
* 画像配置
*******************/
function preload(){
pearImg=loadImage('pear.png');
sasanohaImg=loadImage('sasanoha.png');

}


function setup(){

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

cv.parent("#myCanvas1");

angleMode(DEGREES);
ellipseMode(CENTER);

}



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

//天の川
amanogawa=new Amanogawa();
amanogawa.show();


//落ちる短冊
if(random(1)>0.99){
for(let i=0;i < num;i++){
tanzaku=new Tanzaku();
tanzakus.push(tanzaku);
}
}

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

}

//スター
if(random(1)>0.99){
for(let i=0;i < num;i++){
star=new Star();
stars.push(star);
}
}

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

}

//織姫彦星
pear=new Pear();
pear.show();


//笹の葉

if(windowWidth>=820){
image(sasanohaImg,-450,-150,400,400);
}else if(windowWidth < 820 && windowWidth>=450){
image(sasanohaImg,-450,-150,400,400);
}else if(windowWidth < 450){
image(sasanohaImg,-230,-80,200,200);
}

}


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

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


/*********************************************
織姫彦星クラス
**********************************************/
class Pear{
//コンストラクタ
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(pearImg,this.pos.x,this.pos.y,200,200);
translate(-this.pos.x,-this.pos.y);
pop();

}

}


/*********************************************
天の川クラス
**********************************************/

class Amanogawa{
//コンストラクタ
constructor(){
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(random(100,255),random(100,255),random(255),random(0,55));
beginShape();

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

endShape();

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

}


/*********************************************
短冊クラス
**********************************************/

class Tanzaku{
//コンストラクタ
constructor(){
this.pos=createVector(random(-width/2,width/2),-height/2-random(height/2));
this.vel=createVector(0,1).mult(1);

//サイズ（画面サイズによって変更）
this.size=1;
this.angle=random(180);

}
//短冊移動メソッド
move(){
this.pos.add(this.vel);
}

//短冊除去メソッド
remove(){
if(this.pos.y>height/2){
return true;
}else{
return false;
}
}

//短冊描画メソッド
show(){
push();
translate(this.pos.x,this.pos.y);
scale(this.size);
rotateY(10*sin(frameCount)+this.angle);
rotate (45);
noStroke();
fill(random(255),random(255),random(255),random(100,255));
rect(this.pos.x,this.pos.y,10,20);
translate(-this.pos.x,-this.pos.y);
pop();
}

}


/*********************************************
スタークラス
**********************************************/


class Star{
//コンストラクタ
constructor(){
this.pos=createVector(random(width),random(-height/4,height/4));
this.vel=createVector(-1,0).mult(1);

//サイズ（画面サイズによって変更）
this.size=random(0.1,0.4);
this.angle=random(180);

}
//スター移動メソッド
move(){
this.pos.add(this.vel);
}

//スター除去メソッド
remove(){
if(this.pos.x < -width/2){
return true;
}else{
return false;
}
}

//スター描画メソッド
show(){
push();
translate(this.pos.x,this.pos.y);
scale(this.size);
rotateZ(180*sin(frameCount)+this.angle);
rotateY(180*sin(frameCount)+this.angle);

noFill();
stroke(random(255),random(255),random(255))
//スター関数
const n=5;
const r1=10;
const r2=35;

let angle2=360/n

beginShape();
for(let i=0;i < 360;i+=angle2){
let x=r2*cos(i);
let y=r2*sin(i);
vertex(x,y);
x=r1*cos(i+angle2/2);
y=r1*sin(i+angle2/2);
vertex(x,y);
}
endShape(CLOSE);

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

}