HTML-Forms-w-Canvas

Description

A project that uses HTML forms in combination with P 5.js, a user should be able to manipulate the canvas using no fewer than five distinct categories of input. Examples of some would include text fields, radio buttons, check boxes, select lists, and range sliders. More specifically, for instance: Text fields could determine the number of objects displayed, check boxes could pause/unpause or reset the animation, and sliders could affect the speed, size, and color of the animated objects. This project exemplifies interaction with the user through HTML forms and how it might alter an animation on a canvas in real-time.

Features

• Interactive HTML forms to control canvas animations
• Use of text fields, radio buttons, checkboxes, select lists, and range sliders
• Real-time updates and animations with P5.js
• Object-Oriented Programming structure

Prerequisites

• Web browser (e.g., Chrome, Firefox)
• Basic understanding of JavaScript, HTML, and CSS

Installation

1. Clone the repository:

   git clone https://github.com/gcabdu/HTML-Forms-w-Canvas.git
   

2. Navigate to the project directory:

   cd HTML-Forms-w-Canvas
   

3. Open index.html in a web browser: Simply open the index.html file in your preferred web browser to see the project in action

Usage

1. Open index.html in a web browser: Simply open the index.html file in your preferred web browser to see the project in action.

2. Interact with the HTML forms: Use the text fields, radio buttons, checkboxes, select lists, and range sliders to control various aspects of the canvas animation, such as the number of objects, animation speed, and colors.

Project Structure

• index.html: Main HTML file that sets up the canvas and includes form elements.
• sketch.js: JavaScript file containing the P5.js code and OOP implementations.
• style.css: CSS file for styling the HTML elements and canvas.