let drawTriangles = [];

let bBoxes = [];

var ctx;

var sketch;

var change = 0.01;

​

function setup() {

  createCanvas(600, 600);

  sketch = createGraphics(width, height);

​

  sketch.background(220);

  sketch.stroke(201, 30, 250);

  for (var i = 20; i < width - 10; i += 20) {

    var sign = random() * 2;

    sketch.stroke(100, 30, 203, 10 + random() * 100);

    if (sign > 1) {

      sketch.line(i + (3 + noise(i)), 10 + noise(i), i + noise(i), height - 10);

    } else {

      sketch.line(i + (3 - noise(i)), 10 - noise(i), i - noise(i), height - 10);

    }

  }

  for (var j = 20; j < height - 10; j += 20) {

    sketch.stroke(100, 30, 203, 10 + random() * 100);

    if (sign > 1) {

      sketch.line(10, j + noise(j), width - 10 + noise(j), j + (1 + noise(j)));

    } else {

      sketch.line(10, j - noise(j), width - 10 - noise(j), j - (1 - noise(j)));

    }

  }

​

  for (var k = 0; k < 600; k++) {

    for (var l = 0; l < 600; l++) {

      drawPoint(k, l);

    }

  }

​

  var A = { x: 300, y: 0 };

  var B = { x: 540, y: 500 };

  var C = { x: 60, y: 500 };

  var tri = new pTriangle(A, B, C, 0);

  //myTriangles.push(tri);

  var r = 300;

  var offset = 300;

  var angle = 0;

  for (var count = 0; count < 1; count++) {

    var x = r * cos(angle) + offset;

    var y = r * sin(angle) + offset;

    var tA = { x: x, y: y };

    angle += (1 / 3) * (2 * Math.PI);

    x = r * cos(angle) + offset;

    y = r * sin(angle) + offset;

    var tB = { x: x, y: y };

    angle += (1 / 3) * (2 * Math.PI);

    //angle = (2/3)*(2*Math.PI)

    x = r * cos(angle) + offset;

    y = r * sin(angle) + offset;

    var tC = { x: x, y: y };

    myTriangles.push(new pTriangle(tA, tB, tC, 0));

    BBox(tA.x, tA.y, tB.x, tB.y, tC.x, tC.y);

    angle += 20;

    //r = random(-300, 300)

    //offset += random(200, 200)

  }

  for (var i = 0; i < random(2,16); i++) {

    myTriangles = subDivideList();

  }

​

  for (var i = 0; i < myTriangles.length; i++) {

    sketch.stroke(random(0,255), 0, 0, random(15, 35));

    sketch.noFill();

    //noStroke();

​

    //if(i % 2 === 0) sketch.noStroke()

    if (myTriangles[i]._type === 0) {

      //sketch.fill(random(50, 100), 0, 0, random(30, 30))

      //sketch.noStroke()

    } else {

      //sketch.fill(random(200, 200), 0, 0, 200) //random(30, 30))

    }

    sketch.triangle(

      myTriangles[i]._A.x,

      myTriangles[i]._A.y,

      myTriangles[i]._B.x,

      myTriangles[i]._B.y,

      myTriangles[i]._C.x,

      myTriangles[i]._C.y

    );

​

    sketch.triangle(

      myTriangles[i]._A.x + random(-5, 5),

      myTriangles[i]._A.y + random(-5, 5),

      myTriangles[i]._B.x + random(-5, 5),

      myTriangles[i]._B.y + random(-5, 5),

      myTriangles[i]._C.x + random(-5, 5),

      myTriangles[i]._C.y + random(-5, 5)

    );

    sketch.noFill();

​

    sketch.triangle(

      myTriangles[i]._A.x + random(-5, 5),

      myTriangles[i]._A.y + random(-5, 5),

      myTriangles[i]._B.x + random(-5, 5),

      myTriangles[i]._B.y + random(-5, 5),

      myTriangles[i]._C.x + random(-5, 5),

      myTriangles[i]._C.y + random(-5, 5)

    );

  }

​

  ctx = createGraphics(width, height);

}

​

function draw() {

  let count = 0;

  image(sketch, 0, 0);

​

  //background(0)

  /*

  if(frameCount %1 === 0) {

    ctx.clear()

    for(var i = 0; i < myTriangles.length; i++) {

    var base = sqrt( (pow(myTriangles[i]._B.x - myTriangles[i]._C.x, 2)) + (pow(myTriangles[i]._B.y - myTriangles[i]._C.y, 2)))

    var cX = (myTriangles[i]._A.x+myTriangles[i]._B.x+myTriangles[i]._C.x)/3

    var cY = (myTriangles[i]._A.y+myTriangles[i]._B.y+myTriangles[i]._C.y)/3

    //ctx.line(change, change, cX, cY)

    //blob(base/10,cX,cY,i/10,i+i)

    }

    //ctx.background(0)

  }

    change+= 1

  */

​

  //image(ctx, 0, 0)

​

  //noLoop();

}

​

class pTriangle {

  constructor(A, B, C, type) {

    this._A = A;

    this._B = B;

    this._C = C;

    this._type = type;

  }

}

​

class pBBox {

  constructor(x, y, w, h) {

    this._x = x;

    this._y = y;

    this._w = w;

    this._h = h;

  }

}

​

function drawPoint(x, y) {

  if (random() > 0.0005) {

    //point(x, y);

  } else {

    for (let i = 0; i < random(5); i++) {

      sketch.point(x + random(-1, 1), y + random(-1, 1));

    }

  }

}

​

function subDivideList() {

  var myTrianglesTemp = [];

  for (var i = 0; i < myTriangles.length; i++) {

    var goldenRatio = 0.6180339887498948482;

    var A = myTriangles[i]._A;

    var B = myTriangles[i]._B;

    var C = myTriangles[i]._C;

    var vA = createVector(myTriangles[i]._A.x, myTriangles[i]._A.y);

    var vB = createVector(myTriangles[i]._B.x, myTriangles[i]._B.y);

    var vC = createVector(myTriangles[i]._C.x, myTriangles[i]._C.y);

    var type = myTriangles[i]._type;

    if (type === 0) {

      var P = p5.Vector.mult(p5.Vector.sub(vB, vA), goldenRatio);

      P = p5.Vector.add(P, vA);

​

      myTrianglesTemp.push(new pTriangle(C, P, B, 0));

      myTrianglesTemp.push(new pTriangle(P, C, A, 1));

      drawTriangles.push(new pTriangle(C, P, B, 0));

      drawTriangles.push(new pTriangle(P, C, A, 1));

    } else {

      //result += [(1, R, C, A), (1, Q, R, B), (0, R, Q, A)]

      var Q = p5.Vector.mult(p5.Vector.sub(vA, vB), goldenRatio);

      Q = p5.Vector.add(Q, vB);

      var R = p5.Vector.mult(p5.Vector.sub(vC, vB), goldenRatio);

      R = p5.Vector.add(R, vB);

​

      myTrianglesTemp.push(new pTriangle(R, C, A, 1));

      myTrianglesTemp.push(new pTriangle(Q, R, B, 1));

      myTrianglesTemp.push(new pTriangle(R, Q, A, 0));

      drawTriangles.push(new pTriangle(R, C, A, 1));

      drawTriangles.push(new pTriangle(Q, R, B, 1));

      drawTriangles.push(new pTriangle(R, Q, A, 0));

    }

  }

​

  return myTrianglesTemp;

}

​

function BBox(x1, y1, x2, y2, x3, y3) {

  let x = min(x1, x2, x3),

    y = min(y1, y2, y3);

  let w = max(x1, x2, x3) - x,

    h = max(y1, y2, y3) - y;

​

  bBoxes.push(new pBBox(x, y, w, h));

}

​

function blob(radius, xpos, ypos, roughness, angle) {

  ctx.noStroke(); // no stroke for the circle

  //color to fill the blob

​

  //we enclose things between push and pop so that all transformations within only affect items within

  ctx.push();

  ctx.fill(random(100, 100), 0, 0, 100);

  ctx.translate(xpos, ypos); //move to xpos, ypos

  ctx.rotate(angle + change); //rotate by this.angle+change

​

  //begin a shape based on the vertex points below

  ctx.beginShape();

​

  //The lines below create our vertex points

  var off = 0;

  for (var i = 0; i < TWO_PI; i += 0.1) {

    var offset = map(noise(off, change), 0, 1, -roughness, roughness);

    var r = radius + offset;

    var x = r * cos(i);

    var y = r * sin(i);

    ctx.vertex(x, y);

    off += 0.1;

  }

  ctx.endShape(); //end and create the shape

  ctx.pop();

}

​

function subdivide(A, B, C, type) {

  var goldenRatio = 0.6180339887498948482;

  var vA = createVector(A.x, A.y);

  var vB = createVector(B.x, B.y);

  var vC = createVector(C.x, C.y);

  if (type === 0) {

    var P = p5.Vector.mult(p5.Vector.sub(vB, vA), goldenRatio);

    P = p5.Vector.add(P, vA);

​

    myTriangles.push(new pTriangle(C, P, B, 0));

    myTriangles.push(new pTriangle(P, C, A, 1));

  } else {

    //result += [(1, R, C, A), (1, Q, R, B), (0, R, Q, A)]

    var Q = p5.Vector.mult(p5.Vector.sub(vA, vB), goldenRatio);

    Q = p5.Vector.add(Q, vB);

    var R = p5.Vector.mult(p5.Vector.sub(vC, vB), goldenRatio);

    R = p5.Vector.add(R, vB);

​

    myTriangles.push(new pTriangle(R, C, A, 1));

    myTriangles.push(new pTriangle(Q, R, B, 1));

    myTriangles.push(new pTriangle(R, Q, A, 0));

  }

}

​