Progress Update

I have integrated the webcam to receive input from the user and map the captured image onto the particles.

Now, I'm currently facing two problems both due to hosting issues. I am using Github pages to host my work and Github doesn't allow you to upload files to the server, therefore once the image is captured from the it is never uploaded to the repository therefor cannot be mapped.

Also Github pages is not a secure server which uses HTTPS the pages are not compatiable with Google Chrome(still can be accessed through IE, Edge and Firefox).

Both these problems can be simply solved by using a secure hosting. I am currently looking into one which solves both these problem.

Further Work

I am using the webcam.js library to take input from the webcam. However the js doesn't run in chrome due to some security issues. I can only run the file in Edge/IE.

I will work on getting the webcam input on all popular browsers and might have to use another library. I plan to create a separate page for the user to capture or upload the image and then save it to the server using AJAX/PHP. The user will then be able to play the visualization in separate page. This will make the UI less complicated while ensuring a higher frame rate.

Work done towards the project

"Sprites"

Link to the web page

"Selectable Cubes"

Link to the web page

"Interactive Cubes"

Link to the web page

Work Done to learn Three.JS

"SOLAR SYSTEM USING THREE.JS"

Link to the web page

Textbook Referenced

The book I'll be using for inspiration is called " Creative Anarchy: How to Break the Rules of Graphic Design for Creative Success" by  Denise Bosler.

I think this book will be of help to me as a Computer Science student, I've always focused on the available technologies and tools and ignore the creative aspects of the process. 

This book has two parts : 

a. The first part contains information about the universally accepted rules of graphics design.

b. The second part of the book has advice about when and how it is acceptable to break these rules so as to develop one's one unique ideas.

Here is the link to the book on Amazon.

The topics I find interesting and want to incorporate in my project : 

1. Rule 1 : Message is Commander

2. Rule 2 : The Computer is only a Tool.

3. Chapter 7 : Interactive

Objectives:

1. Set up a simple randomized particle system with spherical particles.
2. Find an open source database of images of faces.
3. Map the images form the database onto the particles.
4. Implement scene navigation.
5. Implement particle selection
6. Implement webcam and image upload.
7. map the uploaded image on the particle.
8. Implement user interactivity features.
9. Implement different particle system and different particles
10. Find open source database of voices.
11. Attach audio to different particles.
12. Implement pointillism algorithms
13. Attach Leap Motion controller

Reference:

1. http://threejs.org/
2. https://www.chromeexperiments.com/
3. JavaScript library for capturing still images from computer's camera: https://github.com/jhuckaby/webcamjs
4. http://processingjs.org/learning/basic/pointillism/

Related Work

Link to the web page Link to the web page Link to the web page Link to the web page

Abstract

"A Million Faces" is a visualization that I will be working on to fulfill the mid-term project requirements of the class Digital Design and Visualization at the University of Florida taught by Patrick Pagano.

This project will be designed using the JavaScript WebGL API, JavaScript library Three.Js, HTML and CSS so that it can run seamlessly on most web browsers.

The basic framework of the project consists of particle system where each particle can be a sphere, cube, any other mesh and each of the particle in the system has picture of a face added to it along with an audio clip of a voice the person talking associated with it.

The user can upload a picture of him/herself or use the webcam to take a picture of them. This image will then be mapped on to one of the particles.

The user can then choose from various different particle systems like raindrops, places mapped on a globe, bubbles floating in the sky, a pointillism of the image of the user's face etc. The aim of the user will be to find him/herself among the "million faces" by navigating the scene.

The user will have interact with scene using keyboard and mouse movements but if time permits the ability to interact using a leap motion controller could be added which will help to increase the level of immersion. 

The user will also have other methods of controlling the scene in real time like increasing or decreasing the size of the particles, modifying the speed, motion, lifetime of each of the particle, ability to get closer to your own particle etc.

Once the users are able to find themselves a preset audio or video would be played in the scene.