Lines & Curves

const width = 960;

const height = 720;

const rowCount = 20;

const colCount = 15;

const tileWidth = width / colCount;

const tileHeight = height / rowCount;

​

function setup() {

  createCanvas(width, height);

  colorMode(HSB, 360, 100, 100);

  strokeWeight(3);

  frameRate(3); // Lower frame rate for a slower change in the animation

}

​

function draw() {

  background(0);

  const baseHue = (frameCount * 5) % 360;

​

  for (let row = 0; row < rowCount; row++) {

    for (let col = 0; col < colCount; col++) {

      const x = col * tileWidth;

      const y = row * tileHeight;

​

      const hue = (baseHue + row * 20 + col * 20) % 360;

      const saturation = 80;

      const brightness = 100;

​

      stroke(hue, saturation, brightness);

      drawTile(x, y, tileWidth, tileHeight);

    }

  }

}

​

function drawTile(x, y, width, height) {

  const patternType = int(random(3));

  const divisions = int(random(3, 6));

​

  push();

  translate(x, y);

  if (patternType === 0) {

    for (let i = 0; i < divisions; i++) {

      const yPos = (i / divisions) * height;

      line(0, yPos, width, yPos);

    }

  } else if (patternType === 1) {

    for (let i = 0; i < divisions; i++) {

      const xPos = (i / divisions) * width;

      line(xPos, 0, xPos, height);

    }

  } else {

    for (let i = 0; i < divisions; i++) {

      const xPos = (i / divisions) * width;

      const yPos = (i / divisions) * height;

      line(0, yPos, xPos, height);

      line(xPos, 0, width, yPos);

    }

  }

​

  pop();

}

​

let lapse = 0;    // mouse timer

function mousePressed(){

// prevents mouse press from registering twice

  if (millis() - lapse > 400){

    save("img_" + month() + '-' + day() + '_' + hour() + '-' + minute() + '-' + second() +

    ".jpg");

    lapse = millis();

  }

}

​