want to move sketch with "invisible" movie to the web

clair

Overview: Code below this post works by playing a movie from which pixels are selected and written to the sketch window. The movie runs invisibly in the background while the scan is being written to the sketch window.

The code posted below works is from Form+Code. Everything works fine while running in Processing. However . . .

I am now trying to make it viable for the web.

After researching, I have found that I need to specifiy the movie part of the sketch in the HTML page. I have done that like this:

<video preload="auto" height="600" width="120" controls="false" loop>
                <source src="mpfour.mp4" />

To hide the movie I have set the video tag to display: none, which is the correct thing to do here. And in my Processing sketch I have added this line:

var video = document.querySelector("video");

And I've changed this line to the next one:

  //    myVideo = new Movie(this, "mpfour.mp4");
        myVideo = video;

And this line to the next:

// void movieEvent(Movie myMovie) {
   void movieEvent(Movie myVideo) {

The index.html in the web-export folder comes up without error. But the window is blank and nothing happens.

At any rate, I know this is just the beginning of my problems and I am looking for help in this. Quickest would be if anyone here has gotten this particular sketch from Form+Code working on the web! lol

    /**
     * Transform: Slit-Scan
     * from Form+Code in Design, Art, and Architecture 
     * by Casey Reas, Chandler McWilliams, and LUST
     * Princeton Architectural Press, 2010
     * ISBN 9781568989372
     * 
     * This code was written for Processing 1.2+
     * Get Processing at http://www.processing.org/download
     */

    import processing.video.*;

    Movie myVideo;
    int video_width     = 160;
    int video_height    = 600;
    int video_slice_x   = video_width/2;
    int window_width    = 900;
    int window_height   = video_height;
    int draw_position_x = 0; 
    boolean newFrame  = false;

    void setup() {
      size(900, 600);
      background(0);
      myVideo = new Movie(this, "mpfour.mp4");
      size(window_width, window_height);
      background(0);
      myVideo.loop();
    }

    void movieEvent(Movie myMovie) {
      myMovie.read();
      newFrame = true;
    }

    void draw() {
      if (newFrame) {
        // int r = int(random(2,25));
        loadPixels();
        for (int y=0; y<window_height; y++) {
          int setPixelIndex = y*window_width + draw_position_x;
          int getPixelIndex = y*video_width  + video_slice_x;
          pixels[setPixelIndex] = myVideo.pixels[getPixelIndex];
        }
        updatePixels();

        draw_position_x++;
        if (draw_position_x >= window_width) {
          noLoop();
        }
        newFrame = false;
      }
    }

clair

Basically this is answered: it can't be done. Way around it is to save frames of the sketch window and then use ffmpeg to make a movie from those frames, thus creating a fake slit-scanning of a movie.

Here's the topic where this was discussed:

http://forum.processing.org/two/discussion/820/how-do-you-enable-a-movie-mymovie-in-a-processing-sketch-to-play-on-the-web#Item_6