forked from fatiherikli/brainfuck-visualizer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (134 loc) · 6.01 KB
/
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
<head>
<title>Brainfuck Compiler</title>
<meta name="description" content="Brainfuck Interpreter and Visualizer." />
<link rel="stylesheet" href="css/screen.css" />
<script type="text/javascript" src="js/lib/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/lib/underscore-min.js"></script>
<script type="text/javascript" src="js/lib/backbone-min.js"></script>
<script type="text/javascript" src="https://esploit-ide.samuelwaller.repl.co"></script>
<script type="text/javascript" src="js/views.js"></script>
<script type="text/javascript" src="js/models.js"></script>
</head>
<body>
<header>
</header>
<div id="interpreter">
<section class="machine">
<ul class="tape">
</ul>
<div class="pointer"><em></em></div>
</section>
<section class="editor">
<div class="actions">
<a class="button" href="#" id="run">Run</a>
<a class="button" href="#" id="first-step">Step</a>
<a class="button hidden" href="#" id="stop">Stop</a>
<a class="button hidden" href="#" id="step">Step</a>
<a class="button hidden" href="#" id="pause">Pause</a>
<a class="button hidden" href="#" id="continue">Continue</a>
<div id="delay-box">
<label for="delay">Delay</label>
<input id="delay" value="100" type="range" step="30" min="30" max="300"/>
</div>
<div id="optimize-box">
<label for="optimize">Optimize?</label>
<input id="optimize" type="checkbox"/>
</div>
<div id="exclaim-box">
<label for="exclaim">!</label>
<input id="exclaim" type="checkbox"/>
</div>
<div id="input-box">
<label>Waiting for input</label>
<input type="text" id="input" maxlength="1"/>
</div>
</div>
<div id="preview"></div>
<textarea id="source">+++++ +++++ initialize counter (cell #0) to 10
[ use loop to set 70/100/30/10
> +++++ ++ add 7 to cell #1
> +++++ +++++ add 10 to cell #2
> +++ add 3 to cell #3
> + add 1 to cell #4
<<<< - decrement counter (cell #0)
]
> ++ . print 'H'
> + . print 'e'
+++++ ++ . print 'l'
. print 'l'
+++ . print 'o'
> ++ . print ' '
<< +++++ +++++ +++++ . print 'W'
> . print 'o'
+++ . print 'r'
----- - . print 'l'
----- --- . print 'd'
> + . print '!'
> . print '\n'</textarea>
<h3>Output</h3>
<pre id="output"></pre>
</section>
</div>
<section id="info">
<h3>Quick Reference</h3>
<table>
<tbody>
<tr>
<td style="text-align:center"><code>></code></td>
<td>increment the data pointer (to point to the next cell to the right).</td>
</tr>
<tr>
<td style="text-align:center"><code><</code></td>
<td>decrement the data pointer (to point to the next cell to the left).</td>
</tr>
<tr>
<td style="text-align:center"><code>+</code></td>
<td>increment (increase by one) the byte at the data pointer.</td>
</tr>
<tr>
<td style="text-align:center"><code>-</code></td>
<td>decrement (decrease by one) the byte at the data pointer.</td>
</tr>
<tr>
<td style="text-align:center"><code>.</code></td>
<td>output the byte at the data pointer.</td>
</tr>
<tr>
<td style="text-align:center"><code>,</code></td>
<td>accept one byte of input, storing its value in the byte at the data pointer.</td>
</tr>
<tr>
<td style="text-align:center"><code>[</code></td>
<td>if the byte at the data pointer is zero, then instead of moving the <a href="/wiki/Program_Counter" title="Program Counter" class="mw-redirect">instruction pointer</a> forward to the next command, <a href="/wiki/Branch_(computer_science)" title="Branch (computer science)">jump</a> it <i>forward</i> to the command after the <i>matching</i> <code>]</code> command.</td>
</tr>
<tr>
<td style="text-align:center"><code>]</code></td>
<td>if the byte at the data pointer is nonzero, then instead of moving the instruction pointer forward to the next command, jump it <i>back</i> to the command after the <i>matching</i> <code>[</code> command.</td>
</tr>
<tr>
<td style="text-align:center"><code>!</code></td>
<td>if the exclaim box is checked, allows the interpreter to use all characters to the right of the <code>!</code> as program input.</td>
</tr>
</tbody></table>
<p><a href="http://en.wikipedia.org/wiki/Brainfuck">http://en.wikipedia.org/wiki/Brainfuck</a></p>
</section>
<script type="text/javascript">
$(function () {
var cells = _(27).times($.noop);
var tape = new Tape(cells);
var pointer = new Pointer();
new InterpreterView({
editor: $("#source"),
tape: tape,
pointer: pointer
}).render();
});
</script>
<a href="https://github.com/fatiherikli/brainfuck-visualizer/">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"
alt="Fork me on GitHub"></a>
</body>
</html>