Mirroror

Inspiration

While the carnival theme was not enforced, our team wanted to do something silly and try to go with the theme. A lot of the enjoyment from these types of carnivals comes from the small silly little attractions like mirrors that distort you, so we wanted to make a project that gave the control to you.

What it does

It gives you the chance to design your own mirror, using a Bezier curve best fit maker, it allows you to make any mirror you heart desires. It then raytraces your own camera onto a surface which calculates exactly how the light would move in real life, even mimicking things like focal points and the such.

How we built it

We built its using HTML, Javascript, TailwindCSS, and ReactJS for the basic frontend; then WebRTC and WebGL to actually capture your camera and perform the raytracing calculations.

Challenges we ran into

The main challenge was getting the user to provide a continuous, smooth mirror with no seams, or harsh angles. We did this by making the mirror creation tool convert your points into smooth Bezier curves then creating the surface off of that which turned out to be extremely accurate.

Accomplishments that we're proud of

We were very proud to have completed the project in general, a majority of us have never worked with graphics so we had no idea if we would be able to complete this project in time. Especially since raytracing typically involves intense optimizations we had little idea about.

What we learned

We learned a lot of about WebGL and the different meshes and fragmentation, also designing a website around a certain theme, and how a bunch of little details really add up to make the website feel more calm.

What's next for Mirroror

The next features of Mirroror mainly involve saving presets the user wants, like photos or even mirror types that you really enjoy to send to friends. Also an even better UI to make the user really feel at home with the system.

Built With

• html
• javascript
• react
• tailwindcss
• webgl
• webrtc