let img, img1;
let imageTitle = "";
let description = "";
let imgLoaded = false;
let arrayOfDefaults = [
  "https://images-assets.nasa.gov/image/PIA10497/PIA10497~orig.jpg",
  "https://www.nasa.gov/wp-content/uploads/2024/09/hubble-ic-4709.jpg",
  "https://www.nasa.gov/wp-content/uploads/2024/08/dustmorocco-vir-20240824-lrg.jpg",
  "https://images-assets.nasa.gov/image/PIA04226/PIA04226~orig.jpg",
  "https://images-assets.nasa.gov/image/PIA04216/PIA04216~orig.jpg"
];

const apiKey = "DEMO_KEY";
const apiUrl = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}`;
const corsProxy = "https://cors-anywhere.herokuapp.com/";

const fallbackImage = "https://assets.codepen.io/4559259/saturn.jpg";  // Fallback image URL


function preload() {
  // Load a random default image from the array (no proxy)
  let randomImageUrl = random(arrayOfDefaults);
  console.log("Random image URL selected:", randomImageUrl);
  
  // Load the image with error handling
  img1 = loadImage(
    randomImageUrl, 
    () => console.log("Image loaded successfully"),
    err => {
      console.error("Error loading image, using fallback image:", err);
      img1 = loadImage(fallbackImage);  // Load the fallback image if an error occurs
    }
  );
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  textAlign(CENTER, CENTER);
  textSize(24);
  fill(255);
  noStroke();

  // Fetch NASA's APOD data
  fetch(apiUrl)
    .then((response) => {
      if (!response.ok)
        throw new Error(`HTTP error! status: ${response.status}`);
      return response.json();
    })
    .then((data) => {
      if (data.media_type === "image") {
        imageTitle = data.title;
        description = data.explanation;
        let imageUrl = corsProxy + data.url;

        // Load the NASA APOD image using vanilla JS
        let vanillaImg = new Image();
        vanillaImg.crossOrigin = "Anonymous";
        vanillaImg.src = imageUrl;

        vanillaImg.onload = function () {
          img = createImage(vanillaImg.width, vanillaImg.height);
          img.drawingContext.drawImage(vanillaImg, 0, 0);
          imgLoaded = true;
        };

        vanillaImg.onerror = function (err) {
          console.error("Error loading image:", err);
        };
      } else {
        console.error("NASA APOD media is not an image.");
      }
    })
    .catch((err) => {
      console.error("Error fetching NASA APOD:", err);
    });
}

function draw() {
  if (imgLoaded) {
    for (let i = 0; i < 500; i++) {
      dotIt(img);
    }
  } else {
    for (let i = 0; i < 500; i++) {
      dotIt(img1);
    }
  }
}

function dotIt(ima) {
  let x = random(0, width);
  let y = random(0, height);
  let pix = ima.get(ima.width / (width / x), ima.height / (height / y));
  fill(pix);
  circle(x, y, int(random(1, 3 + ima.width / max(1, frameCount / 10))));
}