ObjectPainter

Uses the computer's camera to detect movement of an object of a certain color to draw to a canvas

Comment

Requirements

  • A computer/laptop with a webcam

Inspiration

  • Touch screen computers

What it does

  • Uses computer's webcam to find an object of a certain color
  • Tracks where the object goes
  • Draws to a canvas that corresponds to the object's relative location in the webcam view

How we built it

  • getUserMedia function of Javascript allows for access to camera
  • video element in HTML houses the video
  • canvas element is used to get individual frames and display the drawing

Challenges we ran into

  • Server setup
  • Figuring out why the designated pixels found in the camera did not cause a change in the drawing

Accomplishments that we're proud of

  • Submitting a project this time

What we learned

  • How to use webcam with Javascript

What's next for ObjectPainter

  • Biggest blob recognition to not have external streaks of the color causing areas to be filled in
  • A hover to make clear where the relative position of the object is

Notes

  • The second link will work on Firefox, but not Chrome/Chromium.
  • The server for the third link may or may be not still propagating as of Nov. 12, 2017 12:29PM
  • Make sure to check the "Drawing On" checkbox for the drawing to start!
Share this project:

Updates