xxxxxxxxxx94
let stars = []; // Array to store the stars plotted on the canvaslet skyImg; // Variable to hold the sky imagelet song; // Variable to hold the piano soundlet startButton; // Button to start the stargazing interactionlet canvasStarted = false; // Flag to check if the canvas interaction has startedfunction reload() { // Preload the piano sound song = loadSound('piano.mp3'); // Preload the sky image skyImg = loadImage('sky.jpg'); // Make sure to have a file named 'sky.jpg' in the project folder}function setup() { createCanvas(600, 600); // Create and style the start button startButton = createButton('Click start to begin stargazing'); startButton.position(200, 200); // Position the button in the center of the canvas startButton.size(250, 80); // Set the button size startButton.style('background-color', '#5C97B3'); // Set button background color startButton.style('color', '#ffffff'); // Set button text color to white startButton.style('border', 'none'); // Remove the border startButton.style('border-radius', '10px'); // Round the corners of the button startButton.style('font-size', '18px'); // Set font size startButton.style('cursor', 'pointer'); // Change cursor to pointer on hover startButton.style('box-shadow', '0 4px 6px rgba(0, 0, 0, 0.1)'); // Add a subtle shadow for depth startButton.style('transition', 'background-color 0.3s, transform 0.1s'); // Add smooth transitions for background and transform // Assign the startCanvas function to the button's mousePressed event startButton.mousePressed(startCanvas); // Set the initial volume of the song to 0 song.setVolume(0); // Loop the song in the background but paused initially song.loop(); song.pause();}// Function to start the canvas interactionfunction startCanvas() { userStartAudio(); // Ensures the audio can play in the user's browser startButton.remove(); // Remove the start button once the canvas interaction starts canvasStarted = true; // Set the flag to true to start the drawing interaction song.play(); // Start playing the song}function draw() { if (!canvasStarted) return; // If the canvas hasn't started, exit the draw loop // Draw the sky image as the background image(skyImg, 0, 0, width, height); // Display the sky image covering the entire canvas // Loop through the stars array to draw and update each star for (let i = stars.length - 1; i >= 0; i--) { let star = stars[i]; fill(star.color); // Set the fill color to the star's color noStroke(); ellipse(star.x, star.y, 2, 2); // Draw the star as a small circle star.brightness -= 2; // Gradually decrease the brightness of the star if (star.brightness <= 0) { stars.splice(i, 1); // Remove the star from the array once its brightness reaches 0 } } // Adjust the volume of the song based on the number of stars on the canvas let targetVol = constrain(map(stars.length, 0, 100, 0, 1), 0, 1); // Map the number of stars to a volume level song.setVolume(targetVol, 0.1); // Gradually change the volume over 0.1 seconds if (stars.length === 0 && song.isPlaying()) { song.pause(); // Pause the song if no stars are left on the canvas } else if (stars.length > 0 && !song.isPlaying()) { song.play(); // Play the song if there are stars on the canvas }}// Function to handle mouse movement and plot new starsfunction mouseMoved() { if (!canvasStarted) return; // If the canvas hasn't started, exit the function // Create a new star object with randomized position, brightness, and color let newStar = { x: mouseX + random(-5, 5), // Slightly randomize the x position of the star y: mouseY + random(-5, 5), // Slightly randomize the y position of the star brightness: 255, // Set the initial brightness to maximum color: color(random(255), random(255), random(255), 255) // Set the star color to a random color }; stars.push(newStar); // Add the new star to the stars array}