charmy dance example

javascript/examples/HTML5/Video/charmyDance/charmyDance.pde

@@ -0,0 +1,99 @@
+/* @pjs transparent=true; */
+
+/**
+ *    <p>This example shows you how to use video with a transparency
+ *    which currently is not natively supported by web video formats (H264 / OGV).</p>
+ *
+ *    <p>The "disco effects" in the back are generated by Processing code
+ *    while Charmy dancing upfront is coming from a HTML5 video element.</p>
+ *
+ *    <p>The video contains both the image and the mask side by side, have a look 
+ *    at the war file here: <a href="charmy.mp4">charmy.mp4</a></p>
+ *
+ *    Greenscreen material by <a href="http://mint.gs/">mint.gs</a> and used with permission.
+ *
+ *    <video width="480" height="360" style="display:none">
+ *        <source src="charmy.mp4" />
+ *        <source src="charmy.ogv" />
+ *    </video>
+ */
+ 
+ Video video;
+ PImage frame;
+ float fSec = 1/25.0;
+ int fMillis = int(1000 * fSec);
+ int ts = 0;
+ 
+ void setup ()
+ {
+     size( 320, 240 );
+     
+     noStroke();
+     textFont(createFont("Arial", 20));
+     background(255,0);
+ }
+ 
+ void draw ()
+ {
+     if ( video != null )
+     {
+         background(255, 0);
+         
+         timeLineEffects();
+         
+         PImage frame = getFrame(video);
+         PImage rgbImage = frame.get(frame.width/2,0,frame.width/2,frame.height);
+         PImage maskImage = frame.get(0,0,frame.width/2,frame.height);
+         rgbImage.mask(maskImage);
+         image( rgbImage, width/2-rgbImage.width/2, 0 );
+     }
+ }
+ 
+ void mousePressed ()
+ {
+     if ( video != null )
+     {
+        if ( video.paused ) video.play();
+        else video.pause(); 
+     }  
+ }
+ 
+ /* called from JavaScript to set the freshly loaded video */
+ void addVideo ( Video v )
+ {
+     v.play();
+     video = v;
+ }
+ 
+ /* copy video image to PImage */
+ PImage getFrame ( Video v )
+ {
+     return new PImage(v); // sub-optimal ..
+ }
+ 
+ /* make Processing understand the HTMLVideoElement */
+ interface Video
+ {
+     boolean autoplay;
+     boolean controls;
+     
+     int width;
+     int height;
+     int videoWidth; /*readonly*/
+     int videoHeight; /*readonly*/
+     
+     boolean muted;
+     float volume;
+     
+     boolean loop;
+     boolean paused;
+     boolean ended;
+     
+     String currentSrc;
+     
+     float duration;
+     float currentTime;
+     
+     void play();
+     void pause();
+ }

javascript/examples/HTML5/Video/charmyDance/mov.js

@@ -0,0 +1,68 @@
+
+// wait for the DOM to become ready
+window.onload = function () {
+    
+    // try to find the Processing sketch instance, or retry
+    function tryFindSketch () {
+        var sketch = Processing.instances[0];
+        if ( sketch == undefined )
+            setTimeout(tryFindSketch, 200); // retry in 0.2 secs
+        else
+            initVideos( sketch );
+    }
+    tryFindSketch();
+}
+
+// look for the video and send to sketch
+function initVideos ( sketch ) {
+    
+    var video = document.getElementsByTagName("video")[0];
+
+    video['loop'] = true; // as "loop" is not supported by many browsers
+    
+    // similar to tryFindSketch this creates a loop that
+    // continues until the video becomes ready.
+    (function( s, v ){
+        var tryAddVideo = function () {
+            if ( v.readyState > 0 ) {
+                s.addVideo(v);
+            } else {
+                setTimeout(tryAddVideo, 200);
+            }
+        }
+        tryAddVideo();
+    })( sketch, video );
+    
+    // force loop when set as this is currently not supported by most browsers
+    addEvent(video,'ended',function(){
+        if ( 'loop' in this && this.loop ) {
+            this.currentTime = 0;
+            this.play();
+        }
+    });
+}
+
+// http://html5demos.com/
+var addEvent = (function () {
+  if (document.addEventListener) {
+    return function (el, type, fn) {
+      if (el && el.nodeName || el === window) {
+        el.addEventListener(type, fn, false);
+      } else if (el && el.length) {
+        for (var i = 0; i < el.length; i++) {
+          addEvent(el[i], type, fn);
+        }
+      }
+    };
+  } else {
+    return function (el, type, fn) {
+      if (el && el.nodeName || el === window) {
+        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
+      } else if (el && el.length) {
+        for (var i = 0; i < el.length; i++) {
+          addEvent(el[i], type, fn);
+        }
+      }
+    };
+  }
+})();

javascript/examples/HTML5/Video/charmyDance/timeline.pde

@@ -0,0 +1,83 @@
+void timeLineEffects ()
+{
+     float t = video.duration/10;
+     float n = video.currentTime;
+     
+     fill( 255 );
+     
+     if ( n < t )
+     {
+         float w = map(n,0,t,100,500);
+         ellipse( width/2,height/2,w,w);
+     }
+     else if ( n < 2*t )
+     {
+         float w = map(n,t,2*t,0,300);
+         
+         fill(255);
+         ellipse( width/2-100,height/2-100,w*0.75,w*0.75);
+         fill(0);
+         ellipse( width/2+50,height/2,w,w);
+         fill(255);
+         ellipse( width/2-100,height/2+150,w*1.5,w*1.5);
+     }
+     else if ( n < 3*t )
+     {
+         float w = map(n,2*t,3*t,0,1);
+         
+         for ( int i = 0 ; i < 9; i++ )
+         {
+             rect((i%3)*width/3,int(i/3)*height/3,width/3*w,height/3*w);
+         }
+     }
+     else if ( n < 4*t )
+     {
+         float w = map(n,3*t,4*t,-1,0);
+         
+         fill( 0 );
+         for ( int i = 0 ; i < 25; i++ )
+         {
+             rect(((i%5)+1)*width/5,(int(i/5)+1)*height/5,width/5*w,height/5*w);
+         }
+     }
+     else if ( n < 5*t )
+     {
+         float w = map(n,4*t,5*t,0,height/9);
+         
+         for ( int i = 0 ; i < 10; i++ )
+         {
+             rect(0,i*(height/9)-w, width, height/18);
+         }
+     }
+     else if ( n < 7*t )
+     {
+         float w = map(n,6*t,7*t,0,TWO_PI);
+         for ( int i = 0 ; i < 22; i++ )
+         {
+             fill( cos(w) > 0 ? 255 : 0 );
+             rect(i*(width/20), 0, width/40, height);
+         }
+     }
+     else if ( n < 8*t )
+     {
+         int mx = int(map(n,t*7,t*8,1,20));
+         
+         for ( int i = 0; i < mx; i++ )
+             ellipse( random(width), random(height), 5*mx, 5*mx );
+     }
+     else if ( n < 9*t )
+     {
+         int mxx = 1+int(map(n,t*8,t*9,1,10))*2;
+         mx = mxx*mxx;
+         
+         for ( int i = 0 ; i < mx; i+=2 )
+         {
+             rect( (i%mxx)*width/mxx, int(i/mxx)*height/mxx, width/mxx, height/mxx );
+         }
+     }
+     else if ( n < 10*t )
+     {
+         float w = map(n,9*t,10*t,700,100);
+         ellipse( width/2,height/2,w,w);
+     }
+}