5x5 Grid - OpenProcessing

mySketch
xxxxxxxxxx
 
let colors = [];
let colorSwatches = ["#FFFFFF", "#000000", "#fcaf32", "#27aae1", "#8dc63f"];
let selectedColor = colorSwatches[0];
let strokeWidth = 10;
let stroked = [];
​
let mainCanvas;
​
function setup() {
  mainCanvas = createCanvas(500, 500);
  createSwatches(); // Create the swatches below the canvas
  noStroke();
  rectMode(CENTER);
​
  // Initialize the colors and stroked array with all white squares and false values
  for (let i = 0; i < 25; i++) {
    colors.push("#FFFFFF");
    stroked.push(false);
  }
}
​
function mouseClicked() {
  if (mouseY < 500 && mouseY >= 0 && mouseX >= 0 && mouseX < 500) {
    // Change the color of the clicked square
    let i = floor(mouseX / 100);
    let j = floor(mouseY / 100);
    let index = j * 5 + i; // Calculate the index of the clicked square
    
    colors[index] = selectedColor;
    stroked[index] = selectedStroked;
  }
}
​
function draw() {
  background(255);
​
  // Draw the 5x5 grid of squares with their current color
  for (let i = 0; i < 5; i++) {
    for (let j = 0; j < 5; j++) {
      let x = i * 100 + 50;
      let y = j * 100 + 50;
      let index = j * 5 + i; // Calculate the index of the current square
      
      if (stroked[index]) {
        noFill();
        strokeWeight(strokeWidth);
        stroke(colors[index]);
        rect(x, y, 100 - strokeWidth, 100 - strokeWidth);
        noStroke(); // Reset the stroke settings
      } else {
        fill(colors[index]);
        noStroke(); // Reset the stroke settings
        rect(x, y, 100, 100);
      }
    }
  }
}
​
​
function keyPressed() {
  if (key === 's' || key === 'S') {
    saveCanvas(mainCanvas, 'WallIcon', 'png');
  }
}
​
// Create the color swatches outside the canvas
function createSwatches() {
  let swatchesContainer = createDiv();
  swatchesContainer.style('display', 'flex');
  swatchesContainer.style('flex-wrap', 'wrap');
  swatchesContainer.style('margin-top', '20px'); // Add margin to the top
  swatchesContainer.style('margin-right', '20px'); // Add margin to the left
​
  for (let i = 0; i < colorSwatches.length; i++) {
    let swatch = createDiv();
    swatch.style('width', '50px');
    swatch.style('height', '25px');
    swatch.style('background-color', colorSwatches[i]);
    swatch.style('margin-right', '10px');
    swatch.style('margin-bottom', '10px'); // Add margin to the bottom
    swatch.mouseClicked(() => {
      selectedColor = colorSwatches[i];
      selectedStroked = false;
    });
    swatchesContainer.child(swatch);
  }
​
  for (let i = 0; i < colorSwatches.length; i++) {
    let swatch = createDiv();
    swatch.style('width', '40px'); // Adjust the width to account for the stroke
    swatch.style('height', '15px'); // Adjust the height to account for the stroke
    swatch.style('border', `5px solid ${colorSwatches[i]}`); // Set stroke width to 5px
    swatch.style('margin-right', '10px');
    swatch.style('margin-bottom', '10px'); // Add margin to the bottom
    swatch.mouseClicked(() => {
      selectedColor = colorSwatches[i];
      selectedStroked = true;
    });
    swatchesContainer.child(swatch);
  }
}
​
let selectedStroked = false;
​