this.astro and Come in Cielo Così in Terra, report and tutorial: how to make location-based apps

Just back from our event at the MACRO Museum of Rome where we were hosted in the Miltos Manetas’ electronicOrphanage to present this.astro and Come in Cielo Così in Terra in occasion of the Global Astronomy Month, in the event called Connect the Dots and see the Unseen, curated by Elena Giulia Abbiatici and Valentina Levy.

the workshop

the workshop

In this article you will find some of the images of the workshop and, here below, is a view taken from the this.astro projection we showed in the entrance hall of the museum:

A great part of our presence was focused on the creation of Come in Cielo Così in Terra, a software-enabled participatory performance through which people can collaborate in drawing constellations onto their cities using their bodies:

  1. you form groups,
  2. you choose a constellation,
  3. each member of the group heads off towards a star (or, more precisely, to the city-location where the star is placed)
  4. when each star is covered on the map by at least one member of the group: YOU WIN!
  5. You have actually just collaboratively drawn a constellation onto your city, showing up on the global map.

You can see the application HERE: Click here to open CiCCiT (Come in Cielo Così in Terra)

the workshop

the workshop

And here are the sources (HTML, CSS, JavaScript, PHP) for the application:


The application is designed completely using HTML, CSS, JavaScript and PHP on the back end: just unzip onto your server online, create a database, update the parameters found in the “db.php” file to reflect your DB configuration and you’re done! You have Come in Cielo Così in Terra on your server.

the workshop

the workshop

The application is designed for access through smartphones: just open up the URL using your iPhone or Android and you will be able to start right away.

A couple of things:

  • there are bugs: we’ve just started this project and haven’t had time for the righteous tests until now; we will do them in a few days; if you find any bugs/strange behaviors, please do CONTACT US and tell them to us! You will do us a great favor and we will be able to correct issues and distribute updates for the application!
  • there is no security in this app!  for now this is a proof of concept, so that there is only a minimal registration/login/logout process implemented, with the password in clear on the DB, no email verification, no-nothing; we will replace it soon with a decent authentication model; if you want to go ahead, you can work on the login.php, logout.php and accountManager.php files.

So: just download and install its, or use it FROM HERE and check for updates on Art is Open Source for new releases.


the workshop

the workshop

And, as a follow up to the workshop: here are is a basic tutorial on how to make an HTML application which can track users’ positions using only standard features of W3C compliant browsers.

the workshop

the workshop


What we want to achieve is an application which runs on a user’s web browser (for example Firefox, Chrome or Safari) and:

  1. asks the uses if he/she would like to have their geographic location taken
  2. if the user decides to do so, it grabs its geo position
  3. sends it to a database
  4. generates a map and shows the user’s position on it

Let’s start.

First step: localize the user

The geolocation API specified by the W3C consortium allows us to do just what we require.

First let’s create a standard, almost empty HTML page.

Then, in the HEAD section, let’s add these lines, to create some javaScript:

If you wrote everything correctly, you can upload this file (save it as an HTML file) to your webserver (if you don’t have a web server anywhere, you can download and install on your computer one of the Bitnami Stacks from here: choose WAMPStack for Windows, LAMPStack for Linux or MAMPStack for OSX).

You can now access your file using your browser (for example, if you installed a Bitnami Stack you can point your browser to http://localhost/the_name_of_your_file.html).

The browser should ask you if you want to be geo-located: if you answer “no” it will pop up an error message, if you answer “yes” it will pop up your geographical coordinates.

This should work consistently on both your computer web browsers and on the web browsers found on your smartphones.

the workshop

the workshop



Now we want to store our coordinates somewhere.

So we need to create a database and, inside it, a table to hold them.

Use the tools you have to manipulate your databases (for example, if you installed the Bitnami stack, you will have the PhpMyAdmin application which you can use through your browser) to create a table (let’s call it “coordinates“) with two FLOAT columns named lat and lon, to hold the coordinates.

Here is what my PhpMyAdmin schema looks like:

the table created for the coordinates

the table created for the coordinates

now, let’s create a PHP file (a regular text file, saved with extension “.php”), and let’s save it as “storeCoordinates.php“.

Inside it, let’s write this code:

if(isset($_REQUEST["lat"]) && isset($_REQUEST["lon]")){
// customize this file to reflect configuration data for your database
$con = mysql_connect($DB_HOST,$DB_USER,$DB_PWD);
$q = "INSERT INTO coordinates(lat,lon)VALUES(" . mysql_real_escape_string($_REQUEST["lat"]) . "," . mysql_real_escape_string($_REQUEST["lon"]) . ")";
$r = mysql_query($q);

Put this file on your webserver, as right next to the one we created before.

This file:

  1. checks that two parameters have been passed in the HTTP request (using the isset command, and the $_REQUEST variable, which contains all parameters which have been passed on by whoever invoked the script)
  2. if they are present: opens up a database connection (“DB_*” parameters, which you have to configure to reflect your DB’s configuration, and the mysql_connect command)
  3. prepares an INSERT query in SQL language, concatenating the values for latitude and longitude which we will see in a bit being passed on by our HTML page
  4. executes using the mysql_query command


THIRD STEP: store coordinates

 Now we will modify our HTML file to invoke the functionality we just implemented using PHP.

Download the jQuery library from HERE.

This is a JavaScript library which offers many useful functionalities. We will use some of these.

Save the javascript library file naming it “jquery.js” and upload it to your web server right next to the other files you just created.

Add the following line right after the <head> tag in the HTML file we created in the first step:

This tells the browser to load the jQuery library.

Then modify the updatePosition function we have created in the first step, so that it looks like this:

function updatePosition(currentPosition){
lat: currentPosition.coords.latitude,
lon: currentPosition.coords.longitude

What we are doing with the getJSON command is to call the storeCoordinates PHP file we created earlier on and pass to it the coordinates we just captured.



Just update the file you just modified on your web server (so, in the same folder used by the web server there should be the HTML file together with the jquery.js file and the storeCoordinates.php file.

If you navigate to the HTML file using your browser and you answer “yes” when it asks you to be geo-localized, you should see a row being automatically added to your DB, containing your coordinates.

(about accuracy: if you are using this through a web browser, accuracy could not be perfect, as localization will be performed using your network information; this, according to the setup of your provider, will yield results of different degrees of accuracy; the same can be said when using GPS enabled devices: according to where you are, the GPS could provide more or less accurate results)

Here’s my first coordinates automatically captured in this way:

my geo position, finally on the DB

my geo position, finally on the DB




To show these coordinates on a map, let’s prepare another PHP file to get them from the database and add them to a Google Map. To use Google Maps you have to register and obtain a KEY. Click here to know how to obtain your key (read under the “Obtaining API Key).

Create another PHP file, and call it “map.php“.

Inside it write the following code:

Phew! that’s quite a lot of code!

let’s browse through it to see the new things which we introduced here. Starting from the top, here are the interesting lines:

  • the <meta name=”viewport” … HTML tag, is used for smartphones, so that the content adapts to the device’s screen
  •  the <style>…</style> tag and its contents: some CSS rules to define the margins and dimensions of our resulting HTML page
  • the <script …> tag through which we add the… javascript library: it includes Google Maps functionalities in your web page; please note that it is here where you have to add your API key
  • in the next <script> tag:
    • we define a map variable (var map;)
    • we define the initialize javascript function
    • we define the MapOptions javascript object to contain configuration information for our map (in the example: we set the zoom level and the type of map we want to use); more information about the MapOptions object can be found HERE
    • we use the google.maps.Map object to initialize the map, and we use the document.getElementById javascript function to tell where we want the map to appear on our web page (in the example: in the DIV element with ID=”map_canvas” found below in the body of the web page)
    • then we open a PHP section to query the database and obtain the info we need to create the markers
      • we create a SELECT query using the SQL language and we put it in the $q variable
      • we execute the query using the mysql_query command and we store the result in the $r variable
      • we check if the result was obtained correctly ( using if($r) )
      • we use a while loop to fetch each row of the result into the $row variable using the mysql_fetch_assoc command, which gives us a series of associative arrays
      • we use the values contained in the rows to fill in the parameters of each marker, printing them out using a series of echo commands (through which we are actually injecting values coming from the DB into the HTML, using PHP)
    • each marker is a separate javascript variable; to make them all different we have chosen to use a PHP variable named $i which will contain 0 for the first variable, 1 for the second one, 2 for the third, and so on (if you see, it is incremented using the $i++; command at the end of each while cycle); so the variable names for the markers will become var marker0, var marker1, var marker2 etcetera;
    • each marker is initialized by using an instance of the google.maps.Marker class provided by the Google APIs
      • each marker gets a series of parameters, such as position (through an instance of the google.maps.LatLng class), the map parameter which takes as a value the map we have initialized before, and a title)
    • out of the cycle, the <head> section ends, and the <body> section begins with the onload=”initialize()” event handler to invoke the map initialization function as soon as the page has completely loaded.

And that’s it!

If you upload this PHP file to your web server and open up these two web pages we created (this last file and the initial HTML file with the request for geo location) on two different tabs of your browser (even on your smartphone) and you refresh first one and then the other (maybe moving a block or two between each refresh, so that you will record  different coordinates) you will see the map populate with the markers describing your movements.

the workshop

the workshop

Sonoria a sound toy for iPhone and iPad

SONORIA is a sound toy for iPhone and iPad.

It is a part of an upcoming series of musical toys which can be used for fun or for artistic performances.

SONORIA is particularly oriented towards noise, suggestive, deep musical soundscapes.

Touch the screen to produce sounds.

Combine touch with phone rotation to change panning and other sound parameters.



AOS and FakePress present “Critical AR Ensemble” at IAR2010



Art is Open Source and FakePress participated to IAR2010, the first italian event totally dedicated to the themes of Augmented Reality, organized by the folks at JoinPad at the Milan headquarters of the Hub.

AOS @ IAR2010

AOS @ IAR2010

The event was truly interesting as it covered a wide range of themes and approaches. I must say that I am quite interested in the efforts that marketing is putting on Augmented Reality (AR). It reminds me a lot of the hype that had developed a couple of years ago on proximity marketing and bluetooth.

While the idea of being able to interact with “users” according to their position and to the possibility of delivering contextualized, relevant content just-in-place and just-in-time is quite fascinating and attractive, lots of issues arised in practical applications of proximity marketing: the availability and compatibility of devices, user habits, usability, accessibility, the quality of content to be delivered, invasiveness, responsiveness, interactivity.

the crowd at the HUB Milan

the crowd at the HUB Milan

With AR we have gone way beyond those problems, but something’s still missing and, on the other side, people haven’t yet figured out exactly what they want from AR, and how they want it.

Good things first: IAR2010 has been a wonderful experience. Before and during the setup and at the afterparty we had the chance to chat with some really wonderful and creative people who are developing ideas and projects that have AR components in perspectives that encompass wide range of interests and matters.

Mauro Rubin @ IAR2010

Mauro Rubin @ IAR2010

Using the presentations as a reference, the first that comes up to mind is Simone Cortesi of OpenStreetMap. With OSM a radical approach is being persued, focused on the creation of a stack of tools collaboratively building a software and content platform and, on the content side, to truly implement a distributed operative environmet which enables for a real stratification of information on the “real” world. Projects such as OSM are truly interesting in that they actually enable people to do something that people are doing since the dawn of times: add meaning and information to the world around them. OSM allows you doing it on a global scale by providing the geographic foundation and by allowing you to freely build on it.

This is a focal point, and it’s the main reason behind me not being *very* excited about the marketing aspects of AR.

With AR we are dealing with a possible paradigm shift: the possibility to making digital, multimedia information accessible directly from the analog physical world.

This is a breathtaking possibility that has been matched, recently, only by the researches on digital and generative fabrication. While this latter model describes a complete reinvention of manufacturing processes (post-post-industry: you bring manufacturing plants at home, you work on opensourced models that you can use/modify and 3d-print) rethinking from the base the ideas of patents, distribution, storage, sustainability, ecology, AR completely (potentially) reinvents the idea of communication, bringing the power of creating information, meaning, symbols, codes and interactions directly to the people, directly in the places/times they walk, live, work, have fun.

This possibility potentially confronts the current hyerarchies and models of communication and information, further enhancing the ones that are currently available through the internet. AR potentially brings the possibility to generate, disseminate and distribute content and information to the people in the physical world, far from their monitors, far from “I Like” buttons and “tweet this” badges.

This is why we named ur contribution to IAR2010 Critical AR Ensemble.

Critical Art Ensemble was a group creating “molecular interventions and semiotic shocks that collectively could diminish the rising intensity of authoritarian culture”. Their work on media and experimentations on the borders and frontiers of technology, biotechnology and extreme practices is something that we feel  very significative in contemporary times.

We borrowed their name, turining it into Critical AR Ensemble, to suggest how Augmented Reality can be thought of as a new space in which to create such “interventions and semiotic shocks”. With AR we imagine a world in which codes can be broken down, infliltrated, reinvented, directly from the people, directly from streets, bodies, objects, times and places, reinventing public spaces, private ones, relations, and communications.

There are technical and conceptual issues to be assessed in all this.

Technically, AR is still very cumbersome: devices, displays, percision, computer vision… everything is not what we would like to have. Too slow, too limited, too reliant on markers.

Conceptually, AR is being mostly used as a next-step advertisment or as a next-step yellow pages. Which is something, but something that resembles using a nuke to kill a fly.

One thing must be said in favor of marketing practices experimenting with AR: they are fast! There’s a dozen new experiments each day: markers on magazines, on cards, on totems, on cars, on tshirts, everywhere. With this progression going on we will soon have critical masses of know-how that will possibly form a foundation for further researchers.

But the most interesting things going on in AR are quite far from marketing. Social networks, art, architecture, sustainability, ecology, disabilities, multi-cultural practices, alternative business models, activism. People reinventing socialization; aesthetics; the spaces we walk through; the places in which we spend our time; the effects of our actions on the world; the possibility to inform ourselves on the products and services we use; the accessibility of the world for people who are not able to hear or see; the possibility to open up dialogues among multiple cultures and to make them interact and coexist; the possibility to create really new business models; the posibility to criticize, express ourselves, promote our autonomies, claim our share of the world.

These are areas in which AR is being researched on with incredible results, and the ones that I personally am most excited about.

Together with FakePress we are approaching these areas of intervention from the point of view of a next-step publishing house.

FakePress next step publishing

FakePress next step publishing

What will a publishing house that is aware of these possibilities look like?

We actually don’t know, yet, just as anyone else in these times and conditions. But we’re experimenting on our educated guesses.

“Publishing” will be (and already is) a key term in the near future. Global scale meltin-pots, remixing, mashing-ups, bashing, distracting, assembling, disassembling, fabbing, performing, wearing, touching, retouching. Messing it all up and bringing it back to a state of calm for the next two seconds and then starting up once again with the mashup. A continuous fluid unstable state of remix. Incredibly creative. But also very far from the word “strategy” as we know it. Different skills, methodologies, ambitions and, most of all, imaginaries are required.

Wrapping up: IAR2010 was a wonderful experience. We saw some innovative experiments, some a-bit-less-innovative ones, but focused on the high levels of quality and accessibility designed for the masses, some decent technical solutions, some really interesting theoretical approaches, some great visions, some incredible efforts and, most of all, a wonderful level of curiosity, a definite will to listen to all the available perspectives and a remarkable dedication to being open and accessible, with the clear objective of creating interconnections and collaborations.


A computer is interpreted as a body according to eastern theories and philosophies.

The Chakras represent the components of the PC. When the computer reaches Chakra balance, it goes in Kundalini state, becoming connected to all the other ChakraPuters on the network.

Chakraputer can be experienced on the web and through an installation/performance featuring a Yoga master side by side with the ChakraPuter.

more info at:

> website

also seen at:


> processing soup