7 Avslutande diskussion
7.1 Framtida arbete
Detta arbete har mätt på renderingen av olika detaljnivåer av en bild i sin helhet. Varje byggsteg har renderats från grunden utan någon användning av informationen i de tidigare nivåerna. Det skulle vara intressant att mäta på en mer sofistikerad metod som faktiskt bygger upp detaljrikedomen i bilden successivt med hjälp tidigare hämtad data och se hur detta påverkar fps. Det skulle också var intressant med fler mätningar som direkt jämför användningen av bezierkurvor jämfört med att ersätta dessa med enstaka linjer. Framförallt att då undersöka hur stora fps-vinster som finns att hämta och hur stor skillnad användarna egentligen upplever. Man skulle också kunna titta närmare på möjligheten till en algoritm som undviker att ersätta de bezierkurvor som ger de mest omfattande förändringarna av originalbilden. Överlag skulle det vara intressant att följa upp användarnas subjektiva uppfattning vid en tillämpning av adaptiv detaljnivå och försöka avgöra om det finns ett mer optimalt avvägningsområde mellan detaljnivå och fps.
Referenser
Arcidiacono, G (2009) Alcula.com. Tillgänglig på internet
http://www.alcula.com/calculators/statistics/standard-deviation/ [Använd april 9, 2015]
Boehm, W. & Müller, A. (1999) On de Casteljau’s algorithm. Computer Aided Geometric Design. 16 (7), s. 587–605.
Chang, Y. H., Chuang, T. R., & Wang, H. C. (2004) Adaptive Level-of-detail in SVG. SVG Open 2004: 3nd Annual Conference on Scalable Vector Graphics. Tillgänglig på Internet:
http://www.svgopen.org/2004/papers/AdaptiveLoD/
Claypool, M. & Claypool, K. (2009) Perspectives, Frame Rates and Resolutions: It’s All in the Game. Proceedings of the 4th International Conference on Foundations of Digital Games.
FDG ’09. New York, NY, USA, ACM. s. 42–49.
Corcoran, P., Mooney, P., Bertolotto, M. & Winstanley, A. (2011) View- and Scale-Based Progressive Transmission of Vector Data. Beniamino Murgante, Osvaldo Gervasi, Andrés Iglesias, David Taniar, et al. (eds.). Computational Science and Its Applications - ICCSA 2011. Berlin, Heidelberg, Springer Berlin Heidelberg. s. 51–62.
De Silva, R.N., Cheng, W., Ooi, W.T. & Zhao, S. (2010) Towards Understanding User Tolerance to Network Latency and Data Rate in Remote Viewing of Progressive Meshes.
Proceedings of the 20th International Workshop on Network and Operating Systems Support for Digital Audio and Video. NOSSDAV ’10. New York, NY, USA, ACM. s. 123–
128.
Flanagan, D. (2002) Javascript: The Definitive Guide. O'Reilley Media, Inc.
Gaffuri, J. (2012) Toward Web Mapping with Vector Data. Proceedings of the 7th International Conference GIScience. Columbus, OH, USA. Springer Berlin Heidelberg s.
87-101.
Han, H., Tao, V. & Wu, H. (2003) Progressive vector data transmission. Proceedings of the 6th AGILE, Lyon, France. s. 103–113.
He, G., Bai, B., Pan, Z. & Cheng, X. (2007) Accelerated Rendering of Vector Graphics on Mobile Devices. Julie A. Jacko (ed.). Human-Computer Interaction. Interaction Platforms and Techniques. Berlin, Heidelberg, Springer Berlin Heidelberg. s. 298–305.
Kee, D.E., Salowitz, L. & Chang, R. (2012) Comparing Interactive Web-Based Visualization Rendering Techniques. IEEE Conference on Information Visualization (InfoVis), 2012.
Tillgänglig på Internet: http://valt.cs.tufts.edu/pdf/kee2012comparing.pdf [Hämtad February 19, 2015].
Rajamony, R. & Elnozahy, M. (2001) Measuring client-perceived response times on the WWW. Proceedings of the 3rd conference on USENIX Symposium on Internet Technologies and Systems-Volume 3. USENIX Association. s. 16–16.
Sawicki, B. & Chaber, B. (2012) 3D mesh viewer using HTML5 technology. Przeglad Elektrotechniczny (Electrical Review), ISSN. s. 0033–2097.
26
Stackoverflow (2011) Stackoverflow. Tillgänglig på internet
http://stackoverflow.com/questions/8279729/calculate-fps-in-canvas-using-requestanimationframe [Hämtad februari 14, 2015]
Taivalsaari, A. & Mikkonen, T. (2011) The Web as an Application Platform: The Saga Continues. 2011 37th EUROMICRO Conference on Software Engineering and Advanced Applications (SEAA). August s. 170–174.
Wang, Q. & Cheng, L. (2004) A flexible awareness measurement and management architecture for adaptive applications. IEEE Global Telecommunications Conference, 2004. GLOBECOM ’04. November s. 2118–2122 Vol.4.
Wang, Y. & Meng, H. (2010) Managing multi-scale spatial data for mobile application. 2010 Seventh International Conference on Fuzzy Systems and Knowledge Discovery (FSKD).
August s. 2839–2843.
Wohlin, C., Runeson, P., Höst, M., Ohlsson, M.C., et al. (2012) Experimentation in Software Engineering. Berlin, Heidelberg, Springer Berlin Heidelberg.
Appendix A - generate_LOD.html
//Variabler vid konvertering av ritkommandon till CRI-‐format var onlylines = [];
II
function initcanvas() {
acanvas = document.getElementById("CanvasBox");
if (acanvas.getContext) {
window.requestAnimationFrame(redraw);
}
//***Val av bildobjekt som ska användas***
//var image = tennisball_img;
//****Utritning av bild från dataformat****
function redraw() {
d.clearRect(0,0,700,700);
//Nivå 0 -‐ Halvering av antalet linjer från nivå 1 if(!first_cycle && detail_level == 0){
document.getElementById('array_output').innerHTML = "";
document.getElementById('array_output').innerHTML = 'Level 0:
'+reduced_line_version;
//Förändrad detaljnivå samt original bild else{
//Path-‐properties: Linewidth (lw) if (image[i].lw != null){
IV
if (image[i].lj != null){
VI
d.bezierCurveTo(bc.x2, bc.y2, bc.x3, bc.y3, bc.x4, bc.y4);
VIII
document.getElementById('array_output').innerHTML = "";
document.getElementById('array_output').innerHTML = 'Level ' + detail_level +': ' + drawcommands;
detail_level_changed = false;
detail_level = parseInt(document.getElementById("slider1").value);
//Begär ny utritning, meddela fps-‐räknare window.requestAnimationFrame(function () { $('#out').html(countFPS());
<div style="width:300px;height:100px;border: 1px solid #800;background:#fed;
float: right;">
<span id="mk"></span><br/>
<div id="out"></div>
<input id="slider1" type="range" min="0" max="8" step="1" value="1"
oninput="copySlider('slider1');" /><input id="slider1text" type="text" size="4" value="1"
onchange="copyVal('slider1')" /><br/>
Appendix B - draw_test
//Variabler vid konvertering av ritkommandon till CRI-‐format var onlylines = [];
X
function initcanvas() {
acanvas = document.getElementById("CanvasBox");
if (acanvas.getContext) {
window.requestAnimationFrame(redraw);
}
d.clearRect(0,0,700,700);
draw_tennis_level0();
//Nivå 1 -‐ Decast-‐algoritm lägsta nivå med halvering av antalet linjer else if(test_counter > 10 && test_counter <= 20){
else if(test_counter > 20 && test_counter <= 30){
XII
//Nivå 3 -‐ Decast-‐algoritmen
else if(test_counter > 30 && test_counter <= 40){
//Begär ny utritning, meddela fps-‐räknare window.requestAnimationFrame(function () {
$('#execution_time_output').html(execution_results);
} });
}
</script>
</head>
<body onload="initcanvas();">
<canvas id="CanvasBox" ></canvas>
<div id="fps_output"></div>
<div id="execution_time_output"></div>
</body>
</html>
XIV
Appendix C - components/animation.js
//Animation -‐ Målvärde 60 updates per sekund function timeout() {
Appendix D - components/cdf.js
//***Constructors Canvas-‐draw-‐format***
//Konstruktor path-‐objekt
function Path(lw, ls, fs, ss, ga, lc, lj) { this.lw = lw; //linesWidth
this.ls = ls; //linesStyle this.fs = fs; //fillStyle this.ss = ss; //strokeStyle this.ga = ga; //globalAlpha this.lc = lc; //lineCap this.lj = lj; //lineJoin this.segments = [];
}
//Konstruktor bezierCurve-‐objekt
function BezierCurve(x2, y2, x3, y3, x4, y4) { this.x2 = x2;
this.y2 = y2;
this.x3 = x3;
this.y3 = y3;
this.x4 = x4;
this.y4 = y4;
}
//Konstruktor lineTo-‐objekt function LineTo(x2, y2) { this.x2 = x2;
this.y2 = y2;
}
//Konstruktor moveTo-‐objekt function MoveTo(x2, y2) { this.x2 = x2;
this.y2 = y2;
}
XVI
Appendix E - components/decast.js
p7x+=pxa3;
p7y+=pya3;
}
d.lineTo(x4,y4);
drawcommands += 'd.lineTo('+x4+', '+y4+');';
}
XVIII
Appendix F - components/page.js
sli=document.getElementById(dii);
slit=document.getElementById(dii+"text");
slit.value=sli.value;
detail_level_changed = true;
only_once = true;
}
function copyVal(dii) {
sli=document.getElementById(dii);
slit=document.getElementById(dii+"text");
//Hämtad från stackoverflow -‐ http://stackoverflow.com/questions/8279729/calculate-‐fps-‐in-‐
canvas-‐using-‐requestanimationframe window.countFPS = (function () {
var lastLoop = (new Date()).getMilliseconds();
var count = 1;
if(test_counter == 1){
//$('#test_output').append( "<p>Level 1</p>" );
test_results += 'Level 0,';
}
if(test_counter == 11){
//$('#test_output').append( "<p>Level 2</p>" );
test_results += 'Level 1, ';
}
if(test_counter == 21){
//$('#test_output').append( "<p>Level 3</p>" );
test_results += 'Level 2, ';
}
if(test_counter == 31){
//$('#test_output').append( "<p>Level 4</p>" );
test_results += 'Level 3, ';
}
if(test_counter == 41){
//$('#test_output').append( "<p>Level 4</p>" );
test_results += 'Level 4, ';
}
//$('#test_output').append( "<p>"+fps+"</p>" );
test_results += fps+', ';
test_counter++;
count = 1;
} else {
count += 1;
}
lastLoop = currentLoop;
return fps;
};
}());