const black = '#1a181a';
const white = '#e5c463';
let width = window.innerWidth;
let height = window.innerHeight;

let xScale = 0.015;
let yScale = 0.02;

let gridsize = 10;

let canvas;
let frameBuffer;

function setup(){
	canvas = createCanvas(width, height, WEBGL);
	frameBuffer = createFramebuffer({ width: 800, height: 800 });
	noFill();
	noStroke();
	rotateY(45);
}

function draw() {
	if (frameCount % 60 === 0) {
		frameBuffer.begin();
		background(black);
		fill(white);
		const count = frameCount / 100;
		for (let x = -0.5 * width; x < 0.5 * width; x += gridsize) {
			for (let y = -0.5 * height; y < 0.5 * height; y += gridsize) {
				let noiseValue = noise(x * xScale, y * yScale, count);

				square(x, y, noiseValue * gridsize);
			}
		}
		frameBuffer.end();
	}

	background(black);
	push();
	rotateY(frameCount / 1000);
  textureWrap(MIRROR);
	texture(frameBuffer);
	sphere(200);
	pop();
}