var countX, countY;

var sizeX, sizeY;

var rand;

var dots = [];

var strokeWght;

var currentWght;

var timer;

var direction;

var strokeSteps = 60;

var timerThreshold = 40;

​

function init() {

  currentWght = 0;

  timer = 0;

  direction = 1;

  dots = [];

  countX = 4 * Math.ceil(Math.random()*10);

  countY = 4 * Math.ceil(Math.random()*10);

  strokeWght = Math.ceil(Math.random()*18);

  rand = Math.ceil( 1000/countX*Math.random() );

​

  strokeWeight(0);

  sizeX = windowWidth/(countX-1);

  sizeY = windowHeight/(countY-1);

  for(var i=0; i<countX; i++) {

    for(var j=0; j<countY; j++) {

      var x = (i==0||i==(countX-1)) ? i*sizeX : (Math.random()-.5)*rand + i*sizeX;

      var y = (j==0||j==(countY-1)) ? j*sizeY : (Math.random()-.5)*rand + j*sizeY;

      var dot = createVector(x,y);

      dots.push(dot);

    }

  }

}

​

function setup() {

  canvas = createCanvas(windowWidth, windowHeight);

  init();

  background(255);

  stroke(0);

  noFill();

}

​

function keyPressed() {

  var k = key.toLowerCase();

  switch(k) {

    case 's':

      saveCanvas(canvas, 'canvas.jpg');

      break;

  }

}

​

function draw() {

​

  background(255);

​

  // frame

  strokeWeight(currentWght*2);

  rect(0, 0, windowWidth, windowHeight);

​

  if(direction==1) {

    if(currentWght<strokeWght) {

      currentWght+=strokeWght/strokeSteps;

    } else {

      timer += 1;

      if(timer==timerThreshold) {

        direction = -1;

      }

    }

  } else {

    if(currentWght>0) {

      currentWght-=strokeWght/strokeSteps;

    } else {

      init();

    }

  }

  strokeWeight(currentWght);

​

  // horizontal

  for(var i=0; i<countY; i++) {

    var cnt = countX / 4;

    for(var j=0; j<cnt; j++) {

      var p1 = dots[i+j*4*countY];

      var p2 = dots[i+j*4*countY+countY*1];

      var p3 = dots[i+j*4*countY+countY*2];

      var p4 = dots[i+j*4*countY+countY*3];

      var p00 = null;

      var p0 = null;

      if(j>0) {

        p00 = dots[i+j*4*countY-2*countY];

        p0 = dots[i+j*4*countY-countY];

      }

      drawCurves(p00, p0, p1, p2, p3, p4);

    }

  }

​

  // vertical

  for(var i=0; i<countX; i++) {

    var cnt = countY / 4;

    for(var j=0; j<cnt; j++) {

      var p1 = dots[i*countY+j*4];

      var p2 = dots[i*countY+j*4+1];

      var p3 = dots[i*countY+j*4+2];

      var p4 = dots[i*countY+j*4+3];

      var p00 = null;

      var p0 = null;

      if(j>0) {

        p00 = dots[i*countY+j*4-2];

        p0 = dots[i*countY+j*4-1];

      }

      drawCurves(p00, p0, p1, p2, p3, p4);

    }

  }

}

​

function drawCurves(p00, p0, p1, p2, p3, p4) {

  curve(p1.x,p1.y,p1.x,p1.y,p2.x,p2.y,p3.x,p3.y);

  curve(p1.x,p1.y,p2.x,p2.y,p3.x,p3.y,p4.x,p4.y);

  curve(p2.x,p2.y,p3.x,p3.y,p4.x,p4.y,p4.x,p4.y);

  if(p00) {

    curve(p00.x,p00.y,p0.x,p0.y,p1.x,p1.y,p2.x,p2.y);

  }

}

​