At Halfstack Conf in May I gave a presentation on what I think responsive design should be about in 2020 and what it will be about going forward: responding not just to static device properties like width and height but also to user preferences like preferring dark mode or reduced motion. The recording of it […]
Laserey.es: Draw lasers from your eyes.
Unfortunately, laserey.es is no longer online.
Lasers are awesome, and shooting lasers from your eyes is more awesome. Unfortunately, shooting lasers from your eyes in real life is currently impossible. Let’s help you make yourself a little bit more awesome: Laser Eyes!
A while ago, Vasilis asked for a web app that allowed you to draw lasers. Just drawing lasers is a bit boring though, so I took it a step further, and decided to use all the new cool html API’s for rendering and eye detection to shoot lasers from eyes. I press-ganged recruited Paul Chaplin to help build the site.
The result is Laser Eyes!. Simply drag and drop an image from your computer onto the photo area (or connect with Facebook), and watch the magic happen!
When building a web app, nowadays, you can’t not have Facebook integration. For Laser Eyes!, what I’d really wanted is the ability to, with one click set a laserified (it’s a word, alright?) image as your profile picture. So, you can’t do that. Most people said you can’t even get a full sized profile picture via the API. In fact, you can. Once you connect Laser Eyes! with Facebook, you can load in your profile image and post any photo to Facebook into a special Laser Eyes! photo album.
…Then you can manually set your profile picture to the laserified version ;)
Technical stuff
Paul and I went all-out with new API’s and really used this as a project to try out new cool shit: Canvas, drag and drop, the file API, openCV, and Ep.io. Due to all these new things, support, for now, is limited to Google Chrome (but it’s really slow on mac) and Mozilla Firefox (fast everywhere). I’ll add in a more regular file uploader to support Opera and Safari soon.
Other stuff I want to improve is adding a bunch of photos to try it out and a color picker for people that like pink lasers. Or blue lasers. I’m open to other ideas, please send them to [email protected].
If you want to check out the javascript that powers all of Laser Eyes, the unminified, sparsely commented version is available here.
Laser Eyes! is hosted on Ep.io, a Python/Django cloud hosting system currently in private beta. The team at Ep.io has been super helpful with troubleshooting my app and openCV’s python bindings. Big thanks to them, and you should really consider them if you need an easy Python or Django hosting solution.
In closing
Working with new html5 api’s and python opencv bindings has been a lot of fun as well as somewhat of a nightmare. You can learn a ton, but some things are just so weird. I’m certain I did a whole bunch of stuff the worst way possible, and there are a bunch of weird bugs and errors that I hope people won’t notice when using the app. (Why are my strokes aliased in Chrome? Why do certain angles crash Firefox?? Why is it over 4 times as slow on Mac? And more of the sort). If you notice any of the bugs and know a solution, please let me know!
Now, go laserify yourself.
Hi, I'm Kilian. I make Polypane, the
browser for responsive web development and design. If you're reading this site, that's probably
interesting to you. Try it out!