/color_detector

Live color detector utilizing kmeans in pure js.

Primary LanguageZig

README

Title: Color Detection and Replacement

Description:

This JavaScript code implements a system to detect a specific color within a video stream and replace it with another color. Key features include:

  • Color Selection: Select a desired color using a color picker.
  • Detection Algorithm: Detects pixels within a given threshold of the selected color.
  • K-Means Clustering: Groups detected pixels into clusters for more refined replacement.
  • Replacement: Replaces pixels in identified clusters with a user-specified color.
  • Customization: Adjust settings, such as the color detection threshold.

Code Structure

  • Detector Class:

    • constructor: Initializes the detector object, sets up color pickers and threshold slider, and creates a debug canvas if enabled.
    • detect: Detects pixels matching the selected color within the threshold, groups them using K-means clustering, and optionally draws debugging information.
    • Helper Functions: Includes functions to calculate color distances, draw centers of clusters, and more.

  • Global Functions:

    • renderVideo: Sets up webcam access and the main rendering loop.
    • kMeans: Implements the K-means clustering algorithm.
    • Helper Functions: Functions for converting between color formats (hex, RGB, HSV), calculating distances between colors, getting average colors, etc.

Additional Notes

  • The accuracy of color detection depends on lighting conditions and the selected threshold.
  • Modify the code to customize the behavior and integrate it into your larger project.