Processing.js 1.4.0 and updates to js examples and todo

javascript/examples/HTML5/Video/atTheStation/atTheStation.pde

@@ -76,6 +76,7 @@
  void setVideo ( Video v )
  {
      video = v;
+     console.log( v );
  }
  
  /* make Processing understand the HTMLVideoElement */

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

@@ -3,7 +3,7 @@ window.onload = function () {
     video['loop'] = true;
     
     function tryFindSketch () {
-        var sketch = Processing.instances[0];
+        var sketch = Processing.getInstanceById(getProcessingSketchID());
         if ( sketch == undefined )
             return setTimeout(tryFindSketch, 200); // retry in 0.2 secs
         
@@ -16,7 +16,7 @@ window.onload = function () {
 
         (function( s, v ){
             var tryAddVideo = function () {
-                if ( v.readyState > 0 ) {
+                if ( v.readyState > 2 ) {
                     s.setVideo(v);
                 } else {
                     setTimeout(tryAddVideo, 200);

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

@@ -1,5 +1,3 @@
-/* @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>
@@ -44,7 +42,13 @@
          PImage frame = video.getFrame();
          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);
+         rgbImage.loadPixels();
+         maskImage.loadPixels();
+         for ( int i = 0; i < rgbImage.pixels.length; i++ )
+         {
+             rgbImage.pixels[i] = (rgbImage.pixels[i] & 0x00FFFFFF) + ((maskImage.pixels[i] & 0xFF) << 24);
+         }
+         rgbImage.updatePixels();
          image( rgbImage, width/2-rgbImage.width/2, 0 );
      }
  }

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

@@ -4,7 +4,7 @@ window.onload = function () {
     
     // try to find the Processing sketch instance, or retry
     function tryFindSketch () {
-        var sketch = Processing.instances[0];
+        var sketch = Processing.getInstanceById(getProcessingSketchID());
         if ( sketch == undefined )
             setTimeout(tryFindSketch, 200); // retry in 0.2 secs
         else
@@ -20,11 +20,20 @@ function initVideos ( sketch ) {
 
     video['loop'] = true; // as "loop" is not supported by many browsers
     
+    var lastTime = -1;
+    var lastFrame = null;
+    
     // extending our HTMLVideoElement object to return a PImage
     video['getFrame'] = function () {
-        var img = new sketch.PImage;
-        img.fromHTMLImageData(video);
-        return img;
+        if ( lastTime !== video.currentTime || !lastFrame )
+        {
+            lastFrame = new sketch.PImage;
+            lastFrame.fromHTMLImageData(video);
+            lastTime = video.currentTime;
+            return lastFrame;
+        } else {
+            return lastFrame;
+        }
     };
     
     // similar to tryFindSketch this creates a loop that
@@ -40,13 +49,17 @@ function initVideos ( sketch ) {
         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();
-        }
-    });
+    // this is a temporary fix for Chrome browsers sometimes not looping videos ...
+    if ( window.navigator.appVersion.toLowerCase().indexOf('chrome') >= 0 ) {
+        addEvent(video,'timeupdate',function(){
+            if ( video.currentTime == video.duration ) {
+                video.src = video.currentSrc;
+            }
+        });
+        addEvent(video,'canplay',function(){
+            video.play();
+        });
+    }
 }
 
 // http://html5demos.com/

javascript/todo.txt

@@ -3,12 +3,52 @@ http://code.google.com/p/processing/issues/detail?id=573
 
 ----------------------------------------------------------------------------
 
+Library system
+
+Rewrite library system to not be linked to java-libraries.
+<sketchbook>/libraries-js/..
+LibraryManager, updating, ..
+Update reference / wiki to mirror changes. 
+Make tutorial / template for Library authors.
+
+----------------------------------------------------------------------------
+
 Reference
 
 Make sure all reference links point to the same/new location
 
 ----------------------------------------------------------------------------
 
+Examples
+
+Some of the standard examples should be included, but not library specific
+ones. Currently there is no way to "just pick some" one has to include whole
+branches.
+
+----------------------------------------------------------------------------
+
+UI
+
+As the server keeps running until being explicitly stopped we might think 
+about an animated icon. How does "Server running" look like?	
+
+----------------------------------------------------------------------------
+
+Convenience
+
+A way to open / run in other browsers?
+Find your own IP address so you can test the sketch from other clients 
+on the network.
+
+Watch source files for changes, rebuild & export upon change. 
+No saving needed.
+
+----------------------------------------------------------------------------
+
+Nice subpages for: 404, directory listing, ...
+
+----------------------------------------------------------------------------
+
 Integration with SketchPad.cc
 
 s.cc being based on Etherpad has no API for calls from outside
@@ -17,32 +57,4 @@ submitting stuff ..
 Here's how to get latest of a sketch as plain text:
 http://studio.sketchpad.cc/sp/pad/export/ro.9civzkE0CyCy6/latest?format=txt
 
-
-----------------------------------------------------------------------------
-
-Examples.
-
-Some of the standard examples should be included, but not library specific
-ones. Currently there is no way to "just pick some" one has to include whole
-branches.
-
-----------------------------------------------------------------------------
-
-Interface.
-
-As the server keeps running until being explicitly stopped we might think 
-about an animated icon. How does "Server running" look like?	
-
-----------------------------------------------------------------------------
-
-Convenience.
-
-A way to reopen the browser window, maybe even other browsers?
-Find your own IP address so you can test the sketch from other clients 
-on the network.
-
-----------------------------------------------------------------------------
-
-Nice subpages for: 404, directory listing, ...
-
 ----------------------------------------------------------------------------