let gridWidth = 16;  // Number of columns in the grid

let gridHeight = 12; // Number of rows in the grid

let cellSize; // Size of each cell in pixels

let colors = [];  // Array to hold the color palette

let currentColorIndex = 0;  // Track the current color index selected

let isDrawing = false;  // Flag to track if the user is holding the mouse to draw

let colorBoxSize = 30;  // Size of each color box in the palette

let paletteCols = 6;

​

​

function setup() {

  colors = [

    color(255, 255, 255), // White

    color(255, 0, 0),     // Red

    color(0, 255, 0),     // Green

    color(0, 0, 255),     // Blue

    color(255, 255, 0)    // Yellow

  ];

  let paletteWidthMargin = 0

  let paletteHeightMargin = 0

  let maxCanvasWidth = 800

  let maxCanvasHeight = 800

​

  let gridWidthMargin = 20;

  let gridHeightMargin = 20;  // Additional margin for grid height

  let paletteHeight = (colors.length + 1) * (colorBoxSize + 10) + 20 + paletteHeightMargin;  // Space for the color palette and margin

  let paletteWidth = (colorBoxSize * 2 + 10) * paletteCols + paletteWidthMargin;

  cellSize = Math.min((maxCanvasWidth - gridWidthMargin - paletteWidth) / gridWidth, (maxCanvasHeight - gridHeightMargin) / gridHeight)

​

  let canvasHeight = Math.max((gridHeight * cellSize) + gridHeightMargin, paletteHeight + gridHeightMargin); // Adjust height to fit both grid and palette

  let canvasWidth = (gridWidth * cellSize) + gridWidthMargin + paletteWidth;

  createCanvas(canvasWidth, canvasHeight);

  let numCols = gridWidth;

  let numRows = gridHeight;

​

  // Initialize the grid with all cells set to 0 (white)

  grid = new Array(numCols).fill().map(() => new Array(numRows).fill(0));

​

  // Define the colors (white is now at index 0)

}

​

function draw() {

  background(220);

​

  // Draw the grid (leave space for the palette on the right)

  for (let x = 0; x < gridWidth; x++) {

    for (let y = 0; y < gridHeight; y++) {

      fill(colors[grid[x][y]]);

      rect(x * cellSize, y * cellSize, cellSize, cellSize);

      stroke(200);

      noFill();

      rect(x * cellSize, y * cellSize, cellSize, cellSize);

    }

  }

​

  // Draw the color palette to the right of the grid

  noStroke();

  let paletteX = width - (colorBoxSize * 2 + 10) * paletteCols;  // Position the palette on the right

  for (let i = 0; i < colors.length; i++) {

    var row = i % paletteCols;

    var col = Math.floor(i / paletteCols)

    fill(colors[i]);

    rect(paletteX + row * 2 * colorBoxSize + row * 10, col * (colorBoxSize + 10) + 10, colorBoxSize, colorBoxSize);

​

    // Add a trash icon (X) next to each color except white

    if (i !== 0) {

      fill(255);

      // Draw the box for the trash icon

      rect(paletteX + row * colorBoxSize * 2 + row * 10 + colorBoxSize + 5, col * (colorBoxSize + 10) + 10, colorBoxSize, colorBoxSize);

      fill(0);

      textSize(12);

      textAlign(CENTER, CENTER);

      // Center the 'X' in the middle of the trash box

      text('X', paletteX + row * colorBoxSize * 2 + row * 10 + colorBoxSize + 5, col * (colorBoxSize + 10) + 10, colorBoxSize, colorBoxSize);

    }

  }

  var rowARC = colors.length % paletteCols;

  var colARC = Math.floor(colors.length / paletteCols)

  // Draw the "Add Random Color" button at the bottom of the palette

  fill(200);

  rect(paletteX + rowARC * colorBoxSize * 2 + rowARC * 10, colARC * (colorBoxSize + 10) + 10, colorBoxSize * 2 + 5, colorBoxSize);

  fill(0);

  textSize(18);

  textAlign(CENTER, CENTER);

  text('+', paletteX + rowARC * colorBoxSize * 2 + rowARC * 10, colARC * (colorBoxSize + 10) + 10, colorBoxSize * 2 + 5, colorBoxSize);

}

​

function mousePressed() {

  // Check if the user clicked inside the grid

  let col = Math.floor(mouseX / cellSize);

  let row = Math.floor(mouseY / cellSize);

​

  // If the mouse is inside the grid, change the color of the pixel

  if (col < gridWidth && row < gridHeight && col >= 0 && row >= 0) {

    // Ensure the currentColorIndex is valid

    if (currentColorIndex < 0 || currentColorIndex >= colors.length) {

      currentColorIndex = 0;  // Set to white if it's out of bounds

    }

    grid[col][row] = currentColorIndex;

    isDrawing = true;  // Start drawing

  }

​

  // Check if the user clicked on the color palette

  let paletteX = width - (colorBoxSize * 2 + 10) * paletteCols;

  if (mouseX > paletteX) {

    var paletteCol = Math.floor((mouseX - paletteX) / (colorBoxSize + 5));

    var paletteRow = Math.floor((mouseY - 10) / (colorBoxSize + 10));

    print(colors.length % paletteCols * 2, paletteCol,  Math.floor(colors.length / paletteCols), paletteRow);

​

    if (Math.floor(colors.length / paletteCols) > paletteRow || (colors.length % paletteCols * 2 > paletteCol && Math.floor(colors.length / paletteCols) === paletteRow)) {

      if (paletteCol % 2 === 0) {

        currentColorIndex = paletteCol / 2 + paletteRow * paletteCols;

      }

      else if(paletteCol !== 1 || paletteRow !== 0) {

        deleteColor(Math.floor(paletteCol / 2) + paletteRow * paletteCols)

      }

    }

    else if (Math.floor(colors.length / paletteCols) === paletteRow && colors.length % paletteCols * 2 - paletteCol <= 1){

      addRandomColor()

    }

    else {

      print("out of bounds")

    }

    print(colors.length)

  }

}

​

function mouseReleased() {

  isDrawing = false;  // Stop drawing when the mouse is released

}

​

function mouseDragged() {

  // Check if the user is holding the mouse button to draw

  if (isDrawing) {

    let col = Math.floor(mouseX / cellSize);

    let row = Math.floor(mouseY / cellSize);

​

    // Update the grid if within bounds

    if (col < gridWidth && row < gridHeight && col >= 0 && row >= 0) {

      // Ensure the currentColorIndex is valid

      if (currentColorIndex < 0 || currentColorIndex >= colors.length) {

        currentColorIndex = 0;  // Set to white if it's out of bounds

      }

      grid[col][row] = currentColorIndex;

    }

  }

}

​

function keyPressed() {

  if (key === 'S' || key === 's') {

    console.log(getGridData());

  }

}

​

​

​

// Function to add a random color to the palette

function addRandomColor() {

  let randomColor = color(random(255), random(255), random(255));

  colors.push(randomColor);

}

​

// Function to delete a color from the palette

function deleteColor(index) {

  // Set all instances of the deleted color to white (index 0)

  for (let x = 0; x < gridWidth; x++) {

    for (let y = 0; y < gridHeight; y++) {

      if (grid[x][y] === index) {

        grid[x][y] = 0;  // Change to white

      }

    }

  }

​

  // Remove the color from the palette

  colors.splice(index, 1);

​

  // If the current color was deleted, reset to white (index 0)

  if (currentColorIndex === index) {

    currentColorIndex = 0;

  }

}

​

​

function getGridData() {

  let data = grid.map(row => `[${row.join(', ')}]`);

  return `[${data.join(', ')}]`;  // Format the output as a Python-like list

}