In some urban sensing projects geographical location becomes
important. Geographical location can be relevant in four types of
sensing projects: 1. Tag and Track urban sensing projects : In this
type of projects particular material or human entities are tagged
with location reporting devices. These devices report their
location at specified intervals to a central data management center
from where this data is aggregated and the tagged entities pattern
of movement within the city is tracked on representational maps. 2.
Sensor networks with fixed sensing probes: In this type of
projects, sensors are distributed all over the city and they
monitor changes in particular aspect of their context and report
this information in specified intervals to a central data
management center from where this information is aggregated and
represented on representational maps. To this effect the received
information from each fixed sensing probe is associated with its
unique, and again fixed, geographical location on the
representational map which allows the navigation of real-time
information received from various sensing probes interfacing with
the map or comparative monitoring of multiple sensors visible
within a certain map view at the same time. 3. Sensor networks with
dynamic sensing probes: In this type of projects, sensors are
distributed all over the city that are dynamic and constantly
navigate the city and monitor changes in particular aspect of their
context and report this information along with their real-time
location at specified intervals to a central data management center
from where this information is aggregated and represented on
representational maps. To this effect the received information from
each sensing probe is associated with its reported real-time
geographical location and is mapped on the representational map. 4.
Urban Sensing projects that map previously geo-tagged information:
In this type of projects an already existing repository of content
that is associated with geographical location exists and a
representational map is utilized to demonstrate how content is
related to geographical location.
Slide 2
Absolute geographical location comes in the format of
Latitude/Longitude pairs: Latitude ( shown as a horizontal line )
is the angular distance, in degrees, minutes, and seconds of a
point north(+) or south (-) of the Equator. Lines of latitude are
often referred to as parallels. Longitude ( shown as a vertical
line ) is the angular distance, in degrees, minutes, and seconds,
of a point east (+) or west (-) of the Prime ( Greenwich )
Meridian. Lines of longitude are often referred to as meridians.
There are two different formats in taking note of lattitude and
longitude of geographical coordinates: 1. deg-min-sec suffixed with
N/S/E/W (e.g. 404455N, 73 59 11W), where for precision purposes,
degrees of longitude and latitude have been divided into minutes
(') and seconds ("). There are 60 minutes in each degree. Each
minute is divided into 60 seconds. Seconds can be further divided
into tenths, hundredths, or even thousandths. 2. signed decimal
degrees without compass direction, where negative indicates
west/south (e.g. 40.7486, -73.9864) Here is how one format is
translated to the other format: deg-min-sec suffixed with N/S/E/W
to signed decimal degrees signed decimal degrees to deg-min-sec
suffixed with N/S/E/W Lon= dd mm ss E/W Lon= +/- dd+mm/60+ss/3600
Lon=+/- xx.yyyy dd= xx 0.yyyy*60 =zz.wwww mm=zz 0.wwww*60=vv.qqqq
ss=vv.qqqq Lon= xx zz vv.qqqq E/W Lat= dd mm ss N/S Lat= +/-
dd+mm/60+ss/3600 Lat=+/- xx.yyyy dd= xx 0.yyyy*60 =zz.wwww mm=zz
0.wwww*60=vv.qqqq ss=vv.qqqq Lat= xx zz vv.qqqq N/S
Slide 3
If the longitude and latitude of two points are known, the
following formulas allow for deducing further information about
relative position of two points. This is for calculation of
distance between the two points. Take note that this is to
calculate great-circle distances between the two points that is,
the shortest distance over the earths surface giving an
as-the-crow-flies distance between the points (ignoring any
hills!). d = acos(sin(lat 1 ).sin(lat 2 )+cos(lat 1 ).cos(lat 2
).cos(long 2 long 1 )).R R= radius of earth =6371 km This is the
midpoint along a great circle path between the two points. Bx =
cos(lat 2 ).cos(long) By = cos(lat 2 ).sin(long) lat m =
atan2(sin(lat 1 ) + sin(lat 2 ), ((cos(lat 1 )+Bx) + By)) lon m =
lon 1 + atan2(By, cos(lat 1 )+Bx) This is for the initial bearing
(sometimes referred to as forward azimuth) which if followed in a
straight line along a great-circle arc will take you from the start
point to the end point: = atan2( sin(long).cos(lat 2 ), cos(lat 1
).sin(lat 2 ) sin(lat 1 ).cos(lat 2 ).cos(long) ) For final
bearing, simply take the initial bearing from the end point to the
start point and reverse it (using = (+180) % 360). Point 1 Point 2
http://www.movable-type.co.uk/scripts/latlong.html
Slide 4
float calculateDistance(float lat1,float lat2, float lon1,
float lon2){ float lat1Rad=radians(lat1); float
lat2Rad=radians(lat2); float lon1Rad=radians(lon1); float
lon2Rad=radians(lon2); int R=6371; // Calculating the distance
between two points //d =
acos(sin(lat1).sin(lat2)+cos(lat1).cos(lat2).cos(long2long1)).R
float dis= acos(sin(lat1Rad) * sin(lat2Rad) + cos(lat1Rad) *
cos(lat2Rad) * cos(lon2Rad-lon1Rad))*R; return dis; } Processing
Function to Calculate Distance Between Two Points with Known
Geographical Coordinates
Slide 5
float [] calculateMidPointCoordinates(float lat1,float lat2,
float lon1, float lon2){ float lat1Rad=radians(lat1); float
lat2Rad=radians(lat2); float lon1Rad=radians(lon1); float
lon2Rad=radians(lon2); // Calculating the coordinates of the
midpoint //Bx = cos(lat2).cos(long) //By = cos(lat2).sin(long)
//latm = atan2(sin(lat1) + sin(lat2), ((cos(lat1)+Bx) + By)) //lonm
= lon1 + atan2(By, cos(lat1)+Bx) float Bx =
cos(lat2Rad)*cos(lon2Rad-lon1Rad); float By =
cos(lat2Rad)*sin(lon2Rad-lon1Rad); float latmRad = atan2(
sin(lat1Rad) + sin(lat2Rad), pow( pow(cos(lat1Rad)+Bx,2) +
pow(By,2),.5) ); float lonmRad=lon1Rad+atan2(By, cos(lat1Rad)+Bx);
float latm=degrees(latmRad); float lonm=degrees(lonmRad); float[]
coordinates=new float[2]; coordinates[0]=latm; coordinates[1]=lonm;
return coordinates; } Processing Function to Calculate the
Coordinates of the Mid-point Between Two Points with Known
Geographical Coordinates
Slide 6 0) lonmDDMMSS=lonmDDMMSS+ " E"; else
lonmDDMMSS=lonmDDMMSS+ " W"; return lonmDDMMSS; } String
LattoDDMMSSFormat(float latm){ float latmRad=latm; latm=abs(latm);
int latmDD=int(latm); int latmMM=int((latm-latmDD)*60); float
latmSS=((latm-latmDD)*60-int((latm-latmDD)*60))*60; String
latmDDMMSS=latmDD+""+latmMM+"'"+latmSS+"\""; if (latmRad>0)
latmDDMMSS=latmDDMMSS+ " N"; else latmDDMMSS=latmDDMMSS+ " S";
return latmDDMMSS; } String signedDecimaltoDDMMSS (float Angle){
//Change format from Signed Decimal to DDMMSS int
AngleDD=int(Angle); int AngleMM=int((Angle-AngleDD)*60); float
AngleSS=((Angle-AngleDD)*60-int((Angle-AngleDD)*60))*60; String
AngleDDMMSS=AngleDD+""+AngleMM+"'"+AngleSS+"\""; return
AngleDDMMSS; } Processing Functions to Convert Latitude, Longitude
and Bearing Angle from Signed Decimal Format to
Degree-Minute-Second (DDMMSS) Format">
String LontoDDMMSSFormat(float lonm){ float lonmRad=lonm;
lonm=abs(lonm); int lonmDD=int(lonm); int
lonmMM=int((lonm-lonmDD)*60); float
lonmSS=((lonm-lonmDD)*60-int((lonm-lonmDD)*60))*60; String
lonmDDMMSS=lonmDD+""+lonmMM+"'"+lonmSS+"\""; if (lonmRad>0)
lonmDDMMSS=lonmDDMMSS+ " E"; else lonmDDMMSS=lonmDDMMSS+ " W";
return lonmDDMMSS; } String LattoDDMMSSFormat(float latm){ float
latmRad=latm; latm=abs(latm); int latmDD=int(latm); int
latmMM=int((latm-latmDD)*60); float
latmSS=((latm-latmDD)*60-int((latm-latmDD)*60))*60; String
latmDDMMSS=latmDD+""+latmMM+"'"+latmSS+"\""; if (latmRad>0)
latmDDMMSS=latmDDMMSS+ " N"; else latmDDMMSS=latmDDMMSS+ " S";
return latmDDMMSS; } String signedDecimaltoDDMMSS (float Angle){
//Change format from Signed Decimal to DDMMSS int
AngleDD=int(Angle); int AngleMM=int((Angle-AngleDD)*60); float
AngleSS=((Angle-AngleDD)*60-int((Angle-AngleDD)*60))*60; String
AngleDDMMSS=AngleDD+""+AngleMM+"'"+AngleSS+"\""; return
AngleDDMMSS; } Processing Functions to Convert Latitude, Longitude
and Bearing Angle from Signed Decimal Format to
Degree-Minute-Second (DDMMSS) Format
Slide 7
float calculateInitialBearing(float lat1,float lat2, float
lon1, float lon2){ float lat1Rad=radians(lat1); float
lat2Rad=radians(lat2); float lon1Rad=radians(lon1); float
lon2Rad=radians(lon2); //Caclulating the initial bearing // =
atan2( sin(long).cos(lat2), cos(lat1).sin(lat2)
sin(lat1).cos(lat2).cos(long) ) float initialBearingAngleRad=atan2(
sin(lon2Rad-lon1Rad)*cos(lat2Rad), cos(lat1Rad)*sin(lat2Rad) -
sin(lat1Rad)*cos(lat2Rad)*cos(lon2Rad-lon1Rad) ); float
initialBearingAngle=degrees(initialBearingAngleRad); return
initialBearingAngle; } float calculateFinalBearing(float lat1,float
lat2, float lon1, float lon2){ float lat1Rad=radians(lat1); float
lat2Rad=radians(lat2); float lon1Rad=radians(lon1); float
lon2Rad=radians(lon2); //Calculating the final bearing // = (+180)
% 360). float finalBearingAngleRad=atan2(
sin(lon1Rad-lon2Rad)*cos(lat1Rad), cos(lat2Rad)*sin(lat1Rad) -
sin(lat2Rad)*cos(lat1Rad)*cos(lon1Rad-lon2Rad) ); float
finalBearingAngle=degrees(finalBearingAngleRad);
finalBearingAngle=(finalBearingAngle+180)%360; return
finalBearingAngle; } Processing Functions to Calculate Initial
Bearing and Final Bearing Between Two Points with Known
Geographical Coordinates
Slide 8
In urban sensing projects that the geographical location is of
importance in deciphering the dynamics of the city representational
maps are the best interface to convey the sensed or extracted
information to the users. To this effect two different map
interfaces can be used: 1.In cases that the only thing to be
presented is the geographical location, or that the geo-localized
sensed or deduced information can be overlaid on the map,
two-dimensional maps are the interfaces of choice. 2.In cases that
certain quantitative sensed or deduced information is to be
associated with their corresponding locations, the representational
map needs to accommodate the third dimension which would be
populated by this information. Representational Maps for
Interfacing with Urban Information with Geographical
Coordinates/Location Relevance
Slide 9
2D Maps and Representing Pattern of Movement
Slide 10
Representational Maps for Interfacing with Urban Information
with Geographical Coordinates/Location Relevance 2D Maps and
Representing Sensed Presence or Pattern of Crowding
Slide 11
Representational Maps for Interfacing with Urban Information
with Geographical Coordinates/Location Relevance 2D Maps and
Representing Situated Sensor Data with Size as Indicator of
Magnitude
Slide 12
Representational Maps for Interfacing with Urban Information
with Geographical Coordinates/Location Relevance 2D Maps and
Representing Situated Sensor Data with Color Coding as Indicator of
Magnitude
Slide 13
Processing and Modestmaps Library : Interactive Navigatable
Geo-localized Maps Modest Maps is a library that displays
tile-based maps, from GoogleMaps. The provided Processing code that
utilizes Modest Maps Librarytallows for seamless zooming and
panning and also has an integral Google Map API which allows to
zoom to a semantically specified geographical location such as an
indicated city name or street address. Different lines of code in
this applet allows for control over graphical and color
characteristics of the base representational map. The highlighted
code allows for changing the mode of the map. Options are:
ArialProvider, RoadProvider, and HybridProvider.
Slide 14
Processing and Modestmaps Library : Interactive Navigatable
Geo-localized Maps Modest Maps is a library that displays
tile-based maps, from GoogleMaps. The provided Processing code that
utilizes Modest Maps Librarytallows for seamless zooming and
panning and also has an integral Google Map API which allows to
zoom to a semantically specified geographical location such as an
indicated city name or street address. Different lines of code in
this applet allows for control over graphical and color
characteristics of the base representational map. Google Maps set
to RoadProvider Mode
Slide 15
Processing and Modestmaps Library : Interactive Navigatable
Geo-localized Maps Modest Maps is a library that displays
tile-based maps, from GoogleMaps. The provided Processing code that
utilizes Modest Maps Librarytallows for seamless zooming and
panning and also has an integral Google Map API which allows to
zoom to a semantically specified geographical location such as an
indicated city name or street address. Different lines of code in
this applet allows for control over graphical and color
characteristics of the base representational map. Google Maps set
to Arial Provider Mode
Slide 16
Processing and Modestmaps Library : Interactive Navigatable
Geo-localized Maps Modest Maps is a library that displays
tile-based maps, from GoogleMaps. The provided Processing code that
utilizes Modest Maps Librarytallows for seamless zooming and
panning and also has an integral Google Map API which allows to
zoom to a semantically specified geographical location such as an
indicated city name or street address. Different lines of code in
this applet allows for control over graphical and color
characteristics of the base representational map. Google Maps set
to Arial Provider Mode
Slide 17
Processing and Modestmaps Library : Interactive Navigatable
Geo-localized Maps Modest Maps is a library that displays
tile-based maps, from GoogleMaps. The provided Processing code that
utilizes Modest Maps Librarytallows for seamless zooming and
panning and also has an integral Google Map API which allows to
zoom to a semantically specified geographical location such as an
indicated city name or street address. Different lines of code in
this applet allows for control over graphical and color
characteristics of the base representational map. The highlighted
code allows for changing the color composition of the map. The
applied Filter() command filters the display window as defined by
one of the following modes: THRESHOLD - converts the image to black
and white pixels depending if they are above or below the threshold
defined by the level parameter. The level must be between 0.0
(black) and 1.0(white). If no level is specified, 0.5 is used. GRAY
- converts any colors in the image to grayscale equivalents INVERT
- sets each pixel to its inverse value POSTERIZE - limits each
channel of the image to the number of colors specified as the level
parameter BLUR - executes a Guassian blur with the level parameter
specifying the extent of the blurring. If no level parameter is
used, the blur is equivalent to Guassian blur of radius 1. OPAQUE -
sets the alpha channel to entirely opaque. ERODE - reduces the
light areas with the amount defined by the level parameter. DILATE
- increases the light areas with the amount defined by the level
parameter.
Slide 18
Processing and Modestmaps Library : Interactive Navigatable
Geo-localized Maps Modest Maps is a library that displays
tile-based maps, from GoogleMaps. The provided Processing code that
utilizes Modest Maps Librarytallows for seamless zooming and
panning and also has an integral Google Map API which allows to
zoom to a semantically specified geographical location such as an
indicated city name or street address. Different lines of code in
this applet allows for control over graphical and color
characteristics of the base representational map. filter(INVERT);
map = new InteractiveMap(this, new Microsoft.RoadProvider());
Slide 19
Processing and Modestmaps Library : Interactive Navigatable
Geo-localized Maps Modest Maps is a library that displays
tile-based maps, from GoogleMaps. The provided Processing code that
utilizes Modest Maps Librarytallows for seamless zooming and
panning and also has an integral Google Map API which allows to
zoom to a semantically specified geographical location such as an
indicated city name or street address. Different lines of code in
this applet allows for control over graphical and color
characteristics of the base representational map. filter(GRAY); map
= new InteractiveMap(this, new Microsoft.RoadProvider());
Slide 20
Processing and Modestmaps Library : Interactive Navigatable
Geo-localized Maps Modest Maps is a library that displays
tile-based maps, from GoogleMaps. The provided Processing code that
utilizes Modest Maps Librarytallows for seamless zooming and
panning and also has an integral Google Map API which allows to
zoom to a semantically specified geographical location such as an
indicated city name or street address. Different lines of code in
this applet allows for control over graphical and color
characteristics of the base representational map.
filter(POSTERIZE,3); map = new InteractiveMap(this, new
Microsoft.AerialProvider());
Slide 21
Processing and Modestmaps Library : Interactive Navigatable
Geo-localized Maps Modest Maps is a library that displays
tile-based maps, from GoogleMaps. The provided Processing code that
utilizes Modest Maps Librarytallows for seamless zooming and
panning and also has an integral Google Map API which allows to
zoom to a semantically specified geographical location such as an
indicated city name or street address. Different lines of code in
this applet allows for control over graphical and color
characteristics of the base representational map.
filter(THRESHOLD,.4); map = new InteractiveMap(this, new
Microsoft.AerialProvider());
Slide 22
Processing and Modestmaps Library : Interactive Navigatable
Geo-localized Maps Modest Maps is a library that displays
tile-based maps, from GoogleMaps. The provided Processing code that
utilizes Modest Maps Librarytallows for seamless zooming and
panning and also has an integral Google Map API which allows to
zoom to a semantically specified geographical location such as an
indicated city name or street address. Different lines of code in
this applet allows for control over graphical and color
characteristics of the base representational map. filter(DILATE);
filter(ERODE); map = new InteractiveMap(this, new
Microsoft.AerialProvider());
Slide 23
Processing and Modestmaps Library : Interactive Navigatable
Geo-localized Maps Modest Maps is a library that displays
tile-based maps, from GoogleMaps. The provided Processing code that
utilizes Modest Maps Librarytallows for seamless zooming and
panning and also has an integral Google Map API which allows to
zoom to a semantically specified geographical location such as an
indicated city name or street address. Different lines of code in
this applet allows for control over graphical and color
characteristics of the base representational map.
filter(THRESHOLD); filter(INVERT); filter(THRESHOLD); map = new
InteractiveMap(this, new Microsoft.AerialProvider()); Multiple
Filters can be applied together to achieve more complex visual
effects
Slide 24
Processing and Modestmaps Library : Interactive Navigatable
Geo-localized Maps Modest Maps is a library that displays
tile-based maps, from GoogleMaps. The provided Processing code that
utilizes Modest Maps Library allows for seamless zooming and
panning and also has an integral Google Map API which allows to
zoom to a semantically specified geographical location such as an
indicated city name or street address. Different lines of code in
this applet allows for control over graphical and color
characteristics of the base representational map. Blend() command
can be applied to the map to manipulate its color scheme. It blends
a region of pixels from one image into another (or in itself again)
with full alpha channel support. There is a choice of modes to
blend the source pixels (A) with the ones of pixels in the
destination image (B): blend(x, y, width, height, dx, dy, dwidth,
dheight, MODE) blend(srcImg, x, y, width, height, dx, dy, dwidth,
dheight, MODE) Parameters : x int: X coordinate of the source's
upper left corner y int: Y coordinate of the source's upper left
corner width int: source image width height int: source image
height dx int: X coordinate of the destinations's upper left corner
dy int: Y coordinate of the destinations's upper left corner dwidth
int: destination image width dheight int: destination image height
srcImg PImage: a image variable referring to the source image MODE
BLEND - linear interpolation of colours: C = A*factor + B ADD -
additive blending with white clip: C = min(A*factor + B, 255)
SUBTRACT - subtractive blending with black clip: C = max(B -
A*factor, 0) DARKEST - only the darkest colour succeeds: C =
min(A*factor, B) LIGHTEST - only the lightest colour succeeds: C =
max(A*factor, B) DIFFERENCE - subtract colors from underlying
image. EXCLUSION - similar to DIFFERENCE, but less extreme.
MULTIPLY - Multiply the colors, result will always be darker.
SCREEN - Opposite multiply, uses inverse values of the colors.
OVERLAY - A mix of MULTIPLY and SCREEN. Multiplies dark values, and
screens light values. HARD_LIGHT - SCREEN when greater than 50%
gray, MULTIPLY when lower. SOFT_LIGHT - Mix of DARKEST and
LIGHTEST. Works like OVERLAY, but not as harsh. DODGE - Lightens
light tones and increases contrast, ignores darks. Called "Color
Dodge" in Illustrator and Photoshop. BURN - Darker areas are
applied, increasing contrast, ignores lights. Called "Color Burn"
in Illustrator and Photoshop. All modes use the alpha information
(highest byte) of source image pixels as the blending factor. If
the source and destination regions are different sizes, the image
will be automatically resized to match the destination size. If the
srcImg parameter is not used, the display window is used as the
source image.
Slide 25
Processing and Modestmaps Library : Interactive Navigatable
Geo-localized Maps Modest Maps is a library that displays
tile-based maps, from GoogleMaps. The provided Processing code that
utilizes Modest Maps Library allows for seamless zooming and
panning and also has an integral Google Map API which allows to
zoom to a semantically specified geographical location such as an
indicated city name or street address. Different lines of code in
this applet allows for control over graphical and color
characteristics of the base representational map. Blend() command
can be applied to the map to manipulate its color scheme. It blends
a region of pixels from one image into another (or in itself again)
with full alpha channel support. There is a choice of modes to
blend the source pixels (A) with the ones of pixels in the
destination image (B): blend(x, y, width, height, dx, dy, dwidth,
dheight, MODE) blend(srcImg, x, y, width, height, dx, dy, dwidth,
dheight, MODE) For manipulating the color of the map you can apply
the blend function and an image that is as big as the screen window
and contains the base color to be used in blend function: void
draw(){ background(0); map.draw(); //BLEND, ADD, SUBTRACT,
LIGHTEST, DARKEST, DIFFERENCE, EXCLUSION //MULTIPLY, SCREEN,
OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN PImage
colorImage=loadImage("colorImage.jpg"); blend(colorImage, 0, 0,
width, height, 0, 0, width, height, SCREEN); checkCursor(); }
PImage 1200*700Display Window 1200*700 MODE=BURN MODE=SUBTRACT
MODE= DIFFERENCE MODE= SCREEN
Slide 26
Processing and Modestmaps Library : Interactive Navigatable
Geo-localized Maps Modest Maps is a library that displays
tile-based maps, from GoogleMaps. The provided Processing code that
utilizes Modest Maps Library allows for seamless zooming and
panning and also has an integral Google Map API which allows to
zoom to a semantically specified geographical location such as an
indicated city name or street address. Different lines of code in
this applet allows for control over graphical and color
characteristics of the base representational map. Blend() command
can be applied to the map to manipulate its color scheme. It blends
a region of pixels from one image into another (or in itself again)
with full alpha channel support. There is a choice of modes to
blend the source pixels (A) with the ones of pixels in the
destination image (B): blend(x, y, width, height, dx, dy, dwidth,
dheight, MODE) blend(srcImg, x, y, width, height, dx, dy, dwidth,
dheight, MODE) For manipulating the color of the map you can apply
the blend function without specifying a source image to be blended.
This way the displaywindow itself would be the default source image
for the blend operation. void draw(){ background(0); map.draw();
//BLEND, ADD, SUBTRACT, LIGHTEST, DARKEST, DIFFERENCE, EXCLUSION
//MULTIPLY, SCREEN, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN
blend(0, 0, width, height, 0, 0, width, height, SCREEN);
checkCursor(); } MODE=ADD MODE= EXCLUSION MODE= DIFFERENCE
Slide 27
Processing and Modestmaps Library : Interactive Navigatable
Geo-localized Maps Modest Maps is a library that displays
tile-based maps, from GoogleMaps. The provided Processing code that
utilizes Modest Maps Library allows for seamless zooming and
panning and also has an integral Google Map API which allows to
zoom to a semantically specified geographical location such as an
indicated city name or street address. Different lines of code in
this applet allows for control over graphical and color
characteristics of the base representational map. For manipulating
the color scheme of the map customized functions can be
incorporated that apply pixel manipulation to the map area in
display window.
Slide 28
PImage myImage; //define an image object myImage =
loadImage(test.jpg"); //load it size(myImage.width,myImage.height);
//size it to fit the window image(myImage, 0,0); //display the
image for(int y=0; y