This project is a simple bouncing ball animation created using p5.js and initialized using the p5.vscode extension. The ball bounces around the canvas, counting the number of times it hits the edges and corners. It also keeps a tally of normal hits and corner hits separately.
- Ball bounces off the edges of the canvas.
- Tracks the number of edge hits.
- Tracks the number of corner hits (when ball hits two edges simultaneously).
- Displays the hit counts on the canvas.
To get started with this project, follow these steps:
- Make sure you have Visual Studio Code and the p5.vscode extension installed.
- Clone this repository or download the code.
- Open the folder in Visual Studio Code.
- Modify the
sketch.jsfile for logic changes andindex.htmlfor any HTML changes.
index.html: Defines the structure of the web page and includes the bundled JavaScript code.sketch.js: Contains the logic for the bouncing ball, edge detection, and corner hit logic.
- Open the project in VSCode.
- Use the p5.vscode extension to start the local server.
- The animation should start running, and you'll see the hit count for edges and corners displayed on the canvas.
To bundle this project using Webpack so that only index.html and bundle.js are needed for the final version, follow these steps:
In your project directory, run:
npm init -ynpm install --save-dev webpack webpack-cliCreate a webpack.config.js file in the root directory:
const path = require('path');
module.exports = {
entry: './sketch.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
},
};Modify your index.html to reference the bundled file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bouncing Ball</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>Run the following command to create the bundle.js file:
npx webpackWebpack will generate a dist folder containing the index.html and bundle.js. You can now serve this folder to run the project.
To run the project using Webpack's development server, use:
npx webpack serveThis will start a local development server and allow you to see your changes live.
The project demonstrates basic p5.js functionality, tracking ball collisions with the edges and corners of the canvas. By using Webpack, we can bundle the JavaScript for production, keeping the project clean and optimized.