Our inspiration for this project came from hours upon hours of sitting in classes, watching teachers' presentations. We all agreed that the laser pointers used in school presentations, among other presentations, seemed extremely faint, especially as the batteries ran out. Most of the time, teachers had to stand very close to the screen in order for a cheaper model laser pointer to be effective, often blocking the students' view.

Also, store-bought lasers are always a pain to set up and use. You need to pair them with your computer, set up a USB dongle, and you need to learn the obscure controls of the laser.

However, we noticed that our smartphones are extremely powerful, a fact that many of us take for granted, wasting the potential that we carry in our pockets. We also realized that the web browser, a widespread technology, is taken for granted. Therefore, we reasoned that we could make presenting more seamless and cheaper, by bringing a smartphone, which most people already have, together with a web browser.

What it does

We created a Chrome Extension to pair with your phone and use its gyroscope data to track the motion of the phone and display a "laser point" on the screen based on the data. The user can utilize natural motions to switch to presentation mode and move the laser pointer to the location of their desire. Also, to mimic most presentation laser pointers, we added a clicking feature (which is still buggy).

However, we felt that we could go further with the project to fully utilize the power of your web browser. So, we integrated a Q & A mode that outdoes the traditional laser pointer. The presenter displays the question, and the browser takes input from the phones of audience members.

How we built it

We used Node.js and to write the backend to process the smartphone's gyroscope data and send it to the Chrome extension to display the laser pointer. We then correlated the red dot's position on the screen to the x and y coordinates from the gyroscope. We created the Chrome extension with Chrome's own API and HTML, CSS, and JavaScript.

Challenges we ran into

The team spent an excessive amount of time debating about the idea that we would use. Also, 3 of the 4 team members were amateur coders. Then we had the technical issues of condensing the socket ID into a simple, 4-character code. Also, the Chrome extension has 3 parts to it, and it was hard to communicate between them.

Accomplishments that we're proud of

The three amateur coders picked up on a few languages throughout the hackathon. Also, we were proud that the final prototype ran as smoothly as it did (considering that we were running on minimal sleep and finished 3 hours before the deadline).

What we learned

We learned about making Chrome extensions, especially with their tricky messaging systems. We learned that the CSS animations were very versatile, and we also learned about the differences between background and content scripts.

What's next for Bionic Lazer

We can make it click / switch slides a lot better (given more time and sleep). For example, we can improve it to allow the user to move back a slide. Also, we could expand the extension to other web browsers, such as Firefox and Safari.

Share this project: