Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 138 additions & 0 deletions DESMOS_FEATURES.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
# 🎨 ImGraph - Desmos-Style Features

## New Desmos-Like Interface

### ✨ Key Features Implemented

#### 1. **Beautiful Expression Cards**
- Each expression is displayed in a rounded card (like Desmos)
- Clean, modern design with proper spacing
- Light gray background for better readability

#### 2. **Color-Coded Graphs**
- **10 Beautiful Preset Colors** that cycle automatically:
- 🔴 Red (#C74643)
- 🔵 Blue (#4080C7)
- 🟢 Green (#45A145)
- 🟣 Purple (#9749A3)
- 🟠 Orange (#ED7D2E)
- 🔷 Cyan (#26AEAE)
- 🌸 Pink (#E33E96)
- 🟤 Brown (#785447)
- ⚫ Dark Gray (#333333)
- 💚 Teal (#008040)

#### 3. **Color Picker**
- Click the colored circle next to each expression
- Customize with any color you want
- Color instantly updates on the graph

#### 4. **Grid System**
- Light gray grid lines (like Desmos)
- Major grid lines every 5 units (darker)
- Minor grid lines every 1 unit (lighter)
- Grid automatically scales with zoom

#### 5. **Axis Labels**
- Numeric labels on both axes
- Shows coordinate values
- Labels positioned clearly away from axes
- Gray color for subtlety

#### 6. **Expression Controls**
- ☑️ **Checkbox**: Show/hide individual graphs
- 🎨 **Color Circle**: Click to change color
- ❌ **Delete Button**: Remove unwanted expressions
- 📝 **Large Input Box**: More space for complex equations

#### 7. **Smart UI Layout**
- Left panel: 30% width (expressions)
- Right panel: 70% width (graph)
- Proper padding and spacing
- Rounded corners on all elements

#### 8. **Enhanced Add Button**
- Large, prominent "+ Add Expression" button
- Blue color (Desmos style)
- Hover effects for better UX

#### 9. **Zoom Control**
- Clean slider at bottom of left panel
- Range: 10-500 units
- Smooth zooming

---

## How It Looks Different from Before

### Before (Old UI):
- Basic text input
- Single expression only
- Fixed colors
- No grid
- Plain interface
- Small text boxes

### After (Desmos-Style):
- ✅ Multiple expressions with individual cards
- ✅ Color picker for each expression
- ✅ Beautiful grid system with labels
- ✅ Show/hide toggle for each expression
- ✅ Modern, polished interface
- ✅ Large, easy-to-use input boxes
- ✅ Preset color palette
- ✅ Smooth, professional design

---

## Example Usage

### Try These Cool Examples:

**Example 1: Multiple Trigonometric Functions**
1. Add Expression 1: `sin(x)` (Red)
2. Add Expression 2: `cos(x)` (Blue)
3. Add Expression 3: `tan(x)` (Green)

**Example 2: Polar Roses**
1. Add Expression 1: `r = cos(2*theta)` (Red)
2. Add Expression 2: `r = cos(3*theta)` (Blue)
3. Add Expression 3: `r = cos(4*theta)` (Green)

**Example 3: Circles and Parabolas**
1. Add Expression 1: `x^2 + y^2 = 4` (Red - circle)
2. Add Expression 2: `y = x^2` (Blue - parabola)
3. Add Expression 3: `x^2 + y^2 < 9` (Green - filled circle)

**Example 4: Parametric Heart**
1. Add Expression 1: `(16*sin(t)^3, 13*cos(t) - 5*cos(2*t) - 2*cos(3*t) - cos(4*t))` (Pink ❤️)

**Example 5: Complex Implicit Functions**
1. Add Expression 1: `(x^2 + y^2 - 1)^3 = x^2*y^3` (Purple - Heart curve)
2. Add Expression 2: `x^2 - y^2 = 1` (Orange - Hyperbola)

---

## Tips for Best Experience

1. **Use the Grid**: The grid helps visualize coordinates and scale
2. **Toggle Visibility**: Hide expressions you don't need at the moment
3. **Color Code**: Use different colors for different types of functions
4. **Zoom Levels**:
- 50-100: Good for most functions
- 100-200: Detailed view
- 200-500: Very zoomed in
5. **Multi-line Input**: Use Shift+Enter for longer expressions
6. **Organize**: Keep similar expressions together in the list

---

## Keyboard Shortcuts (ImGui Default)

- **Tab**: Move between input fields
- **Shift+Enter**: New line in expression input
- **Click & Drag**: Interact with sliders

---

Enjoy creating beautiful graphs with your new Desmos-style calculator! 🎉📊✨
6 changes: 6 additions & 0 deletions src/core/CMakeLists.txt
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@ endif ()

target_include_directories(${NAME} PUBLIC ${CMAKE_CURRENT_SOURCE_DIR})
target_compile_features(${NAME} PRIVATE cxx_std_20)

# Add /bigobj flag for MSVC to handle large object files
if(MSVC)
target_compile_options(${NAME} PRIVATE /bigobj)
endif()

target_link_libraries(${NAME}
PRIVATE project_warnings
PUBLIC fmt spdlog exprtk SDL2::SDL2 imgui Settings)
Expand Down
Loading