Skip to content
Browse files

two more examples by mint.gs

  • Loading branch information...
1 parent 8ba2c0d commit 482f62938e62d2029511b66b8b3eacc96f1eb530 @fjenett committed
View
4 README
@@ -60,5 +60,9 @@
element optional DOM video node, no need to provide sources then
listener {}, should implement movieEvent(Movie)
poster optional, path to an image to use as poster-frame
+
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+ Some work hours and content provided by mint.gs
View
4 resources/build.number
@@ -1,3 +1,3 @@
#Build Number for ANT. Do not edit!
-#Sun Aug 05 09:43:53 CEST 2012
-build.number=64
+#Sun Aug 05 11:25:09 CEST 2012
+build.number=72
View
10 src/processing.video.movie.js
@@ -167,8 +167,6 @@ var Movie = (function(window,document){
container.style.position = 'absolute';
container.style.left = '-10000px';
container.style.top = '-10000px';
- // container.style.width = '320px';
- // container.style.height = '240px';
container.appendChild( element );
document.body.appendChild( container );
}
@@ -226,6 +224,7 @@ var Movie = (function(window,document){
frame = new sketch.PImage;
try {
frame.fromHTMLImageData(element);
+ //frame.isRemote = false;
} catch (e) {
//console.log(e);
throw(e);
@@ -387,6 +386,13 @@ var Movie = (function(window,document){
Movie.prototype.__defineGetter__('pixels',function(){
return frame.pixels;
});
+ /* PImage.isRemote - Processing.js internally used */
+ Movie.prototype.__defineGetter__('isRemote',function(){
+ return frame.isRemote;
+ });
+ Movie.prototype.__defineSetter__('isRemote',function(v){
+ frame.isRemote = v;
+ });
/* PImage.sourceImg - Processing.js internally used */
Movie.prototype.__defineGetter__('sourceImg',function(){
return frame.sourceImg;
View
48 tests/dance_matte/dance_matte.pde
@@ -0,0 +1,48 @@
+/**
+ * Dance example masked, content provided by <a href="http://mint.gs">mint.gs</a> and used with permission.
+ *
+ * Currently does not work in Safari for some reason ...
+ */
+
+ import processing.video.Movie;
+
+ Movie movie;
+ PImage frame, matte;
+
+ void setup ()
+ {
+ size( 240, 360 );
+
+ background( 255 );
+
+ String m = "http://mintgs-public-clips.commondatastorage.googleapis.com/processing/dance/charmy";
+ movie = new Movie( this, m+".mp4", m+".ogv", m+".webm" );
+ movie.loop();
+ movie.play();
+ }
+
+ void draw ()
+ {
+ colorMode( HSB );
+ fill( (frameCount/10.0) % 255, 200, 200, 10 );
+ rect( 0,0, width, height );
+
+ if ( movie.available() )
+ {
+ movie.read();
+
+ // right half of the movie
+ frame = movie.get(movie.width/2,0,movie.width/2,movie.height);
+ // left half of the movie
+ matte = movie.get(0,0,movie.width/2,movie.height);
+
+ frame.loadPixels(); matte.loadPixels();
+ for ( int i = 0; i < frame.pixels.length; i++ )
+ {
+ frame.pixels[i] = (frame.pixels[i] & 0x00FFFFFF) + ((matte.pixels[i] & 0xFF) << 24);
+ }
+ frame.updatePixels();
+ }
+
+ if ( frame != null ) image( frame, 0, 0 );
+ }
View
BIN tests/dance_matte/data/station.mp4
Binary file not shown.
View
BIN tests/dance_matte/data/station.ogv
Binary file not shown.
View
BIN tests/dance_matte/data/station.webm
Binary file not shown.
View
2 tests/dance_matte/sketch.properties
@@ -0,0 +1,2 @@
+mode.id=processing.mode.javascript.JavaScriptMode
+mode=JavaScript
View
10,198 tests/dance_matte/template/processing.js
10,198 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
406 tests/dance_matte/template/processing.video.js
@@ -0,0 +1,406 @@
+/**
+ * Attempting to write a Movie.class for Processing.js
+ *
+ * https://github.com/fjenett/processing-video-js
+ *
+ *
+ * fjenett - 2012
+ */
+
+var Movie = (function(window,document){
+
+ var isChrome;
+
+ var listeners = [];
+ var sketch;
+ var element, movie, frame;
+
+ var posterImage;
+
+ var shouldLoop = false;
+ var playbackRate = 1;
+ var volume;
+
+ var isAvailable = false;
+ var lastTime = -1, pollerTs = -1;
+ var fpsToSeconds;
+
+ var fps = 25.0;
+
+ var callListeners = function (meth, args) {
+ for ( var i = 0, k = listeners.length; i < k; i++ ) {
+ if ( meth in listeners[i] ) {
+ listeners[i][meth].apply(listeners[i],args);
+ }
+ }
+ }
+
+ var addVideoEventListeners = function () {
+
+ // var events = ['abort', 'canplay', 'canplaythrough', 'durationchange',
+ // 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata',
+ // 'loadstart', 'mozaudioavailable', 'pause', 'play', 'playing',
+ // 'progress', 'ratechange', 'seeked', 'seeking', 'suspend', 'timeupdate',
+ // 'volumechange', 'waiting'];
+
+ // for ( var i = 0; i < events.length; i++ ) {
+ // var fnName = "on"+events[i][0].toUpperCase()+events[i].substring(1);
+ // try {
+ // var fn = eval(fnName);
+ // element.addEventListener(events[i],fn);
+ // } catch (e) {
+ // // ignore
+ // }
+ // }
+
+ // otherwise Google closure compiler "optimizes" the functions away ..
+ element.addEventListener('error', onError);
+ element.addEventListener('loadedmetadata', onLoadedmetadata);
+ element.addEventListener('timeupdate', onTimeupdate);
+ element.addEventListener('canplay', onCanplay);
+ }
+
+ var onError = function (evt) {
+ var errMsg = "";
+ switch ( element.networkState ) {
+ case element.NETWORK_EMPTY:
+ errMsg = "Loading did not start yet."; break;
+ case element.NETWORK_IDLE:
+ errMsg = "Loading did not start yet."; break;
+ case element.NETWORK_LOADING:
+ errMsg = "Loading has not finished yet."; break;
+ case element.NETWORK_NO_SOURCE:
+ errMsg = "The source provided is missing. "+element.src; break;
+ default:
+ errMsg = "Not sure what happened ... care to report it to fjenett@gmail.com ?";
+ }
+ alert(errMsg);
+ }
+
+ var onLoadedmetadata = function (evt) {
+ element.setAttribute('width',element.videoWidth);
+ element.setAttribute('height',element.videoHeight);
+ fpsToSeconds = 1000.0/element.fps;
+ }
+
+ var onCanplay = function (evt) {
+ if ( !posterImage )
+ movie.read();
+ }
+
+ var onTimeupdate = function (evt) {
+ if ( shouldLoop && isChrome ) {
+ if ( element.currentTime === element.duration ) {
+ element.addEventListener('canplay',function(){
+ element.playbackRate = playbackRate;
+ element.volume = volume;
+ element.play();
+ startPolling();
+ });
+ stopPolling();
+ element.src = element.currentSrc;
+ }
+ }
+ }
+
+ var startPolling = function () {
+ var doPoll = function () {
+ if ( element.readyState < 3 ) {
+ isAvailable = false;
+ } else {
+ var now = element.currentTime;
+ isAvailable = lastTime !== now;
+ if ( isAvailable ) {
+ callListeners('movieEvent',[movie]);
+ }
+ lastTime = now;
+ }
+ pollerTs = setTimeout( doPoll, 1000/fps );
+ }
+ doPoll();
+ }
+
+ var stopPolling = function () {
+ clearTimeout(pollerTs);
+ }
+
+ // http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5_Media)
+
+ // https://developer.mozilla.org/en/DOM/HTMLVideoElement
+ // https://developer.mozilla.org/en/DOM/HTMLMediaElement
+ // https://developer-new.mozilla.org/en-US/docs/DOM/Media_events
+
+ // https://developer.mozilla.org/En/Manipulating_video_using_canvas
+ // http://www.html5videoguide.net/presentations/HTML5_Video_LCA2011/
+
+ var Movie = function () {
+
+ var opts = {};
+
+ if ( arguments.length == 1 && typeof arguments[0] == 'object' ) {
+ opts = arguments[0];
+ } else if (arguments.length >= 2) {
+ var args = Array.prototype.slice.call(arguments);
+ // var-args assumes: listener, src1, src2, …, srcN
+ var l = args.shift();
+ opts = {
+ sources: args,
+ listener: l
+ };
+ } else {
+ throw('Wrong number of args passed to Movie()!');
+ }
+
+ element = opts.element;
+ if ( !opts.element && opts.sources ) {
+ element = document.createElement('video');
+ element.setAttribute( 'crossorigin', 'anonymous' );
+ //element.setAttribute( 'poster', 'poster.gif' );
+ //element.setAttribute( 'controls', 'controls' );
+ //element.setAttribute( 'src', opts.src );
+ for ( var i = 0, k = opts.sources.length; i < k; i++ ) {
+ var source = document.createElement('source');
+ source.setAttribute('src', opts.sources[i]);
+ element.appendChild(source);
+ }
+ var container = document.createElement('div');
+ container.style.position = 'absolute';
+ container.style.left = '-10000px';
+ container.style.top = '-10000px';
+ container.appendChild( element );
+ document.body.appendChild( container );
+ }
+
+ shouldLoop = ('loop' in element) ? element.loop : false;
+
+ if ( ('poster' in element && element.poster) || opts.poster ) {
+ posterImage = new Image();
+ posterImage.onload = function () {
+ if ( element.paused ) {
+ frame = new sketch.PImage();
+ frame.fromHTMLImageData( posterImage );
+ }
+ }
+ posterImage.src = element.poster;
+ }
+
+ listeners = [];
+ if ( opts.listener )
+ {
+ listeners.push(opts.listener);
+ sketch = opts.listener;
+ frame = new sketch.PImage();
+ }
+
+ addVideoEventListeners();
+
+ // element.addEventListener('canplay',function(evt){
+ // if ( !('autoplay' in element ? element.autoplay : false) ) element.pause();
+ // element.removeEventListener( this );
+ // });
+ // element.play();
+
+ isChrome = window.navigator.appVersion.toLowerCase().indexOf('chrome') >= 0;
+
+ movie = this;
+ }
+
+ Movie.prototype = {
+ /* */
+ setSourceFrameRate: function ( frameRate ) {
+ fps = frameRate;
+ },
+ /* */
+ getElement: function () {
+ return element;
+ },
+ /* sets the volume */
+ volume: function ( vol ) {
+ element.volume = vol;
+ volume = vol;
+ },
+ /* Reads the current frame of the movie. */
+ read: function () {
+ frame = new sketch.PImage;
+ try {
+ frame.fromHTMLImageData(element);
+ //frame.isRemote = false;
+ } catch (e) {
+ //console.log(e);
+ throw(e);
+ }
+ return frame;
+ },
+ /* Returns "true" when a new movie frame is available to read. */
+ available: function () {
+ return isAvailable;
+ },
+ /* Play the movie */
+ play: function () {
+ element.play();
+ startPolling();
+ },
+ isPlaying : function () {
+ return !element.paused;
+ },
+ /* Pause the movie */
+ pause: function () {
+ element.pause();
+ stopPolling();
+ },
+ isPaused : function () {
+ return element.paused;
+ },
+ /* Stop the movie */
+ stop: function () {
+ element.pause();
+ stopPolling();
+ },
+ /* Set loop attribute */
+ loop : function () {
+ shouldLoop = true;
+ element.setAttribute('loop','loop');
+ },
+ /* Set loop attribute */
+ noLoop: function () {
+ shouldLoop = false;
+ element.removeAttribute('loop');
+ },
+ isLooping : function () {
+ return shouldLoop;
+ },
+ /* Jump to a specific second (from float) in the video */
+ jump: function ( seconds ) {
+ element.currentTime = seconds;
+ },
+ /* Return duration in seconds with frac (as float) */
+ duration: function () {
+ return element.duration;
+ },
+ /* Return video current time as seconds with frac (as float) */
+ time: function () {
+ return element.currentTime;
+ },
+ /* Set playback speed to be scaled by given value (as float) */
+ speed: function ( rate ) {
+ if ( rate !== 0.0 )
+ {
+ element.playbackRate = rate;
+ playbackRate = rate;
+ }
+ else
+ {
+ element.pause();
+ }
+ },
+ /* Set the frame rate of the movie in fps */
+ frameRate: function ( rate ) {
+ // can't as we can not get the fps from the movie ... ideas?
+ //throw( 'Please use speed() instead' );
+ this.speed( rate / fps );
+ },
+ /* GSVideo? */
+ getSourceFrameRate: function () {
+ //throw( 'This is not available for web video' );
+ fps;
+ },
+ /* GSVideo? */
+ goToBeginning: function () {
+ this.jump(0);
+ },
+ /* Java? */
+ dispose: function () {
+ this.stop();
+ document.body.removeChild(element);
+ delete element;
+ },
+ /* ? */
+ ready: function () {
+ return element.readyState > 2;
+ },
+ /* ? */
+ newFrame: function () {
+ return this.available();
+ },
+ /* ? */
+ getFilename: function () {
+ return element.currentSrc;
+ },
+ /* PImage inheritance */
+ /* http://processing.org/reference/PImage.html */
+ /* PImage.get */
+ get: function () {
+ return frame.get.apply(frame,arguments);
+ },
+ /* PImage.set */
+ set: function () {
+ return frame.set.apply(frame,arguments);
+ },
+ /* PImage.copy */
+ copy: function () {
+ return frame.copy.apply(frame,arguments);
+ },
+ /* PImage.mask */
+ mask: function () {
+ return frame.mask.apply(frame,arguments);
+ },
+ /* PImage.blend */
+ blend: function () {
+ return frame.blend.apply(frame,arguments);
+ },
+ /* PImage.filter */
+ filter: function () {
+ return frame.filter.apply(frame,arguments);
+ },
+ /* PImage.save */
+ save: function () {
+ return frame.save.apply(frame,arguments);
+ },
+ /* PImage.resize */
+ resize: function (){
+ return frame.resize.apply(frame,arguments);
+ },
+ /* PImage.loadPixels */
+ loadPixels: function () {
+ return frame.loadPixels.apply(frame,arguments);
+ },
+ /* PImage.updatePixels */
+ updatePixels: function () {
+ return frame.updatePixels.apply(frame,arguments);
+ },
+ /* PImage.toImageData - Processing.js internally used */
+ toImageData: function () {
+ return frame.toImageData.apply(frame,arguments);
+ }
+ };
+
+ /* PImage.width */
+ Movie.prototype.__defineGetter__('width',function(){
+ return frame.width;
+ });
+ /* PImage.height */
+ Movie.prototype.__defineGetter__('height',function(){
+ return frame.height;
+ });
+ /* PImage.pixels */
+ Movie.prototype.__defineGetter__('pixels',function(){
+ return frame.pixels;
+ });
+ /* PImage.isRemote - Processing.js internally used */
+ Movie.prototype.__defineGetter__('isRemote',function(){
+ return frame.isRemote;
+ });
+ Movie.prototype.__defineSetter__('isRemote',function(v){
+ frame.isRemote = v;
+ });
+ /* PImage.sourceImg - Processing.js internally used */
+ Movie.prototype.__defineGetter__('sourceImg',function(){
+ return frame.sourceImg;
+ });
+ Movie.prototype.__defineSetter__('sourceImg',function(s){
+ frame.sourceImg = s;
+ });
+
+ return Movie;
+
+})(window,document);
View
74 tests/dance_matte/template/template.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>@@sketch@@ : Built with Processing and Processing.js</title>
+ <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAQAAVzABAEAjBQAaDwYAWjUGAGE6CQBrQQ0ATS8PAFhAJwBUQC8AbFI6AHVXPACBZk4A4NrWAPb19QAAAAAAAMmZmZmZmgAJIwAAAAAAcMIjPjA+PjAKpxIuMDMzMAm0Ii4zMzMACaIiLt3dMAAJtyIuIzPQAAm0Un5yM+IzKLRkfncy4iIotRF+dyLkIiq0QX53F+EiGrQUTkd34iIatEVu7u5iIVrBVVRBRFRVbAtGZGZla2uwAMu7u7u8vADAAwAAgAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIABAADAAwAA" />
+ <meta name="Generator" content="Processing" />
+ <!-- - - - - - - - - - - - - - - - - - - - -
+ +
+ + Wondering how this works?
+ +
+ + Go to: http://processing.org/
+ + and: http://processingjs.org/
+ +
+ + - - - - - - - - - - - - - - - - - - - - -->
+ <style type="text/css">
+ body {
+ background-color: #333; color: #bbb; line-height: normal;
+ font-family: Lucida Grande, Lucida Sans, Arial, Helvetica Neue, Verdana, Geneva, sans-serif;
+ font-size: 11px; font-weight: normal; text-decoration: none;
+ line-height: 1.5em;
+ }
+ a img {
+ border: 0px solid transparent;
+ }
+ a, a:link, a:visited, a:active, a:hover {
+ color: #cdcdcd; text-decoration: underline;
+ }
+ h1 {
+ font-family: Arial, Helvetica Neue, Verdana, Geneva, sans-serif;
+ width: 100%; letter-spacing: 0.1em;
+ margin-bottom: 1em; font-size: 1.65em;
+ }
+ canvas {
+ display: block;
+ outline: 0px;
+ margin-bottom: 1.5em;
+ }
+ #content {
+ margin: 50px auto 0px auto; padding: 25px 25px 15px 25px;
+ width: @@width@@px; min-width: 300px; overflow: auto;
+ border-left: 1px solid #444; border-top: 1px solid #444;
+ border-right: 1px solid #333; border-bottom: 1px solid #333;
+ background-color: #3d3d3d;
+ }
+ </style>
+ <!--[if lt IE 9]>
+ <script type="text/javascript">alert("Your browser does not support the canvas tag.");</script>
+ <![endif]-->
+ <script src="processing.video.js" type="text/javascript"></script>
+ <script src="processing.js" type="text/javascript"></script>
+ @@scripts@@
+ </head>
+ <body>
+ <div id="content">
+ <div>
+ <canvas id="@@id@@" data-processing-sources="@@sketch@@.pde"
+ width="@@width@@" height="@@height@@">
+ <p>Your browser does not support the canvas tag.</p>
+ <!-- Note: you can put any alternative content here. -->
+ </canvas>
+ <noscript>
+ <p>JavaScript is required to view the contents of this page.</p>
+ </noscript>
+ </div>
+ <h1>@@sketch@@</h1>
+ <p id="description">@@description@@</p>
+ <p id="sources">Source code: @@source@@</p>
+ <p>
+ Built with <a href="http://processing.org" title="Processing">Processing</a>
+ and <a href="http://processingjs.org" title="Processing.js">Processing.js</a>
+ </p>
+ </div>
+ </body>
+</html>
View
31 tests/dance_simple/dance_simple.pde
@@ -0,0 +1,31 @@
+/**
+ * Dance example, content provided by mint.gs and used with permission:
+ * http://mint.gs
+ */
+
+ import processing.video.Movie;
+
+ Movie movie;
+ PImage frame;
+
+ void setup ()
+ {
+ size( 240, 360 );
+
+ String m = "http://mintgs-public-clips.commondatastorage.googleapis.com/processing/dance/charmy";
+ movie = new Movie( this, m+".mp4", m+".ogv", m+".webm" );
+ movie.loop();
+ movie.play();
+ }
+
+ void draw ()
+ {
+ background( 255 );
+
+ if ( movie.available() )
+ {
+ movie.read();
+ }
+
+ image( movie, 0, 0 );
+ }
View
BIN tests/dance_simple/data/station.mp4
Binary file not shown.
View
BIN tests/dance_simple/data/station.ogv
Binary file not shown.
View
BIN tests/dance_simple/data/station.webm
Binary file not shown.
View
2 tests/dance_simple/sketch.properties
@@ -0,0 +1,2 @@
+mode.id=processing.mode.javascript.JavaScriptMode
+mode=JavaScript
View
10,198 tests/dance_simple/template/processing.js
10,198 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
406 tests/dance_simple/template/processing.video.js
@@ -0,0 +1,406 @@
+/**
+ * Attempting to write a Movie.class for Processing.js
+ *
+ * https://github.com/fjenett/processing-video-js
+ *
+ *
+ * fjenett - 2012
+ */
+
+var Movie = (function(window,document){
+
+ var isChrome;
+
+ var listeners = [];
+ var sketch;
+ var element, movie, frame;
+
+ var posterImage;
+
+ var shouldLoop = false;
+ var playbackRate = 1;
+ var volume;
+
+ var isAvailable = false;
+ var lastTime = -1, pollerTs = -1;
+ var fpsToSeconds;
+
+ var fps = 25.0;
+
+ var callListeners = function (meth, args) {
+ for ( var i = 0, k = listeners.length; i < k; i++ ) {
+ if ( meth in listeners[i] ) {
+ listeners[i][meth].apply(listeners[i],args);
+ }
+ }
+ }
+
+ var addVideoEventListeners = function () {
+
+ // var events = ['abort', 'canplay', 'canplaythrough', 'durationchange',
+ // 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata',
+ // 'loadstart', 'mozaudioavailable', 'pause', 'play', 'playing',
+ // 'progress', 'ratechange', 'seeked', 'seeking', 'suspend', 'timeupdate',
+ // 'volumechange', 'waiting'];
+
+ // for ( var i = 0; i < events.length; i++ ) {
+ // var fnName = "on"+events[i][0].toUpperCase()+events[i].substring(1);
+ // try {
+ // var fn = eval(fnName);
+ // element.addEventListener(events[i],fn);
+ // } catch (e) {
+ // // ignore
+ // }
+ // }
+
+ // otherwise Google closure compiler "optimizes" the functions away ..
+ element.addEventListener('error', onError);
+ element.addEventListener('loadedmetadata', onLoadedmetadata);
+ element.addEventListener('timeupdate', onTimeupdate);
+ element.addEventListener('canplay', onCanplay);
+ }
+
+ var onError = function (evt) {
+ var errMsg = "";
+ switch ( element.networkState ) {
+ case element.NETWORK_EMPTY:
+ errMsg = "Loading did not start yet."; break;
+ case element.NETWORK_IDLE:
+ errMsg = "Loading did not start yet."; break;
+ case element.NETWORK_LOADING:
+ errMsg = "Loading has not finished yet."; break;
+ case element.NETWORK_NO_SOURCE:
+ errMsg = "The source provided is missing. "+element.src; break;
+ default:
+ errMsg = "Not sure what happened ... care to report it to fjenett@gmail.com ?";
+ }
+ alert(errMsg);
+ }
+
+ var onLoadedmetadata = function (evt) {
+ element.setAttribute('width',element.videoWidth);
+ element.setAttribute('height',element.videoHeight);
+ fpsToSeconds = 1000.0/element.fps;
+ }
+
+ var onCanplay = function (evt) {
+ if ( !posterImage )
+ movie.read();
+ }
+
+ var onTimeupdate = function (evt) {
+ if ( shouldLoop && isChrome ) {
+ if ( element.currentTime === element.duration ) {
+ element.addEventListener('canplay',function(){
+ element.playbackRate = playbackRate;
+ element.volume = volume;
+ element.play();
+ startPolling();
+ });
+ stopPolling();
+ element.src = element.currentSrc;
+ }
+ }
+ }
+
+ var startPolling = function () {
+ var doPoll = function () {
+ if ( element.readyState < 3 ) {
+ isAvailable = false;
+ } else {
+ var now = element.currentTime;
+ isAvailable = lastTime !== now;
+ if ( isAvailable ) {
+ callListeners('movieEvent',[movie]);
+ }
+ lastTime = now;
+ }
+ pollerTs = setTimeout( doPoll, 1000/fps );
+ }
+ doPoll();
+ }
+
+ var stopPolling = function () {
+ clearTimeout(pollerTs);
+ }
+
+ // http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5_Media)
+
+ // https://developer.mozilla.org/en/DOM/HTMLVideoElement
+ // https://developer.mozilla.org/en/DOM/HTMLMediaElement
+ // https://developer-new.mozilla.org/en-US/docs/DOM/Media_events
+
+ // https://developer.mozilla.org/En/Manipulating_video_using_canvas
+ // http://www.html5videoguide.net/presentations/HTML5_Video_LCA2011/
+
+ var Movie = function () {
+
+ var opts = {};
+
+ if ( arguments.length == 1 && typeof arguments[0] == 'object' ) {
+ opts = arguments[0];
+ } else if (arguments.length >= 2) {
+ var args = Array.prototype.slice.call(arguments);
+ // var-args assumes: listener, src1, src2, …, srcN
+ var l = args.shift();
+ opts = {
+ sources: args,
+ listener: l
+ };
+ } else {
+ throw('Wrong number of args passed to Movie()!');
+ }
+
+ element = opts.element;
+ if ( !opts.element && opts.sources ) {
+ element = document.createElement('video');
+ element.setAttribute( 'crossorigin', 'anonymous' );
+ //element.setAttribute( 'poster', 'poster.gif' );
+ //element.setAttribute( 'controls', 'controls' );
+ //element.setAttribute( 'src', opts.src );
+ for ( var i = 0, k = opts.sources.length; i < k; i++ ) {
+ var source = document.createElement('source');
+ source.setAttribute('src', opts.sources[i]);
+ element.appendChild(source);
+ }
+ var container = document.createElement('div');
+ container.style.position = 'absolute';
+ container.style.left = '-10000px';
+ container.style.top = '-10000px';
+ container.appendChild( element );
+ document.body.appendChild( container );
+ }
+
+ shouldLoop = ('loop' in element) ? element.loop : false;
+
+ if ( ('poster' in element && element.poster) || opts.poster ) {
+ posterImage = new Image();
+ posterImage.onload = function () {
+ if ( element.paused ) {
+ frame = new sketch.PImage();
+ frame.fromHTMLImageData( posterImage );
+ }
+ }
+ posterImage.src = element.poster;
+ }
+
+ listeners = [];
+ if ( opts.listener )
+ {
+ listeners.push(opts.listener);
+ sketch = opts.listener;
+ frame = new sketch.PImage();
+ }
+
+ addVideoEventListeners();
+
+ // element.addEventListener('canplay',function(evt){
+ // if ( !('autoplay' in element ? element.autoplay : false) ) element.pause();
+ // element.removeEventListener( this );
+ // });
+ // element.play();
+
+ isChrome = window.navigator.appVersion.toLowerCase().indexOf('chrome') >= 0;
+
+ movie = this;
+ }
+
+ Movie.prototype = {
+ /* */
+ setSourceFrameRate: function ( frameRate ) {
+ fps = frameRate;
+ },
+ /* */
+ getElement: function () {
+ return element;
+ },
+ /* sets the volume */
+ volume: function ( vol ) {
+ element.volume = vol;
+ volume = vol;
+ },
+ /* Reads the current frame of the movie. */
+ read: function () {
+ frame = new sketch.PImage;
+ try {
+ frame.fromHTMLImageData(element);
+ //frame.isRemote = false;
+ } catch (e) {
+ //console.log(e);
+ throw(e);
+ }
+ return frame;
+ },
+ /* Returns "true" when a new movie frame is available to read. */
+ available: function () {
+ return isAvailable;
+ },
+ /* Play the movie */
+ play: function () {
+ element.play();
+ startPolling();
+ },
+ isPlaying : function () {
+ return !element.paused;
+ },
+ /* Pause the movie */
+ pause: function () {
+ element.pause();
+ stopPolling();
+ },
+ isPaused : function () {
+ return element.paused;
+ },
+ /* Stop the movie */
+ stop: function () {
+ element.pause();
+ stopPolling();
+ },
+ /* Set loop attribute */
+ loop : function () {
+ shouldLoop = true;
+ element.setAttribute('loop','loop');
+ },
+ /* Set loop attribute */
+ noLoop: function () {
+ shouldLoop = false;
+ element.removeAttribute('loop');
+ },
+ isLooping : function () {
+ return shouldLoop;
+ },
+ /* Jump to a specific second (from float) in the video */
+ jump: function ( seconds ) {
+ element.currentTime = seconds;
+ },
+ /* Return duration in seconds with frac (as float) */
+ duration: function () {
+ return element.duration;
+ },
+ /* Return video current time as seconds with frac (as float) */
+ time: function () {
+ return element.currentTime;
+ },
+ /* Set playback speed to be scaled by given value (as float) */
+ speed: function ( rate ) {
+ if ( rate !== 0.0 )
+ {
+ element.playbackRate = rate;
+ playbackRate = rate;
+ }
+ else
+ {
+ element.pause();
+ }
+ },
+ /* Set the frame rate of the movie in fps */
+ frameRate: function ( rate ) {
+ // can't as we can not get the fps from the movie ... ideas?
+ //throw( 'Please use speed() instead' );
+ this.speed( rate / fps );
+ },
+ /* GSVideo? */
+ getSourceFrameRate: function () {
+ //throw( 'This is not available for web video' );
+ fps;
+ },
+ /* GSVideo? */
+ goToBeginning: function () {
+ this.jump(0);
+ },
+ /* Java? */
+ dispose: function () {
+ this.stop();
+ document.body.removeChild(element);
+ delete element;
+ },
+ /* ? */
+ ready: function () {
+ return element.readyState > 2;
+ },
+ /* ? */
+ newFrame: function () {
+ return this.available();
+ },
+ /* ? */
+ getFilename: function () {
+ return element.currentSrc;
+ },
+ /* PImage inheritance */
+ /* http://processing.org/reference/PImage.html */
+ /* PImage.get */
+ get: function () {
+ return frame.get.apply(frame,arguments);
+ },
+ /* PImage.set */
+ set: function () {
+ return frame.set.apply(frame,arguments);
+ },
+ /* PImage.copy */
+ copy: function () {
+ return frame.copy.apply(frame,arguments);
+ },
+ /* PImage.mask */
+ mask: function () {
+ return frame.mask.apply(frame,arguments);
+ },
+ /* PImage.blend */
+ blend: function () {
+ return frame.blend.apply(frame,arguments);
+ },
+ /* PImage.filter */
+ filter: function () {
+ return frame.filter.apply(frame,arguments);
+ },
+ /* PImage.save */
+ save: function () {
+ return frame.save.apply(frame,arguments);
+ },
+ /* PImage.resize */
+ resize: function (){
+ return frame.resize.apply(frame,arguments);
+ },
+ /* PImage.loadPixels */
+ loadPixels: function () {
+ return frame.loadPixels.apply(frame,arguments);
+ },
+ /* PImage.updatePixels */
+ updatePixels: function () {
+ return frame.updatePixels.apply(frame,arguments);
+ },
+ /* PImage.toImageData - Processing.js internally used */
+ toImageData: function () {
+ return frame.toImageData.apply(frame,arguments);
+ }
+ };
+
+ /* PImage.width */
+ Movie.prototype.__defineGetter__('width',function(){
+ return frame.width;
+ });
+ /* PImage.height */
+ Movie.prototype.__defineGetter__('height',function(){
+ return frame.height;
+ });
+ /* PImage.pixels */
+ Movie.prototype.__defineGetter__('pixels',function(){
+ return frame.pixels;
+ });
+ /* PImage.isRemote - Processing.js internally used */
+ Movie.prototype.__defineGetter__('isRemote',function(){
+ return frame.isRemote;
+ });
+ Movie.prototype.__defineSetter__('isRemote',function(v){
+ frame.isRemote = v;
+ });
+ /* PImage.sourceImg - Processing.js internally used */
+ Movie.prototype.__defineGetter__('sourceImg',function(){
+ return frame.sourceImg;
+ });
+ Movie.prototype.__defineSetter__('sourceImg',function(s){
+ frame.sourceImg = s;
+ });
+
+ return Movie;
+
+})(window,document);
View
74 tests/dance_simple/template/template.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>@@sketch@@ : Built with Processing and Processing.js</title>
+ <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAQAAVzABAEAjBQAaDwYAWjUGAGE6CQBrQQ0ATS8PAFhAJwBUQC8AbFI6AHVXPACBZk4A4NrWAPb19QAAAAAAAMmZmZmZmgAJIwAAAAAAcMIjPjA+PjAKpxIuMDMzMAm0Ii4zMzMACaIiLt3dMAAJtyIuIzPQAAm0Un5yM+IzKLRkfncy4iIotRF+dyLkIiq0QX53F+EiGrQUTkd34iIatEVu7u5iIVrBVVRBRFRVbAtGZGZla2uwAMu7u7u8vADAAwAAgAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIABAADAAwAA" />
+ <meta name="Generator" content="Processing" />
+ <!-- - - - - - - - - - - - - - - - - - - - -
+ +
+ + Wondering how this works?
+ +
+ + Go to: http://processing.org/
+ + and: http://processingjs.org/
+ +
+ + - - - - - - - - - - - - - - - - - - - - -->
+ <style type="text/css">
+ body {
+ background-color: #333; color: #bbb; line-height: normal;
+ font-family: Lucida Grande, Lucida Sans, Arial, Helvetica Neue, Verdana, Geneva, sans-serif;
+ font-size: 11px; font-weight: normal; text-decoration: none;
+ line-height: 1.5em;
+ }
+ a img {
+ border: 0px solid transparent;
+ }
+ a, a:link, a:visited, a:active, a:hover {
+ color: #cdcdcd; text-decoration: underline;
+ }
+ h1 {
+ font-family: Arial, Helvetica Neue, Verdana, Geneva, sans-serif;
+ width: 100%; letter-spacing: 0.1em;
+ margin-bottom: 1em; font-size: 1.65em;
+ }
+ canvas {
+ display: block;
+ outline: 0px;
+ margin-bottom: 1.5em;
+ }
+ #content {
+ margin: 50px auto 0px auto; padding: 25px 25px 15px 25px;
+ width: @@width@@px; min-width: 300px; overflow: auto;
+ border-left: 1px solid #444; border-top: 1px solid #444;
+ border-right: 1px solid #333; border-bottom: 1px solid #333;
+ background-color: #3d3d3d;
+ }
+ </style>
+ <!--[if lt IE 9]>
+ <script type="text/javascript">alert("Your browser does not support the canvas tag.");</script>
+ <![endif]-->
+ <script src="processing.video.js" type="text/javascript"></script>
+ <script src="processing.js" type="text/javascript"></script>
+ @@scripts@@
+ </head>
+ <body>
+ <div id="content">
+ <div>
+ <canvas id="@@id@@" data-processing-sources="@@sketch@@.pde"
+ width="@@width@@" height="@@height@@">
+ <p>Your browser does not support the canvas tag.</p>
+ <!-- Note: you can put any alternative content here. -->
+ </canvas>
+ <noscript>
+ <p>JavaScript is required to view the contents of this page.</p>
+ </noscript>
+ </div>
+ <h1>@@sketch@@</h1>
+ <p id="description">@@description@@</p>
+ <p id="sources">Source code: @@source@@</p>
+ <p>
+ Built with <a href="http://processing.org" title="Processing">Processing</a>
+ and <a href="http://processingjs.org" title="Processing.js">Processing.js</a>
+ </p>
+ </div>
+ </body>
+</html>
View
49 tests/station_frame_stepping/template/processing.video.js
@@ -1,3 +1,11 @@
+/**
+ * Attempting to write a Movie.class for Processing.js
+ *
+ * https://github.com/fjenett/processing-video-js
+ *
+ *
+ * fjenett - 2012
+ */
var Movie = (function(window,document){
@@ -17,6 +25,8 @@ var Movie = (function(window,document){
var lastTime = -1, pollerTs = -1;
var fpsToSeconds;
+ var fps = 25.0;
+
var callListeners = function (meth, args) {
for ( var i = 0, k = listeners.length; i < k; i++ ) {
if ( meth in listeners[i] ) {
@@ -105,7 +115,7 @@ var Movie = (function(window,document){
}
lastTime = now;
}
- pollerTs = setTimeout( doPoll, 1000/25.0 );
+ pollerTs = setTimeout( doPoll, 1000/fps );
}
doPoll();
}
@@ -134,7 +144,7 @@ var Movie = (function(window,document){
// var-args assumes: listener, src1, src2, …, srcN
var l = args.shift();
opts = {
- src: args,
+ sources: args,
listener: l
};
} else {
@@ -142,30 +152,28 @@ var Movie = (function(window,document){
}
element = opts.element;
- if ( !opts.element && opts.src ) {
+ if ( !opts.element && opts.sources ) {
element = document.createElement('video');
element.setAttribute( 'crossorigin', 'anonymous' );
//element.setAttribute( 'poster', 'poster.gif' );
//element.setAttribute( 'controls', 'controls' );
//element.setAttribute( 'src', opts.src );
- for ( var i = 0, k = opts.src.length; i < k; i++ ) {
+ for ( var i = 0, k = opts.sources.length; i < k; i++ ) {
var source = document.createElement('source');
- source.setAttribute('src', opts.src[i]);
+ source.setAttribute('src', opts.sources[i]);
element.appendChild(source);
}
var container = document.createElement('div');
container.style.position = 'absolute';
container.style.left = '-10000px';
container.style.top = '-10000px';
- // container.style.width = '320px';
- // container.style.height = '240px';
container.appendChild( element );
document.body.appendChild( container );
}
shouldLoop = ('loop' in element) ? element.loop : false;
- if ( 'poster' in element && element.poster ) {
+ if ( ('poster' in element && element.poster) || opts.poster ) {
posterImage = new Image();
posterImage.onload = function () {
if ( element.paused ) {
@@ -199,6 +207,10 @@ var Movie = (function(window,document){
Movie.prototype = {
/* */
+ setSourceFrameRate: function ( frameRate ) {
+ fps = frameRate;
+ },
+ /* */
getElement: function () {
return element;
},
@@ -210,7 +222,13 @@ var Movie = (function(window,document){
/* Reads the current frame of the movie. */
read: function () {
frame = new sketch.PImage;
- frame.fromHTMLImageData(element);
+ try {
+ frame.fromHTMLImageData(element);
+ //frame.isRemote = false;
+ } catch (e) {
+ //console.log(e);
+ throw(e);
+ }
return frame;
},
/* Returns "true" when a new movie frame is available to read. */
@@ -278,11 +296,13 @@ var Movie = (function(window,document){
/* Set the frame rate of the movie in fps */
frameRate: function ( rate ) {
// can't as we can not get the fps from the movie ... ideas?
- throw( 'Please use speed() instead' );
+ //throw( 'Please use speed() instead' );
+ this.speed( rate / fps );
},
/* GSVideo? */
getSourceFrameRate: function () {
- throw( 'This is not available for web video' );
+ //throw( 'This is not available for web video' );
+ fps;
},
/* GSVideo? */
goToBeginning: function () {
@@ -366,6 +386,13 @@ var Movie = (function(window,document){
Movie.prototype.__defineGetter__('pixels',function(){
return frame.pixels;
});
+ /* PImage.isRemote - Processing.js internally used */
+ Movie.prototype.__defineGetter__('isRemote',function(){
+ return frame.isRemote;
+ });
+ Movie.prototype.__defineSetter__('isRemote',function(v){
+ frame.isRemote = v;
+ });
/* PImage.sourceImg - Processing.js internally used */
Movie.prototype.__defineGetter__('sourceImg',function(){
return frame.sourceImg;
View
49 tests/station_movie_event/template/processing.video.js
@@ -1,3 +1,11 @@
+/**
+ * Attempting to write a Movie.class for Processing.js
+ *
+ * https://github.com/fjenett/processing-video-js
+ *
+ *
+ * fjenett - 2012
+ */
var Movie = (function(window,document){
@@ -17,6 +25,8 @@ var Movie = (function(window,document){
var lastTime = -1, pollerTs = -1;
var fpsToSeconds;
+ var fps = 25.0;
+
var callListeners = function (meth, args) {
for ( var i = 0, k = listeners.length; i < k; i++ ) {
if ( meth in listeners[i] ) {
@@ -105,7 +115,7 @@ var Movie = (function(window,document){
}
lastTime = now;
}
- pollerTs = setTimeout( doPoll, 1000/25.0 );
+ pollerTs = setTimeout( doPoll, 1000/fps );
}
doPoll();
}
@@ -134,7 +144,7 @@ var Movie = (function(window,document){
// var-args assumes: listener, src1, src2, …, srcN
var l = args.shift();
opts = {
- src: args,
+ sources: args,
listener: l
};
} else {
@@ -142,30 +152,28 @@ var Movie = (function(window,document){
}
element = opts.element;
- if ( !opts.element && opts.src ) {
+ if ( !opts.element && opts.sources ) {
element = document.createElement('video');
element.setAttribute( 'crossorigin', 'anonymous' );
//element.setAttribute( 'poster', 'poster.gif' );
//element.setAttribute( 'controls', 'controls' );
//element.setAttribute( 'src', opts.src );
- for ( var i = 0, k = opts.src.length; i < k; i++ ) {
+ for ( var i = 0, k = opts.sources.length; i < k; i++ ) {
var source = document.createElement('source');
- source.setAttribute('src', opts.src[i]);
+ source.setAttribute('src', opts.sources[i]);
element.appendChild(source);
}
var container = document.createElement('div');
container.style.position = 'absolute';
container.style.left = '-10000px';
container.style.top = '-10000px';
- // container.style.width = '320px';
- // container.style.height = '240px';
container.appendChild( element );
document.body.appendChild( container );
}
shouldLoop = ('loop' in element) ? element.loop : false;
- if ( 'poster' in element && element.poster ) {
+ if ( ('poster' in element && element.poster) || opts.poster ) {
posterImage = new Image();
posterImage.onload = function () {
if ( element.paused ) {
@@ -199,6 +207,10 @@ var Movie = (function(window,document){
Movie.prototype = {
/* */
+ setSourceFrameRate: function ( frameRate ) {
+ fps = frameRate;
+ },
+ /* */
getElement: function () {
return element;
},
@@ -210,7 +222,13 @@ var Movie = (function(window,document){
/* Reads the current frame of the movie. */
read: function () {
frame = new sketch.PImage;
- frame.fromHTMLImageData(element);
+ try {
+ frame.fromHTMLImageData(element);
+ //frame.isRemote = false;
+ } catch (e) {
+ //console.log(e);
+ throw(e);
+ }
return frame;
},
/* Returns "true" when a new movie frame is available to read. */
@@ -278,11 +296,13 @@ var Movie = (function(window,document){
/* Set the frame rate of the movie in fps */
frameRate: function ( rate ) {
// can't as we can not get the fps from the movie ... ideas?
- throw( 'Please use speed() instead' );
+ //throw( 'Please use speed() instead' );
+ this.speed( rate / fps );
},
/* GSVideo? */
getSourceFrameRate: function () {
- throw( 'This is not available for web video' );
+ //throw( 'This is not available for web video' );
+ fps;
},
/* GSVideo? */
goToBeginning: function () {
@@ -366,6 +386,13 @@ var Movie = (function(window,document){
Movie.prototype.__defineGetter__('pixels',function(){
return frame.pixels;
});
+ /* PImage.isRemote - Processing.js internally used */
+ Movie.prototype.__defineGetter__('isRemote',function(){
+ return frame.isRemote;
+ });
+ Movie.prototype.__defineSetter__('isRemote',function(v){
+ frame.isRemote = v;
+ });
/* PImage.sourceImg - Processing.js internally used */
Movie.prototype.__defineGetter__('sourceImg',function(){
return frame.sourceImg;
View
49 tests/station_simple/template/processing.video.js
@@ -1,3 +1,11 @@
+/**
+ * Attempting to write a Movie.class for Processing.js
+ *
+ * https://github.com/fjenett/processing-video-js
+ *
+ *
+ * fjenett - 2012
+ */
var Movie = (function(window,document){
@@ -17,6 +25,8 @@ var Movie = (function(window,document){
var lastTime = -1, pollerTs = -1;
var fpsToSeconds;
+ var fps = 25.0;
+
var callListeners = function (meth, args) {
for ( var i = 0, k = listeners.length; i < k; i++ ) {
if ( meth in listeners[i] ) {
@@ -105,7 +115,7 @@ var Movie = (function(window,document){
}
lastTime = now;
}
- pollerTs = setTimeout( doPoll, 1000/25.0 );
+ pollerTs = setTimeout( doPoll, 1000/fps );
}
doPoll();
}
@@ -134,7 +144,7 @@ var Movie = (function(window,document){
// var-args assumes: listener, src1, src2, …, srcN
var l = args.shift();
opts = {
- src: args,
+ sources: args,
listener: l
};
} else {
@@ -142,30 +152,28 @@ var Movie = (function(window,document){
}
element = opts.element;
- if ( !opts.element && opts.src ) {
+ if ( !opts.element && opts.sources ) {
element = document.createElement('video');
element.setAttribute( 'crossorigin', 'anonymous' );
//element.setAttribute( 'poster', 'poster.gif' );
//element.setAttribute( 'controls', 'controls' );
//element.setAttribute( 'src', opts.src );
- for ( var i = 0, k = opts.src.length; i < k; i++ ) {
+ for ( var i = 0, k = opts.sources.length; i < k; i++ ) {
var source = document.createElement('source');
- source.setAttribute('src', opts.src[i]);
+ source.setAttribute('src', opts.sources[i]);
element.appendChild(source);
}
var container = document.createElement('div');
container.style.position = 'absolute';
container.style.left = '-10000px';
container.style.top = '-10000px';
- // container.style.width = '320px';
- // container.style.height = '240px';
container.appendChild( element );
document.body.appendChild( container );
}
shouldLoop = ('loop' in element) ? element.loop : false;
- if ( 'poster' in element && element.poster ) {
+ if ( ('poster' in element && element.poster) || opts.poster ) {
posterImage = new Image();
posterImage.onload = function () {
if ( element.paused ) {
@@ -199,6 +207,10 @@ var Movie = (function(window,document){
Movie.prototype = {
/* */
+ setSourceFrameRate: function ( frameRate ) {
+ fps = frameRate;
+ },
+ /* */
getElement: function () {
return element;
},
@@ -210,7 +222,13 @@ var Movie = (function(window,document){
/* Reads the current frame of the movie. */
read: function () {
frame = new sketch.PImage;
- frame.fromHTMLImageData(element);
+ try {
+ frame.fromHTMLImageData(element);
+ //frame.isRemote = false;
+ } catch (e) {
+ //console.log(e);
+ throw(e);
+ }
return frame;
},
/* Returns "true" when a new movie frame is available to read. */
@@ -278,11 +296,13 @@ var Movie = (function(window,document){
/* Set the frame rate of the movie in fps */
frameRate: function ( rate ) {
// can't as we can not get the fps from the movie ... ideas?
- throw( 'Please use speed() instead' );
+ //throw( 'Please use speed() instead' );
+ this.speed( rate / fps );
},
/* GSVideo? */
getSourceFrameRate: function () {
- throw( 'This is not available for web video' );
+ //throw( 'This is not available for web video' );
+ fps;
},
/* GSVideo? */
goToBeginning: function () {
@@ -366,6 +386,13 @@ var Movie = (function(window,document){
Movie.prototype.__defineGetter__('pixels',function(){
return frame.pixels;
});
+ /* PImage.isRemote - Processing.js internally used */
+ Movie.prototype.__defineGetter__('isRemote',function(){
+ return frame.isRemote;
+ });
+ Movie.prototype.__defineSetter__('isRemote',function(v){
+ frame.isRemote = v;
+ });
/* PImage.sourceImg - Processing.js internally used */
Movie.prototype.__defineGetter__('sourceImg',function(){
return frame.sourceImg;
View
49 tests/station_slitscan_pixels/template/processing.video.js
@@ -1,3 +1,11 @@
+/**
+ * Attempting to write a Movie.class for Processing.js
+ *
+ * https://github.com/fjenett/processing-video-js
+ *
+ *
+ * fjenett - 2012
+ */
var Movie = (function(window,document){
@@ -17,6 +25,8 @@ var Movie = (function(window,document){
var lastTime = -1, pollerTs = -1;
var fpsToSeconds;
+ var fps = 25.0;
+
var callListeners = function (meth, args) {
for ( var i = 0, k = listeners.length; i < k; i++ ) {
if ( meth in listeners[i] ) {
@@ -105,7 +115,7 @@ var Movie = (function(window,document){
}
lastTime = now;
}
- pollerTs = setTimeout( doPoll, 1000/25.0 );
+ pollerTs = setTimeout( doPoll, 1000/fps );
}
doPoll();
}
@@ -134,7 +144,7 @@ var Movie = (function(window,document){
// var-args assumes: listener, src1, src2, …, srcN
var l = args.shift();
opts = {
- src: args,
+ sources: args,
listener: l
};
} else {
@@ -142,30 +152,28 @@ var Movie = (function(window,document){
}
element = opts.element;
- if ( !opts.element && opts.src ) {
+ if ( !opts.element && opts.sources ) {
element = document.createElement('video');
element.setAttribute( 'crossorigin', 'anonymous' );
//element.setAttribute( 'poster', 'poster.gif' );
//element.setAttribute( 'controls', 'controls' );
//element.setAttribute( 'src', opts.src );
- for ( var i = 0, k = opts.src.length; i < k; i++ ) {
+ for ( var i = 0, k = opts.sources.length; i < k; i++ ) {
var source = document.createElement('source');
- source.setAttribute('src', opts.src[i]);
+ source.setAttribute('src', opts.sources[i]);
element.appendChild(source);
}
var container = document.createElement('div');
container.style.position = 'absolute';
container.style.left = '-10000px';
container.style.top = '-10000px';
- // container.style.width = '320px';
- // container.style.height = '240px';
container.appendChild( element );
document.body.appendChild( container );
}
shouldLoop = ('loop' in element) ? element.loop : false;
- if ( 'poster' in element && element.poster ) {
+ if ( ('poster' in element && element.poster) || opts.poster ) {
posterImage = new Image();
posterImage.onload = function () {
if ( element.paused ) {
@@ -199,6 +207,10 @@ var Movie = (function(window,document){
Movie.prototype = {
/* */
+ setSourceFrameRate: function ( frameRate ) {
+ fps = frameRate;
+ },
+ /* */
getElement: function () {
return element;
},
@@ -210,7 +222,13 @@ var Movie = (function(window,document){
/* Reads the current frame of the movie. */
read: function () {
frame = new sketch.PImage;
- frame.fromHTMLImageData(element);
+ try {
+ frame.fromHTMLImageData(element);
+ //frame.isRemote = false;
+ } catch (e) {
+ //console.log(e);
+ throw(e);
+ }
return frame;
},
/* Returns "true" when a new movie frame is available to read. */
@@ -278,11 +296,13 @@ var Movie = (function(window,document){
/* Set the frame rate of the movie in fps */
frameRate: function ( rate ) {
// can't as we can not get the fps from the movie ... ideas?
- throw( 'Please use speed() instead' );
+ //throw( 'Please use speed() instead' );
+ this.speed( rate / fps );
},
/* GSVideo? */
getSourceFrameRate: function () {
- throw( 'This is not available for web video' );
+ //throw( 'This is not available for web video' );
+ fps;
},
/* GSVideo? */
goToBeginning: function () {
@@ -366,6 +386,13 @@ var Movie = (function(window,document){
Movie.prototype.__defineGetter__('pixels',function(){
return frame.pixels;
});
+ /* PImage.isRemote - Processing.js internally used */
+ Movie.prototype.__defineGetter__('isRemote',function(){
+ return frame.isRemote;
+ });
+ Movie.prototype.__defineSetter__('isRemote',function(v){
+ frame.isRemote = v;
+ });
/* PImage.sourceImg - Processing.js internally used */
Movie.prototype.__defineGetter__('sourceImg',function(){
return frame.sourceImg;
View
49 tests/station_slow/template/processing.video.js
@@ -1,3 +1,11 @@
+/**
+ * Attempting to write a Movie.class for Processing.js
+ *
+ * https://github.com/fjenett/processing-video-js
+ *
+ *
+ * fjenett - 2012
+ */
var Movie = (function(window,document){
@@ -17,6 +25,8 @@ var Movie = (function(window,document){
var lastTime = -1, pollerTs = -1;
var fpsToSeconds;
+ var fps = 25.0;
+
var callListeners = function (meth, args) {
for ( var i = 0, k = listeners.length; i < k; i++ ) {
if ( meth in listeners[i] ) {
@@ -105,7 +115,7 @@ var Movie = (function(window,document){
}
lastTime = now;
}
- pollerTs = setTimeout( doPoll, 1000/25.0 );
+ pollerTs = setTimeout( doPoll, 1000/fps );
}
doPoll();
}
@@ -134,7 +144,7 @@ var Movie = (function(window,document){
// var-args assumes: listener, src1, src2, …, srcN
var l = args.shift();
opts = {
- src: args,
+ sources: args,
listener: l
};
} else {
@@ -142,30 +152,28 @@ var Movie = (function(window,document){
}
element = opts.element;
- if ( !opts.element && opts.src ) {
+ if ( !opts.element && opts.sources ) {
element = document.createElement('video');
element.setAttribute( 'crossorigin', 'anonymous' );
//element.setAttribute( 'poster', 'poster.gif' );
//element.setAttribute( 'controls', 'controls' );
//element.setAttribute( 'src', opts.src );
- for ( var i = 0, k = opts.src.length; i < k; i++ ) {
+ for ( var i = 0, k = opts.sources.length; i < k; i++ ) {
var source = document.createElement('source');
- source.setAttribute('src', opts.src[i]);
+ source.setAttribute('src', opts.sources[i]);
element.appendChild(source);
}
var container = document.createElement('div');
container.style.position = 'absolute';
container.style.left = '-10000px';
container.style.top = '-10000px';
- // container.style.width = '320px';
- // container.style.height = '240px';
container.appendChild( element );
document.body.appendChild( container );
}
shouldLoop = ('loop' in element) ? element.loop : false;
- if ( 'poster' in element && element.poster ) {
+ if ( ('poster' in element && element.poster) || opts.poster ) {
posterImage = new Image();
posterImage.onload = function () {
if ( element.paused ) {
@@ -199,6 +207,10 @@ var Movie = (function(window,document){
Movie.prototype = {
/* */
+ setSourceFrameRate: function ( frameRate ) {
+ fps = frameRate;
+ },
+ /* */
getElement: function () {
return element;
},
@@ -210,7 +222,13 @@ var Movie = (function(window,document){
/* Reads the current frame of the movie. */
read: function () {
frame = new sketch.PImage;
- frame.fromHTMLImageData(element);
+ try {
+ frame.fromHTMLImageData(element);
+ //frame.isRemote = false;
+ } catch (e) {
+ //console.log(e);
+ throw(e);
+ }
return frame;
},
/* Returns "true" when a new movie frame is available to read. */
@@ -278,11 +296,13 @@ var Movie = (function(window,document){
/* Set the frame rate of the movie in fps */
frameRate: function ( rate ) {
// can't as we can not get the fps from the movie ... ideas?
- throw( 'Please use speed() instead' );
+ //throw( 'Please use speed() instead' );
+ this.speed( rate / fps );
},
/* GSVideo? */
getSourceFrameRate: function () {
- throw( 'This is not available for web video' );
+ //throw( 'This is not available for web video' );
+ fps;
},
/* GSVideo? */
goToBeginning: function () {
@@ -366,6 +386,13 @@ var Movie = (function(window,document){
Movie.prototype.__defineGetter__('pixels',function(){
return frame.pixels;
});
+ /* PImage.isRemote - Processing.js internally used */
+ Movie.prototype.__defineGetter__('isRemote',function(){
+ return frame.isRemote;
+ });
+ Movie.prototype.__defineSetter__('isRemote',function(v){
+ frame.isRemote = v;
+ });
/* PImage.sourceImg - Processing.js internally used */
Movie.prototype.__defineGetter__('sourceImg',function(){
return frame.sourceImg;

0 comments on commit 482f629

Please sign in to comment.
Something went wrong with that request. Please try again.