Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
144 lines (133 sloc) 5.91 KB
<!DOCTYPE html>
<html>
<head>
<title>Brainfuck Visualizer</title>
<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="js/interpreter.js"></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>&gt;</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>&lt;</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>