betmig / pixiecraft

PixieCraft App | Made with p5.js, ml5.js for a school assignment.

PixieCraft

Video Demo

Demo Video

Interactive Image Processing Application

  This interactive image processing application allows users to explore various
  image processing techniques in real-time using their webcam. It provides a graphical
  user interface (GUI) for adjusting parameters and visualizing the effects of different
  image processing algorithms.

Features

  Live Webcam Stream:
  View live video feed from your webcam
  directly within the application.
  
  Real-time Processing:
  Apply image processing algorithms to the live
  video stream and see the results instantly.
  
  Multiple Processing Options:
  Choose from a variety of image processing
  techniques, including grayscale conversion, channel splitting, segmentation,
  color space conversion (RGB to HSV and YCbCr), high-contrast
  grayscale filtering, blur filtering, and more.
  
  Interactive Controls:
  Use sliders to adjust parameters and thresholds
  for segmentation and filtering algorithms.
  
  Face Detection:
  Detect and highlight faces in the
  video stream using ML5.js Face API (AI/ML).
  
  Fun Filters:
  Apply fun filters like pixelation and decorations to detected faces
  for an entertaining experience.

Image Processing Techniques

  Grayscale Conversion
  Converts the color image to grayscale using optimized luma calculation.

Channel Splitting

  Splits the image into its RGB channels, allowing users
  to visualize the individual color channels separately.

Segmentation

  Segment the image based on user-defined thresholds for each color channel,
  enabling selective highlighting or suppression of features.

Color Space Conversion (RGB to HSV and YCbCr)

  Converts the RGB color space to HSV (Hue, Saturation, Value)
  and YCbCr color space, offering insights into
  color distribution and intensity.

High-Contrast Grayscale Filtering

  Applies a high-contrast filter to the grayscale image,
  enhancing the contrast between dark and light regions.

Blur Filtering

  Applies a blur filter to the image using convolution,
  smoothing out details and reducing noise.

Fun Filters

  Applies entertaining filters like pixelation and decorations to
  detected faces for a fun and engaging experience.

Usage

  Clone or download the repository.
  Open the index.html file in a web browser.
  Grant permission to access your webcam if prompted.
  Interact with the GUI controls to adjust parameters
  and explore different image processing techniques.

Dependencies

  p5.js: JavaScript library for creative coding and visualization.
  ML5.js: Machine learning library for the web, used for face detection.
  Sound Effect: Twinkle sparkle sound effect for fun interactions.

Contributions

  Contributions are welcome! Feel free to open issues or
  pull requests to suggest improvements, report bugs, or add new features.

License

  This project is licensed under the MIT License.