1. Tag and Track urban sensing projects :

pogonotomygobbleAI and Robotics

Nov 15, 2013 (3 years and 4 months ago)

114 views


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

s
ensing

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
.


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. 40
°
44′55″N, 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


If the longitude and latitude of two points are known, the following formulas allow for deducing further information about re
lat
ive 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 earth’s 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=
r
adius

of
e
arth

=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
-
ci
rcle 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

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
(long2−long1)).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

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

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

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

In urban sensing projects that the geographical location is of importance in deciphering the dynamics of the city representa
tio
nal 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 informati
on 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
rep
resentational 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

Representational Maps for Interfacing with Urban Information with Geographical Coordinates/Location Relevance

2D Maps and Representing Pattern of Movement

Representational Maps for Interfacing with Urban Information with Geographical Coordinates/Location Relevance

2D Maps and Representing Sensed Presence or Pattern of Crowding

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

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

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 representation
al
map.


The highlighted code allows for changing the mode of the map. Options are:
ArialProvider
,
RoadProvider
, and
HybridProvider
.




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 representation
al
map.





Google Maps set to
RoadProvider

Mode

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 representation
al
map.




Google Maps set to Arial Provider Mode

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 representation
al
map.




Google Maps set to Arial Provider Mode

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 ci
ty
name or street address.


Different lines of code in this applet allows for control over graphical and color characteristics of the base representation
al
map.


The highlighted code allows for changing the color composition of the map. The applied Filter() command filters the display w
ind
ow 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.

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 ci
ty
name or street address.


Different lines of code in this applet allows for control over graphical and color characteristics of the base representation
al
map.


filter
(
INVERT
);

map =
new

InteractiveMap
(
this
,
new

Microsoft.RoadProvider
());


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 ci
ty
name or street address.


Different lines of code in this applet allows for control over graphical and color characteristics of the base representation
al
map.


filter
(
GRAY
);

map =
new

InteractiveMap
(
this
,
new

Microsoft.RoadProvider
());


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 ci
ty
name or street address.


Different lines of code in this applet allows for control over graphical and color characteristics of the base representation
al
map.


filter
(
POSTERIZE
,3);

map =
new

InteractiveMap
(
this
,
new

Microsoft.AerialProvider
());


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 ci
ty
name or street address.


Different lines of code in this applet allows for control over graphical and color characteristics of the base representation
al
map.


filter
(
THRESHOLD
,.4);

map =
new

InteractiveMap
(
this
,
new

Microsoft.AerialProvider
());


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 ci
ty
name or street address.


Different lines of code in this applet allows for control over graphical and color characteristics of the base representation
al
map.


filter
(
DILATE
);




filter
(
ERODE
);

map =
new

InteractiveMap
(
this
,
new

Microsoft.AerialProvider
());

map =
new

InteractiveMap
(
this
,
new

Microsoft.AerialProvider
());


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 ci
ty
name or street address.


Different lines of code in this applet allows for control over graphical and color characteristics of the base representation
al
map.


filter
(
THRESHOLD
);

filter(
INVERT
);




filter
(
THRESHOLD
);

map =
new

InteractiveMap
(
this
,
new

Microsoft.AerialProvider
());

map =
new

InteractiveMap
(
this
,
new

Microsoft.AerialProvider
());


Multiple Filters can be applied together to achieve more complex visual effects

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 ci
ty
name or street address.


Different lines of code in this applet allows for control over graphical and color characteristics of the base representation
al
map.

Blend() command can be applied to the map to manipulate its color scheme. It blends a region of pixels from one image into a
not
her (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 destinati
on
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.

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 ci
ty
name or street address.


Different lines of code in this applet allows for control over graphical and color characteristics of the base representation
al
map.

Blend() command can be applied to the map to manipulate its color scheme. It blends a region of pixels from one image into a
not
her (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
con
tains 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*700

Display Window 1200*700

MODE=BURN

MODE=SUBTRACT

MODE= DIFFERENCE

MODE= SCREEN

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 ci
ty
name or street address.


Different lines of code in this applet allows for control over graphical and color characteristics of the base representation
al
map.

Blend() command can be applied to the map to manipulate its color scheme. It blends a region of pixels from one image into a
not
her (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

wa
y 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

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 ci
ty
name or street address.


Different lines of code in this applet allows for control over graphical and color characteristics of the base representation
al
map.

For manipulating the color scheme of the map customized functions can be incorporated that apply pixel manipulation to the ma
p a
rea in display window.




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<
myImage.height
; y++) //for all pixels in the y direction

for(
int

x=0; x<
myImage.width
; x++){ //for all pixels in the x direction

color
myPixel

= get(
x,y
); //get a pixel's color

int

r =
int
(red(
myPixel
)); //extract the red value

int

g =
int
(green(
myPixel
)); //extract the green value

int

b =
int
(blue(
myPixel
)); //extract the blue value

color inverse = color(255
-
r,255
-
g, b); //make a color by inverting (255
-
value)

set(
x,y,inverse
); //set the pixel’s color in the image

}

Base code for Image Processing

void
changeMapColor
(){


for(
int

y=0; y<height; y++) //for all pixels in the y direction


{


for(
int

x=0; x<width; x++){ //for all pixels in the x direction


color
myPixel

= get(
x,y
); //get a pixel's color


int

r =
int
(red(
myPixel
)); //extract the red value


int

g =
int
(green(
myPixel
)); //extract the green value


int

b =
int
(blue(
myPixel
)); //extract the blue value


r=255
-
r;//Specify how red factor is changed


g=255
-
g;//Specify how green factor is changed


b=b;//Specify how blue factor is changed


color
newColor

= color(
r,g,b
);


set(
x,y,newColor
);//Set the pixel's color in the image


}


}

}

Custom Function for Pixel

base manipulation of map interface color scheme based on Image Processing Code

void setup(){


setupInterface
();


// Map Mode Options would be "new
Microsoft.HybridProvider
()" or "new
Microsoft.AerialProvider
()" or "new
Microsoft.RoadProvider
()"


map = new
InteractiveMap
(this, new
Microsoft.AerialProvider
());


map.setCenterZoom
(new Location(43.688484,
-
79.413445), 18);

// zoom 0 is the whole world, 19 is street level

// the parameters passed to new location( ) are lat and
lon

of the intended center of the map

}

Initial Zoom Level and Zoom Center of the Interactive Map Interface



map.setCenterZoom
(new Location(43.688484,
-
79.413445), 19);



map.setCenterZoom
(new Location(43.688484,
-
79.413445), 3);


Now

that

we

have

covered

all

the

aspects

of

controlling

the

visual

quality

of

the

interactive

2
D

map

interface,

it

is

time

to

go

through

various

possibilities

in

terms

of

plotting

information

with

geo
-
locational

relevance

to

the

interactive

map
.

In

each

exercise

that

follows

a

hypothetical

scenario

is

discussed
.

For

each

scenario

a

data

set

is

presented

that

is

populated

with

relevant

geo
-
localized

data
.

Different

applets

are

discussed

that

each

allow

for

plotting

the

data

to

the

map
.

2Dmap and Data Visualization

2
Dmap

and

Data

Visualization
-
Plotting

Presence

data

or

Pattern

of

Distribution



Hypothetical

Scenario
:

Flickre

API

is

used

to

retrieve

images

with

geo
-
location

information

that

fit

the

query

for

particular

semantic

tags
.

The

result

is

a

text

file

containing

a

series

of

Latitude/Longitude

pairs

each

representing

the

location

to

which

a

particular

image

has

been

associated

by

the

contributing

user

of

the

digital

file
.

Each

data

record

in

the

file

has

the

following

format
:

Latitude*Longitude



The

first

step

is

to

add

the

txt

file

t

o

the

processing

applet
:











2
Dmap

and

Data

Visualization
-
Plotting

Presence

data

or

Pattern

of

Distribution



Hypothetical

Scenario
:

Flickre

API

is

used

to

retrieve

images

with

geo
-
location

information

that

fit

the

query

for

particular

semantic

tags
.

The

result

is

a

text

file

containing

a

series

of

Latitude/Longitude

pairs

each

representing

the

location

to

which

a

particular

image

has

been

associated

by

the

contributing

user

of

the

digital

file
.

Each

data

record

in

the

file

has

the

following

format
:

Latitude*Longitude



The

second

step

is

to

write

a

function

for

plotting

the

information

and

calling

it

in

draw

loop

of

the

processing

applet
:











2
Dmap

and

Data

Visualization
-
Plotting

Presence

data

or

Pattern

of

Distribution



Hypothetical

Scenario
:

Flickre

API

is

used

to

retrieve

images

with

geo
-
location

information

that

fit

the

query

for

particular

semantic

tags
.

The

result

is

a

text

file

containing

a

series

of

Latitude/Longitude

pairs

each

representing

the

location

to

which

a

particular

image

has

been

associated

by

the

contributing

user

of

the

digital

file
.

Each

data

record

in

the

file

has

the

following

format
:

Latitude*Longitude



The

second

step

is

to

write

a

function

for

plotting

the

information

and

calling

it

in

draw

loop

of

the

processing

applet
.


The

function

has

two

major

sections
.

In

the

first

section


highlighted

in

red

here
-

the

data

file

is

read

by

the

applet

and

geographical

coordinate

pairs

are

retrieved
.

In

the

second

section
-
highlighted

in

blue
-

the

corresponding

x/y

coordinates

form

each

lat/
lon

geo
-
location

pair

is

computationally

deduced

.

Each

x/y

pair

is

used

to

place

a

circle

on

the

map

at

the

point

that

corresponds

to

the

coordinates

pair
.

Here

is

the

function

:


void

plotInformation
(){



//Read

data

file

and

extract

location

pairs



String[]

data=
loadStrings
("MultiplePoints
-
LatLon
.
txt")
;


float[]

lat=new

float[
data
.
length
]
;


float[]

lon
=new

float[
data
.
length
]
;


for(
int

i
=
0
;

i
<
data
.
length
;

i
++){


float

[]temp=float(split(data[
i
],

'*'))
;


lat[
i
]=temp[
0
]
;


lon
[
i
]=temp[
1
]
;


//
println
(lat[
i
]+","+
lon
[
i
])
;


}



//Plot

location

to

map



fill(
255
,
0
,
0
)
;


noStroke
()
;


for(
int

i
=
0
;

i
<
data
.
length
;

i
++){


//Grab

the

X/Y

of

a

point

on

the

map

from

known

Lat/Long


Location

locTemp

=

new

Location(lat[
i
],

lon
[
i
])
;


Point
2
f

pointTemp

=

map
.
locationPoint
(
locTemp
)
;


int

pointX
=
int
(
pointTemp
.
x
)
;


int

pointY
=
int
(
pointTemp
.
y
)
;


//Draw

a

pointer

at

extracted

x

and

y

coordinates


ellipse(
pointX
,

pointY,
5
,
5
)
;


}


}













2
Dmap

and

Data

Visualization
-
Plotting

Tracked

Entities

or

Patterns

of

Movement

Hypothetical

Scenario
:

10

moving

agents

that

are

navigating

the

city

have

been

tagged

by

location

reporting

mechanisms

and

a

log

file

of

their

location

tracking

has

been

created
.

The

result

is

a

text

file

containing

data

records

that

consist

of

unique

identification

code

of

the

agent,

reported

latitude

of

the

agent

location,

reported

longitude

of

the

location,

time

of

the

location

report
.

Each

data

record

in

the

file

has

the

following

format
:

ID*Latitude*Longitude

*
TimeStamp



The

first

step

is

to

add

the

txt

file

t

o

the

processing

applet
:











2
Dmap

and

Data

Visualization
-
Plotting

Tracked

Entities

or

Patterns

of

Movement

Hypothetical

Scenario
:

10

moving

agents

that

are

navigating

the

city

have

been

tagged

by

location

reporting

mechanisms

and

a

log

file

of

their

location

tracking

has

been

created
.

The

result

is

a

text

file

containing

data

records

that

consist

of

unique

identification

code

of

the

agent,

reported

latitude

of

the

agent

location,

reported

longitude

of

the

location,

time

of

the

location

report
.

Each

data

record

in

the

file

has

the

following

format
:

ID*Latitude*Longitude

*
TimeStamp



The

second

step

is

to

write

a

function

for

plotting

the

information

and

calling

it

in

draw

loop

of

the

processing

applet
.











2
Dmap

and

Data

Visualization
-
Plotting

Tracked

Entities

or

Patterns

of

Movement

Hypothetical

Scenario
:

10

moving

agents

that

are

navigating

the

city

have

been

tagged

by

location

reporting

mechanisms

and

a

log

file

of

their

location

tracking

has

been

created
.

The

result

is

a

text

file

containing

data

records

that

consist

of

unique

identification

code

of

the

agent,

reported

latitude

of

the

agent

location,

reported

longitude

of

the

location,

time

of

the

location

report
.

Each

data

record

in

the

file

has

the

following

format
:

ID*Latitude*Longitude

*
TimeStamp


The

second

step

is

to

write

a

function

for

plotting

the

information

and

calling

it

in

draw

loop

of

the

processing

applet
.

The

function

has

two

major

sections
.

In

the

first

section


highlighted

in

red

here
-

the

data

file

is

read

by

the

applet

and

geographical

coordinate

pairs

are

retrieved

along

with

the

timestamp

of

each

location

read

and

the

unique

Identification

number

of

the

location

read

that

represents

the

corresponding

agent
.

In

the

second

section
-
highlighted

in

blue
-

the

corresponding

x/y

coordinates

form

each

lat/
lon

geo
-
location

pair

is

computationally

deduced

.

Each

x/y

pair

is

used

to

place

a

circle

on

the

map

at

the

point

that

corresponds

to

the

coordinates

pair
.

A

line

is

drawn

between

each

location

read

and

the

previous

location

read

for

each

and

every

unique

identification

number
.

The

result

is

ten

separate

lines

each

color

coded

based

on

the

identity

of

the

mobile

agent,

representing

the

trajectory

of

its

movement
.

A

keyPressed

function

is

also

incorporated

to

enable

the

user

to

specify

which

agent’s

trajectory

is

to

be

plotted

on

interactive

map
.

Here

is

the

function
:


2
Dmap

and

Data

Visualization
-
Plotting

Tracked

Entities

or

Patterns

of

Movement

void

plotInformation
(){


//Read

data

file

and

extract

location

pairs


String[]

data=
loadStrings
("MultipleMobileAgents
-
IDLatLonTime
.
txt")
;


color[]

Color={


color(
255
,
0
,
0
),color(
0
,
255
,
0
),color(
0
,
0
,
255
),color(
255
,
255
,
0
),color(
255
,
0
,
255
),

color(
0
,
255
,
255
),color(
0
,
200
,
100
),

color(
0
,
100
,
200
),

color(
200
,
100
,
0
),

color(
100
,
200
,
0
)

}
;


int
[]

id=new

int
[
data
.
length
]
;


float[]

lat=new

float[
data
.
length
]
;


float[]

lon
=new

float[
data
.
length
]
;


long[]

time=new

long[
data
.
length
]
;


for(
int

i
=
0
;

i
<
data
.
length
;

i
++){


String

[]temp=split(data[
i
],

'*')
;


id[
i
]=
int
(temp[
0
])
;


lat[
i
]=float(temp[
1
])
;


lon
[
i
]=float(temp[
2
])
;


time[
i
]=
Long
.
parseLong
(temp[
3
])
;


//
println
(id[
i
]+","+lat[
i
]+","+
lon
[
i
]+","+time[
i
])
;


}


//Plot

the

tragectory

of

Movement

to

map


int
[]
prevX
=new

int
[
10
]
;


int
[]
prevY
=new

int
[
10
]
;


for(
int

i
=
0
;

i
<
data
.
length
;

i
++){


if(id[
i
]==state

||

state==
10
){


if(state!=
10
)

{


text("Agent"+state,
50
,
10
)
;


}


fill(Color[id[
i
]])
;


stroke(Color[id[
i
]])
;


strokeWeight
(
1
)
;


//Grab

the

X/Y

of

a

point

on

the

map

from

known

Lat/Long


Location

locTemp

=

new

Location(lat[
i
],

lon
[
i
])
;


Point
2
f

pointTemp

=

map
.
locationPoint
(
locTemp
)
;


int

pointX
=
int
(
pointTemp
.
x
)
;


int

pointY
=
int
(
pointTemp
.
y
)
;


//Draw

a

pointer

at

extracted

x

and

y

coordinates


ellipse(
pointX
,

pointY,
10
,
10
)
;


if(
prevX
[id[
i
]]+
prevY
[id[
i
]]!=
0
){


line(
prevX
[id[
i
]],
prevY
[id[
i
]],
pointX,pointY
)
;


}


prevX
[id[
i
]]=
pointX
;


prevY
[id[
i
]]=
pointY
;


}


}

}

2
Dmap

and

Data

Visualization
-
Plotting

Tracked

Entities

or

Patterns

of

Movement


A

keyPressed

function

is

also

incorporated

to

enable

the

user

to

specify

which

agent’s

trajectory

is

to

be

plotted

on

interactive

map
.

The

default

state

is

-
1

which

means

nothing

is

plotted

on

the

map
.

Pressing

any

key

from

0

to

9

results

in

the

tragectory

of

movement

of

the

corresponding

mobile

agent

to

be

plotted

on

the

map
.

Stroking

the

‘a’

key

would

result

in

plotting

of

all

the

ten

tragectories

at

the

same

time
.

Stroking

the

‘n’

key

results

in

change

of

state

to

the

default

-
1

state

which

means

nothing

is

going

to

be

plotted

to

the

map
.

Here

is

the

function
:















void

keyPressed
(){


if

(key=='
0
')

state=
0
;


if

(key=='
1
')

state=
1
;


if

(key=='
2
')

state=
2
;


if

(key=='
3
')

state=
3
;


if

(key=='
4
')

state=
4
;


if

(key=='
5
')

state=
5
;


if

(key=='
6
')

state=
6
;


if

(key=='
7
')

state=
7
;


if

(key=='
8
')

state=
8
;


if

(key=='
9
')

state=
9
;


if(key=='a')

state=
10
;


if(key=='n')

state=
-
1
;

}

2
Dmap

and

Data

Visualization
-
Plotting

Tracked

Entities

or

Patterns

of

Movement
-
Incorporating

Time

for

Time
-
Based

Visualization

of

Location


In

the

previous

version

the

identity

field

of

the

data

records

along

with

the

longitude

and

latitude

fields

were

used

to

recreate

the

trajectory

of

movement

of

each

and

every

monitored

agent
.

The

last

field

of

the

data

records

in

the

previously

discussed

dataset

is

the

UNIX

Time

Stamp

of

the

location

read
.

Incorporating

the

time

of

location

read

into

the

data

visualization

algorithm

would

allow

for

time
-
base

visualizations

including

rewinding

the

trajectory

of

movement

and/or

visualizing

how

the

agents

move

in

the

space

through

time
.