https://github.com/gurjeetsinghvirdee/canvas-art-generator-in-javascript

This repository houses a collection of JavaScript scripts designed to generate captivating canvas art. By leveraging HTML5 canvas functionality, these scripts produce mesmerizing fractal patterns and intricate shapes, providing users with a dynamic and interactive platform for artistic expression.
https://github.com/gurjeetsinghvirdee/canvas-art-generator-in-javascript

canvas fract generative-art interactive javascript shapes

Last synced: 7 days ago
JSON representation

This repository houses a collection of JavaScript scripts designed to generate captivating canvas art. By leveraging HTML5 canvas functionality, these scripts produce mesmerizing fractal patterns and intricate shapes, providing users with a dynamic and interactive platform for artistic expression.

• Host: GitHub
• URL: https://github.com/gurjeetsinghvirdee/canvas-art-generator-in-javascript
• Owner: gurjeetsinghvirdee
• Created: 2022-10-12T07:30:02.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2024-02-26T20:32:14.000Z (9 months ago)
• Last Synced: 2024-05-01T16:31:49.453Z (7 months ago)
• Topics: canvas, fract, generative-art, interactive, javascript, shapes
• Language: JavaScript
• Homepage: https://gurjeetsinghvirdee.github.io/Canvas-Art-Generator-in-JavaScript/
• Size: 3.38 MB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Canvas Art Generator in JavaScript

This JavaScript project provides a versatile canvas art generator capable of creating mesmerizing fractal patterns and intricate shapes. With three distinct scripts - `fractal.js`, `fractal_branch.js`, and `star_shape.js` - users can effortlessly generate stunning visual effects on the canvas.

## Usage

1. **HTML Setup**: Ensure your HTML file includes a canvas element:

   ```html

   

   Randomize

   ```

2. **Script Inclusion**: Include the JavaScript files in your HTML file:

   ```html

   

   

   

   ```

3. **Run**: Open the HTML file in a compatible web browser.

4. **Interact**: Click the "Randomize" button to generate diverse fractal patterns.

## Scripts Overview

### 1. `fractal.js`

- **Description**: Generates fractal patterns with branches.

- **Features**:

  - Control depth, number of branches, scale, spread, color, and line width.

  - Provides a button to randomize pattern.

### 2. `fractal_branch.js`

- **Description**: Renders fractal patterns with branches.

- **Features**:

  - Customize size, number of sides, maximum level, scale, spread, and branches.

  - Renders pattern directly on window load.

### 3. `star_shape.js`

- **Description**: Draws intricate star-shaped patterns.

- **Features**:

  - Customize size, number of sides, and rotation.

  - Renders shape directly on window load.

## Customization

- **Parameter Adjustments**: Modify parameters like size, sides, level, scale, spread, color, and line width within each script.

- **HTML Modifications**: Adjust canvas dimensions or add controls as needed.

## Compatibility

- Ensure compatibility with modern web browsers supporting HTML5 canvas and JavaScript.

- Responsive design adapts canvas to different screen sizes.

## Notes

- Utilizes HTML5 canvas API for dynamic shape rendering.

- "Randomize" button allows users to explore various fractal patterns.

Feel free to explore and modify the scripts to unleash your creativity and craft captivating canvas art!