Adds transition effects to the drawing canvas in Drawaria.Online with an improved menu
This script is a **Tampermonkey userscript** designed to enhance the drawing experience on **Drawaria.online** by adding **transition effects** to the canvas. It also includes a **draggable menu** for easy access to these transitions. Here's a detailed explanation of how it works and how you can use it:
---
### **What the Script Does**:
1. **Transition Effects**:
- The script adds **15 different transition effects** to the canvas, such as:
- Slide Right, Slide Left, Slide Up, Slide Down
- Diagonal slides (e.g., Slide Diagonal Top-Left, Slide Diagonal Bottom-Right)
- Split transitions (e.g., Slide Vertical Split, Slide Horizontal Split)
- Center and corner-based transitions (e.g., Slide In from Center, Slide Out to Corners)
- These transitions are achieved by sending drawing commands to the canvas, effectively "painting" over it in a specific pattern.
2. **Draggable Menu**:
- A **menu** is created on the screen, allowing you to:
- Select a **color** for the transition.
- Choose a **transition effect** from the list.
- Trigger the selected transition with a single click.
- The menu is **draggable**, so you can move it around the screen for convenience.
3. **Customization**:
- You can adjust the **duration** of the transitions (currently set to 1000ms or 1 second).
- You can choose any **color** for the transition effect using a color picker in the menu.
---
### **How to Use the Script**:
1. **Install Tampermonkey**:
- If you don't already have Tampermonkey installed, add it to your browser:
- [Chrome](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo)
- [Firefox](https://addons.mozilla.org/en-US/firefox/addon/tampermonkey/)
- [Edge](https://microsoftedge.microsoft.com/addons/detail/tampermonkey/ldgfbffkinooeloadekpmfoklnobpien)
- [Other browsers](https://www.tampermonkey.net/)
2. **Create a New Script**:
- Open the Tampermonkey dashboard by clicking its icon in your browser toolbar and selecting **"Create a new script"**.
- Delete any default code in the editor.
3. **Paste the Script**:
- Copy the entire script provided above and paste it into the Tampermonkey editor.
4. **Save the Script**:
- Click **File > Save** or press `Ctrl + S` (Windows) or `Cmd + S` (Mac) to save the script.
5. **Visit Drawaria.online**:
- Go to [Drawaria.online](https://drawaria.online/).
- The script will automatically run, and you should see a **draggable menu** on the screen.
6. **Using the Menu**:
- **Select a Color**: Use the color picker at the top of the menu to choose the color for your transition.
- **Choose a Transition**: Click on any of the transition buttons (e.g., "Slide Right", "Slide Diagonal Top-Left") to trigger the effect.
- **Move the Menu**: Click and drag the menu header to reposition it anywhere on the screen.
---
### **Customization**:
If you want to tweak the script, here are some things you can modify:
- **Transition Duration**:
- In the `createMenu` function, the `data-duration` attribute for each button is set to `1000` (1 second). You can change this value to make transitions faster or slower.
- **Add More Transitions**:
- You can add new transitions by extending the `transitions` array. Each transition requires a `name` and an `effectFunction` that defines how the transition works.
- **Menu Style**:
- The menu's appearance (e.g., size, colors, position) can be adjusted by modifying the `menu.style.cssText` and `buttonGrid.style.cssText` properties.
---
### **How It Works**:
- **WebSocket Interception**:
- The script overrides the WebSocket's `send` method to capture the WebSocket connections used by Drawaria. This allows it to send custom drawing commands to the canvas.
- **Drawing Commands**:
- The `sendDrawCommand` function sends a drawing command to the canvas, covering the entire screen or specific areas based on the transition effect.
- **Animation**:
- Each transition uses `requestAnimationFrame` to create smooth animations over the specified duration.
---
### **Disabling the Script**:
- If you want to disable the script temporarily:
- Open the Tampermonkey dashboard and toggle the script off.
- If you want to remove it permanently:
- Delete the script from the Tampermonkey dashboard.
---
Enjoy creating stunning transitions on Drawaria! Let me know if you have any questions or need further assistance. 😊
