タイトル:梅雨明け （6月）

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

プログラミングコード

   

   
/******************
* 変数設定
*******************/
//円(光彩）のパラメータ
let circles=[];
let count=12;
let angles=[];

//親（光彩の動き）のパラメータ
let circleparents=[];
let count2=1;

//虹のパラメータ
let rainbows=[];
let num;
let r_mult=4;
let period=5000;
let freq0=3;
let r0=80;  //内径


function setup(){

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

cv.parent('#myCanvas1');

angleMode(DEGREES);


//虹のインスタンス
for(let i=0;i < num;i++){
//虹の内径
let r=r0+(num-i)*r_mult;
//hue値
let h=360/num*i;
rainbows[i] =new Rainbow(i+freq0,r,h);
}


}

function draw(){
//画面クリア
clear ();
//座標移動
translate (width/2,height/2);


//虹のメソッド
for(let i=0;i < num;i++){
rainbows[i].update();
rainbows[i].display();
}

//circle（光彩）のインスタンス
if(random(1)>0.995){
for(let i=0;i < count2;i++){
circleparents.push(new CirclepParent());
}
}


//circle（光彩）のメソッド
for(let i=0;i < circleparents.length;i++){
if(!circleparents[i].remove()){
circleparents[i].move();
circleparents[i].show();
}else{
//配列除去
circleparents.splice(i,1);
}

}


}


/*********************************************
class CirclepParen
**********************************************/

class CirclepParent{
constructor(){

this.pos=createVector(random(-width/2,width/2),random(-height/2,height/2));
this.vel=createVector(0,1);

//circleのインスタンス
let colors=[color(255,0,0,50),color(255,255,0,50),color(0,255,0,50),color(255,0,255,50),color(0,0,255,50),color(255,0,255,50),];
for(let i=0;i < count;i++){
angles[i]=(360/count)*i;
circles[i]=new Circle(angles[i],colors[i%6]);
}

}


move(){
this.pos.add(this.vel);
// this.pos.x=random(100)*sin(frameCount);
// this.pos.y=random(100)*cos(frameCount);
}

remove(){
if(this.pos.y>2*height){
return true;
}else{
return false;
}
}

show(){
push();
translate(this.pos.x,this.pos.y);
blendMode(DIFFERENCE);
for(let i=0;i < count;i++){
circles[i].update();
circles[i].display();
}
translate(-this.pos.x,-this.pos.y);
pop();
}

}



/*********************************************
class Rainbow Circle
**********************************************/

class Circle{

constructor(angle,c){
this.r=10;   //半径
this.angle=angle;
//玉の半径
this.direction=0.5;
this.c=c;

if(windowWidth>=820){
this.size=100; 
}else if(windowWidth < 820 && windowWidth>=450){
this.size=100; 
}else if(windowWidth < 450){
this.size=50; 
}

}

update(){
this.x=this.r*cos(this.angle);
this.y=this.r*sin (this.angle);

// if(this.r < 0 || this.r >100){
//    this.direction=this.direction*(-1);
// }
this.r=this.r+this.direction;
}


display(){
push ();
translate(this.x,this.y)
noStroke();
fill(this.c);
ellipse(this.x,this.y,this.size,this.size);
//line (0,0,this.x,this.y);
translate(-this.x,-this.y)
pop ();
}

}



/*********************************************
class Rainbow
**********************************************/

class Rainbow{

constructor(num,r,h){
this.num=num;
this.r=r;
this.angle=-180;
this.angleV=-(180*this.num)/period;   //周期

//HSBカラー設定
this.h=h;
this.s=100;
this.b=100;

}
//虹の中の玉の運動メソッド
update(){

if(this.angle<-180){
this.angleV*=-1
this.angle=-180-(this.angle+180);
}else if(this.angle>0){
this.angleV*=-1;
}

this.angle+=this.angleV;

}

display(){
push();
colorMode(HSB);
translate(0,height/2);

//ライン
noFill();
//虹の部分

stroke (this.h,this.s,this.b);
arc (0,0,this.r*2,this.r*2,-180,0);
//玉の描画
this.x=this.r*cos (this.angle);
this.y=this.r*sin (this.angle);
fill (this.h,this.s,this.b);
ellipse(this.x,this.y,5,5);
pop();
}

}