diff --git a/README.md b/README.md
index d1fd805..bc8283b 100644
--- a/README.md
+++ b/README.md
@@ -6,9 +6,26 @@ It has been realized as a project for the Data Management course from the master
[The application is available here.](https://annacarini.github.io/External-Multipass-Sorting/)
-### Tools
+## Tools
The application's graphics have been realized using the library [Two.js](https://two.js.org/), combined with the library [Tween.js](https://github.com/tweenjs/tween.js) to manage the animations.
-### Authors
- - Jacopo Fabi,
+## Controls
+
+### Buttons
+
+The actions are described in the table below.
+
+### Keyboard controls
+| Key | Action | Effect |
+|--|--|--|
+| **Spacebar** | *Play* | Start the automatic play of the simulation |
+| **Spacebar** | *Pause* | Stop the automatic play |
+| **Enter** | *Next* | Play one step with animation |
+| **Right arrow key** | *Jump*| Play one step without animation |
+| **Left arrow key** | *Undo* | Undo the last action |
+| **Plus key (+)** | | Increase the animation speed |
+| **Minus key (-)** | | Decrease the animation speed |
+
+## Authors
+ - Jacopo Fabi, 1809860
- Anna Carini, 1771784
diff --git a/application.js b/application.js
index fa77934..ca15a1f 100644
--- a/application.js
+++ b/application.js
@@ -465,8 +465,7 @@ function playAll() {
// attiva pulsante pausa
pauseButton.disabled = false;
- // leva i messaggi
- showMessage("");
+ showMessageBoxContent(false);
play(animTime);
}
@@ -479,6 +478,8 @@ function pause() {
// metti in pausa
paused = true;
+ automaticPlay = false;
+
if (applicationState == States.Finish) return;
// attiva pulsanti play e back
@@ -494,7 +495,7 @@ function pause() {
function undo() {
// se e' attiva la riproduzione automatica, metti in pausa invece di fare undo?
- if (automaticPlay && !paused) {
+ if (automaticPlay) {
pause();
return;
}
@@ -518,6 +519,7 @@ function undo() {
}
showMessageBoxContent(true);
+ console.log("text box content: ", textBox.innerHTML);
}
@@ -761,8 +763,7 @@ function play(time = animTime) {
buffer.undoWriteOnBuffer();
for (var i = framesToWrite.length - 1; i >= 0; i--)
relation.undoShiftFramesByOne(startingIndx, emptyFramesSwap[i]);
- //relation.undoAnimateMultipleSquares(framesToWrite[0], oldFrameValues, oldColors, oldPositions);
- console.log("LA RELATON", relation.relationArray);
+ console.log("LA RELATION", relation.relationArray);
for (var i = framesToWrite.length - 1; i >= 0; i--)
relation.undoReadOnePageOfChild(framesToWrite[i]);
console.log("IL VALORE DI CURRENT group", relation.currentGroup)
@@ -785,7 +786,7 @@ function play(time = animTime) {
nRead += framesToWrite.length
document.getElementById('read-count').textContent = nRead;
- console.log("LA RELATON DOPO FUN", relation.relationArray);
+ console.log("LA RELATION DOPO FUN", relation.relationArray);
applicationState = States.ChildrenInBuffer;
showMessage(Messages.childrenBeingMergeSorted);
@@ -838,7 +839,6 @@ function play(time = animTime) {
rollback.push([() => {
buffer.undoWriteOnBufferFrame(frameEmptyIndx);
relation.undoShiftFramesByOne(startingIndx, swap);
- //relation.undoAnimateOneSquare(relationIndx);
relation.undoReadOnePageOfChild(fr);
buffer.framesToRefill.push(frameEmptyIndx);
nRead -= 1;
@@ -961,6 +961,7 @@ function play(time = animTime) {
playJumpButton.disabled = true;
playButton.disabled = true;
undoButton.disabled = false;
+ showMessageBoxContent(true);
break;
default:
diff --git a/images/controls.png b/images/controls.png
new file mode 100644
index 0000000..e65d0c6
Binary files /dev/null and b/images/controls.png differ
diff --git a/index.html b/index.html
index d3441c6..1e882db 100644
--- a/index.html
+++ b/index.html
@@ -112,12 +112,12 @@
Animation speed
-
+
diff --git a/script.js b/script.js
deleted file mode 100644
index aaa2ca3..0000000
--- a/script.js
+++ /dev/null
@@ -1,138 +0,0 @@
-// PARAMETRI SIMULAZIONE
-var bufferSize = 3;
-var relationSize = 9;
-
-var buffer = null;
-var relation = null;
-
-
-// PARAMETRI PER GRAFICA
-
-// Misure dello schermo
-var windowW = window.innerWidth;
-var windowH = window.innerHeight;
-var centerX = windowW / 2;
-var centerY = windowH / 2;
-
-// Costanti
-const MAX_ELEMENTS_PER_FRAME = 5;
-
-const MEDIUM_LINE = windowW/550;
-const THICK_LINE = windowW/400;
-const VERY_THICK_LINE = windowW/320;
-
-const frameSize = windowW/15;
-const SPACE_BETWEEN_FRAMES = windowW/200;
-
-const fontSizeBig = windowW/60;
-const fontSizeMedium = windowW/80;
-const fontSizeSmall = windowW/100;
-
-// VARIABILE PER L'ANIMAZIONE
-var currentTween = null
-
-
-var params = {
- fullscreen: true
- };
-var elem = document.body;
-const two = new Two(params).appendTo(elem);
-
-var player = new Player(400, 500, two)
-var playing = false
-
-var tweens = []
-
-player.play._renderer.elem.addEventListener('click', () => {
- playing = player.getPlayStatus()
- currentTween = getCurrentTween()
- if (playing) {
- if (!currentTween)
- main()
- else
- currentTween.startFromCurrentValues()
- }
- else {
- if (currentTween)
- endTween(currentTween)
- }
-});
-
-var buffer = new Buffer(300, 300, 4, 100, two)
-
-var frame = new Frame(100, 100, 100, 'rgb(0, 200, 255)', 5, two)
-frame.fill([0, 2, 4, 6, 4])
-var frame2 = new Frame(100, 100, 100, 'rgb(0, 200, 255)', 5, two)
-frame2.fill([9, 1, 7, 9, 4])
-var frame3 = new Frame(100, 100, 100, 'rgb(0, 200, 255)', 5, two)
-frame3.fill([12, 21, 2, 8])
-
-
-buffer.read([
- {elements: frame.getValues(), color: frame.color},
- {elements: frame2.getValues(), color: frame2.color},
- {elements: frame3.getValues(), color: frame3.color}])
-
-two.update();
-//sort()
-
-//buffer._sort()
-var state = 2
-
-function main() {
- if (playing) {
- if (state == 2) {
- if (buffer.sortingStatus == 0)
- buffer.sortAnimation(() => {main()})
- else if (buffer.sortingStatus & 1) {
- buffer.writeFromOutputToMain()
- }
- else if (buffer.sortingStatus & 2) {
- buffer.writeFromOutputToMain()
- buffer.sortAnimation(() => {main()})
- }
- }
- }
-}
-
-function getCurrentTween() {
- var allTweens = TWEEN.getAll();
- var foundTween = null
-
- var i = 0
- while (!foundTween && i < allTweens.length) {
- var tween = allTweens[i];
- if (tween.isPlaying())
- foundTween = tween
- i++
- }
- return foundTween
-}
-
-
-function sort() {
- if (buffer.sortingStatus & 2)
- buffer.writeFromOutputToMain()
- else if ((buffer.sortingStatus >> 2) > 0)
- buffer.frameRefilled[(buffer.sortingStatus >> 2) - 1] = false
- else if (buffer.sortingStatus & 1)
- return
- tweens = buffer.sort()
- //if (tweens.length) {
- // tweens[tweens.length - 1].onComplete(() => {buffer.outputFrame._resetRectSearch(); sort()})
- //tweens[0].start()
- //}
- //else
- // sort()
-}
-
-
-// Setup the animation loop.
-function animate(time) {
- if (playing)
- TWEEN.update()
- requestAnimationFrame(animate)
- //console.log(frame.rect_search.position.x)
- two.update();
-}
-requestAnimationFrame(animate)
diff --git a/style.css b/style.css
index b768eb8..031cdcd 100644
--- a/style.css
+++ b/style.css
@@ -298,14 +298,6 @@ input:checked + .slider:before {
height: 3.15vw;
transform: translateY(-0.5vh);
}
-/*
-.animation_btn_img:hover {
- display: block;
- position: absolute;
- transform: translate(0, -1vw);
- transition: transform .2s ease-out;
-}
-*/
.animation_btn_img:hover {
transform: translateY(-0.2vh);
}
@@ -323,11 +315,6 @@ input:checked + .slider:before {
padding: 0px;
}
-/*
-body{
- font-family: 'Exo', sans-serif;
-}
-*/
.context {
width: 100%;
@@ -344,8 +331,6 @@ body{
.area{
- /*background: #4e54c8;
- background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8); */
width: 100%;
height:100vh;
@@ -367,7 +352,6 @@ body{
list-style: none;
width: 20px;
height: 20px;
- /*background: rgba(255, 255, 255, 0.2);*/
background: #80d1dd7f;
animation: animate 25s linear infinite;
bottom: -150px;