WindowZoos & Views Workshop, Singapore

With John Craig Freeman

Dates: April 1–4, 2013

Times: April 1 – 3, 9:00 am – 12:00 pm and 2:00 pm – 5:00 pm, April 4, 9:00 am – 12:00 pm

WindowZoos & Views Planning Meeting April 3, 4:00 pm

Where: School of Digital Media and Infocomm Technology, Singapore Polytechnic

IMAG1508_w_Phone

In association with WindowZoos & Views, an exhibition of augmented reality public artwork during the Digital Art Weeks International, Singapore, 2013.

daw_newlogo_artscience

Public Art in the Virtual Sphere

Whereas the public square was once the quintessential place to air grievances, display solidarity, express difference, celebrate similarity, remember, mourn, and reinforce shared values of right and wrong, it is no longer the only anchor for interactions in the public realm. That geography has been relocated to a novel terrain, one that encourages exploration of mobile location based public art. Moreover, public space is now truly open, as artworks can be placed anywhere in the world, without prior permission from government or private authorities – with profound implications for art in the public sphere and the discourse that surrounds it.

Biography: John Craig Freeman is a public artist with over twenty years of experience using emergent technologies to produce large–scale public work at sites where the forces of globalization are impacting the lives of individuals in local communities. His work seeks to expand the notion of public by exploring how digital networked technology is transforming our sense of place. Freeman is a founding member of the international artists collective ManifestAR and he has produced work and exhibited around the world including in Liverpool, Venice, Istanbul, Xi’an, Belfast, Los Angeles, Beijing, Zurich, New York City, Taipei, São Paulo, Warsaw, Kaliningrad, Miami, Bilbao, Havana, Atlanta, Calgary, Buffalo, Boston, Mexico City, London and San Francisco. In 1992 he was awarded an Individual Artist Fellowship from the National Endowment for the Arts. He has had work commissioned by the ZERO1 Biennial, Rhizome.org and Turbulence.org. His work has been reviewed in The New York Times, El Pais, Liberation, Wired News, Artforum, Ten–8, Z Magazine, Afterimage, Photo Metro, New Art Examiner, Time, Harper’s and Der Spiegel. Christiane Paul cites Freeman’s work in her book Digital Art, Second Addition, as does Lucy Lippard in the Lure of the Local, and Margot Lovejoy in Digital Currents: Art in the Electronic Age. His writing has been published in Rhizomes, Leonardo, the Journal of Visual Culture, and Exposure. Freeman received a Bachelor of Art degree from the University of California, San Diego in 1986 and a Master of Fine Arts degree from the University of Colorado, Boulder in 1990. He is currently an Associate Professor of New Media at Emerson College in Boston. Freeman writes, “If Andy Warhol set out to create a distinctly American art form in the twentieth century, I identify with those who seek to create a distinctly global art form in the twenty–first.”

Syllabus

This 16–hour workshop provides a hands-on introduction to location-based Augmented Reality (AR) – a technique where virtual 3D objects can be overlaid into physical space and viewed through the camera and screen of mobile devices. AR is an emerging tool in game design and offers many exciting possibilities for visual artists to realize their ideas in any scale or location in the world.

IMAG1485

By the end of the workshop you will be able to:

  • Create and manage an augmented reality asset database
  • Create simple but meaningful 2D and 3D virtual objects and place them at specific geographical locations
  • Understand how to use the Layar Mobile Augmented Reality Platform
  • Test, view and document your work on location

Participation Requirements:

  • Each student must bring a late model mobile device (iPhone, Android smartphone or iPad) equipped with a camera, GPS, compass, accelerometer, and mobile Internet or Wi–Fi connection
  • Each student must have access to a late model computer with an Internet connection
  • Each student must have access web servers space and a database. If no institutional support for databases is available, students must signup for a third–party web hosting provider. I recommend DreamHost. The host must allow unrestricted FTP (file transfer protocol) access to at least 40 MB of web servers space and a dedicated MySQL database (client version: 5.1.49 or later) running phpMyAdmin (version: 3.3.10.4 or later)

Getting Started

Please keep you phone charged at all times.

Download the Workshop Assets

Create and Configure Domain and Database

Domain

Database

FTP

Set Up a Web Service

Navigate to Workshop_Assets/FTP_to_Your_Web_Server/Layar/

Rename Your_Project_Title.php to Your_Project_Title.php

Open Workshop_Assets/FTP_to_Your_Web_Server/Layar/config.inc.php in a software development environment or a text editor

Edit the credentials and save the file

  • define(‘DBHOST’, ‘64.27.50.158’);
  • define(‘DBDATA’, ‘username’);
  • define(‘DBUSER’, ‘username’)
  • define(‘DBPASS’, ‘password’)

* “localhost” might work depending on how the database is configured by the provider.

Rename FTP_to_Your_Web_Server to yourprojectname

FTP the yourprojectname/ directory to your web server

Add Tables to Database

Login to your database using phpMyAdmin

Open Workshop_Assets/Layar_Tables_sqlQuery.sql in text editor

Select > All

Edit > Copy

In phpMyAdmin select your_database_name

Select SQL Tab

Edit > Paste

Go

Modify Table Fields

Icon:

> Browse Tab > Edit (pencil)

* Replace this image with your own PNG file, use
Workshop_Assets/Button.psd

Layer:

> Browse Tab > Edit (pencil)

  • layer = yourprojectname
  • refreshInterval = 300
  • refreshDistance = 100
  • fullRefresh = 1
  • showMessage = √ Null
  • id = 1
  • biwStyle = classic
  • Go

LayarAction:

> Browse Tab > Edit (pencil)

  • No change

Object:

> Browse Tab > Edit (pencil)

* We will replace this model with your modification
of Simple_Facing_Plane.l3d file

POI

> Browse Tab > Edit (pencil)

  • id = Your_Object
  • footnote = Your_Name
  • title = Your_Project_Title
  • Right–Click ‘View Larger Map’ below to open in new tab
  • Right–Click on map and choose ‘What’s here?’ to determine GPS coordinates
  • lat = Workshop test lat
  • lon = Workshop test lon
  • imageURL = http://your_domain.com/yourprojectname/
    Assets/* Simple_Facing_Plane_Icon_128.png
  • description = Short description (3 or 4 words max)
  • biwStyle = classic
  • alt = √ Null
  • doNotIndex = 0
  • showSmallBiw = 1
  • showBiwOnClick = 1
  • poiType = • geo
  • iconID = 1
  • objectID = 1
  • transformID = 1
  • layerID = 1
  • Go

POIAction:

> Browse Tab > Edit (pencil)

Transform:

> Browse Tab > Edit (pencil)

  • id = 1
  • rel = 1 (always face user)
  • angle = 0
  • rotate_x = 0
  • rotate_y = 0
  • rotate_z = 1
  • translate_x = 0
  • translate_y = 0
  • translate_z = 0
  • scale = 1.0
  • Go

Set Up a Layar Developer Account

Review Steps to create a layer

Follow the instructions to Sign up to become a developer

Login to Layar Developer Section

Create a Layar

In Layar Developer Section click ‘Create a new layer!’

For details see: Register a Layer

  • Layer name = yourprojectname (unique, lowercase only, no spaces or symbols)
  • Title = Your Project Title
  • Short description (60 characters max)
  • API endpoint URL = http://Your_Domain/Layar/
    Your_Project_Title.php
  • Create Layar

Edit Layar

For details see: Edit a Layar

General tab:

  • 3D and 2D objects in space (pulldown)

API endpoint tab:

  • No change

Listing & indexing tab:

  • Layer Icon = * Workshop_Icon_128.png, * Workshop_Icon_96.png
  • Layer Screenshot = * Workshop_Screenshot.png
  • Title = Your_Project_Title
  • Category = Art
  • Short description
  • Detail description
  • Tags = windowzoos
  • Minimum API version = Version 7.1
  • Save

* Replace these images with your own .PNG files, maintain pixel dimentions and naming conventions, such as Your_Project_Title_Icon_128.png

Look & feel tab:

  • Upload a Banner Icon = Baner_Icon_120.png, Baner_Icon_90.png
  • Save

Coverage tab

  • Countries = International
  • Save

Test Layar

For details see: Test a layer

Layar Developer Section – My layars > yourlayarname Test

  • Enter geolocation:
  • Save location = Your_Location
  • Load POIs

Install Layar to Mobile Device

Install the free Layar Augmented Reality Browser on your tablet or phone and login

  • Layar > Setting > Account
  • Username: Your_Layar_Account_Username
  • Password: Your_Layar_Password

Ignore Scan (See Layar Vision for more on Layar Vision)

Select GeoLayar > Test

If necessary, test from remote location using Fixed Location

  • Layar > Setting > Options
  • Use fixed location:
  • Latitude: Your_POI_Latitude –0.0001
  • Longitude: Your_POI_Longitude –0.0001

Request Approval for Publication

Layar Developer Section – My layars > yourlayarname Request Approval

For details see: Request for publication

Publish Layar

Publish your layar once it is approved

Layar Developer Section – My layars > yourlayarname Publish

Project Production

Prepare your your own PNG file with transparency:

  • Save it at 1024×1024 pixel Your_2D_Object_1024.png
  • Save it at 128×128 pixel your_2D_object_Icon_128.png
  •  
     
     
     
     
     
     
     

  • Save it at 96×96 pixel your_2D_object_Icon_96.png

 
 
 
 
 
 
 

Modify OBJ

Convert an .obj file to the Layar proprietary .l3d file format using the Layar3D Model Converter

Inspect Workshop_Assets/OBJs

All three .obj, .mtl (UV map) and image file (.jpg or .png) are required

Layar3D Model Converter –

Menubar > File > Import Wavefront (.obj/.mtl) = Workshop_Assets/OBJs/
Simple_Facing_Plane.obj

Overview:

  • Inspect stats, File size (bytes) not to exceed 1,000,000

Materials:

  • Select > Replace Image = Your_2D_Object_1024.png
  • Diffuse = White
  • Ambient = White

Preview:

Menubar > File > Save As Your_Simple_Facing_Plane.l3d

Update Database Tables

phpMyAdmin > your_database_name –

Object: > Browse Tab > Edit (pencil)

  • url = http://your_domain.com/yourprojectname/
    Assets/Your_Simple_Facing_Plane.l3d
  • Go

POI: > Browse Tab > Edit (pencil)

  • imageURL = http://your_domain.com/yourprojectname/
    Assets/Your_Icon_128.png
  • Go

Add Audio

POIAction: > Browse Tab > Edit (pencil)

  • labelPlay Audio
  • uri = –http://your_domain.com/yourprojectname/
    Assets/*Audio.wav
  • autoTriggerRange = 3
  • autoTriggerOnly = 1
  • contentType = audio/mpeg
  • activityType = 2
  • params = √ Null
  • activityMessage = Listen to this
  • autoTrigger = 1
  • Go

* Replace this audio file with your own .WAV file and ftp to
–http://your_domain.com/yourprojectname/Assets/

IMAG1487

IMAG1511

Animated Assets

Layar3D Model Converter –

Menubar > Open = Workshop_Assets/Simple_Facing_Plane.l3d

Materials:

  • Diffuse = White
  • Ambient = White
  • static – animation > Replace image =
    Workshop_Assets/Animation/Animation_512_01.png to
    Animation_512_10.png
  • Add
  • Delay (ms) = 200

Preview:

Menubar > Enable > Animation

Overview:

Inspect stats, File size (bytes) not to exceed 1,000,000

3D Assets

Adjust Normals:

Maya Menubar > File > Set Project = Simple_Cylinder

Menubar > File > Open = Simple_Cylinder.mb

Select geometry

Menubar > Display > Polygons > Face Normals

Menubar > Display > Polygons > Backface Culling

Menubar > Settings/Preferences > Plug-in Manager > objExport.bundle √

Menubar > File > Export > OBJs/Simple_Cylinder.obj

Layar3D Model Converter –

Menubar > File > Import Wavefront (.obj/.mtl) = Simple_Cylinder.obj

Overview:

  • Inspect stats, File size (bytes) not to exceed 1,000,000

Materials:

  • Diffuse = White
  • Ambient = White

Preview:

Placement:

  • √ Save placement details

Menubar > File > Save As Your_3D_Asset.l3d

Open and inspect Simple_Cylinder.psd in Photoshop

5404_158093924352310_1142584764_n

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s