(0,0)
New Load Save Grid Size
Edit mode Run
Direction: Right (Shift+Right Cursor Key) Left Down Up
Mode: Code String Insert
Start Pause Stop Next Step Trace Cursor Movement
Grid Stack Terminal Input Box
Help About

Speed: 🐢🐇

jsFunge IDE

GridClose
StackClose
InputClose
TerminalClose
ImportClose
Select a program to import:
CancelOK
ExportClose
Copy this link to share this program:
Save to Address BarOK
HelpClose
Befunge-93 GuidejsFunge IDE Guide

What is Befunge-93?

Befunge is a stack-based, reflective, esoteric programming language. It differs from conventional languages in that programs are arranged on a two-dimensional plaayfield. "Arrow" instructions direct the control flow to the left, right, up or down, and loops are constructed by sending the control flow in a cycle.

For more informations, see the wikipedia page.


Instruction set

Flow direction:

  • >  Start moving right
  • <  Start moving left
  • v  Start moving down
  • ^  Start moving up
  • ?  Start moving in a random direction

Mathematical and logical operations:

  • +  Addition: pop a and b, and then push a+b
  • -  Subtraction: pop a and b, and then push b-a
  • *  Multiplication: pop a and b, and then push a*b
  • /  Division (integer): pop a and b, and then push b/a
       If a is 0, ask user for desired result.
  • %  Modulo: pop a and b, and then push b%a
       If a is 0, halt and catch fire
  • !  Logical NOT: pop a value. If the value is zero,
       push 1; otherwise, push zero.

Tests:

  • `  Greater than: pop a and b, then push 1 if b>a,
       otherwise push zero.

Jumps:

  • _  Pop a value; move right if value=0, left otherwise.
  • |  Pop a value; move down if value=0, up otherwise.
  • #  Skip the next cell

Stack operations:

  • 0-9  Push the number on the stack
  •   :  Duplicate value on top of the stack
  •   $  Pop a value from the stack
  •   \  Swap two values on top of the stack.

Input / Output:

  • .  Pop value and output as an integer.
  • ,  Pop value and output as an ASCII character.
  • p  Put: pop y, x and v, then set position (x,y) in
       the playfield to the value v (truncated to
       a signed byte.)
  • g  Get: pop y and x, then push the value at that
       position in the playfield.
  • &  Push to stack user input interpreted as a decimal number.
  • ~  Push to stack one character of user input.

Other instructions:

  • "  Start string mode: push each character's ASCII
       value all the way up to the next ".
  • @  The end of the program.

Interesting links

How to Use This IDE

This IDE has several features which may not be obvious at a first glance.


Toolbar

Program Options

  • New  Switch to edit mode and clear the grid
  • Load  Open a dialog where you can select
           an example to load
  • Save  Open a dialog where you can copy a URL
           that will let you share or save your program
  • Grid Size  Open a dialog where you can change
           the dimensions of the grid

  • Edit mode  Switch to Edit Mode
  • Run  Switch to Run Mode

Edit Mode Options

  • RightLeft DownUp  Select the direction the cursor will
                            move when typing on the grid.
  • Code  Switch to Code Typing mode
  • String  Switch to String Typing mode
  • Insert  Toggle Insert Typing mode

Run Mode Options

  • Start  Start the program running
  • Pause  Pause a running program
  • Stop  Halt and reset a running or paused program
  • Next Step  Advance the program a single step
  • Trace Cursor Movement  Toggle Cursor Tracing Mode
  • Speed Slider  Set the speed the program runs
                             Faster speeds won't show every step

Windows and Dialogues

  • GridGrid  Show the Grid/Text window if it is hidden
                In Edit Mode, toggle between text/grid mode
  • Stack  Show the Stack window if it is hidden
  • Terminal  Show the Terminal window if it is hidden
  • Input Box  Show the Input Box window if it is hidden

  • Help  Show this window if it is hidden
  • About  Show the About window if it is hidden

Global Features

Windows

Windows and Dialogs can be dragged around by their title bars and hidden by choosing the X in the corner. They can always be shown again from the toolbar.

Certain windows (Stack, Grid, and Terminal) can be resized as you prefer by dragging their lower right corners. The Grid window cannot be larger than just enough to contain the grid.

Cursor Position

In the bottom left corner of the page, a small box always shows the current coordinates of the cursor and the current numerical value of the cell it is in.

Grid Size

You can use the Grid Size Dialog to resize the grid in any mode. You can give the grid any number of rows or columns. Resizing the grid will never destroy any part of the program currently on the grid without confirming with you first.

Input Box

Open the Input Box Window and type anything you want into the box if you would rather feed a fixed input to your program when it runs than provide interactive input through the terminal. As with most Befunge implementations, if your program tries to read more input than this box contains, it will receive a -1 as EOF instead. Clear the box to return to interactive input mode.

Import Example

There are a number of example programs to choose from in the Import Dialog. Importing one of these examples will overwrite the contents of the grid and possibly try to resize it as well. Save your work before doing this!

Export URL

You can share the URL from the export URL box to allow anyone to see or edit your program. The link will also preserve your current grid size settings.

If you select Save to Address Bar, your browser will be redirected to the link, thereby saving it in your browser history. (This will destroy any breakpoints you had set.)


Edit Mode Features

While typing on the grid, the cursor will always move in the direction selected on the toolbar, wrapping around the edges of the grid as needed. Typing Backspace will move the cursor in the opposite direction before clearing the cell. Certain other keys have variant behavior depending on the Typing Mode.

Code Typing Mode

Select Code Typing Mode by choosing Code on the toolbar.

In Code Typing Mode, typing any of the characters <,>,^, or v will change the typing direction and then move in that direction. Typing " will toggle on String Typing Mode.

String Typing Mode

Select String Typing Mode by choosing String on the toolbar.

In String Typing Mode, the cursor will continue in the current direction regardless of what is typed. Typing " will toggle on Code Typing Mode.

Insert Typing Mode

Select Insert Typing Mode by choosing Insert on the toolbar or by pressing the Insert key.

When Insert Typing Mode is off, typing on a cell replaces its contents. Hitting Delete behaves the same as hitting Space.

When Insert Typing Mode is on, typing on a cell shifts everything in the current row or column in the current typing direction, placing the typed character in the newly vacated cell. But the grid has a fixed size, so a character must be overwritten somewhere in that row or column. In this mode, the last space character in that direction is overwritten. If there are no space characters in the current typing direction, attempting to type in Insert Typing Mode will fail to avoid accidentally destroying parts of your program. However, you can still accidentally destroy significant whitespace using this mode. Be careful!

In Insert Typing Mode, pressing Delete will not move the cursor, but instead will shift the entire row/column in the current direction backwards towards the cursor. Pressing Backspace will both move the cursor backward and shift the row/column backwards towards it, overwriting the previous character.

Always check the current typing direction before typing in Insert Typing Mode!

Keyboard Shortcuts

A number of quick keyboard shortcuts are available while editing the grid.

  • Home  Move cursor to the first column of the current row
  • End  Move cursor to the last column of the current row
  • Page Up  Move cursor to the first row of the current column
  • Page Down  Move cursor to the last row of the current column
  • Insert  Toggle Insert Typing Mode
  • Shift+[Any Cursor Key] Set the current typing direction
  • Alt+Shift+R  Switch to Run Mode and start the program running
  • Alt+Shift+S  Open the Export URL dialog

Text Editing Window

Select the Text Window option from the toolbar to transform the grid into a simple textbox containing your program.

In the plaintext editing window, you can select all the text in the program, copy it, and paste it elsewhere for safe-keeping or to try out another interpreter. You can also replace the program by pasting in programs from other sources. Any changes made to the text here will be loaded into the grid when you switch back to the Grid Editing Window. Using any of the grid-specific features (like the Export URL and Grid Size dialogs) will automatically switch back to the Grid Editing Window for you.

If the contents of the textbox (not counting trailing whitespace) will not fit in the grid at its current dimensions, switching back to the Grid Editing Window will give you the option to resize the grid to fit it.

Run Mode Features

In Run Mode, you cannot edit the contents of the grid nor can you set the location of the cursor. However, there are some things you can do here that you cannot do in Edit Mode.

Breakpoints

Set a breakpoint by double-clicking or long-pressing on a cell. The cell will turn crimson when it is a breakpoint. Breakpoints persist even if you switch to Edit Mode and back, though they will not be visible in Edit Mode. There is no problem with toggling a breakpoint while a program is running.

When the cursor of a running program reaches a breakpoint cell, the program will pause automatically.

Cursor Tracing Mode

Turn Cursor Tracing Mode on by clicking the Trace Cursor Movement icon on the toolbar. In this mode, while a program is running, the cursor will recolor each cell it touches in a progression of hues. This will allow you to see the execution paths of a program even when the speed is set too high to watch each move the cursor makes. These colors will persist until you next start the program again, even if you turn Cursor Trace Mode off and on again or switch to edit mode and back again (even though either of these actions will temporarily hide the colors).

Keyboard Shortcuts

A number of keyboard shortcuts are available in Run Mode.

  • Alt+Shift+E  Halt and reset the program and switch to Edit Mode
  • Alt+Shift+S  Open the Export URL dialog
  • Alt+Shift+C  Immediately halt and reset the program

All of these shortcuts will work even while the program is waiting for interactive input in the terminal.

About jsFunge IDEClose
jsFunge IDE logo

jsFunge IDE 0.1

A Befunge 93 Editor, Interpreter and Debugger

Copyright © 2011 Fabien LOISON

Updated 2021 David Rutter

http://software.flogisoft.com/jsfunge

License

This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.

InputClose
Set grid dimensions: X
CancelOK