Git Product home page Git Product logo

pietron's Introduction

Pietron

Cross-platform IDE for Piet.

Description

Pietron is a cross-platform IDE for editing and debugging the source code of "Piet", an esoteric programming language.

The specification of Piet is here.

Pietron is developed with Electron and named after it.

ScreenShot

Usage

Editor

  • Draw free lines by dragging on the canvas.

  • Select a color by clicking on the palette and the selected is shown at the bottom-right corner.

  • Change the color to draw with by clicking on the palette.

    • The commands are shown in each color on the palette.

    • The bare one is from * (origin) and the parenthesized one is to *.

    • Change the * color by right-cicking on the palette.

  • Pick a color by right-clicking on the canvas.

  • Change the canvas size in various ways.

    • Change the canvas size one by one with the top-left position fixed with Ctrl + Alt + [↑↓←→] (⌥⌘ on OSX).

      meaning keyboard shortcut
      extend to the right Ctrl + Alt + →
      extend downwards Ctrl + Alt + ↓
      trim the rightmost column Ctrl + Alt + ←
      trim the bottom row Ctrl + Alt + ↑
    • Change the canvas size one by one with the bottom-right position fixed with Ctrl + Shift + [↑↓←→] (⇧⌘ on OSX).

      meaning keyboard shortcut
      shift the image to the right Ctrl + Shift + →
      shift the image down Ctrl + Shift + ↓
      trim the leftmost column Ctrl + Shift + ←
      trim the top row Ctrl + Shift + ↑
    • Change the canvas size to the specified width and height with Ctrl(⌘) + R.

  • Undo/Redo support (Ctrl(⌘) + Z / Ctrl + Y (⇧⌘Z)).

  • Zoom support (Ctrl(⌘) + ";" / Ctrl(⌘) + "-").

Debugger

  • "Start Debug" executes commands until the program terminates (F5).

    • When the commands are executed over 1,000,000 times, a comfirmation dialog will be displayed.
  • "Jump Debug" excutes the specified number of commands (F6).

  • "Step Debug" excutes a next command (F7).

  • "Stop Debug" stops the execution (ESC).

  • While debugging, the source codel and the destination codel are indicated by red and blue borders.

  • 🎨Emoji🐛 Support.

File I/O

  • PNG/BMP support.

  • Codel size specification support.

  • Non piet colors are dealed as white.

Install

Download zipped files for your operating system from releases.

Executable files are contained in them.

Author

  • dnek - Piet lover - dnek

License

This project is licensed under the MIT License - see the LICENSE file for details.

TODOs

  • Canvas with HTML5 <canvas>.

  • Editor Selection mode.

  • Move with arrow keys on the canvas.

  • Command preview on the canvas.

  • Breakpoint.

  • File drag & drop.

  • Set the limits of stack & integer.

  • Debug log.

Acknowledgments

  • Pidet is my previous product and I do not recommend using it.

    • Japanese only.

    • Windows support only.

    • No Emoji support.

    • Not maintained.

pietron's People

Contributors

dependabot[bot] avatar dnek avatar dovahbot avatar hiromi-mi avatar ideadapt avatar sozysozbot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

pietron's Issues

Allow dragging and dropping an image file to open it

reproduce the issue

  • Drag and drop an image onto the Pietron window

Observed result

  • Since it is fundamentally a web browser, the Pietron window transitions to the image itself
  • Once this happens, it becomes completely stuck and unusable
    pietron_loads_image

Expected result

  • Pietron loads the image as a valid Piet program, just as it does so when the image is supplied by File → Open

Implement Analysis Mode

It would be of great help to add an analysis mode, a mode where you can trace an execution path and the codels get decompiled (e.g. dup 5.push greater point 5.push sub) according to the path.

Improved "Paint Mode"

Another issue on here suggests adding a "Selection Mode", that lets you copy/paste/etc parts of the image, and dubs the current default mode "Paint Mode". After having downloaded this IDE and played around with it a little, I think I also have some ideas for improving the Paint Mode:

  • Line tool that draws a straight vertical or horizontal line of the selected color
  • Rectangle tool that lets you draw a solid box of a given color
  • Bucket tool that fills a contiguous area of one color with a different color, MSpaint style
  • Something to show how many pixels are in a given color block, either when you hover over it or as some sort of overlay on the pixels

String.fromCodePoint fails when the input is negative

While String.fromCodePoint is handled in L341-345,

pietron/src/debug.js

Lines 341 to 345 in f8ce860

try {
return i > 31 ? String.fromCodePoint(i) : '??';
} catch (error) {
return '??';
}

it is not handled in L249-251.

pietron/src/debug.js

Lines 249 to 251 in f8ce860

if (lessThan(1)) break;
output += String.fromCodePoint(stack.pop());
break;

This causes Pietron to fail:
invalid_code_point

In my opinion, invalid code points qualify as "operations which cannot be performed", and hence should be ignored.

Allow undoing the step execution

Since the full state machine is relatively simple, it is quite feasible to retain the history of the step execution (~1000 steps to the past) in memory and allow undoing a few steps back into the past. This becomes quite handy when debugging a complicated Piet program: for instance, a wrong CC might cause the path of execution to leak into an unintended area and wreak havoc, and in those situations it becomes convenient to be able to roll back a few steps.

In(n) removes more from input than expected

When integers are separated by something else than whitespace In(n) removes all characters until the next whitespace.

Example

input is "2-4,6-8 2-3,4-5" and In(n) is executed

Expected behaviour

2 is pushed onto the stack and input is "-4,6-8 2-3,4-5"

Actual behaviour

2 is pushed onto the stack and input is " 2-3,4-5"

Implement Selection Mode

Selection Mode should at least have:

  • Rectangular selection
  • Copy
  • Paste ignoring white codels
  • Paste retaining white codels
  • Rotate the selected area

It might also be a good idea to have:

  • Modify the hue & lightness
  • Flip the selected area

As a side effect, the current UI should be dubbed as the Paint Mode.

Allow extending the image upwards and to the left

Change the canvas size one by one with CTRL+ALT+[↑↓←→] (⌥⌘ on OSX).

The current keyboard shortcuts for resizing the canvas can be reinterpreted as:

meaning keyboard shortcut
extend to the right Ctrl + Alt + →
extend downwards Ctrl + Alt + ↓
trim the rightmost column Ctrl + Alt + ←
trim the bottom row Ctrl + Alt + ↑

This reinterpretation begs for the addition of four new keyboard shortcuts:

meaning keyboard shortcut
extend to the left Ctrl + Shift + ←
extend upwards Ctrl + Shift + ↑
trim the leftmost column Ctrl + Shift + →
trim the top row Ctrl + Shift + ↓

To further facilitate the intuitive understanding of these eight shortcuts, it might help to add an icon similar to cursor: move in the top-left and bottom-right corners, and make it highlighted whenever Ctrl + Alt or Ctrl + Shift is pressed.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.