Graphic with p5js.The spaceship moves
<!DOCTYPE html>
Rocket
//Click on mouse to start!
<br> let x = 200; // Starting x-position of the spaceship</p> <div class="highlight"><pre class="highlight plaintext"><code>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 } </code></pre></div> <p>
Top comments (2)
Revised code here
Click on mouse to move spaceship .
You could probably do a rotation animation to keep it on the screen? Cool. I want to learn more p5