タイトル:雪の華（1月）

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

プログラミングコード

   
  
    /******************
    * 変数設定
    *******************/
   //タイル
   let tiles=[];
   let rows,cols;
   let size;
   
   
   //氷の結晶
   let current;
   let snowflake=[];
   
   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");
   
    //タイルサイズ
    if(windowWidth>=820){
     size=100;
    }else if(windowWidth < 820 && windowWidth>=450){
      size=80;
    }else if(windowWidth < 450){
      size=50;
   }
   
    //パーティクル用インスタンス
    current=new Particle(height/3,0);
   
    //タイル用インスタンス
    cols=width/size;
    rows=height/size;
    for(let i=0;i < cols;i++){
     tiles[i]=[];
     for(let j=0;j < rows;j++){
       tiles[i][j]=new Tile(i*size,j*size);
     }
    }
   }
   
   
   function draw(){
       //背景
         background(0,0,0,100);
   
       //タイル
         for(let i=0;i < cols;i++){
           for(let j=0;j < rows;j++){
             tiles[i][j].show();
           }
          }
     
       //氷の結晶（snowflake)
         current.generate();
   
         for(let i=0;i < 6;i++){
           rotate (PI/3);
           current.show();
           for(let p of snowflake){
               p.show();
           }
         
           push();
           scale(1, -1);
           current.show();
           for (let p of snowflake) {
             p.show();
           }
           pop();
         }
   
   }
   
   /*********************************************
   ブラウザ幅を変更したときのキャンバスサイズ再設定
   **********************************************/
   
   function windowResized() {
       if(windowWidth>=820){
           resizeCanvas(970, 430);
       }else if(windowWidth < 820){
           resizeCanvas(windowWidth, 430);
       }
   }
   
   
   /******************
    * タイルクラス
    *******************/
   
   class Tile{
   
      constructor(x,y){
       this.x=x;
       this.y=y;
       this.type=floor(random(4));
    
      }
   
   //タイルの形状
      show(){
       push();
       translate (-width/2,-height/2);
       translate (this.x,this.y);
     
       beginShape();
         fill(random(233),random(255),255,random(100));
         if(this.type==0){
           vertex(size,0);
           vertex(size,size);
           vertex(0,size);
         }else if(this.type==1){
           vertex(size,0);
           vertex(0,0);
           vertex(0,size);
         }else if(this.type==2){
           vertex(size,size);
           vertex(0,0);
           vertex(0,size);
         }else{
           vertex(size,size);
           vertex(0,0);
           vertex(size,0);
         }
       endShape();
       translate (-this.x,-this.y);
       pop ();
      }
   }
   
   
   /******************
    * パーティクルクラス
    *******************/
   
   class Particle {
   
     constructor(radius, angle) {
       this.pos = p5.Vector.fromAngle(angle);
       this.pos.mult(radius);
       this.r = 2;
       this.a=random(PI/2,PI/6);
     }
   
     update() {
       this.pos.x -=1;
       this.pos.y += random(-3, 3);
       let angle = this.pos.heading();
       //angle = constrain(angle, 0, PI/6);
       angle = constrain(angle, 0, this.a);
       let magnitude = this.pos.mag();
       this.pos = p5.Vector.fromAngle(angle);
       this.pos.setMag(magnitude);
     }
   
   //生成メソッド
     generate(){
       let count = 0;
       while (!current.finished() && !current.intersects(snowflake)) {
         current.update();
         count++;
       }
     
   　　//結晶完成したらストップ
       if (count == 0) {
         noLoop();
       }
       snowflake.push(current);
       current = new Particle(height/4, 0);  //radius angle
     }
   
   //粒子がくっついたとき
     intersects(snowflake) {
       let result = false;
       for (let s of snowflake) {
         let d = dist(s.pos.x, s.pos.y, this.pos.x, this.pos.y); 
         if (d < this.r *1.5) {
           result = true;
           break;
         }
       }
       return result;
     }
   
    //粒子が目的値に到達したとき
     finished() {
       return (this.pos.x  < 1);
     }
   
   //粒子を描画
     show() {
   
       fill(random(255), 200, 255, random(255));
       stroke(255, 150);
       ellipse(this.pos.x, this.pos.y, this.r * 1.2);
   
     }
   }