From a6e51c1e48ab04a6a6c651b294cc12e6382c4195 Mon Sep 17 00:00:00 2001 From: Victor Westerlund Date: Sun, 26 Dec 2021 12:50:52 +0100 Subject: [PATCH] Update README.md --- README.md | 121 ++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 77 insertions(+), 44 deletions(-) diff --git a/README.md b/README.md index 405499a..ad611c9 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,83 @@

-

Threaded task chaining for JavaScript

+

Multithreaded web animations and task chaining

-

Monkeydo uses the portable data format JSON to read tasks, making it easy to read by primates and machines alike.

+

Execute general purpose JavaScript on cue with greater performance. Monkeydo is great, and designed for, complex DOM animations.

+

+ + + +
+

Monkeydo JSON manifest
View semantics

+
+{
+    "tasks": [
+        [2000,"moveTo",100,0],
+        [1500,"setColor","red"],
+        [2650,"setColor","blue"],
+        [550,"moveTo",350,0]
+    ]
+}
+
+		 +

Normal JavaScript

+
+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);
+    }
+};
+
+
+Open live demo +

Use Monkeydo

+

Monkeydo comes as an ES6 module. In this guide we'll import this directly from a ./modules/ folder, but any location accessible by the importing script will work.

+
    +
  1. Import Monkeydo as an ESM +
    +import { default as Monkeydo } from "./modules/Monkeydo/Monkeydo.mjs";
+
    +
    2. +
  2. Define your JS methods in an object +
    +const methods = {
+  singForMe: (foo,bar) => {
+    console.log(foo,bar);
+  }
+}
+
    +
    3. +
  3. Define your tasks in a JSON manifest (file or JSON-compatible JavaScript) +
    +{
+  "tasks": [
+    [0,"singForMe","Just like a","monkey"],
+    [1200,"singForMe","I've been","dancing"],
+    [160,"singForMe","my whole","life"]
+  ]
+}
+
    +
    4. +
  4. Initialize and run Monkeydo with your methods and manifest +
    +const monkey = new Monkeydo(methods);
+monkey.play(manifest);
+
    +
    5. +
+

The example above would be the same as running:

+
+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
+
+

Manifest Semantics

+

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:

- + @@ -35,44 +109,3 @@ 
@@ -22,7 +96,7 @@
0Delay
Wait this many milliseconds before running this task		Delay
Wait this many milliseconds before running this method
1
-

Use Monkeydo

-

Monkeydo comes as an importable ECMAScript 6 module. In this guide we'll import this directly from a ./modules/ folder, but any web-accesible location will work.

-
    -
  1. Import Monkeydo as an ES6 module -
    -import { default as Monkeydo } from "./modules/Monkeydo/Monkeydo.mjs";
-
    -
    2. -
  2. Define your JS methods in an object -
    -const methods = {
-  myJavaScriptMethod: (foo,bar) => {
-    console.log(foo,bar);
-  }
-}
-
    -
    3. -
  3. Define your tasks in a JSON manifest (file or JSON-compatible JavaScript) -
    -{
-  "tasks": [
-    [0,"myJavaSriptMethod","Just like a","monkey"],
-    [1200,"myJavaSriptMethod","I've been","dancing"],
-    [160,"myJavaSriptMethod","my whole","life"]
-  ]
-}
-
    -
    4. -
  4. Initialize and run Monkeydo with your methods and manifest -
    -const monkey = new Monkeydo(methods);
-monkey.play(manifest);
-
    -
    5. -
-

The example above would be the same as running:

-
-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
-