タイトル:母の日（5月）

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

プログラミングコード

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

//フラワークラス
let flower;
let flowers=[];
let num=5;

//phyllotaxis
let p;


function setup(){

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

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

//インスタンス
p=new Phylotaxis();
frameRate(24);

}

function draw(){
//背景色
background(255,255,100,50);
clear ();

//フラワーインスタンス
if(random(1)>0.99){
for(let i=0;i < num;i++){
flower=new Flower();
flowers.push(flower);
}
}

//フラワーメソッド
for(let i=0;i < flowers.length;i++){
if(!flowers[i].remove()){
flowers[i].show();
}else{
flowers.splice(i,1);
}
}

//ドット描画
p.move();
p.show();


}


/*********************************************
ブラウザ幅を変更したときのキャンバスサイズ再設定
**********************************************/
function windowResized() {
if(windowWidth>=820){
resizeCanvas(970, 430);
}else if(windowWidth < 820){
resizeCanvas(windowWidth, 430);
}
}

/*********************************************
Flowerクラス
**********************************************/
class Flower{
constructor(){
this.pos=createVector(random(-width/3,width/3),random(-height/3,height/3));
this.vel=createVector(0,0);

if(windowWidth>=820){
this.size=0.5;
}else if(windowWidth < 820 && windowWidth>=450){
this.size=0.4;
}else if(windowWidth < 450){
this.size=0.2;
}

this.n_array=[20,30,40,60,70,80,120,200];
this.n=random(this.n_array);

this.b_array=[4,5,6,7];
this.b=random(this.b_array);

//カラー設定
this.r=random(200,255);
this.b=random(200,255);
this.g=random(200,255);

//間隔
this.time=0;
}

//配列除去判定（時間が一定数過ぎたら消去）
remove(){
this.time+=1;
if(this.time>100){
return true;
}else{
return false;
}
}

//フラワー関数
show(){
push ();
translate (this.pos.x,this.pos.y);
beginShape();
scale (this.size);
stroke(this.r,this.g,this.b);
noFill();

for(let i=0;i < 361;i++){
let k=i*this.n;
let r=150*sin(k*this.b);
let x=r*cos(k);
let y=r*sin(k);
vertex(x,y);
}
endShape(CLOSE);
translate (-this.pos.x,-this.pos.y);
pop ();
}

}

/*********************************************
Phylotaxisクラス
**********************************************/
class Phylotaxis{

constructor(){
this.pos=createVector(0,0);
this.n=0;
this.size=2;

if(windowWidth>=820){
this.c=10;
}else if(windowWidth < 820 && windowWidth>=450){
this.c=8;
}else if(windowWidth < 450){
this.c=5;
}

}

//拡大縮小
move(){
this.n=500*sin(frameCount*2);
}

// Phylotaxisk関数
show(){
push ();
translate (this.pos.x,this.pos.y);
beginShape();
colorMode(HSB);
rotate (frameCount);
scale (this.size);
for(let i=0;i < this.n;i++){
let a=i*137.5;
let r=this.c*sqrt (i);
let x=r*cos(a);
let y=r*sin(a);
let hu=sin(i*0.5);
//hu=map(hu,-1,1,0,360) //再度
noStroke();
fill ((a-r)%360,100,100,0.2);
ellipse(x, y,4+r/15);
}

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

}