jagged sinetre

/* 

*/

​

let lines = [];

let square;

let counter = 0.0;

let gap;

let sT, cT;

let frame = 0;

function setup() 

{

  if (windowWidth > windowHeight) square = windowHeight;

  else square = windowWidth;

  createCanvas(square, square);

  frameRate(30);

  background(15, 21, 33);

  stroke(145, 229, 233, 150);

  var line, dot,

    odd = false;

  gap = square / 15;

​

  for(var y = -gap * 2; y <= square + gap; y+= gap) 

  {

    odd = !odd;

    line = [];

    for(var x = -gap * 2.5; x <= square + (gap * 2); x+= gap) 

    {

      line.push({

        x: x + ((sin(x / 4)) + (random()* 0.4 - 0.2)) * gap  + (odd ? gap/2 : 0),

        y: y + ((sin(y / 4)) + (random()* 0.4 - 0.2)) * gap,

        alpha: (x / (square / 100)) + random(20)

      });

    }

    lines.push(line);

  }

}

​

function draw() 

{

  //if (frameCount % 30 == 0)

  {

    background(0);

    var dotLine;

    odd = true;

    for(var y = 0; y < lines.length - 1; y++) 

    {

      odd = !odd;

      dotLine = [];

      for(var i = 0; i < lines[y].length; i++) 

      {

        dotLine.push(odd ? lines[y][i]   : lines[y+1][i]);

        dotLine.push(odd ? lines[y+1][i] : lines[y][i]);

      }

      for(var i = 0; i < dotLine.length - 2; i++) 

      {

        drawTriangle(dotLine[i], dotLine[i+1], dotLine[i+2]);

      }

    }

    //if (frame < 1000) saveCanvas("sinetre_" + frame++,"png");

    sT = sin(counter) * (gap / 2);

    cT = cos(counter) * (gap / 2);

    counter += 0.03;

  }

​

  //if (frame < 120) saveCanvas("sinetre_" + frame++,"png");

​

}

​

function drawTriangle(pointA, pointB, pointC) {

  drawingContext.beginPath();

  drawingContext.moveTo(pointA.x + sT * 2, pointA.y + cT);

  drawingContext.lineTo(pointB.x - cT, pointB.y + sT);

  drawingContext.lineTo(pointC.x + cT, pointC.y, + sT / 2);

  drawingContext.lineTo(pointA.x, pointA.y);

  drawingContext.closePath();

  var alpha = (pointA.x / (square / 100)) + random(20);

  fill(145, 229, 255, pointA.alpha); 

  drawingContext.fill();

  drawingContext.stroke();

}

​