Klynt Tutorials/Examples

http://webdoc.france24.com/billet_retour_bagdad/#Menu_

http://bruxelles.tv5monde.com

http://webdoc.france24.com/Gaza-Confidential/#intro

http://alpes-home.com/visite-interactive/#Home_1_-_Accueil

http://www.goodlife.film/#Experience_the_present

Sounds of Street View

http://www.amplifon.ie/sounds-of-street-view/index.html
"Sounds of Street View" is a multi-sensory tour featuring a unique 3D sound experience where you can explore and navigate through three chosen locations using it like google maps.

The 3D sound for "Sounds of Street View" is create through 5 different key elements which come together to produce the immersive 360 spacial audio which accompanies 360 video. These 5 elements are Placement, Distance, Bearing, Ear Imitation and Inverse Square Law. Below are short videos provided by the project which briefly explain what each aspect is and how they affect the audio. Also provided is the coding used by the project

Coding Template

/**
*  Adds a marker to the Street View map
* @param {Object}  data      settings for this marker, properties include...
*
*  {
*   data.name: String to be used as a name for this marker,
*   data.lat: Lattitude to use for position of this marker
*   data.lng: Longitude to use for position of this marker
*  }
*/
this.addMarker = function(data){

  var marker = new google.maps.Marker({
    map         : obj.panorama,
    title  : data.name,
    position  : new google.maps.LatLng(data.lat, data.lng),
    icon  : 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  });
  
  obj.markers.push(marker);

}

Coding Template

define([], function(){

  var rad = function(x) {
    return x * Math.PI / 180;
  };
  
  /**
  * Calculates and returns the distance between 2 google latlng objects
  * @param {google.maps.LatLng}   p1   google LatLng position
  * @param {google.maps.LatLng}   p2   google LatLng position
  * @return {number}   
  */
  return function(p1, p2, metric){
    var R = 6378137,  // Earth’s mean radius in meter
    dLat = rad(p2.lat() - p1.lat()),
    dLong = rad(p2.lng() - p1.lng()),
    a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) * Math.sin(dLong / 2) * Math.sin(dLong / 2),
    c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)),
    d = R * c;  // d = the distance in meter
    return d;    
  }
});

Coding Template

this.updatePan = function(lat, lng, heading){

 // Calculate base angle between the user and the sound
 var xDiff = data.lat - lat,
     yDiff = data.lng - lng,
     angle = Math.atan2(yDiff, xDiff) * (180/Math.PI);

 // Add POV heading offset
 angle -= heading;

 // Convert angle to range between -180 and +180
 if (angle < -180) angle += 360;
 else if (angle > 180) angle -= 360;

 // Calculate panPosition, as a range between -1 and +1
 var panPosition = (angle/90);
 if (Math.abs(panPosition) > 1) {
     var x = Math.abs(panPosition) - 1;
     panPosition = (panPosition > 0) ? 1 - x : -1 + x;
 }

 // Set the new pan poition
 sound.pos3d(panPosition, 1, 1);
}

Coding Template

this.updatePan = function(lat, lng, heading){

 // Calculate base angle between the user and the sound
 var xDiff = data.lat - lat,
     yDiff = data.lng - lng,
     angle = Math.atan2(yDiff, xDiff) * (180/Math.PI);

 // Add POV heading offset
 angle -= heading;

 // Apply lowpass filter *if* the sound is behind us (11,000hz = filter fully open)
 var freq = 11000;
 if (Math.abs(angle) > 90) {
     // User's back is to the sound - progressively apply filter
     freq -= (Math.abs(angle) - 90) * 100;
 }
 
 sound.filter(freq);
}

Coding Template

this.calculateVolume = function(distance){

 // Calculate volume by using Inverse Square Law
 vol = 1 / (distance * distance);
 // Multiply distance volume by amplitude of sound (apply ceiling max of 1)
 vol = Math.min((vol * data.db), 1);

 if (vol < 0.01) {
     if (sound.isPlaying) {
  obj.stopSound();
     }
 } else {
     if (!sound.isPlaying) {
  obj.playSound();
     }
 }

 return vol;
}

Creating your own

"Sounds of Street View" also provides you with the opportunity to create your own version, giving you a step by step guide on how to proceed in creating your own immersive tour.

1.

2.

3.

4.

5.

Statement of Intent Feedback

• Consider types of religion, would it be best to focus more on more underground beliefs?
• Consider access to places of worship - start early in order to ensure it is gained.
• 360 degree vid cameras now available at university store, could be usable for interactive google maps/Abbey Road style tours
• Research Sounds of Street View 
• Distance and volume of sound - perspective 
• Sandra Gaudenzi - arrange tutorial for more iDoc feedback
• Klynt/Adobe Muse - possible software for interactive website building (Klynt appears more user friendly)

Arranging a Tutorial with Sandra Gaudenzi

Google Abbey Road

https://insideabbeyroad.withgoogle.com/en/all-access/studio-1/1023#x=-0.506&y=0.125&z=0.854

Inside Abbey Road is an interactive virtual tour of the famous Abbey Road studios, made in collaboration with Google, utilising their 360 degree Google Maps style technology. This creates a very immersive experience as it allows the user to walk through as though they are actually in the space, going at their own pace and focussing in on different things within the space. There is a further layer of interactivity added as there are points of interest within the space that can be clicked on in order to find out more information via text or through video. We would like to recreate something similar within religious spaces and can use this as inspiration.


https://www.lynda.com/Lightroom-tutorials/Welcome/447239/514599-4.html

Project Proposal

Initial working title: 

السلام عليكم
Peace Be With You

Summary: 

We propose to create an interactive documentary highlighting the similarities between people of different religions despite their religious beliefs causing conflict. Our experiential interactive documentary will take viewers through two places of worship, a Christian Church and an Islamic Mosque, providing the participant with the opportunity to meet members of each religious community. Through the introduction of these characters, the audience will gain insight into key issues each religion is facing whilst understanding the parallels that both groups share.

The documentary could begin with a split screen, showing the same perspective of the outside of each religious building. The viewer will then be able to select whether they want to visit the Church or the Mosque first, which will initiate a quick tour around either building. We then hope to introduce members of each religion, focusing on the issues their religion faces, but also their personal beliefs and values.

We’ve also considered visiting both the mosque and the church and shooting very similar shots frame by frame, and giving the option to the participant to press down on the spacebar in order to switch between the two different videos. This would be a very literal way to show the parallels between the religions.

Presentation Intentions:

Interactive Documentary - Screen based

Inspiration/Key References: 

http://kabulportraits.nfb.ca/main.html https://www.youtube.com/watch?v=cllWl1u1fj0 https://insideabbeyroad.withgoogle.com/en/welcome https://www.teamgaza.nl/en/ https://digitalsynopsis.com/advertising/honda-civic-type-r-the-other-side/

Interactive Doc Home Screen Mock Up