const grid_size = 80; const main_color = "#ff8c42"; const accent_color = "#4e598c"; var def_color = main_color; function setup() { createCanvas(800, 800); frameRate(1); } function draw() { background(255); for (let x = 0; x < width; x += grid_size) { for (let y = 0; y < height; y += grid_size) { gridPattern(x, y, int(random(10))); stroke(0); strokeWeight(4); noFill(); rect(x, y, grid_size, grid_size); } } } function gridPattern(x, y, n) { switch(n) { case 0: def_color = accent_color; gridPattern(x, y, int(random(10))); def_color = main_color; break; case 1: stroke("#f9c784"); strokeWeight(4); for (let i = 5; i <= grid_size; i += 20) { line(x, y+i, x+i, y); line(x+grid_size, y+i, x+i, y+grid_size); } case 2: stroke("#fcaf58"); strokeWeight(4); for (let i = 10; i <= grid_size; i += 20) { line(x, y+i, x+i, y); line(x+grid_size, y+i, x+i, y+grid_size); } case 3: stroke(def_color); strokeWeight(4); for (let i = 20; i <= grid_size; i += 20) { line(x, y+i, x+i, y); line(x+grid_size, y+i, x+i, y+grid_size); } break; case 4: stroke(def_color); strokeWeight(4); for (let i = 10; i <= grid_size; i += 10) { line(x, y+i, x+grid_size, y+i); } break; case 5: stroke(def_color); for (let i = 10; i <= grid_size; i += 10) { line(x+i, y, x+i, y+grid_size); } break; case 6: stroke(def_color); strokeWeight(2); for (let i = 10; i <= grid_size; i += 10) { line(x, y+i, x+grid_size, y+i); line(x+i, y, x+i, y+grid_size); } break; case 7: noStroke(); fill("#fcaf58"); for (let i = 1; i*8 <= grid_size; i++) { for (let j = 1; j*8 <= grid_size; j++) { if ((i%2 == 0 && j%2 == 1) || (i%2 == 1 && j%2 == 0)) { circle(x+i*8, y+j*8, 4); } } } case 8: noStroke(); fill(def_color); for (let i = 1; i*8 <= grid_size; i++) { for (let j = 1; j*8 <= grid_size; j++) { if ((i%2 == 0 && j%2 == 0) || (i%2 == 1 && j%2 == 1)) { circle(x+i*8, y+j*8, 4); } } } break; case 9: stroke(def_color); strokeWeight(4); for(let i = 10; i < grid_size; i += 10){ rect(x+i, y+i, grid_size-i*2, grid_size-i*2); } } }

Pattern Grids