# ishihara

**Repository Path**: caizha/ishihara

## Basic Information

- **Project Name**: ishihara
- **Description**: 色盲色弱检测生成图库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-27
- **Last Updated**: 2026-07-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Ishihara Test Generator 🎨

A beautiful, minimal web application that generates scientifically-based Ishihara-style color vision test plates. Enter text, select a color vision deficiency type, and create stunning plates based on CIE 1931 color space and confusion line theory.

![Ishihara Plate Example](https://via.placeholder.com/400x400/FF00FF/000000?text=42)

## 🌟 Features

- **Full Alphanumeric Support**: Generate plates with numbers, letters, or multi-line text (up to 3 lines)
- **Scientific Color Science**: Based on CIE 1931 xy chromaticity space and confusion lines
- **Multiple CVD Types**: Support for Protanopia, Deuteranopia, and Normal Vision
- **Color Presets**: Classic Red/Green, Blue/Yellow, Orange/Cyan, or custom colors
- **Reproducible Results**: Seeded random generation for shareable, consistent plates
- **Modern UI**: Clean, minimal design with smooth animations
- **Fully Responsive**: Works beautifully on desktop, tablet, and mobile
- **Share & Download**: Copy shareable links or download as PNG

## 🚀 Live Demo

Open `index.html` in your browser or serve with any HTTP server:

```bash
# Using Python
python -m http.server 8000

# Using Node.js
npx serve

# Using PHP
php -S localhost:8000
```

Then navigate to `http://localhost:8000`

## 📖 How It Works

### Color Science Foundation

The generator uses the **CIE 1931 xy chromaticity space** to create colors along **confusion lines**—straight lines in color space where people with specific color vision deficiencies cannot distinguish between colors.

1. **Copunctal Points**: Each CVD type has a convergence point where all confusion lines meet
2. **Confusion Lines**: Lines through this point represent indistinguishable color pairs
3. **Color Generation**: Sample colors along the confusion line with varying luminance
4. **Plate Rendering**: Use Monte Carlo circle packing to create the dot pattern

### Technical Architecture

Built with pure **vanilla JavaScript** and **HTML5 Canvas**—no frameworks, no dependencies:

- **color-science.js**: RGB ↔ XYZ ↔ xy conversions, confusion line math
- **circle-packing.js**: Monte Carlo algorithm with seeded random
- **text-processor.js**: Canvas-based text rendering for hit-testing
- **renderer.js**: Progressive rendering engine
- **app.js**: Main application controller

## 🎯 Usage

1. **Enter Text**: Type any alphanumeric characters (press Enter for multi-line)
2. **Select CVD Type**: Choose Protanopia, Deuteranopia, or Normal Vision
3. **Pick Colors**: Use a preset or select a custom color
4. **Generate**: Click "Generate Plate" to create your plate
5. **Share/Download**: Copy the shareable URL or download as PNG

## 🔬 Educational Disclaimer

⚠️ **This is an educational and artistic tool.** 

Clinical Ishihara tests require:
- Precise colorimetry with calibrated instruments
- Standardized illumination (D65 daylight, specific lux levels)
- Printed plates on specific paper stock
- Controlled viewing distances and angles

Consumer displays vary widely in color accuracy and cannot replicate medical-grade testing conditions. This tool is designed for:
- Learning about color vision deficiency
- Understanding color science concepts
- Creating artistic visualizations
- Educational demonstrations

**Do NOT use this for medical diagnosis.**

## 🧪 Browser Compatibility

- **Chrome/Edge**: 90+ ✅
- **Firefox**: 88+ ✅
- **Safari**: 14+ ✅
- **Mobile**: iOS Safari 14+, Chrome Android 90+ ✅

Requires modern JavaScript (ES6+) and Canvas 2D Context API.

## 📚 Scientific References

- **CIE 1931 Color Space**: International standard for color representation
- **Wyszecki & Stiles**: "Color Science" - Table 1 (5.14.2) p. 464
- **Brettel et al.**: "Computerized simulation of color appearance for dichromats"
- **Original Ishihara Tests**: Dr. Shinobu Ishihara (1917)

### Copunctal Points Used

```javascript
protanopia:   { x: 0.747, y: 0.253 }  // Red-blind
deuteranopia: { x: 1.080, y: -0.080 } // Green-blind  
tritanopia:   { x: 0.171, y: 0.0 }    // Blue-blind
```

## 🛠️ Development

### File Structure

```
ishihara/
├── index.html              # Main HTML file
├── styles/
│   └── main.css           # Modern CSS with CSS Grid
├── js/
│   ├── app.js             # Application controller
│   ├── color-science.js   # Color space conversions
│   ├── circle-packing.js  # Monte Carlo packing
│   ├── text-processor.js  # Text rendering
│   └── renderer.js        # Canvas rendering
└── README.md
```

### Performance

- **Generation Time**: < 3 seconds for 400-500 circles
- **Page Load**: < 1 second
- **Bundle Size**: ~30KB total (uncompressed)
- **Memory**: Efficient off-screen canvas usage

## 🎨 Examples

### Classic "42" Plate
```
Text: 42
CVD Type: Deuteranopia
Preset: Classic Red/Green
```

### Multi-line Text
```
Text: HI
      MOM
CVD Type: Protanopia
Preset: Orange/Cyan
```

### Custom Colors
```
Text: TEST
CVD Type: Deuteranopia
Preset: Custom (#FF0000)
```

## 🤝 Contributing

This is a standalone educational project. Feel free to:
- Fork and experiment with different algorithms
- Try alternative color models (LMS, CIECAM02)
- Implement hidden digit plates (visible only to CVD)
- Add SVG export functionality

## 📄 License

MIT License - Feel free to use for educational and artistic purposes.

## 🙏 Acknowledgments

- Dr. Shinobu Ishihara for the original test plates
- CIE for color space standards
- Color vision research community
- Open source web technologies

## 🔗 Resources

- [Colblindor](https://www.color-blindness.com/) - CVD education
- [DaltonLens](https://daltonlens.org/) - CVD simulation tools
- [Color Science Book](https://www.wiley.com/en-us/Color+Science-p-9780471399186)

---

**Made with 🎨 and vanilla JavaScript**