const black = '#1a181a';
const white = '#e5c463';
let xScale = 0.015;
let yScale = 0.02;

let xOffset = 0;
let yOffset = 0;

let gridsize = 6;
let width = window.innerWidth;
let height = window.innerHeight;

let t = 0;
let tdir = 1;

function setup() {
	createCanvas(width, height);
	drawGrid();
}

function draw() {
	yOffset += 0.2;
	xOffset += 0.1;
	t += tdir;
	if (t > width / gridsize) {
		tdir = -1;
	} else if (t <= 0) {
		tdir = 1;
	}

	drawGrid();
}

function drawGrid() {
  background(white);
  noStroke();
	fill(black);

  for (let x = 0; x < width; x += gridsize) {
		if (x % t < t * gridsize) {
			rect(x, 0, gridsize, height);
		}
	}

  for (let x = 0; x < width; x += gridsize) {
    for (let y = 0; y < height; y += gridsize) {
			let noiseValue = noise((x + 2 * xOffset) * 2 * xScale, (y + 2 * yOffset) * 2 * yScale);

			if (noiseValue >= 0.5) {
				square(x, y, gridsize);
			}
    }
  }
}