<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>
<script src="sketch.js"></script>
<title>Rocket</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
//Click on mouse to start!
</body>
</html>
let x = 200; // Starting x-position of the spaceship
function setup() {
createCanvas(400, 400);
noLoop(); // Start with no animation
}
function draw() {
background(0);
// Spaceship
fill(255, 200, 255);
ellipse(x, 200, 80, 20); // Main body
rect(x - 45, 185, 15, 13); // Left fin
rect(x - 45, 201, 15, 13); // Right fin
x += 5; // Move the spaceship to the right
// Wrap around the screen
if (x > width) {
x = -80; // Adjusted reset value
}
// Moon
fill(255, 255, 255);
ellipse(100, 100, 70, 70);
// Stars
fill(255, 255, 255);
ellipse(140, 140, 5, 5);
ellipse(240, 230, 5, 5);
ellipse(280, 170, 5, 5);
ellipse(120, 300, 5, 5);
ellipse(320, 100, 5, 5);
ellipse(300, 300, 5, 5);
ellipse(75, 320, 5, 5);
ellipse(250, 60, 5, 5);
ellipse(200, 378, 5, 5);
}
function mousePressed() {
if (isLooping()) {
noLoop(); // Stop animation
} else {
loop(); // Start animation
}
}
function keyPressed() {
redraw(); // Redraw the scene
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.