タイトル：桜の木(3-4月）

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

プログラミングコード

   
    //桜の花びらを格納する配列宣言
    let sakuras=[];
    let sakuras2=[];

    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);
    }


    function draw(){
    background(0,0,0,0);

    //木の位置（デバイスサイズごとに変更）
    if(windowWidth>=820){
    translate(-400,0,-300);
    }else if(windowWidth<820 && windowWidth>=450){
    translate(-200,-100,-250);
    }else if(windowWidth<450){
    translate(-300,-480,-1600);
    }


    //sakura(１枚花びらの描画）
    //インスタンス設定
    if(random(1)>0.9){
    for(let i=0;i<1;i++){
    let s=new Sakura(random(-1,1),random(1),random(1));
    sakuras.push(s)  //配列に設定
    }
    }

    for(let i=0;i<sakuras.length;i++){
    if(!sakuras[i].remove()){
    sakuras[i].move();  //花びらの動き
    sakuras[i].show();  //花びら描画
    }else{
    sakuras.splice(i,1); //花びら除去
    }

    }

    //sakura2(複数枚花びらの描画）
    //インスタンス設定
    if(random(1)>0.9){
    p2=new Sakura2(5,random(-1,1),random(1),random(1));
    sakuras2.push(p2);  //配列に設定
    }


    for(let i=0;i<sakuras2.length;i++){
    if(!sakuras2[i].remove()){
    sakuras2[i].move();  //花びらの動き
    sakuras2[i].show();  //花びら描画
    }else{
    sakuras2.splice(i,1); //花びら除去
    }
    }


    //桜の木設置
    translate(0,100);
    //木の根っこ
    push();
    stroke(100,50,50);
    strokeWeight(20);
    line(0,0,0,height/2);
    translate(0,height/2);
    pop();

    //桜の木描画(数値をあげると木が大きくなる)
    branch(80);

    }

    //ブラウザ幅を変更したときの設定
    function windowResized() {
    if(windowWidth>=820){
    resizeCanvas(970, 430);
    }else if(windowWidth<820){
    resizeCanvas(windowWidth, 430);
    }
    }

    //１枚花びらクラス
    class Sakura{
    //コンストラクタ
    constructor(vx,vy,vz){
    this.pos=createVector(random(-width/2,width/2),-400);
    this.vel=createVector(vx,vy,vz).mult(random(50,100));
    this.size=random(0.05,0.2);
    }

    //１枚花びらの動きメソッド
    move(){
    this.pos.add(this.vel);
    //左右に揺らす
    this.pos.x=this.pos.x+2*sin(frameCount/10);
    }

    //配列除去判定メソッド
    remove(){
    if(this.pos.y>height){
    return true;
    }else{
    return false;
    }
    }

    //１枚花びらの描画メソッド
    show(){
    push();
    beginShape();
    fill(230,150,150,random(90,200));
    noStroke();
    translate(this.pos.x,this.pos.y);
    //左右に傾ける（周期は上と同じに）
    rotateZ(30*sin(frameCount/10));
    rotateY(frameCount/10);
    rotateX(sin(30*frameCount/10));
    scale(this.size);

    //花びらの右半分描画
    vertex(0,-85);
    bezierVertex(40,-175,110,20,0,200);
    //花びらの左半分描画
    vertex(0,-85);
    bezierVertex(-40,-175,-110,20,0,200);
    endShape();
    pop();
    }

    }

    //複数枚花びらクラス
    class Sakura2{
    //コンストラクタ
    constructor(n,vx,vy,vz){
    this.pos=createVector(random(-width/2,width/2),-400);
    this.vel=createVector(vx,vy,vz).mult(random(50,100));
    this.n=floor(random(4,7));  //花びらの枚数をランダム設定
    this.size=random(20,40);
    this.color=color(255,200,200,random(90,200));
    }

    //花びらの動きメソッド
    move(){
    this.pos.add(this.vel);
    this.pos.x=this.pos.x+2*sin(frameCount);
    }

    //花びらの除去メソッド
    remove(){
    if(this.pos.y>height ){
    return true;
    }else{
    return false;
    }

    }
    //花びらの描画メソッド
    show(){
    push();
    beginShape();
    fill(this.color);
    translate(this.pos.x,this.pos.y);
    rotateZ(30*frameCount);
    // rotateY(frameCount/10)

    //複数花びらの描画
    for(let i= 0; i < 360 ; i++){
      let A = this.n/ PI*radians(i);
      let mod = floor(A) % 2; 
      let r0 = pow(-1, mod) * (A - floor(A)) + mod;
      let h = r0 < 0.8 ? 0 : 0.8 - r0;
      let r = r0 + 2 * h;
      let x = this.size * r * cos(i); 
      let y = this.size* r * sin(i); 
      vertex(x, y);
      }
    endShape(CLOSE);
    pop();
    }

    }


    //桜の木関数
    function branch(len){

    //ambientMaterial(255, 200, 25); //緑色を含む
    if(len>30){
    //桜の木右半分
    push();
    stroke(100,50,50);
    strokeWeight(map(len,7,100,1,15));
    rotate(map(mouseX,0,width,60,30)) ; //マウスで木がx方向に動く設定
    line(0,0,0,-len);
    translate(0,-len);
    branch(0.80*len);
    pop();
    //桜の木左半分
    push();
    stroke(100,50,50);
    strokeWeight(map(len,7,100,1,15));
    rotate(map(mouseY,0,width,-50,-20));//マウスで木がy方向に動く設定
    line(0,0,0,-len);
    translate(0,-len);
    branch(0.80*len);
    pop();
    }else{

    //桜の葉の部分
    beginShape();
    strokeWeight(1);
    fill(220,200,200,random(200,300));
    for(let i= 0; i < 360 ; i++){
      let n=5;
      let size=40;
      let A = n/ PI*radians(i);
      let mod = floor(A) % 2; 
      let r0 = pow(-1, mod) * (A - floor(A)) + mod;
      let h = r0 < 0.8 ? 0 : 0.8 - r0;
      let r = r0 + 2 * h;
      let x = size * r * cos(i); 
      let y = size* r * sin(i); 
      vertex(x, y);
    }
    endShape(CLOSE);
    }

    }