0483

let _minWidth;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(HSB, 360, 100, 100, 255);

  setObject();

}

​

let _aryLine = [];

function setObject() {

  _minWidth = min(width, height) * .6;

  strokeWeight(_minWidth/20);

  noFill();

  strokeCap(SQUARE);

  let numLine = 4;

  let r = _minWidth / 3;

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

    for (let j = 0; j < numLine; j++) {

      let step = _minWidth / numLine;

      let x = -_minWidth / 2 + step / 2 + step * i;

      let y = -_minWidth / 2 + step / 2 + step * j;

      let centXy = createVector(x, y);

      _aryLine[i + j * numLine] = new BendLine(centXy, r);

    }

  }

}

​

class BendLine {

  constructor(centXy, r) {

    this.centXy = centXy;

    this.r = r;

    this.numPoints = 100;

    this.aryXy = [];

    for (let i = 0; i < this.numPoints; i++) {

      let ang = 2*PI / this.numPoints * i;

      this.aryXy[i] = p5.Vector.add(this.centXy, createVector(this.r * cos(ang), this.r * sin(ang)));

    }

    this.numBend = 3;

    this.aryRParameter = [];

    for (let i = 0; i < this.numBend; i++) {

      this.aryRParameter[i] = [this.r / 30 * 0.8**i, random(2*PI), 2*PI / random(100, 500)];//[max, init, speed]

    }

    this.aryinitAngParameter = [];

    for (let i = 0; i < this.numBend; i++) {

      this.aryinitAngParameter[i] = [2*PI, random(2*PI), 2*PI / random(200, 1000)];//[max, init, speed]

    }

    this.aryAngStep = [];

    for (let i = 0; i < this.numBend; i++) {

      this.aryAngStep[i] = 2*PI / this.numPoints * int(random(3, 8 + i));

    }

    this.aryColParameter = [

      [random(1000), random(1000), 1, 0.01],

      [random(1000), random(1000), 1, 0.01]];//[initNoiseX, initNoiseY, noiseR, noiseSpeed]

    this.h = random(360);

    this.numCycle = 7;

    this.lineRatio = 1;

  }

  update() {

    this.updateR();

    this.updateInitAng();

    this.newAryXy = this.aryXy;

    for (let i = 0; i < this.numBend; i++) {

      this.newAryXy = bend(this.newAryXy, this.aryR[i], this.aryinitAng[i], this.aryAngStep[i], this.numCycle);

    }

  }

  updateR() {

    this.aryR = [];

    for (let i = 0; i < this.aryRParameter.length; i++) {

      this.aryR[i] = this.aryRParameter[i][0] * (sin(this.aryRParameter[i][1] + this.aryRParameter[i][2] * frameCount));

    }

  }

  updateInitAng() {

    this.aryinitAng = [];

    for (let i = 0; i < this.aryinitAngParameter.length; i++) {

      this.aryinitAng[i] = this.aryinitAngParameter[i][1] + this.aryinitAngParameter[i][0] * (sin(this.aryinitAngParameter[i][2] * frameCount));

    }

  }

  draw() {

    for (let i = 0; i < this.newAryXy.length; i++) {

      let s = 100;

      let noiseVal2 = sin(2*PI * 2 * noise(

        this.aryColParameter[1][0] + this.aryColParameter[1][2] * cos(2*PI / this.newAryXy.length * i),

        this.aryColParameter[1][1] + this.aryColParameter[1][2] * sin(2*PI / this.newAryXy.length * i),

        this.aryColParameter[1][3] * frameCount)) * 0.5 + 0.5;

      let b = 100 * noiseVal2;

      let alp = 32;

      stroke(color(this.h, s, b, alp));

      let midCentXy = p5.Vector.lerp(this.newAryXy[i], this.centXy, this.lineRatio);

      line(this.newAryXy[i].x, this.newAryXy[i].y, midCentXy.x, midCentXy.y);

    }

  }

}

​

function bend(aryXy, r, initAng, angStep, numCycle) {

  let aryXy2 = aryXy;

  for (let j = 0; j < numCycle; j++) {

    let aryXyNew = [];

    for (let i = 0; i < aryXy2.length; i++) {

      let xy_1_2 = p5.Vector.sub(aryXy2[(i+1)%aryXy2.length], aryXy2[i]);

      let ang = initAng + angStep * i;

      xy_1_2.rotate(-PI/2).setMag(r * sin(ang));

      let xy = p5.Vector.add(aryXy2[i], xy_1_2);

      aryXyNew.push(xy);

    }

    aryXy2 = aryXyNew;

  }

​

  return aryXy2;

}

​

function draw() {

  blendMode(SCREEN);

  clear();

  background(0);

  translate(width/2, height/2);

  for (let i = 0; i < _aryLine.length; i++) {

    _aryLine[i].update();

    _aryLine[i].draw();

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  setObject();

}