gautammanak1 / Assignment-sde1

Canvas Circle and Arrow Interaction

This web application demonstrates interaction with HTML5 Canvas elements using plain JavaScript. It consists of two modules:

1. Module 1: Draw four circles on the left side of the canvas, each filled with a different color. Draw corresponding arrows on the right side of the canvas.
2. Module 2: When a circle is clicked, the corresponding arrow moves towards the circle and changes its color upon hitting it. A reset button is provided to reset the application to its initial state.

Features

• Four colored circles are drawn on the canvas.
• Each circle has a corresponding arrow on the right side of the canvas.
• Clicking a circle triggers the arrow to move towards the circle.
• The color of the circle changes when the arrow hits it.
• A reset button to reset the application to its initial state.
• Inputs to change the colors of the circles dynamically.
• Inputs to change the sizes of the circles dynamically.
• Inputs to change the speed of the arrows.
• Start/stop button for the animation.
• Beautiful arrow design with a rotating arrowhead.

Technologies Used

• HTML5
• JavaScript
• HTML5 Canvas API

How to Run the Application

1. Download the Files: Download the index.html and app.js files.

2. Open in Browser: Open the index.html file in any modern web browser.

3. Interact with the Canvas:

   • Click on any of the circles to see the corresponding arrow move towards it.
   • Use the reset button to reset the application.
   • Use the color inputs to change the colors of the circles.
   • Use the size input to change the sizes of the circles.
   • Use the speed input to change the speed of the arrows.
   • Use the start/stop button to control the animation.

File Structure

├── index.html  
└── app.js      
└──  readme.md

Code Explanation

• index.html: Contains the HTML structure with a canvas element, reset button, color inputs, size input, speed input, and start/stop button.
• app.js: Contains the JavaScript code that:
  • Defines the circles and their properties.
  • Draws the circles and arrows on the canvas.
  • Handles the animation of the arrows.
  • Implements event listeners for click events on the canvas, reset button, color inputs, size input, speed input, and start/stop button.
  • Implements functionality to change the colors, sizes, and speed of the arrows.

Purpose and Working of the Application

This application demonstrates basic interactivity and animation using the HTML5 Canvas API and plain JavaScript. Users can interact with circles by clicking on them to trigger animations, change the colors, sizes, and speed of the circles and arrows, and control the animation with start/stop and reset buttons. It is a simple example of how to use canvas to create interactive graphics and animations on the web.

Customization

You can customize the application by modifying the properties of the circles and arrows in the app.js file. For example, you can change the colors, positions, and speeds of the arrows.

License

This project is licensed under the MIT License.

Author

This application was created by Gautam Manak👨‍💻.