タイトル:ひまわり（7月）

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

プログラミングコード

   

    /******************
 * 変数設定
 *******************/
//ひまわり
let sunflower;
const n=8;
const d=15;
const r=100;


//シャボン玉の数
const num=5;
//シャボン玉配列
let bubble;
let bubbles=[];

//色の配列
let col=[[500,0,0,60],[0,500,0,60],[0,0,500,60],[500,500,0,60],[500,0,500,60],[0,500,500,60]];


function setup(){

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

cv.parent("#myCanvas1");

angleMode(DEGREES);
ellipseMode(CENTER);

//ひなわりのインスタンス
sunflower=new Sunflower();

//シャボン玉設定


//インスタンス作成
for(let i=0;i < num;i++){
bubble=new Bubble(col[i%6]);
bubbles.push(bubble);
}

}


function draw(){
clear();

background(250,255,255,random(0,30));
sunflower.show();

//bubbleメソッド
for(let b of bubbles){
    b.move(); //moveメソッド設定
    b.show(); //showメソッド設定
}

}


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

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


/*********************************************
ひまわりクラス
**********************************************/

class Sunflower{
//コンストラクタ
constructor(){

   

    //サイズ（画面サイズによって変更）
    if(windowWidth>=820){
    this.size=0.5; 
    this.pos=createVector(-700,-100);
    }else if(windowWidth < 820 && windowWidth>=450){
    this.size=0.5; 
    this.pos=createVector(-400,-200);
    }else if(windowWidth < 450){
    this.size=0.3; 
    this.pos=createVector(-450,-100);
    }

}

//ひまわり描画メソッド
show(){

push();
scale(this.size);

translate(this.pos.x,this.pos.y);

//葉っぱの部分
push()
fill(0,200,0);
rotateZ(-30);
ellipse(-10,200,200,50);
pop();

push()
fill(0,200,0);
rotateZ(-30);
ellipse(-100,350,200,50);
pop();

push()
fill(0,200,0);
rotateZ(30);
ellipse(-60,100,200,50);
pop();

push()
fill(0,200,0);
rotateZ(30);
ellipse(70,300,200,50);
pop();


//茎の部分
push()
fill(0,200,0);
rect(-5,100,10,450);
pop();


//花の部分
push();
//ひまわりの向き
rotateX(30);
rotateY(60);

//花の中心（フラワー関数）
fill(200,150,50);
//let b=sin(frameCount);
//stroke(50,50,map(b,0,1,0,100));
beginShape();
for(let i=0;i < 360*d;i+=1){
let rad=r*sin(i*(n*cos(frameCount)/d));
let x=rad*cos(i);
let y=rad*sin(i);
vertex(x,y);
}
endShape();

//花びらの部分
noStroke();
fill(255,200,0);
//同心円状に花びらを配置
beginShape();
for(let j=0;j < =360;j+=10){
let x1=135*cos(0);
let y1=135*sin(0);
rotateZ(10);
ellipse(x1,y1,70,20);  //１枚の花弁
}

endShape();
pop();

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

}

}



/*********************************************
シャボン玉クラス
**********************************************/

class Bubble{

constructor(col){
//コンストラクタ
    this.pos=createVector(-width/2-random(100),height/2+random(10),); 
    this.vel=createVector(1,-random(0.1,1)).mult(random(10,30));
    this.col=col;
    this.dis=random(2,3);
    //シャボン玉サイズ
    if(windowWidth>=820){
        this.size=random(5,30);
        }else if(windowWidth < 820 && windowWidth>=450){
        this.size=random(5,30);
        }else if(windowWidth < 450){
        this.size=random(5,20);
    }
}

//シャボン玉の動き
move(){
    this.pos.add(this.vel);
    this.pos.x=this.pos.x+random(3,5); //移動速度
    //シャボン玉が端に到達したら再配置
    if(this.pos.y < =-height/2){
    this.pos.x=-width/2-random(100);
    this.pos.y=height/2+random(100);
    
    if(windowWidth>=820){
        this.size=random(5,30);
        }else if(windowWidth < 820 && windowWidth>=450){
        this.size=random(5,30);
        }else if(windowWidth < 450){
        this.size=random(5,20);
    }
    }
}

//シャボン玉の描画
show(){
    push();
    translate(this.pos.x,this.pos.y);

    //光沢
    push();
    fill(600,600,600,50);
    noStroke();
    ellipse(this.size/this.dis,-this.size/this.dis,this.size/this.dis);
    pop();

    //シャボン玉
    fill(this.col);
    noStroke();

    //値小さいほど質感増す
    ambientLight(50);
    //光の方向(r,g,b,a,x,y,z)
    pointLight(255, 255, 255, 255, 0, 0, 100);
    ambientMaterial(250, 205, 255, 20);
    sphere(this.size);

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

}