-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from SanguineL/merge
Added different codel sizes
- Loading branch information
Showing
7 changed files
with
2,093 additions
and
1,758 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,43 @@ | ||
| # PietPlus | ||
| A JavaScript-based IDE and Interpreter for Piet. See it in action [here](https://sanguinel.github.io/PietPlus/)! | ||
|
|
||
| Piet is an esoteric programming language, which is based on the geometric artist Piet Mondriaan. The language specifies actions based on the transitions of colors. For a detailed explanation, please visit [the official website](https://www.dangermouse.net/esoteric/piet.html) | ||
|
|
||
| ## WORK-IN-PROGRESS | ||
| - Different Codel Sizes | ||
| - Shortcuts | ||
| - Color Filter | ||
| - Improved Layout | ||
|
|
||
| ## Features | ||
| - IDE | ||
| - Interpreter | ||
| - Real-time runtime display (active codels, current stack, CC, DP) | ||
| - Self-Correcting Color List | ||
| - Step Debugging | ||
| - Block Size Display | ||
| - Fill Option | ||
| - Import from Image | ||
| - Export to Image | ||
| - Grid Scaling instead of Scrolling | ||
|
|
||
| ## Future Additions | ||
| - Different Codel Sizes | ||
| - Improved Layout | ||
| - Compiler?? | ||
| - Shortcuts (Ex: 'x' for 'push') | ||
| - Color filter (only allow typical 20 Piet colors) | ||
|
|
||
| _Note: This is my first ever legitimate attempt at developing in JavaScript. Some code has been taken from other sources, especially in the beginning stages of development. I will attribute each source I have used below._ | ||
|
|
||
| _Second Note: According to my tests, the Interpreter is correct in its traversal and behavior. If it is not, please let me know._ | ||
|
|
||
| _Third Note: Would not recommend having a grid much larger than 50x50 for performance._ | ||
|
|
||
| ## Resources Used | ||
| - JavaScript Array-Shifting code from _ayane\_m_ on [StackOverflow](https://stackoverflow.com/questions/36215355/what-is-a-good-way-to-rotate-circular-shift-a-two-dimensional-array). | ||
| - Basic Pixel Art HTML/CSS/JS from _harsh_ on [Code With Random](https://www.codewithrandom.com/2022/12/02/pixel-art-maker-using-javascript/). | ||
| - Breadth-First Search from _ramandeep8423_ on [Geeks For Geeks](https://www.geeksforgeeks.org/breadth-first-traversal-bfs-on-a-2d-array/#). | ||
| - Array.Includes(Array) from _Rahman Qadirzade_ on [StackOverflow](https://www.geeksforgeeks.org/breadth-first-traversal-bfs-on-a-2d-array/#). | ||
| - Matrix Addition from [ForgetCode](https://forgetcode.com/javascript/2645-addition-of-two-matrices). | ||
| - RGB to Array from [30SecondsOfCode](https://www.30secondsofcode.org/js/s/to-rgb-array/). | ||
| # PietPlus | ||
| A JavaScript-based IDE and Interpreter for Piet. See it in action [here](https://sanguinel.github.io/PietPlus/)! | ||
|
|
||
| Piet is an esoteric programming language, which is based on the geometric artist Piet Mondriaan. The language specifies actions based on the transitions of colors. For a detailed explanation, please visit [the official website](https://www.dangermouse.net/esoteric/piet.html) | ||
|
|
||
| ## WORK-IN-PROGRESS | ||
| - Different Codel Sizes | ||
| - Shortcuts | ||
| - Color Filter | ||
| - Improved Layout | ||
|
|
||
| ## Features | ||
| - IDE | ||
| - Interpreter | ||
| - Real-time runtime display (active codels, current stack, CC, DP) | ||
| - Self-Correcting Color List | ||
| - Step Debugging | ||
| - Block Size Display | ||
| - Fill Option | ||
| - Import from Image | ||
| - Export to Image | ||
| - Grid Scaling instead of Scrolling | ||
|
|
||
| ## Future Additions | ||
| - Different Codel Sizes | ||
| - Improved Layout | ||
| - Compiler?? | ||
| - Shortcuts (Ex: 'x' for 'push') | ||
| - Color filter (only allow typical 20 Piet colors) | ||
|
|
||
| _Note: This is my first ever legitimate attempt at developing in JavaScript. Some code has been taken from other sources, especially in the beginning stages of development. I will attribute each source I have used below._ | ||
|
|
||
| _Second Note: According to my tests, the Interpreter is correct in its traversal and behavior. If it is not, please let me know._ | ||
|
|
||
| _Third Note: Would not recommend having a grid much larger than 50x50 for performance._ | ||
|
|
||
| ## Resources Used | ||
| - JavaScript Array-Shifting code from _ayane\_m_ on [StackOverflow](https://stackoverflow.com/questions/36215355/what-is-a-good-way-to-rotate-circular-shift-a-two-dimensional-array). | ||
| - Basic Pixel Art HTML/CSS/JS from _harsh_ on [Code With Random](https://www.codewithrandom.com/2022/12/02/pixel-art-maker-using-javascript/). | ||
| - Breadth-First Search from _ramandeep8423_ on [Geeks For Geeks](https://www.geeksforgeeks.org/breadth-first-traversal-bfs-on-a-2d-array/#). | ||
| - Array.Includes(Array) from _Rahman Qadirzade_ on [StackOverflow](https://www.geeksforgeeks.org/breadth-first-traversal-bfs-on-a-2d-array/#). | ||
| - Matrix Addition from [ForgetCode](https://forgetcode.com/javascript/2645-addition-of-two-matrices). | ||
| - RGB to Array from [30SecondsOfCode](https://www.30secondsofcode.org/js/s/to-rgb-array/). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,105 +1,123 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta name="author" content="Alex Strickland" /> | ||
| <meta name="copyright" content="2023" /> | ||
| <title>PietPlus</title> | ||
| <!-- Google Fonts --> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| <!-- Stylesheet --> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| <script src="https://kit.fontawesome.com/60e56e3ac4.js" crossorigin="anonymous"></script> | ||
| </head> | ||
| <body> | ||
| <div class="main"> | ||
| <div class="left-column"> | ||
| <div class="button_wrapper"> | ||
| <button class="colorbutton" id='lbutton0'></button> | ||
| <button class="colorbutton" id='mbutton0'></button> | ||
| <button class="colorbutton" id='rbutton0'></button> | ||
|
|
||
| <button class="colorbutton" id='lbutton1'></button> | ||
| <button class="colorbutton" id='mbutton1'></button> | ||
| <button class="colorbutton" id='rbutton1'></button> | ||
|
|
||
| <button class="colorbutton" id='lbutton2'></button> | ||
| <button class="colorbutton" id='mbutton2'></button> | ||
| <button class="colorbutton" id='rbutton2'></button> | ||
|
|
||
| <button class="colorbutton" id='lbutton3'></button> | ||
| <button class="colorbutton" id='mbutton3'></button> | ||
| <button class="colorbutton" id='rbutton3'></button> | ||
|
|
||
| <button class="colorbutton" id='lbutton4'></button> | ||
| <button class="colorbutton" id='mbutton4'></button> | ||
| <button class="colorbutton" id='rbutton4'></button> | ||
|
|
||
| <button class="colorbutton" id='lbutton5'></button> | ||
| <button class="colorbutton" id='mbutton5'></button> | ||
| <button class="colorbutton" id='rbutton5'></button> | ||
|
|
||
| <button class="colorbutton" id='lbutton6' type="reset"> | ||
| <i class="fa-solid fa-minus" style="color:white"></i> | ||
| </button> | ||
| <button class="colorbutton" id='mbutton6' type="reset"> | ||
| <i class="fa-solid fa-minus"></i> | ||
| </button> | ||
| <button class="switchbutton" id="toolswitch" type="reset"> | ||
| <i class="fa-solid fa-fill" id="tool-icon"></i> | ||
| </button> | ||
|
|
||
| </div> <!-- END OF BUTTON WRAPPER --> | ||
| <div class="block-info"> | ||
| <label id="block-info-label"></label> | ||
| </div> | ||
| </div> <!-- END OF LEFT COLUMN --> | ||
| <div class="wrapper"> | ||
| <div class="options"> | ||
| <div class="opt-wrapper"> | ||
| <button id="reset-grid">Config Grid</button> | ||
| <button id="clear-grid">Clear Grid</button> | ||
| <button id="erase-btn">Erase</button> | ||
| <button id="paint-btn">Draw</button> | ||
| <input type="file" class="file" id="attachment" style="display: none;" /> | ||
| <button id="upload-image-btn">Import</button> | ||
| <button id="save-image-btn">Save</button> | ||
| </div> | ||
| </div> <!-- END OF OPTIONS --> | ||
| <dialog id = "dialog"> | ||
| <div class="gridDir"> | ||
| <label for="width-range">Width</label> | ||
| <input type="number" id="width-range" max="300"/> | ||
| </div> | ||
| <div class="gridDir"> | ||
| <label for="height-range">Height</label> | ||
| <input type="number" id="height-range" max="300" /> | ||
| </div> | ||
| <button id="submit-grid">Create Grid</button> | ||
| </dialog> | ||
| <div class="container"></div> | ||
| </div> | ||
| <div class="controls_wrapper"> | ||
| <textarea id="command-display" class="command-disp" disabled></textarea> | ||
| <button class="command-button" id="start-button">Start</button> | ||
| <button class="command-button" id="step-button">Step</button> | ||
| <button class="command-button" id="pause-button">Pause</button> | ||
| <label id="dpcc-label">DP:-> CC:<-</label> | ||
| <label>Stack</label> | ||
| <textarea id="stack-display" class="ide-info" disabled></textarea> | ||
| <label>Input</label> | ||
| <textarea id="input" class="ide-info" spellcheck="false"></textarea> | ||
| <label>Output</label> | ||
| <textarea id="output" class="ide-info" disabled></textarea> | ||
| </div> | ||
| </div> | ||
| <!-- Script --> | ||
| <script src="script.js"></script> | ||
| <script src="interpreter/codel_tools.js"></script> | ||
| <script src="interpreter/interpreter.js"></script> | ||
| <script src="interpreter/actions.js"></script> | ||
| </body> | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta name="author" content="Alex Strickland" /> | ||
| <meta name="copyright" content="2024" /> | ||
| <title>PietPlus</title> | ||
| <!-- Google Fonts --> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| <!-- Stylesheet --> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| <script src="https://kit.fontawesome.com/60e56e3ac4.js" crossorigin="anonymous"></script> | ||
| </head> | ||
| <body> | ||
| <div class="main"> | ||
| <div class="left-column"> | ||
| <div class="button_wrapper"> | ||
| <button class="colorbutton" id='lbutton0'></button> | ||
| <button class="colorbutton" id='mbutton0'></button> | ||
| <button class="colorbutton" id='rbutton0'></button> | ||
|
|
||
| <button class="colorbutton" id='lbutton1'></button> | ||
| <button class="colorbutton" id='mbutton1'></button> | ||
| <button class="colorbutton" id='rbutton1'></button> | ||
|
|
||
| <button class="colorbutton" id='lbutton2'></button> | ||
| <button class="colorbutton" id='mbutton2'></button> | ||
| <button class="colorbutton" id='rbutton2'></button> | ||
|
|
||
| <button class="colorbutton" id='lbutton3'></button> | ||
| <button class="colorbutton" id='mbutton3'></button> | ||
| <button class="colorbutton" id='rbutton3'></button> | ||
|
|
||
| <button class="colorbutton" id='lbutton4'></button> | ||
| <button class="colorbutton" id='mbutton4'></button> | ||
| <button class="colorbutton" id='rbutton4'></button> | ||
|
|
||
| <button class="colorbutton" id='lbutton5'></button> | ||
| <button class="colorbutton" id='mbutton5'></button> | ||
| <button class="colorbutton" id='rbutton5'></button> | ||
|
|
||
| <button class="colorbutton" id='lbutton6' type="reset"> | ||
| <i class="fa-solid fa-minus" style="color:white"></i> | ||
| </button> | ||
| <button class="colorbutton" id='mbutton6' type="reset"> | ||
| <i class="fa-solid fa-minus"></i> | ||
| </button> | ||
| <button class="switchbutton" id="toolswitch" type="reset"> | ||
| <i class="fa-solid fa-fill" id="tool-icon"></i> | ||
| </button> | ||
|
|
||
| </div> <!-- END OF BUTTON WRAPPER --> | ||
| <div class="block-info"> | ||
| <label id="block-info-label"></label> | ||
| </div> | ||
| <div id ="ascii-div" class="block-info"> | ||
| <label id="ascii-piet-label"></label> | ||
| </div> | ||
| </div> <!-- END OF LEFT COLUMN --> | ||
| <div class="wrapper"> | ||
| <div class="options"> | ||
| <div class="opt-wrapper"> | ||
| <button class="top-button" id="reset-grid">Config Grid</button> | ||
| <button class="top-button" id="clear-grid">Clear Grid</button> | ||
| <button class="top-button" id="erase-btn">Erase</button> | ||
| <button class="top-button" id="paint-btn">Draw</button> | ||
| <input type="file" class="file" id="attachment" style="display: none;" /> | ||
| <button class="top-button" id="upload-image-btn">Import</button> | ||
| <button class="top-button" id="save-image-btn">Save</button> | ||
| </div> | ||
| </div> <!-- END OF OPTIONS --> | ||
| <dialog id="dialog"> | ||
| <div class="gridDir"> | ||
| <label for="width-range">Width</label> | ||
| <input type="number" id="width-range" max="300" /> | ||
| </div> | ||
| <div class="gridDir"> | ||
| <label for="height-range">Height</label> | ||
| <input type="number" id="height-range" max="300" /> | ||
| </div> | ||
| <button id="submit-grid">Create Grid</button> | ||
| </dialog> | ||
| <dialog id="importDialog"> | ||
| <div class="gridDir"> | ||
| <button id="image-import">From Image</button> | ||
| </div> | ||
| <div class="gridDir"> | ||
| <button id="ascii-import">From ascii-piet</button> | ||
| </div> | ||
| </dialog> | ||
| <dialog id="asciiDialog"> | ||
| <div class="gridDir"> | ||
| <label for="width-range">Enter ascii-piet</label> | ||
| <input type="text" id="ascii-entry"/> | ||
| </div> | ||
| <button id="submit-ascii">Import</button> | ||
| </dialog> | ||
| <div class="container"></div> | ||
| </div> | ||
| <div class="controls_wrapper"> | ||
| <textarea id="command-display" class="command-disp" disabled></textarea> | ||
| <button class="command-button" id="start-button">Start</button> | ||
| <button class="command-button" id="step-button">Step</button> | ||
| <button class="command-button" id="pause-button">Reset</button> | ||
| <label id="dpcc-label">DP:-> CC:<-</label> | ||
| <label>Stack</label> | ||
| <textarea id="stack-display" class="ide-info" disabled></textarea> | ||
| <label>Input</label> | ||
| <textarea id="input" class="ide-info" spellcheck="false"></textarea> | ||
| <label>Output</label> | ||
| <textarea id="output" class="ide-info" disabled></textarea> | ||
| </div> | ||
| </div> | ||
| <!-- Script --> | ||
| <script src="script.js"></script> | ||
| <script src="interpreter/codel_tools.js"></script> | ||
| <script src="interpreter/interpreter.js"></script> | ||
| <script src="interpreter/actions.js"></script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.