@AlephZero/

TuringMachine

HTML, CSS, JS

Turing Machine simulation, using javascript

fork
loading
Files
  • index.html
  • bottombar.js
  • counter.js
  • editor.js
  • inspectbar.js
  • style.css
  • tape.js
  • turingmachine.js
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <title>TuringMachine.js</title>

    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="counter.js"></script>
    <script src="turingmachine.js"></script>
    <script src="inspectbar.js"></script>
    <script src="tape.js"></script>
    <script src="editor.js"></script>
    <script src="bottombar.js"></script>
</head>

<body>
    <p class="side-header">Maya Farber Brodsky</p>
    <div id="tape-head"></div>
    <canvas style="background: black;" id="tape"></canvas>
    <canvas id="editor"></canvas>
    <div id="inspect-bar">
        <h1 class="center no-select" id="state-name">Loading</h1>
        <button id="inspect-bar-close-button" onclick="hideInspectBar()">x</button>
        <span>Starting</span>
        <input id="type-starting" type="checkbox" onclick="setStart(this.checked)">
        <span>Accept</span>
        <input id="type-accepting" type="checkbox" onclick="setAccept(this.checked)">
        <div id="inspect-bar-connections">
        </div>
    </div>
    <div id="help" class="hidden">
        <h3>States</h3>
        <p><b>Left click</b> anywhere on the screen to create a state.</p>
        <p><b>Right click</b> an existing state to delete it.</p>
        <p>Use the <b>Shift</b> key to connect states. Hold <b>Shift</b>, click a state, and drag the mouse to a different state to connect them.</p>
        <p>Hold <b>Ctrl</b> and click a state to inspect and edit it, and the transitions originating from it.</p>

        <h3>Editing</h3>
        <p>In the edit bar, define whether the state is the starting state / an accepting state using the checkboxes.</p>
        <p>If there is an arrow from the state to a different state, it will appear in the edit bar. <br /> Add inputs to it by pressing the + button, and entering read (tape symbol), write (what symbol to write to tape), and direction to move the tape head. <br /> Note: The tape's beginning is noted with +, and an empty space is noted with a space, which is replaced by Δ.</p>
        <p>Delete an input or the entire transition using the - button.</p>

        <h3>Running</h3>
        <p>Run the Turing machine by pressing "Enter Input" in the bottom bar, entering a word, the pressing "Run".</p>
        <p>Proceed one step forward using the right arrow button on the keyboard. Go one step backward using the left arrow button on the keyboard.</p>
        <p>In each step, the current state will be colored yellow and the current state of the tape and position of the tape head (in red) will be shown.</p>
        <p>If the word is accepted, the accepting state will be colored green. Otherwise, if the word is rejected, the last state the word reached will be colored red.</p>

        <h3>Extra functions</h3>
        <p>"Save" saves the current Turing machine as a cookie. It will be available even after closing the site or the browser. "Load" loads the saved cookie.</p>
        <p>Similarly, "Import" and "Export" save a file describing the current Turing machine, which can be shared.</p>
        <p>"Save as PNG" saves a picture of the current Turing machine.</p>
    </div>
    <div id="hebrew-help" class="hidden" dir="rtl">
        <h3>מצבים</h3>
        <p>ניתן להוסיף מצב על ידי לחיצה שמאלית בעכבר.</p>
        <p>ניתן למחוק מצב קיים על ידי לחיצה ימנית בעכבר.</p>
        <p>על מנת ליצור מעבר בין מצבים, לוחצים על Shift ועל מצב כלשהו, וגוררים את העכבר למצב אחר.</p>
        <p>על מנת לערוך מצב כלשהו ואת המעברים היוצאים ממנו, לוחצים על Ctrl ועל המצב המבוקש.</p>

        <h3>עריכה</h3>
        <p>במצב עריכה, ניתן לקבוע האם המצב הוא מצב התחלתי או מצב מקבל.</p>
        <p>אם יש חץ ממצב הנבחר למצב אחר, הוא יופיע בטבלה.
        <br />
        ניתן להוסיף מעברים לחץ על ידי הכפתור +. לכל מעבר, צריך לציין אות על הסרט (read), אות לכתוב על הסרט (write), ואת הכיוון אליו רוצים להזיז את הhead לאחר הכתיבה.
        <br />
        הערה: ראש הסרט מסומן ב+, ומקום ריק מסומן על ידי רווח, שמוחלף בΔ.
        </p>
        <p>ניתן למחוק מעבר או חץ על ידי הכפתור -.</p>

        <h3>הרצה</h3>
        <p>ניתן להריץ את מכונת הטיורינג על ידי לחיצה על "Enter Input" למטה, כתיבת המילה המבוקשת ולחיצה על "Run".</p>
        <p>על מנת להתקדם שלב קדימה, צריך ללחוץ על חץ ימני במקלדת. על מנת לחזור שלב אחד אחורה, צריך ללחוץ על חץ שמאלי במקלדת.</p>
        <p>בכל שלב, המצב הנוכחי יסומן בצהוב, ומצב הסרט ומיקום הhead (באדום) יופיעו למטה.</p>
        <p>אם המילה התקבלה, המצב המקבל המתאים יסומן בירוק. אם ההרצה הסתיימה והמילה לא התקבלה, המצב האחרון שהמילה הגיעה אליו יסומן באדום.</p>

        <h3>אפשרויות נוספות</h3>
        <p>"Save" שומר את מכונת הטיורינג הנוכחית כcookie בדפדפן. הוא יהיה זמין גם לאחר סגירת האתר. "Load" מחזיר את מכונת הטיורינג השמורה.</p>
        <p>באופן דומה, "Import" ו"Export" שומרים קובץ המתאר את מכונת הטיורינג הנוכחית. ניתן לשתף את הקובץ הזה ולפתוח אותו במחשבים אחרים.</p>
        <p>"Save as PNG" שומר תמונה של מכונת הטיורינג הנוכחית.</p>
    </div>
    <div id="bottom-bar">
        <div onclick="toggleHebrewHelp()">עזרה</div>
        <div onclick="toggleHelp()">Help</div>
        <div onclick="downloadPNG()">Save as PNG</div>
        <div onclick="loadButton()">Load</div>
        <div onclick="saveButton()">Save</div>
        <div onclick="importFromFileButton()"><label for="upload" style="cursor:pointer">Import from file</label><input
                type="file" id="upload" style="display:none;"></div>
        <div onclick="exportToFileButton()">Export to file</div>
        <div onclick="run()" id="run-button">Enter input</div>
        <input id="run-input" onkeyup="replaceSpaceWithDelta(this);">
        <div style="float: right; cursor: default;"><span id="counter"></span> visits so far! (<span id="unique-counter"></span> unique visitors)</div>
    </div>
</body>

</html>
result
console