Reading time ~2 minutes

Finally, we moved on and created a a project without Twitter. Martin Weber (@web_martin) and me worked at “eggDaProf” for New Media, New Technology — the name says it all: throw virtual eggs at the professors, the right theme for easter. The task was to “create something with openframeworks in space”, so we had the idea of real and virtual space in our classroom 413 in LIACS and play a game.

The Architecture

  • QR-Code with an URL to map real players to virtual players in the room
  • HTML/JavaScript Website to read iPhone accelerometer data
  • PHP script to send received accelerometer data to openframeworks
  • openframeworks for the visualisation and the game handling

Distributed in the room are some printed QR-Codes with embedded URLs. To participate in the game, a player can scan the code with an iPhone or iPad and gets redirected to the game website, with the player id in the URL as parameter. The virtual representation is showed on the screen as long as the player is on the web-site and sending data. With HTML and JavaScript it is possible to read the accelerometer data live and in realtime through the iPhone Device API and the W3C DeviceOrientation Event Specification.

JavaScript/AJAX code to read the y-axis and send it via XMLHttpRequest

window.ondevicemotion = function(event) {
	y = event.accelerationIncludingGravity.y;
	p = <?=$_GET["p"] ?>;$.post("udp.php", { y: y, p: p }, function(data) {});

This data is sent via XMLHttpRequest to the web-server which runs a PHP script. The script transforms the data and sends them further via UDP to another Mac running openframeworks with a UDP listener. We used the networkUdpReceiverExample example and tried to use multi-threading for the players, which is unfortunately not supported by OpenGL.

PHP code to send data via UDP

$fp = pfsockopen( "udp://", 11999, $errno, $errstr );
if ($_POST["y"]) {
	$yval = $_POST["y"];

	if ($yval < -6.0) {$yval = -6.00;} 	if ($yval > 6.0) {$yval = 6.00;}

	$yval = substr($yval, 0, 3);
	$write = fwrite( $fp, $_POST["p"]."".$yval);

The Game

The game in openframeworks is quite simple. The “professor” is standing in front of the classroom and faces the class. He can see the game on a laptop to control his virtual representation. The students can control the virtual rotation of the image and shoot eggs by pressing a button on the website. The eggs get faster over time, so it’s harder for the professor to dodge.

The Video

[vimeo w=480&h=360]

The Source

openframeworks project and php/js source


Creative Commons License eggDaProf by Patrick Heneise and Martin Weber is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Europe on Two Wheels

![Iron 883](/images/2015/07/IMG_7368.jpg)## Barcelona (Spain) - Le Dramont, Cote d'Azur (France)> 648km![Le Dramont](/images/2015/07/IMG_...… Continue reading


Published on September 10, 2014

HTML5 vs. Native [thoughts]

Published on February 26, 2014