Visual Resonance Process Journal

Page 1

PROCESS

VIS UAL RESO NANCE



VISUAL RESONANCE


LOGO DEVEL OPMENT

LOGO SKETCHES FOR THE PROJECT “VISUAL RESONANCE”. THE LOGO NEEDS TO BE FRESH, CREATES A NEW EXPERIENCE TO PEOPLE, A FORM OF A SOUND BRANDING AND HAS AN ELEMENT THAT CAN BE EASILY UNDERSTOOD BY AUDIENCE. “VR” WHICH STANDS FOR VISUAL RESONANCE.


AUDITORY SPATIAL AWARENESS

SOUND SOURCE WAVEFORM R V

THE LOGO SYMBOLISES A WAVEFORM WHICH IS MADE UP OF TWO ARROWS. THE ARROWS DEPICT SOUNDS COMING FROM TWO DIRECTIONS WHICH IS HEARD BY BOTH OF OUR EARS. AS A WHOLE, THE LOGO CAN FORM THE FIRST INITIAL ALPHABETS OF THE PROJECT ITSELF.


USER TESTING


Outcome 2

Outcom

1. Are you able to guess the intention of the outcome without explanation?

1. Are y the o

Yes | No

Yes |

2. If yes what is it?

2. If yes

Level 3 Semester 1 User Testing AUDITORY SPATIAL AWARENESS SURVEY

3. Please vote the effectiveness how well Level 3 Semester 1 User ofTesting the outcome communicate. AUDITORY SPATIAL AWARENESS SURVEY EXCELLENT | VERY GOOD | GOOD | SATISFACTORY | REDEEMABLE FAIL

EXCELL

Outcome 1

____________________________________________ Outcome 1 Outcome 3

_____ Outcom

1. Are you able to guess the intention of the outcome without explanation?

1. Are you able to guess the intention of outcome without explanation? 1.theAre you able to guess the intention of the outcome without explanation? Yes | No Yes | No 2. If yes what is it? 2. If yes what is it?

Yes | No 2. If yes what is it?

3. Please vote the effectiveness of how well the outcome communicate. EXCELLENT | VERY GOOD | GOOD | SATISFACTORY | REDEEMABLE FAIL

____________________________________________ Outcome 2 1. Are you able to guess the intention of the outcome without explanation?

3. Please vote the effectiveness of how well outcome 3.thePlease votecommunicate. the effectiveness of how well the outcome communicate. EXCELLENT | VERY GOOD | GOOD | SATISFACTORY | REDEEMABLE FAIL EXCELLENT | VERY GOOD | GOOD | SATISFACTORY | REDEEMABLE FAIL ____________________________________________

Outcome 2

Outcome 3

3. Please vote the effectiveness of how well the outcome communicate.

EXCELLENT | VERY GOOD | GOOD | SATISFACTORY | REDEEMABLE FAIL

EXCELLENT | VERY GOOD | GOOD | SATISFACTORY | REDEEMABLE FAIL

____________________________________________ Outcome 3

____________________________________________ Outcome 3

1. Are you able to guess the intention of the outcome without explanation?

1. Are you able to guess the intention of the outcome without explanation? Yes | No 2. If yes what is it?

USER TESTING WAS DONE TO SEE HOW THE OUTCOMES 3. Please vote the effectiveness of how well

the outcome communicate. FROM LAST SEMESTER FAIR. I DID A SURVEY WITH

30 FAIL PARTICIPANTS MY| REDEEMABLE WORKS AND EXCELLENT | VERY GOOD | GOOD | SATISFACTORY | REDEEMABLE EXCELLENT |TO VERYBROWSE GOOD | GOODTHROUGH | SATISFACTORY FAIL

____________________________________________

____________________________________________

ANALYSE HOW EFFECTIVE EACH OUTCOMES WERE. THERE

6. Which of the outcome inspire you the most and can be pushed further? Outcome 1

Outcome 2

Outcome 3

7. Please provide any suggestions on how to further improve on any of the outcomes.

3. Pleas the o

EXCELL

6. Whic can b

3. Please vote the effectiveness of how well the outcome communicate.

3. Please vote the effectiveness of how well the outcome communicate.

2. If yes

Which of the you of the most and 1. 6.Are you able to outcome guess theinspire intention be pushed further? thecan outcome without explanation?

2. If yes what is it? 7. Please provide any suggestions on how to further improve on any of the outcomes.

2. If yes what is it?

Yes |

_____

2. If yes what is it?

Yes | No

1. Are y the o

____________________________________________ Outcome 2

YesOutcome | No 1

Yes | No

3. Pleas the o

of the outcome inspireTHE you thePARTICIPANTS most and WERE THREE6. Which OUTCOMES WHICH COULD can be pushed further?

RATE THE EFFECTIVENESS. THERE’S A FEEDBACK ON Outcome 1

Outcome 2

Outcome 3

HOW CAN I FURTHER IMPROVE MY PROJECT. 7. Please provide any suggestions on how to further improve on any of the outcomes.

Outc

7. Pleas impr


SURVEY RESULTS Numbers Percentage

1 Are you able to guess the Outcome 1? Yes No 23 7 76.66666667 23.33333333 EXCELLENT

Numbers Percentage

Numbers Percentage

VERY GOOD

4 13.33333333

Numbers Percentage

VERY GOOD

1 3.333333333

Numbers Percentage

8 26.66666667

SATISFACTORY

REDEEMABLE FAIL

4 13.33333333

0 0

10 33.33333333

GOOD 11 36.66666667

SATISFACTORY

REDEEMABLE FAIL

8 26.66666667

0 0

3 Are you able to guess the Outcome 3? Yes No 27 3 90 10 EXCELLENT

Numbers Percentage

GOOD

2 Are you able to guess the Outcome 2? Yes No 18 12 60 40 EXCELLENT

Numbers Percentage

14 46.66666667

VERY GOOD 9 30

13 43.33333333

GOOD 4 13.33333333

SATISFACTORY

REDEEMABLE FAIL

4 13.33333333

4 Which outcome is more effective and can be pushed further for Semester 2? Outcome 1 Outcome 2 Outcome 3 2 10 18 6.666666667 33.33333333 60

30 PARTICIPANTS PARTICIPATED IN THE SURVEY AND THE DATA WERE COLLATED INTO PERCENTAGES. BASICALLY OUT OF THE OVERALL 3 OUTCOMES, THE THIRD OUTCOMES WAS GIVEN A GOOD FEEDBACK. IT WAS SAID THAT THE DIRECTION IS THERE AND IT CAN BE PUSHED FURTHER. MOST OF THE OUTCOMES WERE WELL DONE AND COMMUNICATE EFFECTIVELY.

0 0


USER TESTING SKETCHES


INFOGRAPHICS INSPIRATIONS



INFOGRAPHICS SKETCHES

SKETCHES OF ELEMENTS TO INCLUDE IN THE BOOKLET OF DESIGN PROCESS AND EVALUATION. THE BOOKLET WILL BE IN THE SIZE OF 17 X 21 CM. A BOOKLET CONSISTS OF THE PROCESS OF HOW I DID THE OUTCOMES, IMAGES OF OUTCOMES AND THE USERTESTING COLLATED FROM THE SURVEYS I CONDUCTED.


DESIGN PROCESS & EVALUATION LAYOUTS



SADDLE STITCH BINDING

Needles and threads

Experimentation

Clip the edges

Poke gently

Poke harder

Make sure needle go through

Insert thread onto both holes

Tie a knot in the middle page

Experimentation 1 Done

Experimentation 2

Knot is tied at spine

Preview of 2 books

1st experimentation is better

Preparing my book

Folding the pages

Aligning pages

Inserting needles

Threads is inserted

Tying knot

Final preview


THIS LITTLE BOOKLET DISPLAYS THE PROCESS OF HOW I DERIVED MY OUTCOMES FOR MY SEMESTER 1 AND FINDINGS ACCUMULATED FROM THE SURVEY I DID FOR MY USER TESTING. I DESIGNED A BOOKLET WITH SADDLE STITCH BINDING TO KEEP THE PAGES SECURELY ANNEXED. MY CONCEPT SYMBOLIZES POETIC HAZE OF INFORMATION AND A WELL-DESIGNED STORYTELLING WHICH IS CLEARLY DISPLAYED IN THE LAYOUTS AND INFOGRAPHICS SECTION.


REFLECTIONS

BASED ON THE FINDINGS I GATHERED, THERE WERE SEVERAL CONSTRUCTIVE FEEDBACKS THAT WAS GIVEN BY THE PARTICIPANTS ON HOW I CAN IMPROVE MY PROJECT. SO FOR THIS SEMESTER, I WILL EXPLORE MORE ON 3D VISUALIZATIONS IN PROCESSING, MAYBE EXPLORE WITH SOME INSTALLATIONS, TACTILITY WHICH INCLUDE TANGIBLE DESIGNS, A MORE LARGER SCALE OF THE AUDIO TRAVELOGUE FOR VISITORS OR MAYBE INTERACTIVE MEDIA AND MOTION GRAPHIC. FINALLY, I AM GOING TO INSTILL A CONCEPT OF “PLAY” FOR SEMESTER 2 OUTCOMES. BY INTRODUCING SOME INTERACTIVITY AND MOTIONS, THE OUTCOME COULD BE A GREAT WAY TO INTEREST AUDIENCE AND AT THE SAME TIME REMIND THEM ABOUT THE IMPORTANCE OF SOUNDS TRANSPIRING IN OUR DAILY LIVES.


BRAINSTORMING

BEFORE STARTING ON MY OUTCOMES FOR SEMESTER 2, I BRAINSTORMED FOR IDEAS TO EXECUTE MY OUTCOMES BASED ON THE ADVICE AND CONSTRUCTIVE FEEDBACK GIVEN BY MY PEERS.


VISUAL RESEARCH

I STARTED DOING SOME VISUAL RESEARCH ON GRAPHIC VISUALIZATIONS OF SOUNDS AND AUDIO. FOR THIS SEMESTER, I’M MORE INTERESTED WITH 3D VISUALIZATIONS AND PHYSICAL COMPUTING. MY RESEARCH LANDED ON 3D VISUALIZATIONS USING PROCESSING AND ARDUINO.


SKETCHES

STARTED BY SKETCHING OUT POSSIBLE IDEAS TO CREATE MY VISUALIZATIONS.


I REALLY LIKE THE IDEA OF THE 3D VISUALIZATIONS. I SHOULDN’T HAVE A BIG PROBLEM WITH PROCESSING. HOWEVER, PHYSICAL EQUALIZER REQUIRES ARDUINO WHICH I NEED TO READ UP AND RESEARCH ON HOW IT WORKS.


INSPIRATIONS

FOUND A GREAT TUTORIAL IN VIMEO POSTED BY SWITCHBOARD THAT TEACHES HOW TO DO AN EQUALIZER. THE EQUALIZER IMITATES A 3D EFFECT IN PROCESSING. IT’ A VISUALIZER THAT USES PIMAGE CODES TO FADE THE EQUALIZERS BACK TO THE BACKGROUND WHICH CREATES A STUNNING EFFECT.


THE EQUALIZER USES A SAMPLE CODE FROM THE MINIM EXAMPLES AND THE PIMAGE AND FADE EFFECT WAS ADDED LATER ON. HOWEVER, I TRIED TO MAKE THE EQUALIZER MORE APPEALING BY CONVERTING THE BARS INTO LINES. I TRIED USING VERTEX FOR THE EQUALIZERS AND USE A TURQOISE COLOR WITH A DARK GREY BACKGROUND TO MAKE IT MORE LIVELY.


BY USING THE PIMAGE AND FADE EFFECT TO BRING THE IMAGE BACKWARDS, IT IMITATES A 3D EFFECT. A DECIBEL COUNTER WITH EXTRA DETAILS IS ALSO ADDED TO PROVIDE MORE INFORMATIONS AND MAKE THE DESIGN MORE SENSIBLE.


LIVE DIGITAL ACOUSTIC VISUALIZATION

FINAL PREVIEW OF THE VISUALIZATIONS DONE WITH USING PIMAGE IN PROCESSING. MORE INFORMATIONS WERE ADDED SUCH AS THE DB SCALE AND THE AMPLITUDE SPECTRUM. COLORS WERE ALSO CHANGED TO MAKE THE DESIGN MORE APPEALING.


VISUALIZING SOUND BY JOHN LOCKE


USING THE MINIM LIBRARY IN PROCESSING, JOHN LOCKE CREATED EACH WAVEFORM THAT GENERATES REALTIME VISUALIZATIONS AS THE TWO SOUNDS PLAY OVER EACH OTHER CREATING A PRETTY CHAOTIC SOUND, BUT THERE ARE SOME INSTANCES OF OVERLAPPING PATTERNS WHERE THE MASHUP WORKS PRETTY WELL. IN THE THIRD VERSION OF THE CODE, THE BOOLEAN OF THE TWO WAVEFORMS IS GENERATED, PRODUCING A NEW WAY TO VISUALIZE THE WAVEFORMS. HE WAS ALSO GENEROUS IN SHARING HIS CODE AND DOCUMENTATION.


EXPERIMENTATION

THANKS TO JOHN LOCKE WHO PROVIDED THE RAW SKETCH FOR THE VISUALIZATION. FIRSTLY I ANALYSE THE CODES AND SEE HOW CAN I IMPROVE ON THE VISUALIZATION. THE CAMERA POSITION IS FIX AND I EDITED IT SO THAT USER CAN NAVIGATE AROUND THE LANDSCAPE.


AFTER THE CAMERA POSITION IS FIXED, I ADDED A BACKGROUND IMAGE TO SIMULATE THE BACKGROUND OF A LANDSCAPE. SUBSEQUENTLY, I USED PIMAGE TO MAP THE TEXTURE TO THE VERTEX. A SIMPLE GRASS, VOLCANIC, SNOW TEXTURE WAS IMPLEMENTED IN THE SKETCH.



FINAL GENERATED LANDSCAPE


FURTHER DEVELOPMENTS

THE SKETCH EXAMPLE HE GAVE PROVIDES A FUNCTION THAT EXPORTS THE 3D VISUALIZATIONS TO 3D MODELLING IN RHINO. AFTER UPLOADING TO RHINO, I CHANGED THE PERSPECTIVE AND RESEARCHED ON HOW TO RENDER THESE IMAGES. FOUND A GREAT SOFTWARE, KEYSHOT WHICH CAN RENDER THESE 3D IMAGES TO MAKE IT REALISTIC.



OPEN PROCESSING EXAMPLES

BEAUTIFUL VISUALIZATIONS DONE BY MEMBERS FROM OPENPROCESSING. HOWEVER, MOST OF THE VISUALIZATIONS DOESN’T SAVE THE WHOLE SOUND OR AUDIO RECORDINGS BUT VISUALIZE SOUND AND THE PREVIOUS SOUNDS EITHER FADE OR DISAPPEAR AFTER AWHILE.



INSPIRATIONDIANA LANGE

SOUND VISUALIZATION BY DIANA LANGE, IT RESEMBLES A CIRCULAR WAVEFORM.VERY INSPIRATIONAL VISUALIZATION HOWEVER SHE DOESN’T REALLY SHOW THE CODES.


EXPERIMENTATION

TO START OFF, I RESEARCHED ONLINE FOR SOME CODES THAT CAN LINK ME TO WHAT DIANA LANGE HAD DONE. FOUND A GREAT CODE TO USE AND EXTEND THE VISUALIZATION. IT’S A SKETCH THAT FORMS A CIRCLE WITH USING VERTEX. MOVING THE MOUSE ALONG THE X AXIS WILL DETERMINE THE RADIUS AND MOVING THE Y AXIS WILL DETERMINE THE NUMBER OF DOTS ADDED.


EXPERIMENTATION

THE VERTEX ARE THE FORMED WITH USING LINES. CODES WERE ADDED TO FORM LINES AND THE POINTS WERE MAPPED TO FFT DATA OF SOUND. FROM THERE, THE CIRCLE WAVEFORM IS ROTATED 90 DEGREES ALONG THE Y AXIS.


CIRC ULAR WAVE FORM

THE WAVEFORM IS THEN TRANSLATED ALONG THE Z AXIS TO FORM A CONTINOUS CIRCULAR WAVEFORM. I THINK THIS IS ONE OF THE BEST VISUALIZATIONS I HAD DONE SO FAR. BASED ON COMMENTS GIVEN BY MY PEERS, THEY SAID THAT MY VISUALIZATIONS LOOKS BETTER THAN DIANA LANGE CIRCULAR WAVEFORM. IT TOOK ME ONE WHOLE DAY TO COME OUT WITH THE CODES TO MAKE IT FUNCTIONAL.


CIRC ULAR WAVE FORM

CIRCULAR WAVEFORM VISUALIZATIONS OF SOUNDS RECORDED IN SEVERAL PLACES. IT’S REALLY OBVIOUS TO SEE HOW THE VISUALIZATION OF SOUND ACTUALLY TELLS ABOUT EACH OF THE SPACES AND IT’S SURROUNDING.



SPECTOGRAM

A SPECTROGRAM IS A TIME-VARYING SPECTRAL REPRESENTATION THAT SHOWS HOW THE SPECTRAL DENSITY OF A SIGNAL VARIES WITH TIME. ALSO KNOWN AS SPECTRAL WATERFALLS, SONOGRAMS, VOICEPRINTS, OR VOICEGRAMS, SPECTROGRAMS ARE USED TO IDENTIFY PHONETIC SOUNDS, TO ANALYSE THE CRIES OF ANIMALS; THEY WERE ALSO USED IN MANY OTHER FIELDS INCLUDING MUSIC, SONAR/RADAR, SPEECH PROCESSING, SEISMOLOGY, ETC. THE INSTRUMENT THAT GENERATES A SPECTROGRAM IS CALLED A SPECTROGRAPH AND IS EQUIVALENT TO A SONOGRAPH.


A SPECTOGRAM I DID IN PROCESSING. THIS WAS QUITE EASY AND STRAIGHTFORWARD AS MUCH HELP IS GIVEN IN THE WEB REGARDING ON HOW TO CREATE A SPECTOGRAM IN PROCESSING. IT ALSO USES AN EQUATION I FOUND ONLINE TO CONVERT TO DISPLAY THE SPECTRAL VALUES. THE LOUDER THE SURROUNDING SOUNDS, THE DARKER THE SPECTOGRAM GETS.


EXPERIMENTATION

IN COMPUTER GRAPHICS, A HEIGHTMAP OR HEIGHTFIELD IS A RASTER IMAGE USED TO STORE VALUES, SUCH AS SURFACE ELEVATION DATA, FOR DISPLAY IN 3D COMPUTER GRAPHICS. A HEIGHTMAP CAN BE USED IN BUMP MAPPING TO CALCULATE WHERE THIS 3D DATA WOULD CREATE SHADOW IN A MATERIAL, IN DISPLACEMENT MAPPING TO DISPLACE THE ACTUAL GEOMETRIC POSITION OF POINTS OVER THE TEXTURED SURFACE, OR FOR TERRAIN WHERE THE HEIGHTMAP IS CONVERTED INTO A 3D MESH.


HEIGHT FIELD VISUAL IZATION


HEIGHT FIELD AUDIO VISUALIZATION

IN ORDER TO CREATE A 3D AUDIO, I NEED TO RENDER AN AUDIO RASTER IMAGE WITH GREYSCALE VALUES SO THAT IT CAN BE PROCESSED IN PROCESSING TO CREATE THE 3D HEIGHTFIELD IMAGE.


SINCE THE RASTER IMAGE IS SHARP, IT CAUSES THE HEIGHTFIELD MAP TO BE LOOKING VERY ROUGH. IN ORDER TO MAKE IT SMOOTH, I HAD TO MANIPULATE THE RASTER IMAGE ABIT IN PHOTOSHOP. APPLY A BLUR EFFECT TO MY AUDIO RASTER IMAGE TO MAKE THE SMOOVE CURVES.


HEIGHT FIELD AUDIO VISUALIZATION

FINAL PREVIEW OF HOW THE HEIGHTFIELD AUDIO VISUALIZATION LOOKS LIKE. IT IS UNDERSTANDABLE TO SEE THE VISUALIZATION OF EACH DIFFERENT SPACES DIFFERS. THE LOUDER THE SPACE, THE MORE PEAKS AND WAVES THERE ARE.



SOUND ARRAY VISUALIZATION

INSPIRED BY 1 KILO’S ARS VIVA SOUND PROJECT, I EXPERIMENTED WITH VISUALIZATION WHICH MAPPED FFT DATA ON THE LINES. AFTER A FEW HOURS OF THINKING AND PLANNING, I FINALLY REALISE IT WAS QUITE EASY TO WORK WITH MULTIDIMENSIONAL ARRAYS IN PROCESSING TO ACHIEVE THE RESULTS I WANT.



EXPERIMENTATION AUDIO SLICE FORM FOUND A GREAT TUTORIAL ON HOW TO CREATE SLICEFORM WITH A GREYSCALE IMAGE BY LOCAL-GURU.NET. I TRIED PLAYING WITH THE SKETCHES AND IMPLEMENT AUDIO TO BE GENERATED AS THE SLICEFORM. HOWEVER, THE EXPERIMENTATION IS NOT SO SUCCESSFUL AS THE SOUNDS OF EACH SPACE GENERATED DOESN’T PRODUCE A VAST DIFFERENCE. THERE’S VERY MINIMAL DIFFERENCE BETWEEN THE SLICEFORM AND IT’S NOT SO OBVIOUS.



EXPLORATORY PROJECT SINGAPORE

THIS PROJECT AIMS TO PROMOTE SINGAPORE THROUGH A DIFFERENT MEDIUM WHICH IS SOUND. SINCE EVERY SPACE HAS ITS OWN UNIQUE SOUND, I PLANNED TO EXPLORE THESE PLACES AND STARTS TO RECORD THE AMBIENCE SOUND. WITH THIS, WE ARE ABLE TO HEAR THE SOUNDS AND ITS VISUALIZATION TO HAVE A BETTER UNDERSTANDING AND EXPERIENCE ABOUT SINGAPORE.


MAPPING OF CHINATOWN AS A START TO COMMENCE ON MY PROJECT. IN CHINATOWN, THERE ARE A FEW PLACES THAT I CAN START TO RECORD. EACH SPACE IS CHOSEN AS THEY ARE CONSIDERED TO BE A PLACE OF INTEREST FOR TOURISTS.


SINGAPORE CITY SIGHTHEARING MY NEXT PLAN IS TO PROMOTE SINGAPORE’S PLACES OF INTEREST THROUGH THE ACOUSTIC VISUALIZATION OF SOUNDS. THIS VISUALIZATION WILL COVER THE PLACES DURING THE WEEKDAYS AND WEEKEND DAY AND NIGHT. BEFORE I COMMENCE, I NEED TO KNOW EXACTLY THE PLACES I NEED TO CHOOSE AS A START. THE BROCHURES FROM CITY SIGHTSEEING SINGAPORE HAS PROVIDED ME WITH PLACES ON WHERE I CAN START TO RECORD MY SOUNDS.


THERE ARE CURRENTLY THREE DISTRICTS PROVIDED BY THE BROCHURE. LITTLE INDIA, CHINATOWN AND CITY AREA. I PLANNED TO USE BINAURAL RECORDINGS TO ADD SIMULATION OF THE ACTUAL PLACE FOR AUDIENCE TO HEAR BESIDES JUST LOOKING AT VISUALIZATION OF THE PLACES.


MAPPING

IN PLANNING THE DISTRICT MAPPING, I TRIED TO FIND A WAY TO EXPERIMENT WITH MAPS. THE GOOGLE MAPS THAT IS PROVIDED ARE NOT CUSTOMIZABLE AND IT’S FIXED. I NEED TO FIND A MAP THAT CAN BE CUSTOMIZED AND DOESN’T LOOK LIKE THE CONVENTIONAL GOOGLE MAPS. WITH A FEW HOURS OF RESEARCH, I CANE ACROSS TILEMILL, AN APPLICATION THAT ALLOWS ME TO CREATE CUSTOMIZABLE MAPS.


TILEMILL IS A TOOL FOR CARTOGRAPHERS TO QUICKLY AND EASILY DESIGN MAPS FOR THE WEB USING CUSTOM DATA. IT IS BUILT ON THE POWERFUL OPENSOURCE MAP RENDERING LIBRARY MAPNIK - THE SAME SOFTWARE OPENSTREETMAP AND MAPQUEST USE TO MAKE SOME OF THEIR MAPS. TILEMILL IS NOT INTENDED TO BE A GENERAL-PURPOSE CARTOGRAPHY TOOL, BUT RATHER FOCUSES ON STREAMLINING AND SIMPLIFYING A NARROW SET OF USE CASES.


TILEMILL

FOUND A SHORT EXPLANATION AND TUTORIAL BY TILL NAGEL ON CREATING MAPS WITH TILLMILL. HE EXPLAINS THE USER INTERFACE OF TILEMILL AND ITS USABILITY. USERS ARE ABLE TO SET AND CHANGE THE STYLE IN THE CSS-LIKE CARTO LANGUAGE. ACCORDING TO NAGEL, THERE ARE VAST AMOUNTS OF FREELY AVAILABLE DATA SETS, AND THE GUYS AT CLOUDMADE KINDLY PROVIDE SHAPEFILES CREATED FROM OPENSTREETMAP DATA, WHICH CAN BE IMPORTED INTO TILEMILL.


CLOUDMADE WAS GENEROUS ENOUGH TO GIVE DATA FILES OF SINGAPORE SO THAT I DON’T REALLY HAVE TO ADD IN THE DATA OF HIGHWAYS, COASTLINES, NATURE RESERVES AND THE LATEST RECLAIMED LANDS. WITH THIS, I CAN UPLOAD TO TILEMILL AND CUSTOMIZED THE COLORS AND APPEARANCES.


TILEMILLADD LAYERS

THE FILES THAT HAVE BEEN DOWNLOADED WILL BE ADDED INTO TILEMILL BY THE ADD LAYERS FUNCTIONS. THERE’S A FEW FILES TO ADD SUCH AS THE HIGHWAYS, COASTLINES AND NATURE RESERVES.


THE FINAL IMAGE OF HOW THE CUSTOMIZALBE MAP WOULD LOOK LIKE. HOWEVER THE MAPS DOESN’T HAVE THE LOCATIONS ADDED IN.


PROCESSING AND MAPS

FOUND A GREAT WAY TO DISPLAY MAPS IN PROCESSING. THE UNFOLDING LIBRARY ALLOWS USER TO CREATE INTERACTIVE MAPS AND GEOVISUALIZATIONS EASILY. MAPS CAN BE CUSTOMIZED AND FEATURES SUCH AS ZOOM AND PAN ARE INCLUDED.


A SIMPLE CODE TO START THE MAP RUNNING. USING THE ZOOMANDPANTO FUNCTION, USERS ARE ABLE TO ZOOM IN TO COUNTRIES OR CITY THEY WANT TO EXPLORE. VERY EASY AND SIMPLE TO USE.


CUSTOMIZE MAPS WITH CLOUDMADE

MAPS CAN BE CUSTOMIZED IN CLOUDMADE WHICH CAN BE THEN SAVED AND EMBED IN PROCESSING.


FINAL PREVIEW OF HOW THE MAP WILL LOOK LIKE IN PROCESSING.TAGGING AND PUTTING SIMPLE MARKERS ON THE MAP IS ALSO EASY.


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.