let dotAlpha = 255; // Initial alpha value for the dots

let dotSpacing = 20; // Spacing between dots

let dotCounter = 0; // Counter for dot spacing

let dotColor; // Color of the dots

​

let isDragging = false; // Variable to track the drag state

​

​

let blueCircleRadius; // Radius of the blue circles

let greenCircleRadius; // Radius of the green circle

let circles = []; // Array to store circle positions

​

// New array to track visited state of each planet

let planetsVisited = [false, false, false]; // Assuming 3 planets for simplicity

​

let planet1Visited = false, planet2Visited = false, planet3Visited = false;

​

let dragCircle; // Position of the draggable circle

let dragOffsetX, dragOffsetY; // Offset to maintain mouse position relative to the circle

​

let astronautImage;

let planet1Image;

let shipImage;

let planetVisitedImage;

​

//preload images

function preload() {

  astronautImage = loadImage('astronautsprite.png');

  planet1Image = loadImage('planet1.png');

  shipImage = loadImage('shipsprite.png');

  planetVisitedImage = loadImage('planet-visited.png');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(51,0,0);

  blueCircleRadius = min(width, height) / 20; // Adjust the size of the blue circles relative to the screen size

  greenCircleRadius = blueCircleRadius / 2; // Set the size of the green circle relative to the blue circle

  dotColor = color(255, 0, 0); // Initial color of the dots

​

  // Calculate positions of three circles equidistant from each other and higher up

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

    let angle = (TWO_PI / 3) * i;

    let x = width / 2 + (cos(angle) * width) / 4;

    let y = height / 3 + (sin(angle) * height) / 6;

    circles.push(createVector(x, y));

  }

​

  // Set initial position for the draggable circle

  dragCircle = createVector(width / 2, height / 2 - height / 4);

  dragCircle.x = width/2;

  dragCircle.y = height - 160;

}

​

function draw() {

  // Clear the background

 background(51);

  let newWidth = shipImage.width / 10;

  let newHeight = shipImage.height / 10;

   image(shipImage, mouseX - 50, mouseY - 50, 100, 100);

​

​

​

  // Draw semi-circle at the bottom

  fill(111,111,226); // Color of the semi-circle

  noStroke();

  arc(width / 2, height, width, height / 2, PI, TWO_PI);

​

  // Draw draggable circle (green)

​

  fill(0, 255, 0); // Set fill color to green

  ellipse(dragCircle.x, dragCircle.y, greenCircleRadius * 2);

​

  // Draw circles (blue)

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

    // check if green circle gift is on planet distance

    let d = dist(dragCircle.x, dragCircle.y, circles[i].x, circles[i].y);

    if (d < blueCircleRadius ) {

       // Mark planet as visited if not already done

      if (!planetsVisited[i]) {

        planetsVisited[i] = true; // Mark as visited

​

  }

        //reset circle gift

            // If dragging, show the astronaut image at the current mouse position

  if (isDragging) {

     drawStar(circles[i].x, circles[i].y);

    let imageX = mouseX - astronautImage.width / 20; // Adjust position as needed

    let imageY = mouseY - astronautImage.height / 20; // Adjust position as needed

    image(astronautImage, imageX, imageY, astronautImage.width / 10, astronautImage.height / 10);

​

    }

  }

​

        // Check if planet is visited to decide which image or appearance to use

    if (planetsVisited[i]) {

      // If visited, draw a different image or visual effect

      // For example, using a different image or drawing the astronaut image

      image(planetVisitedImage, circles[i].x - 75, circles[i].y - 75, 150, 150);

    } else {

      // If not visited, draw the planet as usual

      image(planet1Image, circles[i].x - 75, circles[i].y - 75, 150, 150);

    }

}

​

  // Draw a dotted line

  if (prevMouseX !== undefined && prevMouseY !== undefined) {

    stroke(dotColor); // Set dot color

    strokeWeight(2);

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

      let dotAlphaMapped = map(i, 0, dotCounter - 1, 255, 0); // Map alpha value for fading effect

      let interpolatedX = lerp(prevMouseX, mouseX, i / dotCounter);

      let interpolatedY = lerp(prevMouseY, mouseY, i / dotCounter);

      fill(255, dotAlphaMapped);

     // ellipse(interpolatedX, interpolatedY, 4, 4); // Draw a dot

    }

  }

​

  // Update previous mouse position

  prevMouseX = mouseX;

  prevMouseY = mouseY;

​

  // Increase dot counter

  dotCounter++;

  // Reset dot counter and alpha value when dot spacing is reached

  if (dotCounter >= dotSpacing) {

    dotCounter = 0;

    dotAlpha = 255;

  }

​

​

}

​

// Function to draw a star

function drawStar(x, y) {

  image(astronautImage, x, y, 150, 150);

  fill(255, 204, 0); // Yellow color for star

  beginShape();

  for (let i = 0; i < TWO_PI; i += PI / 2.5) {

    let x1 = x + cos(i) * blueCircleRadius * 2;

    let y1 = y + sin(i) * blueCircleRadius * 2;

    vertex(x1, y1);

    let x2 = x + cos(i + PI / 5) * blueCircleRadius;

    let y2 = y + sin(i + PI / 5) * blueCircleRadius;

    vertex(x2, y2);

  }

  endShape(CLOSE);

   let newWidth = shipImage.width / 10;

  let newHeight = shipImage.height / 10;

   image(shipImage, mouseX - 50, mouseY - 50, 100, 100);

}

​

function mousePressed() {

  // Check if the mouse is over the draggable circle

  let d = dist(mouseX, mouseY, dragCircle.x, dragCircle.y);

  if (d < greenCircleRadius) {

    // If yes, calculate the offset

    dragOffsetX = mouseX - dragCircle.x;

    dragOffsetY = mouseY - dragCircle.y;

     isDragging = true; // Start dragging

  }

}

​

function mouseDragged() {

  if (isDragging) {

    // Move the draggable circle with the mouse while maintaining the offset

    dragCircle.x = mouseX - dragOffsetX;

    dragCircle.y = mouseY - dragOffsetY;

  }

}

​

function mouseReleased() {

  isDragging = false; // Stop dragging

   dragCircle.x = width/2;

         dragCircle.y = height - 160;

}

​