bump to v8.4.0

KaliedaRik · Feb 2, 2021 · 2302ef0 · 2302ef0
2 parents 363a877 + f099ac5
commit 2302ef0
Show file tree

Hide file tree

Showing 535 changed files with 42,919 additions and 8,318 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # Scrawl-canvas Library 
-Version: `8.3.4 - 6 Jan 2021` 
+Version: `8.4.0 - 2 Feb 2021` 
 
 Scrawl-canvas website: [scrawl-v8.rikweb.org.uk](https://scrawl-v8.rikweb.org.uk).
 
@@ -46,7 +46,7 @@ There are three main ways to include Scrawl-canvas in your project:
 2. Unzip the file to a folder in your project. 
 3. Import the library into the script code where you will be using it.
 
-Alternatively, a zip package of the v8.3.4 files can be downloaded from this link: [scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-3-4.zip](https://scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-3-4.zip) - this package only includes the minified file.
+Alternatively, a zip package of the v8.4.0 files can be downloaded from this link: [scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-4-0.zip](https://scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-4-0.zip) - this package only includes the minified file.
 
 ```html
 <!-- Hello world -->
@@ -95,7 +95,7 @@ Alternatively, a zip package of the v8.3.4 files can be downloaded from this lin
 This will pull the requested npm package directly into your web page:
 ```html
 <script type="module">
-    import scrawl from 'https://unpkg.com/scrawl-canvas@8.3.4';
+    import scrawl from 'https://unpkg.com/scrawl-canvas@8.4.0';
     [...]
 </script>
 ```

diff --git a/demo/canvas-007.html b/demo/canvas-007.html
@@ -13,6 +13,9 @@
     .controls {
       grid-template-columns: 1fr 2fr 1fr 2fr;
     }
+    img {
+      display: none;
+    }
   </style>
 
 </head>
@@ -27,13 +30,20 @@ <h2>Apply filters at the entity, group and cell level</h2>
     <div class="green">
       <select class="controlItem" id="filter">
         <option value="">none</option>
+        <option value="" disabled>---</option>
+        <option value="areaAlpha">areaAlpha</option>
         <option value="blue">blue</option>
         <option value="blur">blur</option>
         <option value="brightness">brightness</option>
         <option value="channels">channels</option>
+        <option value="channelLevels">channelLevels</option>
         <option value="channelstep">channelstep</option>
         <option value="cyan">cyan</option>
         <option value="chroma">chroma</option>
+        <option value="chromakey">chromakey</option>
+        <option value="edgeDetect">edge detect</option>
+        <option value="emboss">emboss</option>
+        <option value="gray">gray</option>
         <option value="grayscale">grayscale</option>
         <option value="green">green</option>
         <option value="invert">invert</option>
@@ -43,16 +53,20 @@ <h2>Apply filters at the entity, group and cell level</h2>
         <option value="notblue">notblue</option>
         <option value="notgreen">notgreen</option>
         <option value="notred">notred</option>
+        <option value="offset">offset</option>
+        <option value="offsetChannels">offsetChannels</option>
         <option value="pixelate">pixelate</option>
         <option value="red">red</option>
         <option value="saturation">saturation</option>
         <option value="sepia">sepia</option>
+        <option value="sharpen">sharpen</option>
         <option value="tint">tint</option>
         <option value="threshold">threshold</option>
         <option value="yellow">yellow</option>
-        <option value="totalRed">User-Defined totalRed</option>
-        <option value="totalRed,pixelate">UD totalRed + pixelate</option>
-        <option value="sepia,venetianBlinds">sepia + UD venetianBlinds</option>
+        <option value="" disabled>---</option>
+        <option value="dropShadow">Drop Shadow</option>
+        <option value="noise">Noise</option>
+        <option value="redBorder">Red Borders</option>
       </select>
     </div>
 
@@ -71,7 +85,7 @@ <h2>Apply filters at the entity, group and cell level</h2>
 
   </div>
 
-  <canvas id="mycanvas" width="400" height="400"></canvas>
+  <canvas id="mycanvas" width="410" height="400"></canvas>
 
   <p id="reportmessage"></p>
 
@@ -95,6 +109,8 @@ <h4>Notes</h4>
     <p><a href="../docs/demo/canvas-007.html">Annotated code</a></p>
   </div>
 
+  <img id="perlin" src="img/perlin-noise-texture.png" class="map" />
+
   <script src="canvas-007.js" type="module"></script>
 
 </body>

diff --git a/demo/canvas-007.js b/demo/canvas-007.js
@@ -8,9 +8,11 @@ import scrawl from '../source/scrawl.js'
 // #### Scene setup
 let canvas = scrawl.library.artefact.mycanvas;
 
+scrawl.importDomImage('.map');
+
 canvas.set({
     fit: 'fill',
-    backgroundColor: 'lightgray',
+    backgroundColor: 'beige',
     css: {
         border: '1px solid black'
     }
@@ -105,8 +107,13 @@ let wheel2 = wheel1.clone({
 
 // Define filters - need to test them all, plus some user-defined filters
 
-// __Grayscale__ filter
+// __Gray__ filter
 scrawl.makeFilter({
+    name: 'gray',
+    method: 'gray',
+
+// __Grayscale__ filter
+}).clone({
     name: 'grayscale',
     method: 'grayscale',
 
@@ -164,6 +171,25 @@ scrawl.makeFilter({
 }).clone({
     name: 'yellow',
     method: 'yellow',
+
+// __Edge detect__ filter
+}).clone({
+    name: 'edgeDetect',
+    method: 'edgeDetect',
+
+// __Sharpen__ filter
+}).clone({
+    name: 'sharpen',
+    method: 'sharpen',
+});
+
+// __Emboss__ filter
+scrawl.makeFilter({
+    name: 'emboss',
+    method: 'emboss',
+    angle: 225,
+    strength: 10,
+    tolerance: 50,
 });
 
 // __Chroma__ (green screen) filter
@@ -230,6 +256,25 @@ scrawl.makeFilter({
     blueInBlue: 0.4,
 });
 
+// __Offset__ filter
+scrawl.makeFilter({
+    name: 'offset',
+    method: 'offset',
+    offsetX: 12,
+    offsetY: 12,
+    opacity: 0.5,
+});
+
+// __Offset Channels__ filter
+scrawl.makeFilter({
+    name: 'offsetChannels',
+    method: 'offsetChannels',
+    offsetRedX: -12,
+    offsetGreenY: 12,
+    offsetBlueX: 3,
+    offsetBlueY: -3,
+});
+
 // __Pixellate__ filter
 scrawl.makeFilter({
     name: 'pixelate',
@@ -244,10 +289,21 @@ scrawl.makeFilter({
 scrawl.makeFilter({
     name: 'blur',
     method: 'blur',
-    radius: 20,
-    shrinkingRadius: true,
-    includeAlpha: true,
-    passes: 3,
+    radius: 6,
+    passes: 2,
+});
+
+// __AreaAlpha__ filter
+scrawl.makeFilter({
+    name: 'areaAlpha',
+    method: 'areaAlpha',
+    tileWidth: 20,
+    tileHeight: 20,
+    gutterWidth: 20,
+    gutterHeight: 20,
+    offsetX: 8,
+    offsetY: 8,
+    areaAlphaLevels: [255, 0, 0, 255],
 });
 
 // __Matrix__ filter
@@ -263,44 +319,111 @@ scrawl.makeFilter({
     weights: [-1, -1, -1, -1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 1],
 });
 
-// First user-defined filter
-let myUDF = scrawl.makeFilter({
-    name: 'totalRed',
-    method: 'userDefined',
-
-    userDefined: `
-        for (let i = 0, iz = cache.length; i < iz; i++) {
-
-            data[cache[i]] = 255;
-        }`,
+// __ChannelLevels__ filter
+scrawl.makeFilter({
+    name: 'channelLevels',
+    method: 'channelLevels',
+    red: [50, 200],
+    green: [60, 220, 150],
+    blue: [40, 180],
+    alpha: [],
 });
 
-// Second user-defined filter (cloned)
-myUDF.clone({
-    name: 'venetianBlinds',
-    level: 9,
-
-    userDefined: `
-        let i, iz, j, jz,
-            level = filter.level || 6,
-            halfLevel = level / 2,
-            yw, transparent, pos;
-
-        for (i = localY, iz = localY + localHeight; i < iz; i++) {
-
-            transparent = (i % level > halfLevel) ? true : false;
+scrawl.makeFilter({
+    name: 'chromakey',
+    method: 'chromakey',
+    red: 0,
+    green: 127,
+    blue: 0,
+    opaqueAt: 0.7,
+    transparentAt: 0.5,
+});
 
-            if (transparent) {
+scrawl.makeFilter({
+    name: 'dropShadow',
+    actions: [
+        {
+            action: 'blur',
+            lineIn: 'source-alpha',
+            lineOut: 'shadow',
+            radius: 2, 
+            passes: 2, 
+            includeRed: false, 
+            includeGreen: false, 
+            includeBlue: false, 
+            includeAlpha: true, 
+        },
+        {
+            action: 'compose',
+            lineIn: 'source',
+            lineMix: 'shadow',
+            offsetX: 6,
+            offsetY: 6,
+        }
+    ],
+});
 
-                yw = (i * iWidth) + 3;
-                
-                for (j = localX, jz = localX + localWidth; j < jz; j ++) {
+scrawl.makeFilter({
+    name: 'redBorder',
+    actions: [
+        {
+            action: 'blur',
+            lineIn: 'source-alpha',
+            lineOut: 'shadow',
+            radius: 3,
+            passes: 2, 
+            includeRed: false, 
+            includeGreen: false, 
+            includeBlue: false, 
+            includeAlpha: true, 
+        },
+        {
+            action: 'binary',
+            lineIn: 'shadow',
+            lineOut: 'shadow',
+            alpha: 1, 
+        },
+        {
+            action: 'flood',
+            lineIn: 'shadow',
+            lineOut: 'red-flood',
+            red: 255,
+        },
+        {
+            action: 'compose',
+            lineIn: 'shadow',
+            lineMix: 'red-flood',
+            lineOut: 'colorized',
+            compose: 'destination-in',
+        },
+        {
+            action: 'compose',
+            lineIn: 'source',
+            lineMix: 'colorized',
+        }
+    ],
+});
 
-                    pos = yw + (j * 4);
-                    data[pos] = 0;
-                }
-            }
-        }`,
+scrawl.makeFilter({
+    name: 'noise',
+    actions: [
+        {
+            action: 'process-image',
+            asset: 'perlin',
+            width: 500,
+            height: 500,
+            copyWidth: 500,
+            copyHeight: 500,
+            lineOut: 'map',
+        },
+        {
+            action: 'displace',
+            lineMix: 'map',
+            scaleX: 20,
+            scaleY: 30,
+            transparentEdges: true,
+        }
+    ],
 });