mirror of
https://codeberg.org/vlw/monkeydo.git
synced 2025-09-13 15:53:40 +02:00
Update README.md
This commit is contained in:
Victor Westerlund
GitHub
parent
22eda97800
commit
a6e51c1e48
1 changed files with 77 additions and 44 deletions
121
README.md
121
README.md
|
|
@ -1,9 +1,83 @@
|
|||
<p align="center">
|
||||
<img width="400" src="https://storage.googleapis.com/public.victorwesterlund.com/github/VictorWesterlund/monkeydo/monkeydo_.svg"/>
|
||||
</p>
|
||||
<h3 align="center">Threaded task chaining for JavaScript</h3>
|
||||
<h3 align="center">Multithreaded web animations and task chaining</h3>
|
||||
<hr>
|
||||
<p align="center">Monkeydo uses the portable data format JSON to read tasks, making it easy to read by primates and machines alike.</p>
|
||||
<p align="center">Execute general purpose JavaScript on cue with greater performance. Monkeydo is great, and designed for, complex DOM animations.</p>
|
||||
<p align="center"><img src="https://storage.googleapis.com/public.victorwesterlund.com/github/VictorWesterlund/monkeydo/simple_demo.gif"/></a>
|
||||
<table>
|
||||
<td>
|
||||
<p align="center">Monkeydo JSON manifest<br><a href="#manifest-semantics">View semantics</a></p>
|
||||
<pre lang="json">
|
||||
{
|
||||
"tasks": [
|
||||
[2000,"moveTo",100,0],
|
||||
[1500,"setColor","red"],
|
||||
[2650,"setColor","blue"],
|
||||
[550,"moveTo",350,0]
|
||||
]
|
||||
}
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<p align="center">Normal JavaScript</p>
|
||||
<pre lang="js">
|
||||
const methods = {
|
||||
element: document.getElementById("element"),
|
||||
moveTo: (x,y) => {
|
||||
methods.element.style.setProperty("transform",`translate(${x}%,${y}%)`);
|
||||
},
|
||||
setColor: (color) => {
|
||||
methods.element.style.setProperty("background-color",color);
|
||||
}
|
||||
};
|
||||
</pre>
|
||||
</td>
|
||||
</table>
|
||||
<a href="https://victorwesterlund.github.io/monkeydo-demo/demo/simple_shapes">Open live demo</a>
|
||||
<h1 align="center">Use Monkeydo</h1>
|
||||
<p>Monkeydo comes as an ES6 module. In this guide we'll import this directly from a <i>./modules/</i> folder, but any location accessible by the importing script will work.</p>
|
||||
<ol>
|
||||
<li><strong>Import <code>Monkeydo</code> as an ESM</strong>
|
||||
<pre lang="js">
|
||||
import { default as Monkeydo } from "./modules/Monkeydo/Monkeydo.mjs";
|
||||
</pre>
|
||||
</li>
|
||||
<li><strong>Define your JS methods in an object</strong>
|
||||
<pre lang="js">
|
||||
const methods = {
|
||||
singForMe: (foo,bar) => {
|
||||
console.log(foo,bar);
|
||||
}
|
||||
}
|
||||
</pre>
|
||||
</li>
|
||||
<li><strong>Define your tasks in a JSON manifest (file or JSON-compatible JavaScript)</strong>
|
||||
<pre lang="json">
|
||||
{
|
||||
"tasks": [
|
||||
[0,"singForMe","Just like a","monkey"],
|
||||
[1200,"singForMe","I've been","dancing"],
|
||||
[160,"singForMe","my whole","life"]
|
||||
]
|
||||
}
|
||||
</pre>
|
||||
</li>
|
||||
<li><strong>Initialize and run <code>Monkeydo</code> with your methods and manifest</strong>
|
||||
<pre lang="js">
|
||||
const monkey = new Monkeydo(methods);
|
||||
monkey.play(manifest);
|
||||
</pre>
|
||||
</li>
|
||||
</ol>
|
||||
<p>The example above would be the same as running:</p>
|
||||
<pre lang="js">
|
||||
console.log("Just like a","monkey"); // Right away
|
||||
console.log("I've been","dancing"); // 1.2 seconds after the first
|
||||
console.log("my whole","life"); // and then 160 milliseconds after the second
|
||||
</pre>
|
||||
<h1>Manifest Semantics</h1>
|
||||
<p>The JS passed to the Monkeydo constructor is executed by the initiator thread (ususally the main thread) when time is up. Which method and when is defined in a JSON file or string with the following semantics:</p>
|
||||
<table>
|
||||
<td>
|
||||
<pre lang="json">
|
||||
|
|
@ -22,7 +96,7 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td align="center">0</td>
|
||||
<td><strong>Delay</strong><br>Wait this many milliseconds before running this task</td>
|
||||
<td><strong>Delay</strong><br>Wait this many milliseconds before running this method</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center">1</td>
|
||||
|
|
@ -35,44 +109,3 @@
|
|||
</table>
|
||||
</td>
|
||||
</table>
|
||||
<h1 align="center">Use Monkeydo</h1>
|
||||
<p>Monkeydo comes as an importable ECMAScript 6 module. In this guide we'll import this directly from a <i>./modules/</i> folder, but any web-accesible location will work.</p>
|
||||
<ol>
|
||||
<li><strong>Import <code>Monkeydo</code> as an ES6 module</strong>
|
||||
<pre lang="js">
|
||||
import { default as Monkeydo } from "./modules/Monkeydo/Monkeydo.mjs";
|
||||
</pre>
|
||||
</li>
|
||||
<li><strong>Define your JS methods in an object</strong>
|
||||
<pre lang="js">
|
||||
const methods = {
|
||||
myJavaScriptMethod: (foo,bar) => {
|
||||
console.log(foo,bar);
|
||||
}
|
||||
}
|
||||
</pre>
|
||||
</li>
|
||||
<li><strong>Define your tasks in a JSON manifest (file or JSON-compatible JavaScript)</strong>
|
||||
<pre lang="json">
|
||||
{
|
||||
"tasks": [
|
||||
[0,"myJavaSriptMethod","Just like a","monkey"],
|
||||
[1200,"myJavaSriptMethod","I've been","dancing"],
|
||||
[160,"myJavaSriptMethod","my whole","life"]
|
||||
]
|
||||
}
|
||||
</pre>
|
||||
</li>
|
||||
<li><strong>Initialize and run <code>Monkeydo</code> with your methods and manifest</strong>
|
||||
<pre lang="js">
|
||||
const monkey = new Monkeydo(methods);
|
||||
monkey.play(manifest);
|
||||
</pre>
|
||||
</li>
|
||||
</ol>
|
||||
<p>The example above would be the same as running:</p>
|
||||
<pre lang="js">
|
||||
console.log("Just like a","monkey"); // Right away
|
||||
console.log("I've been","dancing"); // 1.2 seconds after the first
|
||||
console.log("my whole","life"); // and then 160 milliseconds after the second
|
||||
</pre>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue