Tag Archives: gyroscope-accelerometer

Take a tour of the campuses of the International University of Paris with Topheman Street View

Experiments,

About six months ago, I released Topheman Street View, a site that will let you browse the Google streetview panoramas with your smartphone/tablet like you were inside it, just by moving your phone like a window to the world – more on this post.

Two days ago, I saw this tweet by @GautierBarbe on my timeline about the International University Campus of Paris opening their buildings to Google streetview.

@GautierBarbe - tweet

It drew my attention and tickled me … This was a perfect use case to demonstrate the benefits of PanoramaSensorsViewer (the library I made on which Topheman Street View is based).

So, you can take a tour of the different campuses on Topheman Street View by following those links :

I simply used the bookmarklet I made that is available on the home page of the Topheman Street View site in desktop mode that you can use when you’re on google maps and will let you generate a link as well as a QRCode to the panorama …

Tophe

Topheman Street View – an opened window to the world

Experiments,

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 →

Playground 2

Experiments, , , ,

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 →

Topheman Bombs (v2)

HTML5/JavaScript Game,

bombs-topheman-com-qrcode-bandeauAfter Topheman Squares, I decided to make an other HTML5/JavaScript game.

I released a first version of Topheman Bombs in april 2012 which worked in the browser for the iOs devices and in an app for the android devices (both platforms were sharing the same source code, thanks to phonegap). The game is simple, it takes advantage of the gyroscope/accelerometer of your device :

  • Tilt your device to manage the blue dot
  • Tap the screen to drop bombs and kill the red dots
  • Grab the green dots to get more bombs

In august 2013, after many other projects in JavaScript, I decided to refactor the game to make it a full browser compatible and get rid of the android app. I also added some features such as :

  • offline gaming (using Application Cache with the HTML5 manifest)
  • optimized build file (refactored my source code to use require.js and generate a minified build file with r.js/grunt)
  • built-in device motion emulator (using remote-tilt)

Try Topheman Bombs

Ball.js

I started Topheman Bombs to test the accelerometer features of HTML5 (almost two years ago), but I surely finished it to release a real project that was using Ball.js at the time.

Ball.js is a JavaScript class I made back in 2012 that handles physics interaction (such as collisions) between balls, on a flat area (like you would on a pool table) as well as rendering (DOM or canvas).

You can find the Ball.js source code on github as well as a documented API.

The little Story

The idea of Topheman Bombs came to me while I was reading an article on html5rocks.com about accessing accelerometer from JavaScript. Since then, I made other games/experiments based on this particular feature and I learned a lot about it. But what’s sure is I couldn’t have made it without Remy Sharp’s remote-tilt gyroscope emulator (I’ll talk more about that in an other post).

Topheman Bombs sources are on github under Creative Commons license, if you want, you can also take a look at the grunt workflow I implemented.

Tophe