eessppeelllloo/processing4
1
0
Fork 0
mirror of https://github.com/processing/processing4.git synced 2026-05-03 09:26:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Processing.js 1.4.0 and updates to js examples and todo

Browse Source
This commit is contained in:
fjenett
2012-08-02 17:11:58 +00:00
parent b5edf4a299
commit 6d4a1b941d
6 changed files with 648 additions and 414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
javascript/examples/HTML5/Video/atTheStation/atTheStation.pde
View File

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

4
javascript/examples/HTML5/Video/atTheStation/mov.js
View File

@@ -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);

10
javascript/examples/HTML5/Video/charmyDance/charmyDance.pde
View File

@@ -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 );
}
}

35
javascript/examples/HTML5/Video/charmyDance/mov.js
View File

@@ -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/