Spinning Star Animation

{"name":"Spinning Star Animation","description":"Create a mesmerizing spinning star animation that captivates your audience! This project will allow you to explore the basics of animation while learning to handle user interactions. You'll bring the star to life with movement and effects, making it a delightful visual experience!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/pjee38dvc2liu5cl9bdn","view_count":7,"fork_count":0,"expires_at":null,"created_at":"2025-01-29T02:12:42.181710Z","updated_at":"2025-01-29T02:12:42.181712Z","user_id":333,"status":"PUBLIC","parent_id":5633,"id":5667,"user":{"photo":null,"email":null,"recess_id":"61f2b8b5-c326-4f05-b3b1-cf003fdf364e","created_at":"2025-01-28T01:16:37.036022Z","reset_token":null,"stripe_customer_id":null,"seats":0,"username":"riv","id":333,"password_hash":null,"updated_at":"2025-01-28T01:16:37.036034Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let stars = [];\n\n// Array for spinning stars\nlet shootingStars = [];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(10, 10, 100); // Dark blue background\n\n // Initialize multiple spinning stars\n for (let i = 0; i < 5; i++) { // Change 5 to any number for more stars\n stars.push({\n angle: random(TWO_PI), // Random angle for spin\n radius: random(100, 200), // Smaller range for distance from center\n glowSize: 80 // Size of the glow effect\n });\n }\n\n // Initialize multiple shooting stars\n for (let i = 0; i < 5; i++) { // Change 5 to any number for more shooting stars\n shootingStars.push(new ShootingStar());\n }\n}\n\nfunction draw() {\n background(10, 10, 100); // Dark blue background\n translate(width / 2, height / 2); // Move origin to the center of the canvas\n\n // Draw the glowing moon\n noStroke(); // No outline for the moon\n fill(255, 255, 255, 150); // Soft glow with transparency\n ellipse(-width / 2 + 100, -height / 2 + 100, 120, 120); // Draw larger glowing circle\n\n fill(255); // Set fill color to white for the moon\n ellipse(-width / 2 + 100, -height / 2 + 100, 80, 80); // Draw the moon\n\n // Draw each spinning star with yellow glow effect\n for (let star of stars) {\n push(); // Save the current drawing state\n rotate(star.angle); // Rotate around its own center\n\n const x = cos(star.angle) * star.radius; // Calculate x position\n const y = sin(star.angle) * star.radius; // Calculate y position\n\n // Draw the glowing effect for the star (yellow glow)\n noStroke(); // No outline for the glow\n fill(255, 255, 0, 100); // Soft yellow glow with transparency\n ellipse(x, y, star.glowSize, star.glowSize); // Draw the glowing circle behind the star\n\n textSize(64); // Set the text size\n textAlign(CENTER, CENTER); // Center the text\n text('⭐', x, y); // Draw the star emoji at the calculated position\n pop(); // Restore the previous drawing state\n\n star.angle += 0.01; // Slow down the spin of each star\n }\n\n // Remove the update and display of shooting stars\n // for (let star of shootingStars) {\n // star.update(); // Update the position of the shooting star\n // star.display(); // Display the shooting star\n // }\n}\n\nclass ShootingStar {\n constructor() {\n this.x = random(width); // Random starting x position\n this.y = random(height); // Random starting y position\n this.length = random(20, 50); // Length of the shooting star\n this.speed = random(5, 10); // Speed of the shooting star\n }\n\n update() {\n this.x += this.speed; // Move the shooting star to the right\n if (this.x > width) {\n this.x = 0; // Reset the position to the left if it goes off screen\n this.y = random(height); // Randomize the y position\n }\n }\n\n // Comment out or remove the display method\n // display() {\n // stroke(255); // White color for the shooting star\n // strokeWeight(4); // Thickness of the shooting star line\n // line(this.x, this.y, this.x - this.length, this.y); // Draw the shooting star\n // }\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Spinning Star Animation\n \n \n\n\n \n\n"},"chat_history":[{"message":"

Add your new assets to the code

\n\n```javascript\nfunction preload() {\n\n\tthumbnail = loadImage(\"@asset('thumbnail')\");\n}\n```","project_id":5667,"created_at":"2025-01-29T02:12:29.128813Z","output_tokens":null,"sender":"server_script","code_id":205954,"deleted":0,"input_tokens":null,"id":105643}],"assets":[{"project_id":5667,"creator":null,"cloudinary_id":"pjee38dvc2liu5cl9bdn","deleted":false,"id":58587,"created_at":"2025-01-29T02:12:28.273625Z","name":"thumbnail","resource_type":"image","tags":null}],"messages_sent":0,"comments":[],"steps":[]}