@qashto/mie
v1.0.6
Published
mini editor for embedding p5.js sketches
Downloads
12
Maintainers
Readme
mie : mini editor
mie is great for embedding p5.js sketches on your own website.
Demo: https://p5play.org/learn/sprite.html
Usage
Load the Ace editor and mie in your HTML:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/ace.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/ext-language_tools.js"></script>
<script src="https://quinton-ashley.github.io/mie/mie.js"></script>
Or use mie via npm:
npm i @qashto/mie
Add p5.js scripts to your page and they will be embedded in an editor with an instanced preview of the sketch auto-playing by default.
<script type="mie/p5" name="Sketch">
function setup() {
createCanvas(100, 100);
}
function draw() {
background('blue');
}
</script>
Options
You can add properties to the script tag to adjust the mie player to your liking. Here's an example that limits the height of the editor to 10 lines.
<script type="mie/p5" name="Sketch" lines="10">
Other property options include:horiz
/vert
- horizontal or vertical layout (vert is the default)
lines="#"
- sets the height of the editor to the specified number of linesbase-#
- specifies the sketch as a base sketchbase="#"
- will load the code in its editor into the draw function of the specified base sketcheditor-btn
- add the show/hide editor buttonhide-editor
- hides the editor, just shows the preview
hide
- hides the whole mini player, useful for invisible base sketches
Advanced Usage
If you don't want all the sketches on a page to be automatically loaded when the mie.js script executes you can disable auto-loading. Simply run this before the mie.js script executes:
window.mie = {
autoLoad: false
};
Then load mie after the ace editor has loaded:
mie.load();
Then you can load only the mie scripts contained inside an specific HTML element by using the mie.loadMinis
function. This is good if you have multiple pages of content in one HTML file and you want to load the sketches on each page separately.
mie.loadMinis(elem);
You can also define the mie.ready
function, which is run when mie is ready to load sketches.