let names = []; // This will store all the names from the CSV

let houses = []; // This will store all the houses from the CSV

let message = "Press the mouse to sort the houses"; // Initial message

let csvLoaded = false; // To check if the CSV is fully loaded

​

function preload() {

  // Load the CSV file and process it

  strings = loadStrings("Houses.csv", processCSV); 

}

​

function processCSV() {

  // Make sure the file has at least two rows

  if (strings.length >= 2) {

    // Split the first row into names and the second row into houses

    names = split(strings[0], ',').map(name => name.trim());  // Clean up any extra spaces

    houses = split(strings[1], ',').map(house => house.trim());

    csvLoaded = true; // Mark the CSV as successfully loaded

  }

}

​

function setup() {

  createCanvas(400, 400);

  textSize(18);

  fill(255);

  textAlign(LEFT, TOP);

}

​

function draw() {

  if (showCastle) {

    // Draw the castle and the night sky if the mouse was pressed

    background(20, 24, 82); 

​

    // Create random stars with moving effect

    fill(255, 255, 255);

    for (let i = 0; i < 50; i++) {

      let x = random(width);

      let y = random(height);

      ellipse(x, y, 3, 3);

    }

​

    // Draw the moon

    noStroke();

    fill(255, 255, 224); 

    ellipse(60, 60, 70, 70); 

    fill(20, 24, 82); // Create the crescent moon effect

    ellipse(70, 50, 60, 60);

​

    // Castle Drawing

    fill(169, 169, 169); 

    rect(50, 250, 300, 150); // Castle base

​

    // Castle towers

    rect(160, 150, 80, 150); // Center tower

    rect(50, 190, 60, 110); // Left tower

    triangle(50, 190, 80, 110, 110, 190); // Roof for left tower

    rect(290, 190, 60, 110); // Right tower

    triangle(290, 190, 320, 110, 350, 190); // Roof for right tower

    triangle(160, 150, 200, 70, 240, 150); // Roof for center tower

​

    // Windows in the castle

    fill(255, 204, 0); 

    for (let i = 0; i < 5; i++) {

      rect(100 + i * 50, 300, 20, 30); // Windows on the base

    }

    rect(190, 200, 20, 30); // Center tower window

    rect(70, 230, 20, 30); // Left tower window

    rect(310, 230, 20, 30); // Right tower window

​

    // Display the sorting message at the bottom

    textAlign(CENTER, CENTER);

    textSize(24);

    fill(255);

    text(message, width / 2, height - 50);

​

  } else {

    // Initial screen with instructions

    background(20, 24, 82); 

    fill(255); 

    textAlign(CENTER, CENTER);

    textSize(24);

    text("Press the mouse to sort the houses", width / 2, height / 2); //Initial text

  }

}

​

function mousePressed() {

  if (csvLoaded && names.length > 0 && houses.length > 0) {

    // Once the mouse is pressed and the CSV is loaded, show the castle

    showCastle = true;

    // Pick a random name and a random house

    let name = names[int(random(names.length))];

    let house = houses[int(random(houses.length))];

    // Random House picker message 

    message = name + " is in " + house + " house";

  } 

}

​