diff --git a/Final_Project/final_project.html b/Final_Project/final_project.html index 0c0a78865a6976fbb3ebeef603856154ae183fe0..382b468672257be5c83b5bb8a547bf14fe8abf25 100644 --- a/Final_Project/final_project.html +++ b/Final_Project/final_project.html @@ -79,14 +79,14 @@ </div> <div id="After-image" class="tabcontent"> - <p id="val_traceNum">The Number of After-image: 5</p> + <p id="val_traceNum">The Number of After-image: 20</p> <div class="slidecontainer"> - <input type="range" class="slider" min="1" max="10" value="5" class="slider" id="traceNum" onchange="changeTraceNum(this.value)"> + <input type="range" class="slider" min="1" max="50" value="20" class="slider" id="traceNum" onchange="changeTraceNum(this.value)"> </div> <br> - <p id="val_traceFreq">Frequency of After-image: 5</p> + <p id="val_traceFreq">Frequency of After-image: 1</p> <div class="slidecontainer"> - <input type="range" class="slider" min="1" max="7" value="5" class="slider" id="traceFreq" onchange="changeTraceFreq(this.value)"> + <input type="range" class="slider" min="1" max="5" value="1" class="slider" id="traceFreq" onchange="changeTraceFreq(this.value)"> </div> <h4>Color of After-image</h4> <button class="cont_btn" onclick="changeTraceColor('color')">Original</button> diff --git a/Final_Project/final_project.js b/Final_Project/final_project.js index bc7a00557a2072d7cb0b115ba2bd74065a3fa324..660a0af8e1294f626df8a9a1b034ee5125e55bef 100644 --- a/Final_Project/final_project.js +++ b/Final_Project/final_project.js @@ -239,6 +239,7 @@ animRotValue = 0.01; transX = 0.0; transY = 0.0; transZ = 0.0; frames = 1; var rotAxis = [1,0,1]; +var isTranslate = false; function animRotate(sign) // increase or decrease rotation speed { @@ -276,11 +277,12 @@ function changeRotAxis(axis){ // change rotating direction rotAxis[2]=1; break; } - trace = []; + // trace = []; } function trXinc(sign) // translate X increase or decrease { + isTranslate = true; if(sign=='+') transX += 0.01; else @@ -297,6 +299,7 @@ function trXinc(sign) // translate X increase or decrease function trYinc(sign) // translate Y increase or decrease { + isTranslate = true; if(sign=='+') transY += 0.01; else @@ -313,6 +316,7 @@ function trYinc(sign) // translate Y increase or decrease function trZinc(sign) // translate Z increase or decrease { + isTranslate = true; if(sign=='+') transZ += 0.01; else @@ -329,18 +333,26 @@ function trZinc(sign) // translate Z increase or decrease // About Trace(After-image) var trace = []; -var traceNum = 5; -var traceFreq = 5; +var traceNum = 20; +var traceFreq = 1; var traceTotalNum = traceNum * traceFreq; -var trace_alpha = 0.5/traceNum; +var trace_alpha = 0.3/traceNum; var traceColor = "color"; var slider_traceNum = document.getElementById("traceNum"); function addTrace(mat){ - if(trace.length>=traceTotalNum){ - trace = trace.slice(1,traceTotalNum); + if(animRotValue != 0.0 && animRotValue != -0.0){ + if(trace.length>=traceTotalNum){ + trace = trace.slice(1,traceTotalNum); + } + trace.push(mat); + } else if(isTranslate == true){ + if(trace.length>=traceTotalNum){ + trace = trace.slice(1,traceTotalNum); + } + trace.push(mat); + isTranslate = false; } - trace.push(mat); } function changeTraceNum(num){ @@ -412,7 +424,7 @@ function renderScene() { gl.drawArrays(gl.TRIANGLES, 0, 36); // draw trace of cube - color_a = 0.5; + color_a = 0.3; for (var i = trace.length -1; i>=0;i-=traceFreq){ color_a -= trace_alpha; gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer); @@ -525,7 +537,7 @@ gl.uniformMatrix4fv(locMmatrix, false, trace[trace.length -1].slice()); gl.drawArrays(gl.TRIANGLES, 0, 36); // draw trace of cube -color_a = 0.5; +color_a = 0.3; for (var i = trace.length -1; i>=0;i-=traceFreq){ color_a -= trace_alpha; gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);