let snake = []; 

let snakeLength = 10; // Set the initial length of the snake

let initialSnakeLength = 10; // Store the initial length of the snake for resetting later

let food; // Declare a variable to store the position of the food block

let foodSize = 16; 

let foodColor; 

let snakeColor; 

let hueValue = 0; // Initialize the hue value for color transitions, starting at 0

​

function setup() {

  createCanvas(400, 400); 

  colorMode(HSB, 360, 100, 100); // Use HSB color mode to allow for smooth color transitions

  noStroke(); 

​

  // Initialize the snake at the center of the canvas with a default color

  snake.push(createVector(width / 2, height / 2)); // Start the snake in the middle of the canvas

  snakeColor = color(hueValue, 100, 100); // Set the initial color of the snake using the current hue value

​

  createFood(); // Generate the first food block with a random color and position

}

​

function draw() {

  background(220); 

​

  // Calculate the new position of the snake's head based on the mouse/pointer position

  let x = snake[snake.length - 1].x + (mouseX - snake[snake.length - 1].x) * 0.1; // Move the snake's head towards the mouse along the x-axis

  let y = snake[snake.length - 1].y + (mouseY - snake[snake.length - 1].y) * 0.1; // Move the snake's head towards the mouse along the y-axis

​

  // Check if the snake touches the sides of the canvas

  if (x < 0 || x > width || y < 0 || y > height) {

    resetSnake(); // If the snake touches any edge, reset its size and position

  }

​

  snake.push(createVector(x, y)); // Add the new head position to the snake's body

​

  // Check if the snake has eaten the food block

  if (dist(x, y, food.x, food.y) < foodSize) { // If the distance between the snake's head and the food is less than the food's size

    snakeLength += 2; // Increase the length of the snake by 2 units

    createFood(); // Generate a new food block at a random position with a new color

  }

​

  // Ensure the snake's length does not exceed its current length limit

  if (snake.length > snakeLength) { // If the snake's body has more segments than allowed

    snake.shift(); // Remove the oldest segment to maintain the correct length

  }

​

  // Update the snake's color through the HSB space

  hueValue = (hueValue + 1) % 360; // Increment the hue value to cycle through colors, reset to 0 after reaching 360

  snakeColor = color(hueValue, 100, 100); // Update the snake's color with the new hue value

​

  // Draw the snake on the canvas

  for (let i = 0; i < snake.length; i++) { // Loop through each segment of the snake

    fill(snakeColor); 

    ellipse(snake[i].x, snake[i].y, 16, 16); // Draw the segment as a circle at the current position

  }

​

  // Draw the food block with its random color

  fill(foodColor); 

  rect(food.x, food.y, foodSize, foodSize); // Draw the food block as a square at the specified position and size

}

​

function createFood() {

  // Generate a new random position for the food block within the canvas boundaries

  let foodX = random(foodSize, width - foodSize); 

  let foodY = random(foodSize, height - foodSize); 

  food = createVector(foodX, foodY); // Store the food position in a vector

​

  // Assign a random color to the food block

  foodColor = color(random(360), 100, 100); // Set a random hue for the food color, with full saturation and brightness

}

​

function resetSnake() {

  // Reset the snake's length and position

  snakeLength = initialSnakeLength; 

  snake = []; // Clear the snake's body (remove all segments)

  snake.push(createVector(width / 2, height / 2)); // Reset the snake's position to the center of the canvas

  hueValue = 0; // Optionally reset the hue value to start the color cycle again from the beginning

}

​