let drawTriangles = [];

let bBoxes = [];

var ctx;

var sketch;

var change = 0.01;

let xoff = 0.0;

​

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)

    }

  }

  /*

  sketch.drawingContext.shadowOffsetX = -2;

  sketch.drawingContext.shadowOffsetY = -2;

   sketch.drawingContext.shadowBlur = random(1,3);

   sketch.drawingContext.shadowColor = 'black';

  */

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

    var B = { x: 540, y: 300}

    var C = { x: 60, y: 300}

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

  //myTriangles.push(tri);  

  A = {x: 300, y: 600}

  B = {x: 540, y: 300}

  C = {x: 60, y: 300}

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

  //myTriangles.push(tri);

  for (var angle = 0; angle < 360; angle+= 30) {

    /*

    i * TWO_PI / 3.0 - HALF_PI

    var x = cx + radius * cos(i * TWO_PI / 3.0 - HALF_PI);

    var y = cy + radius * sin(i * TWO_PI / 3.0 - HALF_PI);

    */

    let r  = 300;

    angleMode(DEGREES)

    let vA = {x: 300, y: 300};

    var x = Math.floor(r *sin(angle)) + 300;

    var y = Math.floor(r *cos(angle)) + 300;

    var x2 = Math.floor(r*sin(angle+30)) + 300;

    var y2 = Math.floor(r*cos(angle+30)) + 300;

    let vB = {x: x, y: y}

    let vC = {x: x2, y: y2}

    myTriangles.push(new pTriangle(vA, vB, vC, 0))

  }

  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 < 5; i++) {

    myTriangles = subDivideList();

  }

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

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

    sketch.noFill()

    //sketch.noStroke();

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

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

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

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

      myTriangles[i]._filled = true;

      myTriangles[i]._fade = 150;

      sketch.noStroke()

    } else {

      sketch.fill(random(100, 200), 0, 0, 100) //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+=1) {

     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

      if(myTriangles[i]._filled === true) {

        myTriangles[i]._fade-= 1;

        ctx.push()

        ctx.fill(random(50, 55), 0, 0, myTriangles[i]._fade)

        ctx.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)

        ctx.pop()

      }

      if(myTriangles[i]._fade <= 0){

          myTriangles[i]._filled = false;

          //sketch.noFill();

        } 

    //ctx.stroke(0, 0, 0, 40)

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

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

    }

    //ctx.background(0)

  }

  xoff = xoff + 0.001;

  change = noise(xoff) * width;

  image(ctx, 0, 0)

​

  dither(null);

  noLoop();

}

​

class pTriangle {

  constructor(A, B, C, type) {

    this._A = A;

    this._B = B;

    this._C = C;

    this._type = type;

    this._filled = false;

    this._fade = 0;

  }

}

​

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

​

  }

}

​

function index(g, x, y) {

  if (g == null) return (x + y * width) * 4;

  else return (x + y * g.width) * 4;

}

​

function DivideBy255(value) {

  return (value + 1 + (value >> 8)) >> 8;

}

function dither(g) {

  let referenceSize = 1000;

  let hasMaxSize = false;

  if (g == null) {

    let _scale = Math.ceil(1, map(width, 0, referenceSize, 0, 1, hasMaxSize));

    loadPixels();

    for (let y = 0; y < height - _scale; y++) {

      for (let x = _scale; x < width - _scale; x++) {

        let oldr = pixels[index(g, x, y)];

        let oldg = pixels[index(g, x, y) + 1];

        let oldb = pixels[index(g, x, y) + 2];

​

        let newr = (DivideBy255(oldr) * 255) | 0;

        let newg = (DivideBy255(oldg) * 255) | 0;

        let newb = (DivideBy255(oldb) * 255) | 0;

​

        pixels[index(g, x, y)] = newr;

        pixels[index(g, x, y) + 1] = newg;

        pixels[index(g, x, y) + 2] = newb;

​

        for (let _y = 1; _y <= _scale; _y++) {

          for (let _x = 1; _x <= _scale; _x++) {

            pixels[index(g, x + _x, y)] += ((oldr - newr) * 7) >> 4;

            pixels[index(g, x + _x, y) + 1] += ((oldr - newr) * 7) >> 4;

            pixels[index(g, x + _x, y) + 2] += ((oldr - newr) * 7) >> 4;

​

            pixels[index(g, x - _x, y + _y)] += ((oldr - newr) * 3) >> 4;

            pixels[index(g, x - _x, y + _y) + 1] += ((oldr - newr) * 3) >> 4;

            pixels[index(g, x - _x, y + _y) + 2] += ((oldr - newr) * 3) >> 4;

​

            pixels[index(g, x, y + _y)] += ((oldr - newr) * 5) >> 4;

            pixels[index(g, x, y + _y) + 1] += ((oldr - newr) * 5) >> 4;

            pixels[index(g, x, y + _y) + 2] += ((oldr - newr) * 5) >> 4;

​

            pixels[index(g, x + _x, y + _y)] += ((oldr - newr) * 1) >> 4;

            pixels[index(g, x + _x, y + _y) + 1] += ((oldr - newr) * 1) >> 4;

            pixels[index(g, x + _x, y + _y) + 2] += ((oldr - newr) * 1) >> 4;

          }

        }

      }

    }

    updatePixels();

  } else {

    let _scale = Math.ceil(1, map(g.width, 0, referenceSize, 0, 1, hasMaxSize));

    g.loadPixels();

    for (let y = 0; y < g.height - _scale; y++) {

      for (let x = _scale; x < g.width - _scale; x++) {

        let oldr = g.pixels[index(g, x, y)];

        let oldg = g.pixels[index(g, x, y) + 1];

        let oldb = g.pixels[index(g, x, y) + 2];

​

        let newr = (DivideBy255(oldr) * 255) | 0;

        let newg = (DivideBy255(oldg) * 255) | 0;

        let newb = (DivideBy255(oldb) * 255) | 0;

​

        g.pixels[index(g, x, y)] = newr;

        g.pixels[index(g, x, y) + 1] = newg;

        g.pixels[index(g, x, y) + 2] = newb;

​

        for (let _y = 1; _y <= _scale; _y++) {

          for (let _x = 1; _x <= _scale; _x++) {

            g.pixels[index(g, x + _x, y)] += ((oldr - newr) * 7) >> 4;

            g.pixels[index(g, x + _x, y) + 1] += ((oldr - newr) * 7) >> 4;

            g.pixels[index(g, x + _x, y) + 2] += ((oldr - newr) * 7) >> 4;

​

            g.pixels[index(g, x - _x, y + _y)] += ((oldr - newr) * 3) >> 4;

            g.pixels[index(g, x - _x, y + _y) + 1] += ((oldr - newr) * 3) >> 4;

            g.pixels[index(g, x - _x, y + _y) + 2] += ((oldr - newr) * 3) >> 4;

​

            g.pixels[index(g, x, y + _y)] += ((oldr - newr) * 5) >> 4;

            g.pixels[index(g, x, y + _y) + 1] += ((oldr - newr) * 5) >> 4;

            g.pixels[index(g, x, y + _y) + 2] += ((oldr - newr) * 5) >> 4;

​

            g.pixels[index(g, x + _x, y + _y)] += ((oldr - newr) * 1) >> 4;

            g.pixels[index(g, x + _x, y + _y) + 1] += ((oldr - newr) * 1) >> 4;

            g.pixels[index(g, x + _x, y + _y) + 2] += ((oldr - newr) * 1) >> 4;

          }

        }

      }

    }

    g.updatePixels();

  }

}

​

// p5

function setGradient(x, y, w, h, c1, c2, axis, g = null) {

  if (g == null) {

    noFill();

​

    if (axis === Y_AXIS) {

      // Top to bottom gradient

      for (let i = y; i <= y + h; i++) {

        let inter = map(i, y, y + h, 0, 1);

        let c = lerpColor(c1, c2, inter);

        stroke(c);

        line(x, i, x + w, i);

      }

    } else if (axis === X_AXIS) {

      // Left to right gradient

      for (let i = x; i <= x + w; i++) {

        let inter = map(i, x, x + w, 0, 1);

        let c = lerpColor(c1, c2, inter);

        stroke(c);

        line(i, y, i, y + h);

      }

    }

  } else {

    g.noFill();

    if (axis === Y_AXIS) {

      // Top to bottom gradient

      for (let i = y; i <= y + h; i++) {

        let inter = map(i, y, y + h, 0, 1);

        let c = lerpColor(c1, c2, inter);

        g.stroke(c);

        g.line(x, i, x + w, i);

      }

    } else if (axis === X_AXIS) {

      // Left to right gradient

      for (let i = x; i <= x + w; i++) {

        let inter = map(i, x, x + w, 0, 1);

        let c = lerpColor(c1, c2, inter);

        g.stroke(c);

        g.line(i, y, i, y + h);

      }

    }

  }

}

​

​

​

​

​

​