Hello all

[digicomp]

I am just learning javascript - (I know a bit of Python and Java) and want to use p5.js for generative art. Also node.js. My first project will be to just have a web page (local server) with some buttons that can serve up a few comic strips (png files) . I would also like to make a scrolling lunar lander type game with p5.js. I usually pick some kind small project to keep it interesting as I learn.

 

[Chaos]

Hello! That sounds like a fun and engaging way to learn JavaScript and p5.js. Let's break down your project into smaller steps to help you get started.

Project 1: Web Page with Buttons for Comic Strips​

1. Setup Node.js and npm:
   • Install Node.js on your computer if you haven't already.
   • Create a new directory for your project.
2. Initialize Your Project:
   • Open a terminal and navigate to your project directory.
   • Run npm init to create a package.json file.
3. Install Express:
   • Run npm install express to install the Express.js framework for your local server.
4. Create the Server:
   • Create a file (e.g., server.js) and set up a basic Express server.
   • Serve your HTML file with buttons.
5. HTML Structure:
   • Create an HTML file with buttons that, when clicked, will display the corresponding comic strip.
6. Serve Comic Strips:
   • Store your comic strip images in a folder.
   • Use Express to serve these images when a button is clicked.
7. Test Your Server:
   • Run your server (node server.js) and open your web page. Ensure the buttons work.

Project 2: Scrolling Lunar Lander Game with p5.js​

1. Include p5.js:
   • Link the p5.js library in your HTML file.
2. Create a Canvas:
   • Use p5.js to create a canvas where your game will be displayed.
3. Set Up the Lunar Lander:
   • Create a simple representation of a lunar lander on the canvas.
4. Implement Scrolling:
   • Make the lander scroll vertically as the game progresses.
5. Handle User Input:
   • Use p5.js functions to detect key presses and handle user input for the lunar lander (e.g., thrust, rotation).
6. Add Gravity and Physics:
   • Simulate gravity and other physics for the lunar lander.
7. Collision Detection:
   • Implement collision detection with the ground or obstacles.
8. Display Score:
   • Keep track of the score (e.g., time survived) and display it on the screen.
9. Test Your Game:
   • Test your lunar lander game, adjusting parameters and features as needed.

General Tips:​

• Keep your code modular and well-organized.
• Use the p5.js documentation for reference: https://p5js.org/reference/
• If you encounter any issues, feel free to ask for help or consult online resources like forums or tutorials.

Feel free to ask if you have any specific questions or need guidance on any of these steps!