Unfettered

Introduction

The Emoji Ikebana website allows users to create beautiful digital ikebana arrangements using emoji flowers. This interactive platform provides tools to arrange, reset, and save custom designs, simulating the traditional Japanese art of flower arrangement with a modern twist.

Features

Emoji Flower Thumbnails:
- A set of buttons with emoji flowers to choose from.
Interactive Canvas:
- Users can place emoji flowers by clicking or tapping on the canvas.
Undo and Reset:
- Undo the last action or reset the entire canvas.
Save Arrangement:
- Download the current ikebana arrangement as an image.
Curved Stems:
- Realistic, randomly generated cubic Bézier curves connecting the flowers to the vase.

Emoji Flower Thumbnails:
- A set of buttons with emoji flowers to choose from.
Interactive Canvas:
- Users can place emoji flowers by clicking or tapping on the canvas.
Undo and Reset:
- Undo the last action or reset the entire canvas.
Save Arrangement:
- Download the current ikebana arrangement as an image.
Curved Stems:
- Realistic, randomly generated cubic Bézier curves connecting the flowers to the vase.

Emoji Flower Thumbnails:
- A set of buttons with emoji flowers to choose from.
Interactive Canvas:
- Users can place emoji flowers by clicking or tapping on the canvas.
Undo and Reset:
- Undo the last action or reset the entire canvas.
Save Arrangement:
- Download the current ikebana arrangement as an image.
Curved Stems:
- Realistic, randomly generated cubic Bézier curves connecting the flowers to the vase.

Tools and Technologies

HTML:
- Created the structure with buttons for flower selection and functional controls (Undo, Reset, Save).
CSS:
- Styled with a minimalist design featuring a white background and hover/active button effects.
JavaScript:
- Handled event-driven interactions and canvas rendering.
- Implemented mouse/touch position tracking for precise placement.
- Generated cubic Bézier curves for realistic stem rendering.

HTML:
- Created the structure with buttons for flower selection and functional controls (Undo, Reset, Save).
CSS:
- Styled with a minimalist design featuring a white background and hover/active button effects.
JavaScript:
- Handled event-driven interactions and canvas rendering.
- Implemented mouse/touch position tracking for precise placement.
- Generated cubic Bézier curves for realistic stem rendering.

HTML:
- Created the structure with buttons for flower selection and functional controls (Undo, Reset, Save).
CSS:
- Styled with a minimalist design featuring a white background and hover/active button effects.
JavaScript:
- Handled event-driven interactions and canvas rendering.
- Implemented mouse/touch position tracking for precise placement.
- Generated cubic Bézier curves for realistic stem rendering.

See the live site: https://sonnyyy77.github.io/Emoji-Ikebana/