Art Gallery

A collection of interactive web applications built with Next.js, showcasing dynamic art and interactive games.

Project Address

https://github.com/telleroutlook/dynamic-art-app2

Table of Contents

• Introduction
• Features
  • Dynamic Art Canvas
  • Bubble Flow
  • Number Puzzle
• Installation
• Usage
• Technologies Used
• Contributing
• License
• Contact

Introduction

Art Gallery is a web application featuring a collection of interactive and visually engaging projects developed using Next.js and React. The project includes dynamic art canvases and simple games that demonstrate creative coding and interactive design principles.

Features

Dynamic Art Canvas

An interactive canvas that responds to mouse movements and touch inputs. Users can create dynamic art by moving the cursor or touching the screen, generating shapes with varying sizes and colors based on the speed and direction of the movement.

• Responsive Drawing: Reacts to user input in real-time.
• Dynamic Shapes: Creates shapes with dynamic sizes and random colors.
• Clear Functionality: Allows users to clear the canvas and create new art.

Bubble Flow

An animated visualization featuring bubbles that move and bounce within the browser window. Users can interact with the bubbles by clicking or touching the screen to create explosion effects that influence the bubbles' trajectories.

• Animated Bubbles: Displays bubbles with random colors and movements.
• Interactive Explosions: User interactions cause bubbles to change direction dynamically.
• Pause/Resume Control: Users can pause and resume the animation as desired.

Number Puzzle

A simple and engaging number-guessing game where the player attempts to guess a secret number within a certain range. The game provides clues to help the player adjust their guesses.

• Interactive Gameplay: Users input guesses and receive immediate feedback.
• Adaptive Range: The guessing range adjusts based on user input.
• Score Tracking: Keeps track of the number of attempts made.

Installation

To run this project locally, you'll need to have Node.js and npm installed on your machine.

1. Clone the repository:

   git clone https://github.com/telleroutlook/dynamic-art-app2.git

2. Navigate to the project directory:

   cd dynamic-art-app2

3. Install dependencies:

   npm install

   or if you prefer using Yarn:

   yarn install

Usage

To start the development server:

npm run dev

or

yarn dev

Open your browser and navigate to http://localhost:3000 to view the application.

Exploring the Applications

• Home Page: Features a gallery of available applications with links to each one.
• Dynamic Art Canvas: Create dynamic art through interaction.
• Bubble Flow: Interact with moving bubbles and create explosion effects.
• Number Puzzle: Play a number-guessing game with adaptive clues.

Technologies Used

• Next.js: Framework for server-rendered React applications.
• React: JavaScript library for building user interfaces.
• JavaScript (ES6+): Core language for building the application logic.
• HTML5 Canvas API: Used for rendering the dynamic art and animations.
• CSS3: For styling components and layouts.

Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the Project

2. Create your Feature Branch:

   git checkout -b feature/AmazingFeature

3. Commit your Changes:

   git commit -m 'Add some AmazingFeature'

4. Push to the Branch:

   git push origin feature/AmazingFeature

5. Open a Pull Request

Please make sure your contributions adhere to the project's coding standards and conventions.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For any inquiries or feedback, please feel free to reach out:

• Email: webmaster@3we.org
• GitHub: telleroutlook

---

Note: Replace telleroutlook@example.com with your actual email address if you wish to provide it.