44:["$","title",null,{"children":"brainf*ck IDE | PotOfCoffee2Go | Observable"}] 4c:T4fe,md ` [Brainfuck](https://esolangs.org/wiki/brainfuck) is a minimalistic imperative programming language designed by [Urban Müller][um] around 1993. Though [turing complete][tc], brainfuck is an [esoteric programming language](https://esolangs.org/wiki/Esoteric_programming_language) not intended for serious use due to it's high level of [entropy][en] (many instructions require execution to go from current productive state to next productive state) which is common among [reduced instruction set languages][ril]. The Brainfuck instruction set is composed of only eight instructions. This notebook aims to provide an interactive toolset to assist in building brainfuck programs. - Interpreter to execute program - Debugger to assist in code development For some programs and more info see : [brainfuck fluff](http://www.hevanet.com/cristofd/brainfuck/) and [Interpreter](https://github.com/smjth/brainfuck-js) ---- [um]: https://esolangs.org/wiki/Urban_M%C3%BCller [tc]: https://en.wikipedia.org/wiki/Turing_completeness [en]: https://www.britannica.com/science/entropy-physics [ril]: https://en.wikipedia.org/wiki/Reduced_instruction_set_computer#History_and_development [iq]: https://quantum-computing.ibm.com/ [as]: https://en.wikipedia.org/wiki/Assembly_language `4d:T671,stylesheet = () => { return html` ` }4e:Ta7e,page = () => { return html `

Paste BF program here:

Input

Output

0 0 0

Pointer Left

0 0 0

Display data in radix

Step: Enter = run/reload | Space = single step/pause | Any char = run to char

Add or remove a breakpoint at an instruction pointer, data pointer, or operation number

ip: dp: op:

Ip:
Dp:
Op:

`} 4f:T1a1c,domEvents = new class DomEvents { constructor() { this.bfOutputText = undefined; // DOMReady when defined // order is important! this.instrTxt = ['Increment', 'Decrement', 'Pointer Right', 'Pointer Left', 'Write Output', 'Read Input', 'Start Loop', 'End Loop']; this.init(); } init() { // Assign to 'this' all id="bf..." elements document.querySelectorAll('[id]') .forEach(element => { if (element.id.substring(0,2) === 'bf') { this[element.id] = element; } }) // Wait for DOM to be ready if (this.DOMReady()) { domReady.load(this); this.addEvents(); dbugger.bfReload(this); } else { // Keep trying until DOMReady setTimeout(() => { this.init() }, 1000); } } // True if all properties declared in 'this' are defined DOMReady() { return !Object.keys(this).filter(v => typeof this[v] === 'undefined').length; } addEvents() { this.bfProgText.onchange = this.bfProgTextOnChange.bind(this); this.bfSkipCharTxt.onkeyup = this.bfSkipCharTxtOnKeyup.bind(this); this.bfProgBreakIp.onkeyup = this.bfProgBreakIpOnKeyup.bind(this); this.bfProgBreakDp.onkeyup = this.bfProgBreakDpOnKeyup.bind(this); this.bfProgBreakOp.onkeyup = this.bfProgBreakOpOnKeyup.bind(this); this.bfDataBaseTxt.onchange = this.bfDataBaseTxtOnChange.bind(this); this.bfIconStx.onclick = this.bfIconStxOnclick.bind(this); this.bfIconPrev.onclick = this.bfIconPrevOnclick.bind(this); this.bfIconNext.onclick = this.bfIconNextOnclick.bind(this); this.bfIconRun.onclick = this.bfIconRunOnclick.bind(this); this.bfIconPause.onclick = this.bfIconPauseOnclick.bind(this); } bfProgTextOnChange(event) { dbugger.bfReload(this); } bfSkipCharTxtOnKeyup(event) { this.bfSkipCharTxt.value = event.key === ' ' ? 'Space' : event.key; dbugger.stepToChar = event.key === ' ' ? '' : event.key; dbugger.stepBf(this); return false; } bfProgBreakIpOnKeyup(event) { if (event.keyCode !== 13) return true; //enter let bp = parseInt(this.bfProgBreakIp.value); if (dbugger.breaksIp.indexOf(bp) > -1) { dbugger.breaksIp = dbugger.breaksIp.filter(op => op !== bp) } else { dbugger.breaksIp.push(bp); dbugger.breaksIp.sort((a, b) => a - b); } this.bfDataDisplay(); } bfProgBreakDpOnKeyup(event) { if (event.keyCode !== 13) return true; //enter let bp = parseInt(this.bfProgBreakDp.value); if (dbugger.breaksDp.indexOf(bp) > -1) { dbugger.breaksDp = dbugger.breaksDp.filter(op => op !== bp) } else { dbugger.breaksDp.push(bp); dbugger.breaksDp.sort((a, b) => a - b); } this.bfDataDisplay(); } bfProgBreakOpOnKeyup(event) { if (event.keyCode !== 13) return true; //enter let bp = parseInt(this.bfProgBreakOp.value); if (dbugger.breaksOp.indexOf(bp) > -1) { dbugger.breaksOp = dbugger.breaksOp.filter(op => op !== bp) } else { dbugger.breaksOp.push(bp); dbugger.breaksOp.sort((a, b) => a - b); } this.bfDataDisplay(); } bfDataBaseTxtOnChange() { this.bfDataDisplay(); } bfIconStxOnclick(){ dbugger.bfReload(this); return false;} bfIconPrevOnclick(){ if (history.states.length) { dbugger.bfState = history.popState(); this.bfDataDisplay(); } return false; } bfIconNextOnclick(){ dbugger.stepBf(this); return false;} bfIconRunOnclick() { this.bfIconRun.style.display = 'none'; this.bfIconPause.style.display = 'inline'; dbugger.stepToChar = dbugger.stepToChar ? '' : 'run'; dbugger.stepBf(this); return false; } bfIconPauseOnclick() { this.bfIconRun.style.display = 'inline'; this.bfIconPause.style.display = 'none'; dbugger.stepToChar = dbugger.stepToChar ? 'run' : ''; dbugger.stepBf(this); return false; } bfDataDisplay(p) { let s = dbugger.bfState; if (s) { p = p || s.p; //this.bfDebuggerOutput.value = JSON.stringify(s); if (s.i === 0) { this.bfIconRun.style.display = 'inline'; this.bfIconPause.style.display = 'none'; } this.bfProgDisplay.innerHTML = '

' + this.markupProgDisplay(s) + '

'; this.bfOutputText.value = s.output; let base = parseInt(this.bfDataBaseTxt.value); let prog = s.eof ? 'eof' : String.fromCharCode(s.program.charCodeAt(s.i) < 32 ? 0x2400 + s.program.charCodeAt(s.i) : 0x0000 + s.program.charCodeAt(s.i)); this.bfProgBreakIp.value = '' + s.i; this.bfProgBreakIpTxt.value = '[' + dbugger.breaksIp.join(',') + ']'; this.bfProgBreakDp.value = '' + s.p; this.bfProgBreakDpTxt.value = '[' + dbugger.breaksDp.join(',') + ']'; this.bfProgBreakOp.value = '' + s.op; this.bfProgBreakOpTxt.value = '[' + dbugger.breaksOp.join(',') + ']'; this.bfProgOps.innerHTML = this.subText(s.op, 'op'); this.bfProgValue.innerHTML = prog; this.bfProgPointer.innerHTML = this.subText(s.i, 'ip'); let idx = '+-><.,[]'.indexOf(s.program[s.i]); this.bfProgInst.innerHTML = idx === -1 ? 'Comment' : this.instrTxt[idx]; this.bfProgInst.innerHTML += this.bfProgInst.innerHTML.includes('Start') ? '( ' + (s.n.length +1) + ' ) ' : ''; this.bfProgInst.innerHTML += this.bfProgInst.innerHTML.includes('End') ? '( ' + (s.n.length) + ' ) ' : ''; let data = s.a; this.bfDataPointer.innerHTML = this.subText(p, 'dp'); this.bfDataValue.innerHTML = String.fromCharCode(data[p] < 33 ? 0x2400+data[p] : 0x0000+data[p]); this.bfDataDecimal.innerHTML = parseInt(data[p]).toString(base).toUpperCase() + `_${base}`; this.bfDataText.innerHTML = '

[' + this.markupDataDisplay(s) + ']

'; } } // s = bf interpreter state markupProgDisplay(s) { let text = s.program.substring(0, s.i); if (!s.eof) { text += '' + s.program[s.i] + ''; text += s.program.substring(s.i+1); } return text; } // s = bf interpreter state markupDataDisplay(s) { let base = parseInt(this.bfDataBaseTxt.value); let text = []; for (let i=0; i< s.a.length; i++) { let dataval = parseInt(s.a[i]).toString(base).toUpperCase() if (i === s.p) { text.push('' + dataval + ''); } else { text.push(dataval); } } return text.join(','); } subText(text, sub) { return text + `_${sub}`; } }50:T15b8,/** * interpret a bf program * modified from https://github.com/smjth/brainfuck-js * to give and accept current state of interpreter * for interactive IDE and debugging bf programs * * state -- state of vars from previous instruction * program -- a string containing the bf program * input -- a user input string to be processed * by the program (default: '') * debug -- a boolean flag to specify whether operations should * be logged to the JavaScript console (default: false) * bits -- cell size in bits (default: 8) * * Note: The log() function has been comment out for this implementation * If you wish to debug the interpreter - just uncomment */ bfInterpreter = (state, program, input, debug, bits) => { // not given a previous state so initialize the interpreter if (!state) { // default parameter values input = (input || '').split(''); debug = (typeof debug === undefined) ? false : debug; bits = bits || 8; // setup and initialization var maxVal = Math.pow(2, bits) - 1; var a = new Array(); // data array var n = new Array(); // nesting level pointer array var op = 0; // operation counter used in debug output var p = 0; // data pointer var x = 0; // x flag used when a loop is encountered and the // assocated data pointer is already 0 var i = 0; // instruction pointer -1=initial state var output = ''; a[p] = 0; // init data memory return getState(); } // state contains the current interpreter values setState(state); // begin stepping through program // i is the instruction pointer if (i < program.length) { if (debug) { ++op; } switch (program[i]) { case '>': incrementPointer(i); break; case '<': decrementPointer(i); break; case '+': incrementByte(i); break; case '-': decrementByte(i); break; case '.': outputByte(i); break; case ',': inputByte(i); break; case '[': beginLoop(i); break; case ']': i = endLoop(i); break; default: break; } // the data array is automatically resized during step processing // Data pointer incremented beyond data array size? // Reset to start of array - but should we increase the array? if (p >= a.length) a[p] = 0; i++; // prepare for next instruction } return getState(); // ---- function log(i, message) { //console.log(op+' ('+i+'): '+program[i]+' | '+message); } function incrementPointer(i) { if (x) return; ++p; if (debug) log(i, 'array pos. now '+p); } function decrementPointer(i) { if (x) return; if (p > 0) { --p; if (debug) log(i, 'array pos. now '+p); } else { if (debug) log(i, 'array pos. is already '+p); } } function incrementByte(i) { if (x) return; if ((a[p] || 0) < maxVal) { a[p] = (a[p] || 0) + 1; } else { a[p] = 0; } if (debug) log(i, 'a['+p+'] = '+a[p]); } function decrementByte(i) { if (x) return; if ((a[p] || 0) > 0) { a[p] = (a[p] || 0) - 1; } else { a[p] = maxVal; } if (debug) log(i, 'a['+p+'] = '+a[p]); } function outputByte(i) { if (x) return; output = output + String.fromCharCode(a[p]); if (debug) log(i, 'output \''+a[p]+'\' '+String.fromCharCode(a[p])); } function inputByte(i) { if (x != 0) { return; } var read = input.shift(); if (read === undefined && program[i+1] == '+') a[p] = -1; else if (read === undefined) a[p] = 0; else a[p] = read.charCodeAt(0); if (debug) log(i, 'read in '+read+' ('+a[p]+')'); } function beginLoop(i) { if (x != 0) { ++x; return; } if ((a[p] || 0) > 0) { n.push(i); if (debug) log(i, 'Array['+p+'] is \''+a[p]+'\' ** Loop nesting level: '+(n.length - 1)+'.'); } else { ++x; if (debug) log(i, 'Array['+p+'] is \''+(a[p] || 0)+'\' ** Loop nesting level: '+(n.length - 1)+'.'); if (debug) log(i, 'Not entering a loop but skipping this block'); } } function endLoop(i) { if (x != 0) { --x; return i; } if ((a[p] || 0) > 0) { var origin = n.pop(); if (debug) log(i, 'Array['+p+'] is \''+a[p]+'\''); if (debug) log(i, 'looping back to '+(origin)); i = origin - 1; } else { n.pop(); if (debug) log(i, 'Array['+p+'] is \''+(a[p] || 0)+'\''); } return i; } function getState() { return { program: program, input: input, debug: debug, bits: bits, maxVal: maxVal, i: i, // instruction pointer a: a, // data array n: n, // nesting level pointer array op: op, // operation counter used in debug output p: p, // data pointer output: output, eof: i >= program.length, // flag end of program x: x // x flag used when a loop is encountered // and the assocated data pointer is already 0 }; } function setState(s) { program = s.program; input = s.input; debug = s.debug; bits = s.bits; maxVal = s.maxVal; i = s.i; // instruction pointer a = s.a; // data array n = s.n; // nesting level pointer array op = s.op; // operation counter used in debug outputput p = s.p; // data pointer output = s.output; x = s.x; // x flag used when a loop is encountered // and the assocated data pointer is already 0 } }51:T4fe,dbugger = new class DBugger { constructor() { this.init(); } init() { this.stepToChar = ''; this.breaksIp = []; this.breaksDp = []; this.breaksOp = []; } bfReload(dom) { this.stepToChar = ''; this.bfState = bfInterpreter(null, dom.bfProgText.value, dom.bfInputText.value, true); history.initialize(this.bfState); dom.bfDataDisplay(this.bfState.p); } stepBf(dom) { if (!this.bfState) return; if (this.bfState.eof) { this.bfReload(dom); return; } history.pushState(this.bfState); this.bfState = bfInterpreter(this.bfState); let s = this.bfState; let progIsComment = '+-><.,[]'.indexOf(s.program[s.i]) === -1; if (!progIsComment) { dom.bfDataDisplay(s.p); } if (s.eof || this.breaksIp.indexOf(s.i) > -1 || this.breaksDp.indexOf(s.p) > -1 || this.breaksOp.indexOf(s.op) > -1 ) { dom.bfDataDisplay(s.p); return; } if (this.stepToChar) { if (s.program[s.i] === this.stepToChar) { dom.bfDataDisplay(s.p); this.stepToChar = ''; return; } setTimeout(() => {this.stepBf(dom)}, 10); } else if (progIsComment) { setTimeout(() => {this.stepBf(dom)}, 10); } } }52:T442,history = new class History { constructor(){ this.init(); } init() { this.maxlen = 100; this.states = []; this.program = ''; } initialize(state) { this.program = state.program; this.debug = state.debug; this.bits = state.bits; this.maxVal = state.maxVal; this.states = []; } pushState(state) { this.states.push(this.copyState(state)) if (this.maxlen < this.states.length) this.states.shift(); } popState() { return Object.assign({}, { program: this.program, debug: this.debug, bits: this.bits, maxVal: this.maxVal }, this.states.pop() ) } copyState(state) { return Object.assign({}, { input: [...state.input], output: state.output, a: [...state.a], // copy data array n: [...state.n], // copy nesting level pointer array i: state.i, // instruction pointer op: state.op, // operation counter used in debug output p: state.p, // data pointer x: state.x, // x flag used when a loop is encountered }) } }53:[] 48:{"id":"dffad7158ef5cb9a","slug":"brainf-ck-ide","title":"brainf*ck IDE","thumbnail":"316b21a7331c75b910a3e7d86d0130bdb49d219c633e9bfc7f66404b9952e961","access_level":"public","create_time":"$D2019-03-25T20:30:00.979Z","update_time":"$D2020-10-22T21:30:40.636Z","view_time":null,"first_public_time":"$D2020-10-31T15:03:46.658Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c1c927bc0e557225","login":"potofcoffee2go","name":"PotOfCoffee2Go","avatar_url":"https://avatars-next.observableusercontent.com/1cad6affb7ef9934a774271c7cec794e82c220d72aaf11ccd37ad45c3cc6c1b4","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1058,"publish_version":1058,"role":null,"authored":false,"authors":[{"type":"individual","id":"a975456033457547","login":"potofcoffee2go","name":"PotOfCoffee2Go","avatar_url":"https://avatars-next.observableusercontent.com/1cad6affb7ef9934a774271c7cec794e82c220d72aaf11ccd37ad45c3cc6c1b4","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"a975456033457547","login":"potofcoffee2go","name":"PotOfCoffee2Go","avatar_url":"https://avatars-next.observableusercontent.com/1cad6affb7ef9934a774271c7cec794e82c220d72aaf11ccd37ad45c3cc6c1b4","tier":null,"role":"editor"}],"comments":[{"id":"f8c8b0f489bce48e","reply_to_id":null,"content":"The interpreter is a native javascript function allowing you to use the same interpreter that was used during program development. It is not uncommon for differing brainfuck interpreters to handle edge cases differently","create_time":"$D2020-10-12T12:10:19.680Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"a975456033457547","login":"potofcoffee2go","name":"PotOfCoffee2Go","avatar_url":"https://avatars-next.observableusercontent.com/1cad6affb7ef9934a774271c7cec794e82c220d72aaf11ccd37ad45c3cc6c1b4","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"brainf*ck IDE","cells":[{"id":0,"value":"md`# brainf*ck IDE`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"html `${stylesheet()} ${page()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"md `\n----\n\nBrainfuck knows the following commands:\n \n Cmd | Effect \n --- | ------ \n + | Increases element under pointer \n - | Decrases element under pointer \n > | Increases pointer \n < | Decreases pointer \n [ | Starts loop, counter under pointer \n ] | Indicates end of loop \n . | Outputs ASCII code under pointer \n , | Reads char and stores ASCII under ptr \n |\n | All other characters are comments\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1016,"value":"domReady = new\nclass DomReady {\n constructor(){}\n\n load(dom) {\n this.dom = dom;\n this.loadProgram();\n this.loadTitles();\n }\n\n loadProgram() {\n let dom = this.dom;\n dom.bfProgText.value = ',[.>,] Copy input to output';\n dom.bfInputText.value = 'Hello World!'\n dom.bfDataBaseTxt.value = '10';\n }\n \n loadTitles() {\n let dom = this.dom;\n dom.bfProgPointer.title = \"Instruction pointer\";\n dom.bfProgValue.title = \"Instruction\";\n dom.bfProgOps.title = \"Number of operations\"; \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W53","stdlib":"1"}} 24:null