All posts by Tophe

Topheman Street View – an opened window to the world

How about browsing through the Google Street View panoramas, but not with your mouse or trackpad, not even with your fingers, but with your mobile device, moving it like a window to the world ?…

Try Topheman Street View

QR-Code to streetview.topheman.com

Enter a location or let the site show you a random one and then, visit it like you were inside it, by moving your mobile up and down, left and right, turning around … Continue reading

MongoDB for Node.js Developers – certificate

mongodb-university-logo

Today, I received my MongoDB certificate, after successfully completed the MongoDB for Node.js Developers course.

This was very interesting, and the courses are very well made, so don’t hesitate (it’s free). I invite any developer who is a little into NoSQL to take it. There are different courses : developer / Java developer / NodeJS developer (some other are comming).

And working with a database natively in JavaScript … loved it !

Tophe

MongoDB certificate

PS : For developers who don’t know expressJS, it could even be a good introduction.

Update : I also completed the M102 : MongoDB for DBAs.

Parallax.js – with headtracking support

There’s a lot of parallax JavaScript libraries out there. One of them is Parallax.js, originally made by Matthew Wagerfield. This one not only does parallax effects with different html layers, but it also reacts to the gyroscope on your device (when no motion detection hardware is available, it reacts to the cursor).

After my previous project Playground 2, I played with WebRTC (in order to see how I could manage to use the peer to peer features of WebRTC) and I found a headtracking library called headtrackr, made in JavaScript by Audun Mathias Øygard, based on WebRTC. I decided to make something out of it and a colleague of mine gave me the idea to mix and match it in some way with some parallax effects (that’s how I found Parallax.js in the first place).

I forked Parallax.js and added the headtracking support (with multiple callbacks such as when the camera is ready or not, when your face is detected or lost …) and everything is retro-compatible. You can see a demo here and I updated the API documentation on the readme.

Try Parallax.js, now with Headtracking

Have fun tilting your face in front of your computer !

Tophe

Playground 2

topheman-playground-bandeau

This project is more an experiment than really a game (it could lead to a game though). The concept is :

  • you open the website on your desktop browser
  • you snap the QR code with your smartphones (yours and friends’s or coworkers’s)
  • then you control your ball which is on the desktop monitor by tilting your phone … like a wiimote.

This is multiplayer (each player has a ball of a certain color – moving on the monitor and identified on his phone), there is a little chat (if you play with multiple monitors).

If you don’t have any phone, you can even run the device motion emulator ! (thanks to remote-tilt).

It runs with :

  • NodeJS
  • Express
  • socket.io
  • Ball.js

The site is hosted on a free heroku instance (I recently enabled the WebSockets which weren’t available on heroku before – caused socket.io to fallback to xhr polling) so it’s not the best server ever, but it does the job for the demo …

The source code is on github, it’s MIT licensed if you want to fork it or whatever.

I’m aware it’s not perfect (if you’re on multiple monitors, you may experiment little display differences), but it could lead to an idea of game or whatever …!

Tophe

Test Topheman Playground 2

PS : Besides of socket.io and little bugs I had to deal with (such as the express sessions linked to the sockets), this project forced me to learn how to publish a project on heroku, which is (when you never have done it before) not something as easy as uploading your files via ftp like you would for a php project for example 🙂 …

Continue reading

boxboxevents

boxbox-events

Last year I made a simple physics engine Ball.js that handles collisions and rendering (DOM or canvas) of balls, with a few built-in visual effects (glowing/blinking colors, explosions, opacity …).

This year, I released in june 2013 an other game engine – more evolved – based on Box2d/Box2dweb (the physics engine of Angry Birds, a game you should know 😉 ) : boxboxevents.

I didn’t start from scratch like last time, I forked the boxbox framework made by Greg Smith that provided an abstraction layer to box2d and added to it the support for :

  • mouse/multitouch events on entities (jQuery style)
  • viewport (zooming/dezooming with mouse wheel or fingers)

I learned a lot about box2d, as well as multitouch …! And as you’ll see, you can make an Angry Bird like game that will work on desktop as well as on mobile very easy and quickly

You can try the demo I made with boxboxevents : smileyFaces.
The sources are on github. I am also working on a game based on boxboxevent (still a work in progress).

Tophe