How can I draw over a video using topLayer..

jonnymce

So, I want to draw over a video, and managed to do it using topLayer. but when I try with this simple code for a kind of orange drip effect, the colour and transparency is lost, and I get solidish black "drips"

here is the drawing code I'd like to have appearing over a video

float x, y, r, g, b, radius;

int timer;

boolean sketchFullScreen() {

  return true;
}

void setup() {

  size(500, 500);

  background(0);

  noStroke();

  smooth();

  frame.setBackground(new java.awt.Color(0,0,0));
}

void draw() {
  // use frameCount to move x, use modulo to keep it within bounds
  y = frameCount % height;

  // use millis() and a timer to change the y every 2 seconds
  if (millis() - timer >= 6000+(random(2000)-2000)) {

    x = random(width);

    timer = millis();
  }


  r = (random(10) + 245);


  g= (random(100)+132);

  // use frameCount and noise to change the blue color component
  b = 155 - noise(1 + frameCount * 0.025) * 255;

  // use frameCount and noise to change the radius
  radius = noise(frameCount * 0.05) * 4;

  color c = color(r, g, b,(random(50)+50));
  fill(c);
  ellipse(x, y, radius, radius);
}

....................................................

this is my attempt to insert this over a video,

import processing.video.*; 

Movie myMovie; 
float x;
float y;
float r, g, b, radius;
int timer;


PGraphics topLayer;
boolean sketchFullScreen() {
  return true;
}

void setup() 
{ 
  size(960, 540); 
  myMovie = new Movie(this, "fall2.mov"); 
  myMovie.loop();
  topLayer = createGraphics(width, height);
  frame.setBackground(new java.awt.Color(0,0,0));
} 


void movieEvent(Movie myMovie) 
{ 
  myMovie.read();
}

void draw() 
{ 


  image(myMovie, 0,0, width, height);

  topLayer.beginDraw();
  // use frameCount to move x, use modulo to keep it within bounds
  y = frameCount % height;

  // use millis() and a timer to change the y every 2 seconds
  if (millis() - timer >= 6000+(random(2000)-2000)) {
    x = random(width);
    timer = millis();
  }


  r = (random(10) + 245);


  g= (random(100)+132);


  b = 155 - noise(1 + frameCount * 0.025) * 255;


  radius = noise(frameCount * 0.05) * 4;

  color c = color(r, g, b,(random(50)+50));
  topLayer.fill(c);

  topLayer.ellipse(x, y, radius, radius);

  topLayer.endDraw();
  image( topLayer, 0, 0 );


} 

............................

any help appreciated!

blyk

There is no problem. It is just working fine on my system. I am using procesing 2.0.x on windows 7 64 bit system. It shows the drips pretty well but all in black color.

Try running your code on others system

jonnymce

Thanks for the reply.. I'd like them to appear as per the first sketch (like orange paint drips) It was the loss of colour info, and i think transparency that I don't understand. Why are they black?

blyk

Okay just add topLayer.noStroke(); just before the topLayer.ellipse(x,y,radius,radius); 8-X . Actually the ellipse drawn are so small so they get covered by the stroke with default size, which is one pixel and black color.

      import processing.video.*; 

      Movie myMovie; 
      float x;
      float y;
      float r, g, b, radius;
      int timer;


      PGraphics topLayer;
      //boolean sketchFullScreen() {
      //  return true;
      //}

      void setup() 
      { 
        size(960, 540); 
        myMovie = new Movie(this, "2.mp4"); 
        myMovie.loop();
        topLayer = createGraphics(width, height);
        frame.setBackground(new java.awt.Color(0,0,0));
      } 


      void movieEvent(Movie myMovie) 
      { 
        myMovie.read();
      }

      void draw() 
      { 


        image(myMovie, 0,0, width, height);

        topLayer.beginDraw();
        // use frameCount to move x, use modulo to keep it within bounds
        y = frameCount % height;

        // use millis() and a timer to change the y every 2 seconds
        if (millis() - timer >= 6000+(random(2000)-2000)) {
          x = random(width);
          timer = millis();
        }

        r = (random(10) + 245);
        g= (random(100)+132);
        b = 155 - noise(1 + frameCount * 0.025) * 255;
        radius = noise(frameCount * 0.05) * 40; // change the size so that you see the changes

        color c = color(r, g, b,(random(50)+50));
        topLayer.fill(c);
        topLayer.noStroke(); // add nostroke becasue of this all ellipse has black outline and ellipse were so small to see the fill 
        topLayer.ellipse(x, y, radius, radius);
        topLayer.endDraw();
        image( topLayer, 0, 0 );


      } 

jonnymce

Thanks! much appreciated.