Interactive video with mouse function?

Answers

• kfrajer

  July 2016

  Did you check the examples from the video library? I think there is one that demonstrates what you want. The name of the example is speed:

  I hope this helps,

  Kf

  /**
   * Speed. 
   *
   * Use the Movie.speed() method to change
   * the playback speed.
   * 
   */
  
  import processing.video.*;
  
  Movie mov;
  
  void setup() {
    size(640, 360);
    background(0);
    mov = new Movie(this, "transit.mov");
    mov.loop();
  }
  
  void movieEvent(Movie movie) {
    mov.read();  
  }
  
  void draw() {    
    image(mov, 0, 0);
  
    float newSpeed = map(mouseX, 0, width, 0.1, 2);
    mov.speed(newSpeed);
  
    fill(255);
    text(nfc(newSpeed, 2) + "X", 10, 30); 
  }  
  
• nube101

  July 2016

  Hey thanks heaps! is there a way to keep the speed consistent at all? similar to this effect > http://portfolio.imtawn.com/collection.html tied in with a loop function or string?
• nube101

  July 2016

  Heres a better/ simple example > http://eelslap.com/ ~such nube :( thank you!
• kfrajer

  July 2016

  I see now. You don't want to translate the mouse speed into video speed. Instead, what you want to do is to translate your width dimension into what frame from your video the sketch should play. Let's see, I think the frames.pde example will suit your needs. You need to modify the code so you map your dimension to the duration of your movie:

  /**
   * Frames 
   * by Andres Colubri. 
   * 
   * Moves through the video one frame at the time by using the
   * arrow keys. It estimates the frame counts using the framerate
   * of the movie file, so it might not be exact in some cases.
   */
  
  import processing.video.*;
  
  Movie mov;
  int newFrame = 0;
  
  void setup() {
    size(640, 360);
    background(0);
    // Load and set the video to play. Setting the video 
    // in play mode is needed so at least one frame is read
    // and we can get duration, size and other information from
    // the video stream. 
    mov = new Movie(this, "transit.mov");  
  
    // Pausing the video at the first frame. 
    mov.play();
    mov.jump(0);
    mov.pause();
  }
  
  void movieEvent(Movie m) {
    m.read();
  }
  
  void draw() {
    background(0);
    image(mov, 0, 0, width, height);
    fill(255);
    text(getFrame() + " / " + (getLength() - 1), 10, 30);
    int f=ceil (map(mouseX,0,width,1,getLength()));
    setFrame(f);
  }
  
  //void keyPressed() {
  //  if (key == CODED) {
  //    if (keyCode == LEFT) {
  //      if (0 < newFrame) newFrame--; 
  //    } else if (keyCode == RIGHT) {
  //      if (newFrame < getLength() - 1) newFrame++;
  //    }
  //  } 
  //  setFrame(newFrame);  
  //}
  
  int getFrame() {    
    return ceil(mov.time() * 30) - 1;
  }
  
  void setFrame(int n) {
    mov.play();
  
    // The duration of a single frame:
    float frameDuration = 1.0 / mov.frameRate;
  
    // We move to the middle of the frame by adding 0.5:
    float where = (n + 0.5) * frameDuration; 
  
    // Taking into account border effects:
    float diff = mov.duration() - where;
    if (diff < 0) {
      where += diff - 0.25 * frameDuration;
    }
  
    mov.jump(where);
    mov.pause();  
  }  
  
  int getLength() {
    return int(mov.duration() * mov.frameRate);
  }
  

  Notice this is the original code with a minor modification in the draw method where I call the map function. Please see the processing reference for further details. Also notice I commented out the section of keyPressed as it will interfere with the mouse position behavior although in regards to your task.

  I hope this helps,

  Kf