var attenuation = 0.8;

var length = 100;

var number_of_branch = 2;

var number_of_loop = 4;

function setup() {

  createCanvas(500, 500);

     drawingContext.shadowBlur = 10;

  drawingContext.shadowOffsetX = 5; //X軸正方向へのズレ

  drawingContext.shadowOffsetY = 5; //Y軸正方向へのズレ

  drawingContext.shadowColor = color(0,0,0,150); //シャドウの色

  background(250);

  select("#slider_n").changed(setN);

  select("#slider_attenuation").changed(setAttenuation);

  select("#slider_length").changed(setLength);

  select("#slider_branch").changed(setBranch);

  select("#slider_loop").changed(setLoopN);

  noLoop();

}

​

function draw() {

  background(255);

  stroke(0,25);

  let loop_n = parseInt(select("#slider_loop").value());

  for (let i = 0; i < loop_n; i++) {

    drawBar(width / 2, height / 2, length, radians(i*360/loop_n), attenuation, n);

  }

}

​

function drawBar(_x0, _y0, _length, _theta, _attenuation, _N) {

  if (_N > 0) {

    let x = _x0 + _length * cos(_theta);

    let y = _y0 - _length * sin(_theta);

    line(_x0, _y0, x, y);

    for (let i = 0; i < number_of_branch; i++) {

      drawBar(

        x,

        y,

        _length * _attenuation,

        _theta + radians(60 - 120*i/(number_of_branch-1)),

        _attenuation,

        _N - 1

      );

    }

  }

}

​

function setN() {

  n = parseInt(this.value());

  draw();

}

​

function setAttenuation() {

  attenuation = parseFloat(this.value());

  console.log(attenuation);

  draw();

}

​

function setLength() {

  length = parseInt(this.value());

  draw();

}

​

function setBranch() {

  number_of_branch = parseInt(this.value());

  draw();

}

​

function setLoopN(){

  draw();

}

​