xmedia-project 0.1.4 → 0.1.5

package/demo/index.html

@@ -51,6 +51,22 @@
 
 <script src="/xmedia/xMediaSDK.js"></script>
 <script>
+    const FILTER_MODULE_LIST = {
+        '': ['background', 'retouch', 'face'],
+        'background/halloween/': ['graveyard', 'hauntedHouse', 'bloodMoon', 'pumpkinPatch', 'darkForest'],
+        'mask/': ['glasses', 'mustache', 'hat', 'costume', 'clown', 'cat', 'pixel', 'image'],
+        'mask/general/': ['flowerCrown', 'bunny', 'tiara', 'hearts', 'butterflies', 'makeup', 'freckles', 'unicorn', 'puppy', 'sparkles'],
+        'mask/witch/': ['witchMakeup', 'witchNose', 'broom', 'magic', 'raven', 'cauldron'],
+        'mask/halloween/': ['pumpkin', 'skull', 'zombie', 'frankenstein', 'ghost', 'mummy', 'witchHat', 'horns', 'fangs', 'blood', 'bats', 'spiderweb'],
+    };
+    for (const [modulePath, moduleNameList] of Object.entries(FILTER_MODULE_LIST)) {
+        for (const moduleName of moduleNameList) {
+            const scriptEl = document.createElement('script');
+            scriptEl.src = `/xmedia/filter/${modulePath}${moduleName}.min.js`;
+            document.head.append(scriptEl);
+        }
+    }
+
     const $ = id => document.getElementById(id);
     const log = (...args) => {
         const line = `${new Date().toISOString().slice(11, 23)} ${args.map(a => typeof a === 'string' ? a : JSON.stringify(a)).join(' ')}`;

package/demo/server.mjs

@@ -100,8 +100,13 @@ const SDK_FILE_MAP = {
     '/xmedia/xMediaSDK.js': {url: import.meta.resolve('xmedia-project/xMediaSDK/xMediaSDK.js'), type: 'text/javascript; charset=utf-8'},
     '/xmedia/xMediaPlayer.css': {url: import.meta.resolve('xmedia-project/sdk/xMediaPlayer.css'), type: 'text/css; charset=utf-8'},
 };
+const getFilterFile = (urlPath) => {
+    const match = urlPath.match(/^\/xmedia\/filter\/([\w/]+\.min\.js)$/);
+    return match && {url: import.meta.resolve(`xmedia-project/xMediaSDK/filter/${match[1]}`), type: 'text/javascript; charset=utf-8'};
+};
 const server = http.createServer((req, res) => {
-    const sdkFile = SDK_FILE_MAP[req.url.split('?')[0]];
+    const urlPath = req.url.split('?')[0];
+    const sdkFile = SDK_FILE_MAP[urlPath] || getFilterFile(urlPath);
     if (sdkFile) {
         fs.readFile(new URL(sdkFile.url), (e, body) => {
             res.writeHead(e ? 404 : 200, {'content-type': sdkFile.type});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xmedia-project",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "xMedia-Project",
   "keywords": [
     "xmedia",
@@ -36,6 +36,7 @@
     "xMediaSDK/xMediaPlayer.css",
     "xMediaSDK/xMediaPlayer.min.css",
     "xMediaSDK/xMediaPlayer.min.css.map",
+    "xMediaSDK/filter",
     "demo/server.mjs",
     "demo/index.html",
     "demo/.env.example",

package/xMediaSDK/filter/background/halloween/bloodMoon.js

@@ -0,0 +1,257 @@
+var xMediaFilterModule = (function (exports) {
+  'use strict';
+
+  var xMediaScene = function(__xMediaFilter, __options, __sceneOptions) {
+
+    var $this = this;
+    var __sceneCanvas;
+    var __sceneCtx;
+    var __personCanvas;
+    var __personCtx;
+    var __sceneData = null;
+
+    this.getOrder = function() {
+      return 10;
+    };
+
+    this.getGroup = function() {
+      return 'background';
+    };
+
+    this.isExclusive = function() {
+      return true;
+    };
+
+    this.getOptions = function() {
+      return __options;
+    };
+
+    this.setOptions = function(options) {
+      for(var key in options){
+        if(options.hasOwnProperty(key)){
+          __options[key] = options[key];
+        }
+      }
+    };
+
+    this.load = function() {
+      return __xMediaFilter.loadSegmenter().then(function() {
+        return $this;
+      });
+    };
+
+    this.process = function(frame) {
+      var person = __xMediaFilter.segmentPerson(frame);
+      if(!person){
+        return;
+      }
+      var width = frame['width'];
+      var height = frame['height'];
+      var ctx = frame['ctx'];
+      if(__sceneCanvas.width !== width || __sceneCanvas.height !== height || !__sceneData){
+        __xMediaFilter.resizeCanvas(__sceneCanvas, width, height);
+        __sceneData = __sceneOptions['drawStatic'](__sceneCtx, width, height, xMediaScene.createRandom(__sceneOptions['seed'] || 7)) || {};
+      }
+      __xMediaFilter.resizeCanvas(__personCanvas, width, height);
+      __personCtx.globalCompositeOperation = 'copy';
+      __personCtx.drawImage(person['canvas'], 0, 0, width, height);
+      __personCtx.globalCompositeOperation = 'source-in';
+      __personCtx.drawImage(frame['canvas'], 0, 0);
+      ctx.globalCompositeOperation = 'copy';
+      ctx.drawImage(__sceneCanvas, 0, 0);
+      ctx.globalCompositeOperation = 'source-over';
+      if(__sceneOptions['drawBack']){
+        ctx.save();
+        __sceneOptions['drawBack'](ctx, width, height, frame['timestamp'], __sceneData);
+        ctx.restore();
+      }
+      ctx.drawImage(__personCanvas, 0, 0);
+      if(__sceneOptions['drawFront']){
+        ctx.save();
+        __sceneOptions['drawFront'](ctx, width, height, frame['timestamp'], __sceneData);
+        ctx.restore();
+      }
+    };
+
+    this.destroy = function() {
+      __sceneData = null;
+    };
+
+    (function() {
+      __options = __options || {};
+      __sceneCanvas = __xMediaFilter.createCanvas();
+      __sceneCtx = __sceneCanvas.getContext('2d');
+      __personCanvas = __xMediaFilter.createCanvas();
+      __personCtx = __personCanvas.getContext('2d');
+    })();
+  };
+
+  xMediaScene.createRandom = function(seed) {
+    var value = seed % 2147483647 || 1;
+    return function() {
+      value = value * 16807 % 2147483647;
+      return (value - 1) / 2147483646;
+    };
+  };
+
+  xMediaScene.fillSky = function(ctx, width, height, colorList) {
+    var gradient = ctx.createLinearGradient(0, 0, 0, height);
+    for(var i = 0; i < colorList.length; i++){
+      gradient.addColorStop(i / (colorList.length - 1), colorList[i]);
+    }
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, width, height);
+  };
+
+  xMediaScene.drawStars = function(ctx, width, height, random, count) {
+    for(var i = 0; i < count; i++){
+      ctx.fillStyle = 'rgba(255, 255, 255, ' + (0.3 + random() * 0.7) + ')';
+      ctx.fillRect(random() * width, random() * height * 0.6, random() < 0.9 ? 1 : 2, 1 + (random() < 0.1 ? 1 : 0));
+    }
+  };
+
+  xMediaScene.drawMoon = function(ctx, x, y, radius, color, glowColor) {
+    var glow = ctx.createRadialGradient(x, y, radius * 0.8, x, y, radius * 3);
+    glow.addColorStop(0, glowColor);
+    glow.addColorStop(1, 'rgba(0, 0, 0, 0)');
+    ctx.fillStyle = glow;
+    ctx.fillRect(x - radius * 3, y - radius * 3, radius * 6, radius * 6);
+    var body = ctx.createRadialGradient(x - radius * 0.3, y - radius * 0.3, radius * 0.1, x, y, radius);
+    body.addColorStop(0, '#ffffff');
+    body.addColorStop(0.35, color);
+    body.addColorStop(1, color);
+    ctx.fillStyle = body;
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.08)';
+    var craterList = [[-0.3, -0.2, 0.18], [0.25, 0.1, 0.22], [-0.1, 0.4, 0.12], [0.35, -0.35, 0.1]];
+    for(var i = 0; i < craterList.length; i++){
+      ctx.beginPath();
+      ctx.arc(x + craterList[i][0] * radius, y + craterList[i][1] * radius, craterList[i][2] * radius, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  };
+
+  xMediaScene.drawTree = function(ctx, x, y, length, angle, width, depth, random) {
+    var endX = x + Math.cos(angle) * length;
+    var endY = y + Math.sin(angle) * length;
+    ctx.lineWidth = width;
+    ctx.lineCap = 'round';
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.quadraticCurveTo(x + Math.cos(angle + 0.3) * length * 0.5, y + Math.sin(angle + 0.3) * length * 0.5, endX, endY);
+    ctx.stroke();
+    if(depth <= 0){
+      return;
+    }
+    var branchCount = 2 + Math.floor(random() * 2);
+    for(var i = 0; i < branchCount; i++){
+      xMediaScene.drawTree(ctx, endX, endY, length * (0.55 + random() * 0.2), angle + (random() - 0.5) * 1.4, width * 0.62, depth - 1, random);
+    }
+  };
+
+  xMediaScene.drawBat = function(ctx, x, y, size, flap) {
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.scale(size, size);
+    ctx.beginPath();
+    for(var side = -1; side <= 1; side += 2){
+      ctx.moveTo(0, 0);
+      ctx.quadraticCurveTo(side * 0.4, -0.5 * flap - 0.1, side * 1, -0.3 * flap);
+      ctx.quadraticCurveTo(side * 0.7, -0.05, side * 0.55, 0.15);
+      ctx.quadraticCurveTo(side * 0.35, 0, side * 0.15, 0.15);
+      ctx.closePath();
+    }
+    ctx.ellipse(0, 0.05, 0.12, 0.2, 0, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.restore();
+  };
+
+  xMediaScene.drawFog = function(ctx, width, height, time, y, color, count, speed) {
+    for(var i = 0; i < count; i++){
+      var radius = width * (0.18 + (i % 3) * 0.06);
+      var x = ((i * 0.37 + time * speed / width * (1 + (i % 2) * 0.5)) % 1.4 - 0.2) * width;
+      var fogY = y + Math.sin(time / 2000 + i) * height * 0.02;
+      var gradient = ctx.createRadialGradient(x, fogY, 0, x, fogY, radius);
+      gradient.addColorStop(0, color);
+      gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
+      ctx.fillStyle = gradient;
+      ctx.fillRect(x - radius, fogY - radius, radius * 2, radius * 2);
+    }
+  };
+
+  xMediaScene.createModule = function(name, SceneClass, info) {
+    return {
+      'name': 'background/' + (info['category'] ? info['category'] + '/' : '') + name,
+      'filterList': [{'name': name, 'category': 'background', 'title': info['title'], 'icon': info['icon'], 'filterClass': SceneClass}],
+      'dependencyList': []
+    };
+  };
+
+  var _drawStatic = function(ctx, width, height, random) {
+    xMediaScene.fillSky(ctx, width, height, ['#140003', '#3a0006', '#6e0b0b', '#2a0204']);
+    xMediaScene.drawStars(ctx, width, height * 0.6, random, Math.round(width * height / 8000));
+    xMediaScene.drawMoon(ctx, width * 0.3, height * 0.34, height * 0.22, '#c8261a', 'rgba(255, 40, 20, 0.35)');
+    ctx.strokeStyle = '#080102';
+    ctx.fillStyle = '#080102';
+    xMediaScene.drawTree(ctx, width * 0.06, height * 1.02, height * 0.3, -Math.PI / 2 + 0.15, height * 0.045, 5, random);
+    xMediaScene.drawTree(ctx, width * 0.95, height * 1.02, height * 0.28, -Math.PI / 2 - 0.2, height * 0.04, 5, random);
+    ctx.beginPath();
+    ctx.moveTo(0, height);
+    for(var x = 0; x <= width; x += width / 24){
+      ctx.lineTo(x, height * (0.9 + Math.sin(x / width * 11) * 0.02 + random() * 0.015));
+    }
+    ctx.lineTo(width, height);
+    ctx.closePath();
+    ctx.fill();
+    var crowList = [[0.12, 0.52], [0.86, 0.5], [0.9, 0.62]];
+    for(var i = 0; i < crowList.length; i++){
+      var crowX = crowList[i][0] * width;
+      var crowY = crowList[i][1] * height;
+      var size = height * 0.02;
+      ctx.beginPath();
+      ctx.ellipse(crowX, crowY, size, size * 0.7, -0.3, 0, Math.PI * 2);
+      ctx.arc(crowX + size * 0.9, crowY - size * 0.7, size * 0.45, 0, Math.PI * 2);
+      ctx.moveTo(crowX + size * 1.3, crowY - size * 0.8);
+      ctx.lineTo(crowX + size * 1.8, crowY - size * 0.6);
+      ctx.lineTo(crowX + size * 1.3, crowY - size * 0.5);
+      ctx.moveTo(crowX - size * 0.8, crowY);
+      ctx.lineTo(crowX - size * 1.8, crowY + size * 0.6);
+      ctx.lineTo(crowX - size * 0.6, crowY + size * 0.5);
+      ctx.fill();
+    }
+    return {};
+  };
+
+  var _drawBack = function(ctx, width, height, time) {
+    for(var i = 0; i < 5; i++){
+      var x = ((i * 0.27 + time / 60000 * (1 + i * 0.2)) % 1.5 - 0.25) * width;
+      var y = height * (0.12 + i * 0.09);
+      var gradient = ctx.createRadialGradient(x, y, 0, x, y, width * 0.22);
+      gradient.addColorStop(0, 'rgba(20, 0, 2, 0.75)');
+      gradient.addColorStop(1, 'rgba(20, 0, 2, 0)');
+      ctx.fillStyle = gradient;
+      ctx.save();
+      ctx.translate(x, y);
+      ctx.scale(1, 0.3);
+      ctx.translate(-x, -y);
+      ctx.fillRect(x - width * 0.22, y - width * 0.22, width * 0.44, width * 0.44);
+      ctx.restore();
+    }
+    xMediaScene.drawFog(ctx, width, height, time, height * 0.95, 'rgba(160, 10, 10, 0.18)', 5, 0.015);
+  };
+
+  var xMediaBloodMoonScene = function(__xMediaFilter, __options) {
+    xMediaScene.call(this, __xMediaFilter, __options, {'seed': 31, 'drawStatic': _drawStatic, 'drawBack': _drawBack});
+  };
+
+  var filterModule = xMediaScene.createModule('bloodMoon', xMediaBloodMoonScene, {'title': 'Blood moon', 'icon': '🌕', 'category': 'halloween'});
+
+  exports.filterModule = filterModule;
+  exports.xMediaBloodMoonScene = xMediaBloodMoonScene;
+
+  return exports;
+
+})({});
+window.xMediaFilter ? window.xMediaFilter.registerModule(xMediaFilterModule.filterModule) : (window.xMediaFilterModuleList = window.xMediaFilterModuleList || []).push(xMediaFilterModule.filterModule);

package/xMediaSDK/filter/background/halloween/bloodMoon.min.js

@@ -0,0 +1 @@
+var xMediaFilterModule=function(e){"use strict";var t=function(e,a,r){var o,i,n,l,d=this,c=null;this.getOrder=function(){return 10},this.getGroup=function(){return"background"},this.isExclusive=function(){return!0},this.getOptions=function(){return a},this.setOptions=function(e){for(var t in e)e.hasOwnProperty(t)&&(a[t]=e[t])},this.load=function(){return e.loadSegmenter().then(function(){return d})},this.process=function(a){var d=e.segmentPerson(a);if(d){var s=a.width,f=a.height,u=a.ctx;o.width===s&&o.height===f&&c||(e.resizeCanvas(o,s,f),c=r.drawStatic(i,s,f,t.createRandom(r.seed||7))||{}),e.resizeCanvas(n,s,f),l.globalCompositeOperation="copy",l.drawImage(d.canvas,0,0,s,f),l.globalCompositeOperation="source-in",l.drawImage(a.canvas,0,0),u.globalCompositeOperation="copy",u.drawImage(o,0,0),u.globalCompositeOperation="source-over",r.drawBack&&(u.save(),r.drawBack(u,s,f,a.timestamp,c),u.restore()),u.drawImage(n,0,0),r.drawFront&&(u.save(),r.drawFront(u,s,f,a.timestamp,c),u.restore())}},this.destroy=function(){c=null},a=a||{},o=e.createCanvas(),i=o.getContext("2d"),n=e.createCanvas(),l=n.getContext("2d")};t.createRandom=function(e){var t=e%2147483647||1;return function(){return((t=16807*t%2147483647)-1)/2147483646}},t.fillSky=function(e,t,a,r){for(var o=e.createLinearGradient(0,0,0,a),i=0;i<r.length;i++)o.addColorStop(i/(r.length-1),r[i]);e.fillStyle=o,e.fillRect(0,0,t,a)},t.drawStars=function(e,t,a,r,o){for(var i=0;i<o;i++)e.fillStyle="rgba(255, 255, 255, "+(.3+.7*r())+")",e.fillRect(r()*t,r()*a*.6,r()<.9?1:2,1+(r()<.1?1:0))},t.drawMoon=function(e,t,a,r,o,i){var n=e.createRadialGradient(t,a,.8*r,t,a,3*r);n.addColorStop(0,i),n.addColorStop(1,"rgba(0, 0, 0, 0)"),e.fillStyle=n,e.fillRect(t-3*r,a-3*r,6*r,6*r);var l=e.createRadialGradient(t-.3*r,a-.3*r,.1*r,t,a,r);l.addColorStop(0,"#ffffff"),l.addColorStop(.35,o),l.addColorStop(1,o),e.fillStyle=l,e.beginPath(),e.arc(t,a,r,0,2*Math.PI),e.fill(),e.fillStyle="rgba(0, 0, 0, 0.08)";for(var d=[[-.3,-.2,.18],[.25,.1,.22],[-.1,.4,.12],[.35,-.35,.1]],c=0;c<d.length;c++)e.beginPath(),e.arc(t+d[c][0]*r,a+d[c][1]*r,d[c][2]*r,0,2*Math.PI),e.fill()},t.drawTree=function(e,a,r,o,i,n,l,d){var c=a+Math.cos(i)*o,s=r+Math.sin(i)*o;if(e.lineWidth=n,e.lineCap="round",e.beginPath(),e.moveTo(a,r),e.quadraticCurveTo(a+Math.cos(i+.3)*o*.5,r+Math.sin(i+.3)*o*.5,c,s),e.stroke(),!(l<=0))for(var f=2+Math.floor(2*d()),u=0;u<f;u++)t.drawTree(e,c,s,o*(.55+.2*d()),i+1.4*(d()-.5),.62*n,l-1,d)},t.drawBat=function(e,t,a,r,o){e.save(),e.translate(t,a),e.scale(r,r),e.beginPath();for(var i=-1;i<=1;i+=2)e.moveTo(0,0),e.quadraticCurveTo(.4*i,-.5*o-.1,1*i,-.3*o),e.quadraticCurveTo(.7*i,-.05,.55*i,.15),e.quadraticCurveTo(.35*i,0,.15*i,.15),e.closePath();e.ellipse(0,.05,.12,.2,0,0,2*Math.PI),e.fill(),e.restore()},t.drawFog=function(e,t,a,r,o,i,n,l){for(var d=0;d<n;d++){var c=t*(.18+d%3*.06),s=((.37*d+r*l/t*(1+d%2*.5))%1.4-.2)*t,f=o+Math.sin(r/2e3+d)*a*.02,u=e.createRadialGradient(s,f,0,s,f,c);u.addColorStop(0,i),u.addColorStop(1,"rgba(0, 0, 0, 0)"),e.fillStyle=u,e.fillRect(s-c,f-c,2*c,2*c)}},t.createModule=function(e,t,a){return{name:"background/"+(a.category?a.category+"/":"")+e,filterList:[{name:e,category:"background",title:a.title,icon:a.icon,filterClass:t}],dependencyList:[]}};var a=function(e,a,r,o){t.fillSky(e,a,r,["#140003","#3a0006","#6e0b0b","#2a0204"]),t.drawStars(e,a,.6*r,o,Math.round(a*r/8e3)),t.drawMoon(e,.3*a,.34*r,.22*r,"#c8261a","rgba(255, 40, 20, 0.35)"),e.strokeStyle="#080102",e.fillStyle="#080102",t.drawTree(e,.06*a,1.02*r,.3*r,-Math.PI/2+.15,.045*r,5,o),t.drawTree(e,.95*a,1.02*r,.28*r,-Math.PI/2-.2,.04*r,5,o),e.beginPath(),e.moveTo(0,r);for(var i=0;i<=a;i+=a/24)e.lineTo(i,r*(.9+.02*Math.sin(i/a*11)+.015*o()));e.lineTo(a,r),e.closePath(),e.fill();for(var n=[[.12,.52],[.86,.5],[.9,.62]],l=0;l<n.length;l++){var d=n[l][0]*a,c=n[l][1]*r,s=.02*r;e.beginPath(),e.ellipse(d,c,s,.7*s,-.3,0,2*Math.PI),e.arc(d+.9*s,c-.7*s,.45*s,0,2*Math.PI),e.moveTo(d+1.3*s,c-.8*s),e.lineTo(d+1.8*s,c-.6*s),e.lineTo(d+1.3*s,c-.5*s),e.moveTo(d-.8*s,c),e.lineTo(d-1.8*s,c+.6*s),e.lineTo(d-.6*s,c+.5*s),e.fill()}return{}},r=function(e,a,r,o){for(var i=0;i<5;i++){var n=((.27*i+o/6e4*(1+.2*i))%1.5-.25)*a,l=r*(.12+.09*i),d=e.createRadialGradient(n,l,0,n,l,.22*a);d.addColorStop(0,"rgba(20, 0, 2, 0.75)"),d.addColorStop(1,"rgba(20, 0, 2, 0)"),e.fillStyle=d,e.save(),e.translate(n,l),e.scale(1,.3),e.translate(-n,-l),e.fillRect(n-.22*a,l-.22*a,.44*a,.44*a),e.restore()}t.drawFog(e,a,r,o,.95*r,"rgba(160, 10, 10, 0.18)",5,.015)},o=function(e,o){t.call(this,e,o,{seed:31,drawStatic:a,drawBack:r})},i=t.createModule("bloodMoon",o,{title:"Blood moon",icon:"\ud83c\udf15",category:"halloween"});return e.filterModule=i,e.xMediaBloodMoonScene=o,e}({});window.xMediaFilter?window.xMediaFilter.registerModule(xMediaFilterModule.filterModule):(window.xMediaFilterModuleList=window.xMediaFilterModuleList||[]).push(xMediaFilterModule.filterModule);

package/xMediaSDK/filter/background/halloween/bloodMoon.min.mjs

@@ -0,0 +1 @@
+var a=function(t,e,r){var o,n,i,l,d=this,c=null;this.getOrder=function(){return 10},this.getGroup=function(){return"background"},this.isExclusive=function(){return!0},this.getOptions=function(){return e},this.setOptions=function(a){for(var t in a)a.hasOwnProperty(t)&&(e[t]=a[t])},this.load=function(){return t.loadSegmenter().then(function(){return d})},this.process=function(e){var d=t.segmentPerson(e);if(d){var s=e.width,f=e.height,u=e.ctx;o.width===s&&o.height===f&&c||(t.resizeCanvas(o,s,f),c=r.drawStatic(n,s,f,a.createRandom(r.seed||7))||{}),t.resizeCanvas(i,s,f),l.globalCompositeOperation="copy",l.drawImage(d.canvas,0,0,s,f),l.globalCompositeOperation="source-in",l.drawImage(e.canvas,0,0),u.globalCompositeOperation="copy",u.drawImage(o,0,0),u.globalCompositeOperation="source-over",r.drawBack&&(u.save(),r.drawBack(u,s,f,e.timestamp,c),u.restore()),u.drawImage(i,0,0),r.drawFront&&(u.save(),r.drawFront(u,s,f,e.timestamp,c),u.restore())}},this.destroy=function(){c=null},e=e||{},o=t.createCanvas(),n=o.getContext("2d"),i=t.createCanvas(),l=i.getContext("2d")};a.createRandom=function(a){var t=a%2147483647||1;return function(){return((t=16807*t%2147483647)-1)/2147483646}},a.fillSky=function(a,t,e,r){for(var o=a.createLinearGradient(0,0,0,e),n=0;n<r.length;n++)o.addColorStop(n/(r.length-1),r[n]);a.fillStyle=o,a.fillRect(0,0,t,e)},a.drawStars=function(a,t,e,r,o){for(var n=0;n<o;n++)a.fillStyle="rgba(255, 255, 255, "+(.3+.7*r())+")",a.fillRect(r()*t,r()*e*.6,r()<.9?1:2,1+(r()<.1?1:0))},a.drawMoon=function(a,t,e,r,o,n){var i=a.createRadialGradient(t,e,.8*r,t,e,3*r);i.addColorStop(0,n),i.addColorStop(1,"rgba(0, 0, 0, 0)"),a.fillStyle=i,a.fillRect(t-3*r,e-3*r,6*r,6*r);var l=a.createRadialGradient(t-.3*r,e-.3*r,.1*r,t,e,r);l.addColorStop(0,"#ffffff"),l.addColorStop(.35,o),l.addColorStop(1,o),a.fillStyle=l,a.beginPath(),a.arc(t,e,r,0,2*Math.PI),a.fill(),a.fillStyle="rgba(0, 0, 0, 0.08)";for(var d=[[-.3,-.2,.18],[.25,.1,.22],[-.1,.4,.12],[.35,-.35,.1]],c=0;c<d.length;c++)a.beginPath(),a.arc(t+d[c][0]*r,e+d[c][1]*r,d[c][2]*r,0,2*Math.PI),a.fill()},a.drawTree=function(t,e,r,o,n,i,l,d){var c=e+Math.cos(n)*o,s=r+Math.sin(n)*o;if(t.lineWidth=i,t.lineCap="round",t.beginPath(),t.moveTo(e,r),t.quadraticCurveTo(e+Math.cos(n+.3)*o*.5,r+Math.sin(n+.3)*o*.5,c,s),t.stroke(),!(l<=0))for(var f=2+Math.floor(2*d()),u=0;u<f;u++)a.drawTree(t,c,s,o*(.55+.2*d()),n+1.4*(d()-.5),.62*i,l-1,d)},a.drawBat=function(a,t,e,r,o){a.save(),a.translate(t,e),a.scale(r,r),a.beginPath();for(var n=-1;n<=1;n+=2)a.moveTo(0,0),a.quadraticCurveTo(.4*n,-.5*o-.1,1*n,-.3*o),a.quadraticCurveTo(.7*n,-.05,.55*n,.15),a.quadraticCurveTo(.35*n,0,.15*n,.15),a.closePath();a.ellipse(0,.05,.12,.2,0,0,2*Math.PI),a.fill(),a.restore()},a.drawFog=function(a,t,e,r,o,n,i,l){for(var d=0;d<i;d++){var c=t*(.18+d%3*.06),s=((.37*d+r*l/t*(1+d%2*.5))%1.4-.2)*t,f=o+Math.sin(r/2e3+d)*e*.02,u=a.createRadialGradient(s,f,0,s,f,c);u.addColorStop(0,n),u.addColorStop(1,"rgba(0, 0, 0, 0)"),a.fillStyle=u,a.fillRect(s-c,f-c,2*c,2*c)}},a.createModule=function(a,t,e){return{name:"background/"+(e.category?e.category+"/":"")+a,filterList:[{name:a,category:"background",title:e.title,icon:e.icon,filterClass:t}],dependencyList:[]}};var t=function(t,e,r,o){a.fillSky(t,e,r,["#140003","#3a0006","#6e0b0b","#2a0204"]),a.drawStars(t,e,.6*r,o,Math.round(e*r/8e3)),a.drawMoon(t,.3*e,.34*r,.22*r,"#c8261a","rgba(255, 40, 20, 0.35)"),t.strokeStyle="#080102",t.fillStyle="#080102",a.drawTree(t,.06*e,1.02*r,.3*r,-Math.PI/2+.15,.045*r,5,o),a.drawTree(t,.95*e,1.02*r,.28*r,-Math.PI/2-.2,.04*r,5,o),t.beginPath(),t.moveTo(0,r);for(var n=0;n<=e;n+=e/24)t.lineTo(n,r*(.9+.02*Math.sin(n/e*11)+.015*o()));t.lineTo(e,r),t.closePath(),t.fill();for(var i=[[.12,.52],[.86,.5],[.9,.62]],l=0;l<i.length;l++){var d=i[l][0]*e,c=i[l][1]*r,s=.02*r;t.beginPath(),t.ellipse(d,c,s,.7*s,-.3,0,2*Math.PI),t.arc(d+.9*s,c-.7*s,.45*s,0,2*Math.PI),t.moveTo(d+1.3*s,c-.8*s),t.lineTo(d+1.8*s,c-.6*s),t.lineTo(d+1.3*s,c-.5*s),t.moveTo(d-.8*s,c),t.lineTo(d-1.8*s,c+.6*s),t.lineTo(d-.6*s,c+.5*s),t.fill()}return{}},e=function(t,e,r,o){for(var n=0;n<5;n++){var i=((.27*n+o/6e4*(1+.2*n))%1.5-.25)*e,l=r*(.12+.09*n),d=t.createRadialGradient(i,l,0,i,l,.22*e);d.addColorStop(0,"rgba(20, 0, 2, 0.75)"),d.addColorStop(1,"rgba(20, 0, 2, 0)"),t.fillStyle=d,t.save(),t.translate(i,l),t.scale(1,.3),t.translate(-i,-l),t.fillRect(i-.22*e,l-.22*e,.44*e,.44*e),t.restore()}a.drawFog(t,e,r,o,.95*r,"rgba(160, 10, 10, 0.18)",5,.015)},r=function(r,o){a.call(this,r,o,{seed:31,drawStatic:t,drawBack:e})},o=a.createModule("bloodMoon",r,{title:"Blood moon",icon:"\ud83c\udf15",category:"halloween"});export{o as filterModule,r as xMediaBloodMoonScene};

package/xMediaSDK/filter/background/halloween/bloodMoon.mjs

@@ -0,0 +1,248 @@
+var xMediaScene = function(__xMediaFilter, __options, __sceneOptions) {
+
+  var $this = this;
+  var __sceneCanvas;
+  var __sceneCtx;
+  var __personCanvas;
+  var __personCtx;
+  var __sceneData = null;
+
+  this.getOrder = function() {
+    return 10;
+  };
+
+  this.getGroup = function() {
+    return 'background';
+  };
+
+  this.isExclusive = function() {
+    return true;
+  };
+
+  this.getOptions = function() {
+    return __options;
+  };
+
+  this.setOptions = function(options) {
+    for(var key in options){
+      if(options.hasOwnProperty(key)){
+        __options[key] = options[key];
+      }
+    }
+  };
+
+  this.load = function() {
+    return __xMediaFilter.loadSegmenter().then(function() {
+      return $this;
+    });
+  };
+
+  this.process = function(frame) {
+    var person = __xMediaFilter.segmentPerson(frame);
+    if(!person){
+      return;
+    }
+    var width = frame['width'];
+    var height = frame['height'];
+    var ctx = frame['ctx'];
+    if(__sceneCanvas.width !== width || __sceneCanvas.height !== height || !__sceneData){
+      __xMediaFilter.resizeCanvas(__sceneCanvas, width, height);
+      __sceneData = __sceneOptions['drawStatic'](__sceneCtx, width, height, xMediaScene.createRandom(__sceneOptions['seed'] || 7)) || {};
+    }
+    __xMediaFilter.resizeCanvas(__personCanvas, width, height);
+    __personCtx.globalCompositeOperation = 'copy';
+    __personCtx.drawImage(person['canvas'], 0, 0, width, height);
+    __personCtx.globalCompositeOperation = 'source-in';
+    __personCtx.drawImage(frame['canvas'], 0, 0);
+    ctx.globalCompositeOperation = 'copy';
+    ctx.drawImage(__sceneCanvas, 0, 0);
+    ctx.globalCompositeOperation = 'source-over';
+    if(__sceneOptions['drawBack']){
+      ctx.save();
+      __sceneOptions['drawBack'](ctx, width, height, frame['timestamp'], __sceneData);
+      ctx.restore();
+    }
+    ctx.drawImage(__personCanvas, 0, 0);
+    if(__sceneOptions['drawFront']){
+      ctx.save();
+      __sceneOptions['drawFront'](ctx, width, height, frame['timestamp'], __sceneData);
+      ctx.restore();
+    }
+  };
+
+  this.destroy = function() {
+    __sceneData = null;
+  };
+
+  (function() {
+    __options = __options || {};
+    __sceneCanvas = __xMediaFilter.createCanvas();
+    __sceneCtx = __sceneCanvas.getContext('2d');
+    __personCanvas = __xMediaFilter.createCanvas();
+    __personCtx = __personCanvas.getContext('2d');
+  })();
+};
+
+xMediaScene.createRandom = function(seed) {
+  var value = seed % 2147483647 || 1;
+  return function() {
+    value = value * 16807 % 2147483647;
+    return (value - 1) / 2147483646;
+  };
+};
+
+xMediaScene.fillSky = function(ctx, width, height, colorList) {
+  var gradient = ctx.createLinearGradient(0, 0, 0, height);
+  for(var i = 0; i < colorList.length; i++){
+    gradient.addColorStop(i / (colorList.length - 1), colorList[i]);
+  }
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, width, height);
+};
+
+xMediaScene.drawStars = function(ctx, width, height, random, count) {
+  for(var i = 0; i < count; i++){
+    ctx.fillStyle = 'rgba(255, 255, 255, ' + (0.3 + random() * 0.7) + ')';
+    ctx.fillRect(random() * width, random() * height * 0.6, random() < 0.9 ? 1 : 2, 1 + (random() < 0.1 ? 1 : 0));
+  }
+};
+
+xMediaScene.drawMoon = function(ctx, x, y, radius, color, glowColor) {
+  var glow = ctx.createRadialGradient(x, y, radius * 0.8, x, y, radius * 3);
+  glow.addColorStop(0, glowColor);
+  glow.addColorStop(1, 'rgba(0, 0, 0, 0)');
+  ctx.fillStyle = glow;
+  ctx.fillRect(x - radius * 3, y - radius * 3, radius * 6, radius * 6);
+  var body = ctx.createRadialGradient(x - radius * 0.3, y - radius * 0.3, radius * 0.1, x, y, radius);
+  body.addColorStop(0, '#ffffff');
+  body.addColorStop(0.35, color);
+  body.addColorStop(1, color);
+  ctx.fillStyle = body;
+  ctx.beginPath();
+  ctx.arc(x, y, radius, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.08)';
+  var craterList = [[-0.3, -0.2, 0.18], [0.25, 0.1, 0.22], [-0.1, 0.4, 0.12], [0.35, -0.35, 0.1]];
+  for(var i = 0; i < craterList.length; i++){
+    ctx.beginPath();
+    ctx.arc(x + craterList[i][0] * radius, y + craterList[i][1] * radius, craterList[i][2] * radius, 0, Math.PI * 2);
+    ctx.fill();
+  }
+};
+
+xMediaScene.drawTree = function(ctx, x, y, length, angle, width, depth, random) {
+  var endX = x + Math.cos(angle) * length;
+  var endY = y + Math.sin(angle) * length;
+  ctx.lineWidth = width;
+  ctx.lineCap = 'round';
+  ctx.beginPath();
+  ctx.moveTo(x, y);
+  ctx.quadraticCurveTo(x + Math.cos(angle + 0.3) * length * 0.5, y + Math.sin(angle + 0.3) * length * 0.5, endX, endY);
+  ctx.stroke();
+  if(depth <= 0){
+    return;
+  }
+  var branchCount = 2 + Math.floor(random() * 2);
+  for(var i = 0; i < branchCount; i++){
+    xMediaScene.drawTree(ctx, endX, endY, length * (0.55 + random() * 0.2), angle + (random() - 0.5) * 1.4, width * 0.62, depth - 1, random);
+  }
+};
+
+xMediaScene.drawBat = function(ctx, x, y, size, flap) {
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.scale(size, size);
+  ctx.beginPath();
+  for(var side = -1; side <= 1; side += 2){
+    ctx.moveTo(0, 0);
+    ctx.quadraticCurveTo(side * 0.4, -0.5 * flap - 0.1, side * 1, -0.3 * flap);
+    ctx.quadraticCurveTo(side * 0.7, -0.05, side * 0.55, 0.15);
+    ctx.quadraticCurveTo(side * 0.35, 0, side * 0.15, 0.15);
+    ctx.closePath();
+  }
+  ctx.ellipse(0, 0.05, 0.12, 0.2, 0, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.restore();
+};
+
+xMediaScene.drawFog = function(ctx, width, height, time, y, color, count, speed) {
+  for(var i = 0; i < count; i++){
+    var radius = width * (0.18 + (i % 3) * 0.06);
+    var x = ((i * 0.37 + time * speed / width * (1 + (i % 2) * 0.5)) % 1.4 - 0.2) * width;
+    var fogY = y + Math.sin(time / 2000 + i) * height * 0.02;
+    var gradient = ctx.createRadialGradient(x, fogY, 0, x, fogY, radius);
+    gradient.addColorStop(0, color);
+    gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
+    ctx.fillStyle = gradient;
+    ctx.fillRect(x - radius, fogY - radius, radius * 2, radius * 2);
+  }
+};
+
+xMediaScene.createModule = function(name, SceneClass, info) {
+  return {
+    'name': 'background/' + (info['category'] ? info['category'] + '/' : '') + name,
+    'filterList': [{'name': name, 'category': 'background', 'title': info['title'], 'icon': info['icon'], 'filterClass': SceneClass}],
+    'dependencyList': []
+  };
+};
+
+var _drawStatic = function(ctx, width, height, random) {
+  xMediaScene.fillSky(ctx, width, height, ['#140003', '#3a0006', '#6e0b0b', '#2a0204']);
+  xMediaScene.drawStars(ctx, width, height * 0.6, random, Math.round(width * height / 8000));
+  xMediaScene.drawMoon(ctx, width * 0.3, height * 0.34, height * 0.22, '#c8261a', 'rgba(255, 40, 20, 0.35)');
+  ctx.strokeStyle = '#080102';
+  ctx.fillStyle = '#080102';
+  xMediaScene.drawTree(ctx, width * 0.06, height * 1.02, height * 0.3, -Math.PI / 2 + 0.15, height * 0.045, 5, random);
+  xMediaScene.drawTree(ctx, width * 0.95, height * 1.02, height * 0.28, -Math.PI / 2 - 0.2, height * 0.04, 5, random);
+  ctx.beginPath();
+  ctx.moveTo(0, height);
+  for(var x = 0; x <= width; x += width / 24){
+    ctx.lineTo(x, height * (0.9 + Math.sin(x / width * 11) * 0.02 + random() * 0.015));
+  }
+  ctx.lineTo(width, height);
+  ctx.closePath();
+  ctx.fill();
+  var crowList = [[0.12, 0.52], [0.86, 0.5], [0.9, 0.62]];
+  for(var i = 0; i < crowList.length; i++){
+    var crowX = crowList[i][0] * width;
+    var crowY = crowList[i][1] * height;
+    var size = height * 0.02;
+    ctx.beginPath();
+    ctx.ellipse(crowX, crowY, size, size * 0.7, -0.3, 0, Math.PI * 2);
+    ctx.arc(crowX + size * 0.9, crowY - size * 0.7, size * 0.45, 0, Math.PI * 2);
+    ctx.moveTo(crowX + size * 1.3, crowY - size * 0.8);
+    ctx.lineTo(crowX + size * 1.8, crowY - size * 0.6);
+    ctx.lineTo(crowX + size * 1.3, crowY - size * 0.5);
+    ctx.moveTo(crowX - size * 0.8, crowY);
+    ctx.lineTo(crowX - size * 1.8, crowY + size * 0.6);
+    ctx.lineTo(crowX - size * 0.6, crowY + size * 0.5);
+    ctx.fill();
+  }
+  return {};
+};
+
+var _drawBack = function(ctx, width, height, time) {
+  for(var i = 0; i < 5; i++){
+    var x = ((i * 0.27 + time / 60000 * (1 + i * 0.2)) % 1.5 - 0.25) * width;
+    var y = height * (0.12 + i * 0.09);
+    var gradient = ctx.createRadialGradient(x, y, 0, x, y, width * 0.22);
+    gradient.addColorStop(0, 'rgba(20, 0, 2, 0.75)');
+    gradient.addColorStop(1, 'rgba(20, 0, 2, 0)');
+    ctx.fillStyle = gradient;
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.scale(1, 0.3);
+    ctx.translate(-x, -y);
+    ctx.fillRect(x - width * 0.22, y - width * 0.22, width * 0.44, width * 0.44);
+    ctx.restore();
+  }
+  xMediaScene.drawFog(ctx, width, height, time, height * 0.95, 'rgba(160, 10, 10, 0.18)', 5, 0.015);
+};
+
+var xMediaBloodMoonScene = function(__xMediaFilter, __options) {
+  xMediaScene.call(this, __xMediaFilter, __options, {'seed': 31, 'drawStatic': _drawStatic, 'drawBack': _drawBack});
+};
+
+var filterModule = xMediaScene.createModule('bloodMoon', xMediaBloodMoonScene, {'title': 'Blood moon', 'icon': '🌕', 'category': 'halloween'});
+
+export { filterModule, xMediaBloodMoonScene };