xxxxxxxxxx
// Global variables for grid and tile size
let cols, rows;
let tileSize = 40;
// Array to hold the colors used in the artwork
let colors = [
'#FFFF00', // Yellow
'#0000FF', // Blue
'#FF0000', // Red
'#ADD8E6', // Light Blue
'#DCDCDC' // Light Grey
];
function setup() {
createCanvas(400, 400); // Create a canvas of size 400x400
cols = width / tileSize; // Calculate number of columns
rows = height / tileSize; // Calculate number of rows
noLoop(); // Draw only once
}
function draw() {
background(220); // Set background color to light grey
// Loop through all grid cells to draw tiles
for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
// Calculate the x and y position for each tile
let x = i * tileSize;
let y = j * tileSize;
drawTile(x, y, tileSize); // Draw each tile
}
}
}
// Function to draw a single tile
function drawTile(x, y, size) {
// Draw the tile background
fill(220); // Grey background for each tile
rect(x, y, size, size);
// Randomly select colors for horizontal and vertical stripes
let horizontalColor = random(colors);
let verticalColor = random(colors);
// Randomly generate the height and width of stripes
let horizontalHeight = random(size / 4, size / 2); // Random height for horizontal stripe
let verticalWidth = random(size / 4, size / 2); // Random width for vertical stripe
// Randomly position the horizontal and vertical stripes within the tile bounds
let horizontalY = random(0, size - horizontalHeight); // Random vertical position for the horizontal stripe
let verticalX = random(0, size - verticalWidth); // Random horizontal position for the vertical stripe
// Draw the horizontal stripe
fill(horizontalColor);
rect(x, y + horizontalY, size, horizontalHeight); // Horizontal stripe spanning the tile width
// Draw the vertical stripe
fill(verticalColor);
rect(x + verticalX, y, verticalWidth, size); // Vertical stripe spanning the tile height
}