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.