xmedia-project 0.1.4 → 0.1.5

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

@@ -0,0 +1,264 @@
+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, ['#020504', '#08140f', '#14261d', '#0a120d']);
+    var layerList = [['#1a2d24', 0.012, 14], ['#0f1d17', 0.02, 10], ['#060d0a', 0.035, 7]];
+    for(var i = 0; i < layerList.length; i++){
+      ctx.fillStyle = layerList[i][0];
+      for(var j = 0; j < layerList[i][2]; j++){
+        var x = random() * width;
+        var trunkWidth = height * layerList[i][1] * (0.7 + random() * 0.8) * 3;
+        ctx.beginPath();
+        ctx.moveTo(x - trunkWidth * 0.6, height);
+        ctx.lineTo(x - trunkWidth * 0.3, 0);
+        ctx.lineTo(x + trunkWidth * 0.3, 0);
+        ctx.lineTo(x + trunkWidth * 0.6, height);
+        ctx.closePath();
+        ctx.fill();
+      }
+      ctx.strokeStyle = layerList[i][0];
+      for(var k = 0; k < 3; k++){
+        xMediaScene.drawTree(ctx, random() * width, height * (0.3 + random() * 0.3), height * 0.12, -Math.PI / 2 + (random() - 0.5), height * layerList[i][1], 3, random);
+      }
+      var mist = ctx.createLinearGradient(0, height * 0.4, 0, height);
+      mist.addColorStop(0, 'rgba(120, 160, 140, 0)');
+      mist.addColorStop(1, 'rgba(120, 160, 140, 0.12)');
+      ctx.fillStyle = mist;
+      ctx.fillRect(0, 0, width, height);
+    }
+    var eyeList = [];
+    for(var m = 0; m < 6; m++){
+      eyeList.push({'x': random() * width, 'y': height * (0.3 + random() * 0.45), 'size': height * (0.006 + random() * 0.006), 'phase': random() * 20, 'red': random() < 0.4});
+    }
+    return {'eyeList': eyeList};
+  };
+
+  var _drawBack = function(ctx, width, height, time, data) {
+    var eyeList = data['eyeList'];
+    ctx.globalCompositeOperation = 'lighter';
+    for(var i = 0; i < eyeList.length; i++){
+      var eye = eyeList[i];
+      var cycle = (time / 1000 + eye['phase']) % 7;
+      if(cycle > 4.5 || (cycle > 2 && cycle < 2.15)){
+        continue;
+      }
+      for(var side = -1; side <= 1; side += 2){
+        var x = eye['x'] + side * eye['size'] * 2.2;
+        var gradient = ctx.createRadialGradient(x, eye['y'], 0, x, eye['y'], eye['size'] * 2.5);
+        gradient.addColorStop(0, eye['red'] ? 'rgba(255, 60, 40, 1)' : 'rgba(255, 230, 80, 1)');
+        gradient.addColorStop(0.35, eye['red'] ? 'rgba(255, 30, 20, 0.6)' : 'rgba(255, 200, 40, 0.6)');
+        gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
+        ctx.fillStyle = gradient;
+        ctx.fillRect(x - eye['size'] * 2.5, eye['y'] - eye['size'] * 2.5, eye['size'] * 5, eye['size'] * 5);
+      }
+    }
+    ctx.globalCompositeOperation = 'source-over';
+    xMediaScene.drawFog(ctx, width, height, time, height * 0.85, 'rgba(140, 180, 160, 0.14)', 6, 0.012);
+  };
+
+  var _drawFront = function(ctx, width, height, time) {
+    xMediaScene.drawFog(ctx, width, height, time, height * 1.05, 'rgba(140, 180, 160, 0.1)', 4, 0.02);
+  };
+
+  var xMediaDarkForestScene = function(__xMediaFilter, __options) {
+    xMediaScene.call(this, __xMediaFilter, __options, {'seed': 59, 'drawStatic': _drawStatic, 'drawBack': _drawBack, 'drawFront': _drawFront});
+  };
+
+  var filterModule = xMediaScene.createModule('darkForest', xMediaDarkForestScene, {'title': 'Dark forest', 'icon': '🌲', 'category': 'halloween'});
+
+  exports.filterModule = filterModule;
+  exports.xMediaDarkForestScene = xMediaDarkForestScene;
+
+  return exports;
+
+})({});
+window.xMediaFilter ? window.xMediaFilter.registerModule(xMediaFilterModule.filterModule) : (window.xMediaFilterModuleList = window.xMediaFilterModuleList || []).push(xMediaFilterModule.filterModule);

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

@@ -0,0 +1 @@
+var xMediaFilterModule=function(e){"use strict";var r=function(e,a,t){var o,i,l,n,d=this,s=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 r in e)e.hasOwnProperty(r)&&(a[r]=e[r])},this.load=function(){return e.loadSegmenter().then(function(){return d})},this.process=function(a){var d=e.segmentPerson(a);if(d){var c=a.width,f=a.height,u=a.ctx;o.width===c&&o.height===f&&s||(e.resizeCanvas(o,c,f),s=t.drawStatic(i,c,f,r.createRandom(t.seed||7))||{}),e.resizeCanvas(l,c,f),n.globalCompositeOperation="copy",n.drawImage(d.canvas,0,0,c,f),n.globalCompositeOperation="source-in",n.drawImage(a.canvas,0,0),u.globalCompositeOperation="copy",u.drawImage(o,0,0),u.globalCompositeOperation="source-over",t.drawBack&&(u.save(),t.drawBack(u,c,f,a.timestamp,s),u.restore()),u.drawImage(l,0,0),t.drawFront&&(u.save(),t.drawFront(u,c,f,a.timestamp,s),u.restore())}},this.destroy=function(){s=null},a=a||{},o=e.createCanvas(),i=o.getContext("2d"),l=e.createCanvas(),n=l.getContext("2d")};r.createRandom=function(e){var r=e%2147483647||1;return function(){return((r=16807*r%2147483647)-1)/2147483646}},r.fillSky=function(e,r,a,t){for(var o=e.createLinearGradient(0,0,0,a),i=0;i<t.length;i++)o.addColorStop(i/(t.length-1),t[i]);e.fillStyle=o,e.fillRect(0,0,r,a)},r.drawStars=function(e,r,a,t,o){for(var i=0;i<o;i++)e.fillStyle="rgba(255, 255, 255, "+(.3+.7*t())+")",e.fillRect(t()*r,t()*a*.6,t()<.9?1:2,1+(t()<.1?1:0))},r.drawMoon=function(e,r,a,t,o,i){var l=e.createRadialGradient(r,a,.8*t,r,a,3*t);l.addColorStop(0,i),l.addColorStop(1,"rgba(0, 0, 0, 0)"),e.fillStyle=l,e.fillRect(r-3*t,a-3*t,6*t,6*t);var n=e.createRadialGradient(r-.3*t,a-.3*t,.1*t,r,a,t);n.addColorStop(0,"#ffffff"),n.addColorStop(.35,o),n.addColorStop(1,o),e.fillStyle=n,e.beginPath(),e.arc(r,a,t,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]],s=0;s<d.length;s++)e.beginPath(),e.arc(r+d[s][0]*t,a+d[s][1]*t,d[s][2]*t,0,2*Math.PI),e.fill()},r.drawTree=function(e,a,t,o,i,l,n,d){var s=a+Math.cos(i)*o,c=t+Math.sin(i)*o;if(e.lineWidth=l,e.lineCap="round",e.beginPath(),e.moveTo(a,t),e.quadraticCurveTo(a+Math.cos(i+.3)*o*.5,t+Math.sin(i+.3)*o*.5,s,c),e.stroke(),!(n<=0))for(var f=2+Math.floor(2*d()),u=0;u<f;u++)r.drawTree(e,s,c,o*(.55+.2*d()),i+1.4*(d()-.5),.62*l,n-1,d)},r.drawBat=function(e,r,a,t,o){e.save(),e.translate(r,a),e.scale(t,t),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()},r.drawFog=function(e,r,a,t,o,i,l,n){for(var d=0;d<l;d++){var s=r*(.18+d%3*.06),c=((.37*d+t*n/r*(1+d%2*.5))%1.4-.2)*r,f=o+Math.sin(t/2e3+d)*a*.02,u=e.createRadialGradient(c,f,0,c,f,s);u.addColorStop(0,i),u.addColorStop(1,"rgba(0, 0, 0, 0)"),e.fillStyle=u,e.fillRect(c-s,f-s,2*s,2*s)}},r.createModule=function(e,r,a){return{name:"background/"+(a.category?a.category+"/":"")+e,filterList:[{name:e,category:"background",title:a.title,icon:a.icon,filterClass:r}],dependencyList:[]}};var a=function(e,a,t,o){r.fillSky(e,a,t,["#020504","#08140f","#14261d","#0a120d"]);for(var i=[["#1a2d24",.012,14],["#0f1d17",.02,10],["#060d0a",.035,7]],l=0;l<i.length;l++){e.fillStyle=i[l][0];for(var n=0;n<i[l][2];n++){var d=o()*a,s=t*i[l][1]*(.7+.8*o())*3;e.beginPath(),e.moveTo(d-.6*s,t),e.lineTo(d-.3*s,0),e.lineTo(d+.3*s,0),e.lineTo(d+.6*s,t),e.closePath(),e.fill()}e.strokeStyle=i[l][0];for(var c=0;c<3;c++)r.drawTree(e,o()*a,t*(.3+.3*o()),.12*t,-Math.PI/2+(o()-.5),t*i[l][1],3,o);var f=e.createLinearGradient(0,.4*t,0,t);f.addColorStop(0,"rgba(120, 160, 140, 0)"),f.addColorStop(1,"rgba(120, 160, 140, 0.12)"),e.fillStyle=f,e.fillRect(0,0,a,t)}for(var u=[],g=0;g<6;g++)u.push({x:o()*a,y:t*(.3+.45*o()),size:t*(.006+.006*o()),phase:20*o(),red:o()<.4});return{eyeList:u}},t=function(e,a,t,o,i){var l=i.eyeList;e.globalCompositeOperation="lighter";for(var n=0;n<l.length;n++){var d=l[n],s=(o/1e3+d.phase)%7;if(!(s>4.5||s>2&&s<2.15))for(var c=-1;c<=1;c+=2){var f=d.x+c*d.size*2.2,u=e.createRadialGradient(f,d.y,0,f,d.y,2.5*d.size);u.addColorStop(0,d.red?"rgba(255, 60, 40, 1)":"rgba(255, 230, 80, 1)"),u.addColorStop(.35,d.red?"rgba(255, 30, 20, 0.6)":"rgba(255, 200, 40, 0.6)"),u.addColorStop(1,"rgba(0, 0, 0, 0)"),e.fillStyle=u,e.fillRect(f-2.5*d.size,d.y-2.5*d.size,5*d.size,5*d.size)}}e.globalCompositeOperation="source-over",r.drawFog(e,a,t,o,.85*t,"rgba(140, 180, 160, 0.14)",6,.012)},o=function(e,a,t,o){r.drawFog(e,a,t,o,1.05*t,"rgba(140, 180, 160, 0.1)",4,.02)},i=function(e,i){r.call(this,e,i,{seed:59,drawStatic:a,drawBack:t,drawFront:o})},l=r.createModule("darkForest",i,{title:"Dark forest",icon:"\ud83c\udf32",category:"halloween"});return e.filterModule=l,e.xMediaDarkForestScene=i,e}({});window.xMediaFilter?window.xMediaFilter.registerModule(xMediaFilterModule.filterModule):(window.xMediaFilterModuleList=window.xMediaFilterModuleList||[]).push(xMediaFilterModule.filterModule);

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

@@ -0,0 +1 @@
+var a=function(e,r,t){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 r},this.setOptions=function(a){for(var e in a)a.hasOwnProperty(e)&&(r[e]=a[e])},this.load=function(){return e.loadSegmenter().then(function(){return d})},this.process=function(r){var d=e.segmentPerson(r);if(d){var s=r.width,f=r.height,u=r.ctx;o.width===s&&o.height===f&&c||(e.resizeCanvas(o,s,f),c=t.drawStatic(i,s,f,a.createRandom(t.seed||7))||{}),e.resizeCanvas(n,s,f),l.globalCompositeOperation="copy",l.drawImage(d.canvas,0,0,s,f),l.globalCompositeOperation="source-in",l.drawImage(r.canvas,0,0),u.globalCompositeOperation="copy",u.drawImage(o,0,0),u.globalCompositeOperation="source-over",t.drawBack&&(u.save(),t.drawBack(u,s,f,r.timestamp,c),u.restore()),u.drawImage(n,0,0),t.drawFront&&(u.save(),t.drawFront(u,s,f,r.timestamp,c),u.restore())}},this.destroy=function(){c=null},r=r||{},o=e.createCanvas(),i=o.getContext("2d"),n=e.createCanvas(),l=n.getContext("2d")};a.createRandom=function(a){var e=a%2147483647||1;return function(){return((e=16807*e%2147483647)-1)/2147483646}},a.fillSky=function(a,e,r,t){for(var o=a.createLinearGradient(0,0,0,r),i=0;i<t.length;i++)o.addColorStop(i/(t.length-1),t[i]);a.fillStyle=o,a.fillRect(0,0,e,r)},a.drawStars=function(a,e,r,t,o){for(var i=0;i<o;i++)a.fillStyle="rgba(255, 255, 255, "+(.3+.7*t())+")",a.fillRect(t()*e,t()*r*.6,t()<.9?1:2,1+(t()<.1?1:0))},a.drawMoon=function(a,e,r,t,o,i){var n=a.createRadialGradient(e,r,.8*t,e,r,3*t);n.addColorStop(0,i),n.addColorStop(1,"rgba(0, 0, 0, 0)"),a.fillStyle=n,a.fillRect(e-3*t,r-3*t,6*t,6*t);var l=a.createRadialGradient(e-.3*t,r-.3*t,.1*t,e,r,t);l.addColorStop(0,"#ffffff"),l.addColorStop(.35,o),l.addColorStop(1,o),a.fillStyle=l,a.beginPath(),a.arc(e,r,t,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(e+d[c][0]*t,r+d[c][1]*t,d[c][2]*t,0,2*Math.PI),a.fill()},a.drawTree=function(e,r,t,o,i,n,l,d){var c=r+Math.cos(i)*o,s=t+Math.sin(i)*o;if(e.lineWidth=n,e.lineCap="round",e.beginPath(),e.moveTo(r,t),e.quadraticCurveTo(r+Math.cos(i+.3)*o*.5,t+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++)a.drawTree(e,c,s,o*(.55+.2*d()),i+1.4*(d()-.5),.62*n,l-1,d)},a.drawBat=function(a,e,r,t,o){a.save(),a.translate(e,r),a.scale(t,t),a.beginPath();for(var i=-1;i<=1;i+=2)a.moveTo(0,0),a.quadraticCurveTo(.4*i,-.5*o-.1,1*i,-.3*o),a.quadraticCurveTo(.7*i,-.05,.55*i,.15),a.quadraticCurveTo(.35*i,0,.15*i,.15),a.closePath();a.ellipse(0,.05,.12,.2,0,0,2*Math.PI),a.fill(),a.restore()},a.drawFog=function(a,e,r,t,o,i,n,l){for(var d=0;d<n;d++){var c=e*(.18+d%3*.06),s=((.37*d+t*l/e*(1+d%2*.5))%1.4-.2)*e,f=o+Math.sin(t/2e3+d)*r*.02,u=a.createRadialGradient(s,f,0,s,f,c);u.addColorStop(0,i),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,e,r){return{name:"background/"+(r.category?r.category+"/":"")+a,filterList:[{name:a,category:"background",title:r.title,icon:r.icon,filterClass:e}],dependencyList:[]}};var e=function(e,r,t,o){a.fillSky(e,r,t,["#020504","#08140f","#14261d","#0a120d"]);for(var i=[["#1a2d24",.012,14],["#0f1d17",.02,10],["#060d0a",.035,7]],n=0;n<i.length;n++){e.fillStyle=i[n][0];for(var l=0;l<i[n][2];l++){var d=o()*r,c=t*i[n][1]*(.7+.8*o())*3;e.beginPath(),e.moveTo(d-.6*c,t),e.lineTo(d-.3*c,0),e.lineTo(d+.3*c,0),e.lineTo(d+.6*c,t),e.closePath(),e.fill()}e.strokeStyle=i[n][0];for(var s=0;s<3;s++)a.drawTree(e,o()*r,t*(.3+.3*o()),.12*t,-Math.PI/2+(o()-.5),t*i[n][1],3,o);var f=e.createLinearGradient(0,.4*t,0,t);f.addColorStop(0,"rgba(120, 160, 140, 0)"),f.addColorStop(1,"rgba(120, 160, 140, 0.12)"),e.fillStyle=f,e.fillRect(0,0,r,t)}for(var u=[],g=0;g<6;g++)u.push({x:o()*r,y:t*(.3+.45*o()),size:t*(.006+.006*o()),phase:20*o(),red:o()<.4});return{eyeList:u}},r=function(e,r,t,o,i){var n=i.eyeList;e.globalCompositeOperation="lighter";for(var l=0;l<n.length;l++){var d=n[l],c=(o/1e3+d.phase)%7;if(!(c>4.5||c>2&&c<2.15))for(var s=-1;s<=1;s+=2){var f=d.x+s*d.size*2.2,u=e.createRadialGradient(f,d.y,0,f,d.y,2.5*d.size);u.addColorStop(0,d.red?"rgba(255, 60, 40, 1)":"rgba(255, 230, 80, 1)"),u.addColorStop(.35,d.red?"rgba(255, 30, 20, 0.6)":"rgba(255, 200, 40, 0.6)"),u.addColorStop(1,"rgba(0, 0, 0, 0)"),e.fillStyle=u,e.fillRect(f-2.5*d.size,d.y-2.5*d.size,5*d.size,5*d.size)}}e.globalCompositeOperation="source-over",a.drawFog(e,r,t,o,.85*t,"rgba(140, 180, 160, 0.14)",6,.012)},t=function(e,r,t,o){a.drawFog(e,r,t,o,1.05*t,"rgba(140, 180, 160, 0.1)",4,.02)},o=function(o,i){a.call(this,o,i,{seed:59,drawStatic:e,drawBack:r,drawFront:t})},i=a.createModule("darkForest",o,{title:"Dark forest",icon:"\ud83c\udf32",category:"halloween"});export{i as filterModule,o as xMediaDarkForestScene};

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

@@ -0,0 +1,255 @@
+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, ['#020504', '#08140f', '#14261d', '#0a120d']);
+  var layerList = [['#1a2d24', 0.012, 14], ['#0f1d17', 0.02, 10], ['#060d0a', 0.035, 7]];
+  for(var i = 0; i < layerList.length; i++){
+    ctx.fillStyle = layerList[i][0];
+    for(var j = 0; j < layerList[i][2]; j++){
+      var x = random() * width;
+      var trunkWidth = height * layerList[i][1] * (0.7 + random() * 0.8) * 3;
+      ctx.beginPath();
+      ctx.moveTo(x - trunkWidth * 0.6, height);
+      ctx.lineTo(x - trunkWidth * 0.3, 0);
+      ctx.lineTo(x + trunkWidth * 0.3, 0);
+      ctx.lineTo(x + trunkWidth * 0.6, height);
+      ctx.closePath();
+      ctx.fill();
+    }
+    ctx.strokeStyle = layerList[i][0];
+    for(var k = 0; k < 3; k++){
+      xMediaScene.drawTree(ctx, random() * width, height * (0.3 + random() * 0.3), height * 0.12, -Math.PI / 2 + (random() - 0.5), height * layerList[i][1], 3, random);
+    }
+    var mist = ctx.createLinearGradient(0, height * 0.4, 0, height);
+    mist.addColorStop(0, 'rgba(120, 160, 140, 0)');
+    mist.addColorStop(1, 'rgba(120, 160, 140, 0.12)');
+    ctx.fillStyle = mist;
+    ctx.fillRect(0, 0, width, height);
+  }
+  var eyeList = [];
+  for(var m = 0; m < 6; m++){
+    eyeList.push({'x': random() * width, 'y': height * (0.3 + random() * 0.45), 'size': height * (0.006 + random() * 0.006), 'phase': random() * 20, 'red': random() < 0.4});
+  }
+  return {'eyeList': eyeList};
+};
+
+var _drawBack = function(ctx, width, height, time, data) {
+  var eyeList = data['eyeList'];
+  ctx.globalCompositeOperation = 'lighter';
+  for(var i = 0; i < eyeList.length; i++){
+    var eye = eyeList[i];
+    var cycle = (time / 1000 + eye['phase']) % 7;
+    if(cycle > 4.5 || (cycle > 2 && cycle < 2.15)){
+      continue;
+    }
+    for(var side = -1; side <= 1; side += 2){
+      var x = eye['x'] + side * eye['size'] * 2.2;
+      var gradient = ctx.createRadialGradient(x, eye['y'], 0, x, eye['y'], eye['size'] * 2.5);
+      gradient.addColorStop(0, eye['red'] ? 'rgba(255, 60, 40, 1)' : 'rgba(255, 230, 80, 1)');
+      gradient.addColorStop(0.35, eye['red'] ? 'rgba(255, 30, 20, 0.6)' : 'rgba(255, 200, 40, 0.6)');
+      gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
+      ctx.fillStyle = gradient;
+      ctx.fillRect(x - eye['size'] * 2.5, eye['y'] - eye['size'] * 2.5, eye['size'] * 5, eye['size'] * 5);
+    }
+  }
+  ctx.globalCompositeOperation = 'source-over';
+  xMediaScene.drawFog(ctx, width, height, time, height * 0.85, 'rgba(140, 180, 160, 0.14)', 6, 0.012);
+};
+
+var _drawFront = function(ctx, width, height, time) {
+  xMediaScene.drawFog(ctx, width, height, time, height * 1.05, 'rgba(140, 180, 160, 0.1)', 4, 0.02);
+};
+
+var xMediaDarkForestScene = function(__xMediaFilter, __options) {
+  xMediaScene.call(this, __xMediaFilter, __options, {'seed': 59, 'drawStatic': _drawStatic, 'drawBack': _drawBack, 'drawFront': _drawFront});
+};
+
+var filterModule = xMediaScene.createModule('darkForest', xMediaDarkForestScene, {'title': 'Dark forest', 'icon': '🌲', 'category': 'halloween'});
+
+export { filterModule, xMediaDarkForestScene };