タイトル:ハロウィン（10月末）

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

プログラミングコード

   

    /******************
    * 変数設定
    *******************/
   
   //パンプキン
   let pumpkin;
   
   //振り子
   let pendulums=[];
   let num=50;
   let c=["#007766","#0096c7","#00b4d8","#ffche4"];
   
   //文字
   let font,char;
   
   //キャンバス変数
   let cv,pg,pg2;
   
   /******************
    * プレロード
    *******************/
   function preload (){
       //フォント読み込み
       font=loadFont('fonts/Murecho-ExtraBold.ttf');  
   
     }
   
   
   
   /******************
    * setup
    *******************/
   
   function setup(){
     
   
   //描画するキャンバス設定
   //responsible用
   if(windowWidth>=820){
       cv=  createCanvas(970,430,WEBGL);
       pg=  createGraphics(300,300);
       pg2= createGraphics(300,300);
   }else if(windowWidth < 820 && windowWidth>=450){
       cv=  createCanvas(970,430,WEBGL);
       pg =  createGraphics(300,300);
       pg2 = createGraphics(300,300);
   }else if(windowWidth < 450){
       cv=   createCanvas(windowWidth,200,WEBGL);
       pg =  createGraphics(150, 150);
       pg2 = createGraphics(150,150);
   }
   
    cv.parent('#myCanvas1');
    angleMode(DEGREES);
   
    for(let i=0;i < num;i++){
       let length=200+i*10;
       let s=5+(i+0.5);
       pendulums[i]=new Pendulum(length,c[i%(c.length-1)],s);
     }
   
   
   //インスタンス設定
   pumpkin=new Pumpkin();   //ペア
   
   char=new Char();  //文字
   
   }
   
   
   /******************
    * draw
    *******************/
   
   function draw(){
   //画面のクリア
   background(0,0,0,180);
   
   for(let i=0;i < num;i++){
    pendulums[i].move();
    pendulums[i].show();
   }
   
   //ペアーメソッド
    pumpkin.move();
    pumpkin.show(); 
   
    char.show();
   
   }
   
   
   
   /*********************************************
   ブラウザ幅を変更したときのキャンバスサイズ再設定
   **********************************************/
   
   function windowResized() {
        if(windowWidth>=820){
        resizeCanvas(970, 430);
        }else if(windowWidth < 820){
        resizeCanvas(windowWidth, 430);
    }
   }
   
   
   /*********************************************
   振り子クラス
   **********************************************/
   
   class Pendulum{
      
       constructor(length,c,size){
         this.pos=createVector(100,0);
         this.vel=createVector(0,1);
       
          this.length=length;
          this.angle=45;
          this.angleV=0;
          this.c=c
          this.size=size;
       }
     
       move(){
         this.pos.x=(width/2)*sin(frameCount);
     
        //振り子の動き
         this.angleV+=-5/this.length*sin(this.angle);
         this.angle+=this.angleV;
     
         this.x=this.length*sin(this.angle);
         this.y=this.length*cos(this.angle);
       }
     
       //振り子の描画
       show(){
         push ();
         translate (0,-height/2);
         translate(this.pos.x,this.pos.y)
         strokeWeight(5);
         stroke(random(100,255),random(100,255),random(255),random(255));
         fill(random(100,255),random(100,255),random(255));
         line (0,0,this.x,this.y);
     
         ellipse(this.x,this.y,this.size,this.size);
         translate(-this.pos.x,-this.pos.y)
         pop ();
       }
     }
     
   
   
   
   /*********************************************
   パンプキンクラス
   **********************************************/
   
   class Pumpkin{
   //コンストラクタ
   constructor(){
   
   this.vel=createVector(0,0).mult(1);
   
   //位置とサイズ
       if(windowWidth>=820){
           this.pos=createVector(-pg.width/2,-pg.height/2+70);
           this.size=1;
       }else if(windowWidth < 820 && windowWidth>=450){
           this.pos=createVector(-pg.width/2-80,-pg.height/2+120);
           this.size=0.8;
       }else if(windowWidth < 450){
           this.pos=createVector(-pg.width/2+pg.width/2*0.2,-pg.height/2+pg.height/2*0.8);
           this.size=0.5;
       }
   }
   
   move(){
       this.pos.add(this.vel);
       this.pos.x=width/2*sin(frameCount)-width/8;
       this.pos.y=80*cos(frameCount)-height/4;
    }
   
   
   //描画メソッド
    show(){
        push ();
           translate (this.pos.x,this.pos.y);
               scale(this.size);
               pg.textAlign(CENTER, CENTER);
               rectMode(CENTER);
               pg.textSize(pg.width * 0.8);
               pg.text('🎃', pg.width / 2, pg.height / 2);
                   noStroke();
                   for (let i = 0; i < width; i +=5) {
                   for (let j = 0; j < height; j +=5) {
                   let c = pg.get(i, j);
                   if(c[0]+c[1]+c[2]>100){
                   fill(c[0],c[1],c[2],random(0,255));
                   ellipse(i,j,5);
                 }
                }
               }
           translate (-this.pos.x,-this.pos.y);
       pop ()
     }
   
   }
   
   
   /*********************************************
   文字クラス(Trik or treat)
   **********************************************/
   //コンストラクタ
   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);
       rotate (random(-45,45));
   
        //テキストの設定
       textFont(font);
       textSize(40);
       fill(random(255),random(255),random(255),random(0,255));
       text('Trick or Treat!',random(width),random(height));
   
       translate(-this.pos.x,-this.pos.y);
       pop();
   
   }
   
   }