55 lines
908 B
JavaScript
55 lines
908 B
JavaScript
|
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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|