var strWg;

var rotNum;

​

//this parametric value changes the patterns density

var density = 5;

​

function setup() {

  createCanvas(600, 600);

​

  constructGraphics();

  rotNum = 0;

  letter = "A";

}

​

function constructGraphics() {

  canvas = createGraphics(600, 600);

  canvas.fill(255);

  canvas.rect(0, 0, canvas.width, canvas.height);

  canvas.smooth(4);

  canvas.clear();

  canvas.textSize(100);

  canvas.textAlign(CENTER, CENTER);

}

​

function draw() {

  canvas.clear();

  canvas.text("Transform", width / 2, height / 2);

​

  background(0);

  strokeWeight(2);

​

  for (var x = -50; x < width + 50; x += density) {

    for (var y = -50; y < height + 50; y += density) {

      myColor = canvas.get(x, y);

      readCanvas();

​

      x1Min = 4;

      x1Max = 10;

      x1Offset = 4;

      x1Step = -0.5;

​

      y1Min = 10;

      y1Max = 4;

      y1Offset = 4;

      y1Step = -0.5;

​

      x2Min = 10;

      x2Max = 4;

      x2Offset = 4;

      x2Step = -0.5;

​

      y2Min = 10;

      y2Max = 4;

      y2Offset = 4;

      y2Step = -0.5;

​

      line(

        x + sin(rotNum) * sin(x) * 2,

        y + cos(rotNum) * cos(x) * 2,

        x + sin(rotNum) * cos(y) * 2,

        y + cos(rotNum) * sin(y) * 2

      );

    }

    rotNum = rotNum + 0.001;

  }

}

​

function readCanvas() {

  if (myColor[0] > 200) {

    stroke(255);

  } else {

    noStroke();

  }

}

​