CURRENT WORK

The current progress of my project is available at the following link :

http://adityasinghraghav.netne.net/mrdoob-three/webcam/basic.html

I am still facing compatibility issues and the project does not run chrome however it runs perfectly fine on both Edge and Firefox.

Currently the user can take his own picture using the webcam and upload it to the server and map it onto the particles. The user then need to find his own particle among all the particles that move randomly. The user can click on any of the particles to move them out of the way. Once the user clicks on his/her own particle the game over page will be displayed.

FINAL PROJECT

ABSTRACT: 

"A Million Faces"  is a visualization that I will be extending  from my midterm project to fulfill the final 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.

As a part of the basic framework of the project I have already designed a particle system where each particle is a cube and each of the particle in the system has picture of a face mapped to 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 then interacts with scene mouse movements to find the particle with his/her own face among all the particles and once the user clicks on his/her own face he is then redirected to the game over message.

For the final project I will be extending various functionalities to the existing frameworks like the user being able to navigate the scene with the mouse, the ability to change the type and size of particles, the number of particles and choose whether to display male or female faces.

Then I will create a separate visualization which will be used to display the  game over message.

I will then proceed to add audio to the scene and make the UI seamless.If I have time I will add more interactive features like adding support for the leap motion controller and importing the entire scene to virtual reality environment.

BIBLIOGRAPHY:

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.

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

Here is the link to the book on Amazon.

I have also used the book "Dirksen, Jos. Learning Three.js – the JavaScript 3D Library for WebGL "  to learn more about the concepts and various implementation procedures.

I have also been reading the book " Infinite Reality: Avatars, Eternal Life, New Worlds, and the Dawn of the Virtual Revolution "  by Jim Blascovich and Jeremy Bailenson to gain insight about technology as a way to understand who we are and who we will become, answering key philosophical and psychological questions along the way.

Here's a link to the book on Amazon : http://www.amazon.com/gp/product/B004CFA9WI/ref=dp-kindle-redirect?ie=UTF8&btkr=1

Links :

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://threejs.org/examples/#webgl_interactive_cubes

5. http://threejs.org/examples/#webgl_interactive_draggablecubes

6. https://www.developphp.com/video/JavaScript/Page-Loading-Screen-Document-Preloader-Tutorial

Basic Framework Up

I was able to solve all the back-end issues and have the basic framework ready.

The link to my web page is http://adityasinghraghav.netne.net/mrdoob-three/webcam/basic.html

However for some reason the JavaScript library for Webcam doesn't work with chrome for me but it did work for some of my friends in Chrome. It usually runs perfectly fine in Safari/Firefox/Edge.

Right now you can move objects around by clicking on them, however that's all one can do and nothing really happens when you select your own image.

The next steps will be adding functionality to select one's own sprite, adding the control panel and improving GUI.

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.