Any comments or suggestions working with multiple video in Processing, or we have reached current limitations? 

S.

I am trying to set multiple videos and trigger each one of them with TUIO, but the following procedure does not work, as it displays the first video ok, but when I add a second, third and so on it displays wrong videos. Can you point out where this is wrong?

S.

Initialization

2.     tex = new GLTexture[maxMovies];
3.    
4.     myMovies = new GSMovie[maxMovies]; 
5.     
6.     for (int i = 0; i < myMovies.length; i ++ ) {
7.       println(i);
8.       myMovies[i] = new GSMovie(this, i+1 + ".mov");
9.       myMovies[i].loop();
10.       myMovies[i].pause();
11.       tex[i] = new GLTexture(this, i+1);
12.       tex[i].putPixelsIntoTexture(myMovies[i]);
13.     } 

Drawing

2. for (int i=0;i<tuioObjectList.size();i++){
3.        TuioObject tobj = (TuioObject)tuioObjectList.elementAt(i);
4.        stroke(0);
5.        fill(120); 
6.        
7.        if (i == 0){
8.          pushMatrix();
9.          translate(tobj.getScreenX(width),tobj.getScreenY(height));
10.          ellipse (0,0,70,70);
11.          rotate(tobj.getAngle());
12.          myMovies[0].loadPixels();  
13.          myMovies[0].updatePixels();
14.          myMovies[0].play();
15.          image(myMovies[0],obj_size/2,obj_size/2);
16.          popMatrix();
17.          fill(255);
18.          text(""+tobj.getSymbolID(), tobj.getScreenX(width), tobj.getScreenY(height));
19.        }
20.        
21.        if (i == 1){
22.          pushMatrix();
23.          translate(tobj.getScreenX(width),tobj.getScreenY(height));
24.          ellipse (0,0,70,70);
25.          rotate(tobj.getAngle());
26.          myMovies[1].loadPixels();  
27.          myMovies[1].updatePixels();
28.          myMovies[1].play();
29.          image(myMovies[1],obj_size/2,obj_size/2);
30.          popMatrix();
31.          fill(255);
32.          text(""+tobj.getSymbolID(), tobj.getScreenX(width), tobj.getScreenY(height));
33.        }
34.        
35.        if (i == 2){
36.          pushMatrix();
37.          translate(tobj.getScreenX(width),tobj.getScreenY(height));
38.          ellipse (0,0,70,70);
39.          rotate(tobj.getAngle());
40.          myMovies[2].loadPixels();  
41.          myMovies[2].updatePixels();
42.          myMovies[2].play();
43.          image(myMovies[1],obj_size/2,obj_size/2);
44.          popMatrix();
45.          fill(255);
46.          text(""+tobj.getSymbolID(), tobj.getScreenX(width), tobj.getScreenY(height));
47.        }

So, I wanted to do a very simple thing, which turned out to be a disaster. I wanted to use two different sketches that communicate over OSC, and from the first to press a button, and wait on the second sketch to trigger one item in the Arraylist to appear on screen. Following I have the two sketches so that you can follow my idea.

The Arralist is triggered perfectly when is on the same sketch, but it does not work on two different sketches. The difference is that in the first case I evaluate a boolean - when true add a new item to the Arraylist - but in the second case I send a variable (1 or 0) to evaluate on the second sketch. This does not seem to work.

Any ideas???

2. int b = 0;
3. boolean captured;
4. boolean isOverSomething;
5. ArrayList shapeMove = new ArrayList();
6. Button button;
7. 
   
8. import oscP5.*;
9. import netP5.*;
10. OscP5 incomingOSC;
11. OscP5 oscP5;
12. NetAddress myRemoteLocation;
13. int intButtonEnter = 0;
14. 
    
15. void setup(){
16.   size(800, 500);
17.   button = new Button(200, 300);
18.   oscP5 = new OscP5(this,12000);
19.   myRemoteLocation = new NetAddress("127.0.0.1", 12000);
20. }
21. 
    
22. void draw(){
23.   background(255);
24.   button.display();
25. }
26. 
    
27. void mousePressed(){
28.   if( button.pressed() ){
29.       intButtonEnter = 1;
30.   } else {
31.       intButtonEnter = 0;
32.   }
33.   OscMessage setNewCapsule = new OscMessage("/output");
34.   setNewCapsule.add(intButtonEnter); 
35.   oscP5.send(setNewCapsule, myRemoteLocation);   
36.   
37.   //println(intButtonEnter);
38. }
39. 
    
40. class ShapeMove{
41.   int x;
42.   int y;
43.   int h;
44.   int w;
45.   int origx;
46.   int origy;
47.   int deltax;
48.   int deltay;
49.   int posXdiff;
50.   int posYdiff;
51.   int xdragdelta;
52.   int ydragdelta;
53.   boolean over;
54.   boolean locked = false;
55.   boolean imCaptured = false;
56.   boolean overMe = false;
57.   ShapeMove(int _x, int _y, int _h, int _w) {
58.     x = _x;
59.     y = _y;
60.     h = _h;
61.     w = _w;
62.   }
63.   
64.   void isover() {
65.     if (mouseX >= x && mouseX <=x+w &&
66.       mouseY >= y && mouseY <= y+h) {
67.       over = true;
68.       isOverSomething = true;
69.     } else {
70.       over = false;
71.       isOverSomething = false;
72.     }
73.   }
74.   
75.   void overme() {
76.     if (isOverSomething) {
77.       if (overMe) {
78.         if (!over) {
79.           overMe = false;
80.           isOverSomething = false;
81.         }
82.       }
83.     } else {
84.       if (over) {
85.         overMe = true;
86.         isOverSomething = true;
87.       }
88.     }
89.   }
90.   
91.   void update() {
92.     if (over && mousePressed && !imCaptured && !captured) {
93.       deltax = x - mouseX;
94.       deltay = y - mouseY;
95.       origx = x;
96.       origy = y;
97.       captured = true;
98.       imCaptured = true;
99.     }
100.     if (!mousePressed && imCaptured) {
101.       captured = false;
102.       imCaptured = false;
103.     }
104.     if (imCaptured) {
105.       xdragdelta = x - (mouseX + posXdiff);
106.       ydragdelta = y - (mouseY + posYdiff);
107.       x = mouseX + deltax;
108.       y = mouseY + deltay;
109.     }
110.   } 
111. }
112. 
     
113. class Button{
114.   int rectX, rectY;      // Position of square button
115.   int rectSize = 50;     // Diameter of rect
116.   color rectColor;
117.   color rectHighlight;
118.   boolean rectOver = false;
119.   Button(int _rectX, int _rectY) {
120.     smooth();
121.     rectColor = color(0);
122.     rectHighlight = color(51);
123.     rectX = _rectX;
124.     rectY = _rectY;
125.   }
126.   
127.   void display() {
128.     update(mouseX, mouseY);    
129.     if (rectOver) {
130.       fill(rectHighlight);
131.     } else {
132.       fill(rectColor);
133.     }
134.     stroke(255);
135.     rect(rectX, rectY, rectSize, rectSize);
136.   }
137.   
138.   void update(int x, int y) {
139.     if ( overRect(rectX, rectY, rectSize, rectSize) ) {
140.       rectOver = true;
141.     } else {
142.       rectOver = false;
143.     }
144.   }
145.   
146.   boolean overRect(int x, int y, int width, int height) {
147.     if (mouseX >= x && mouseX <= x+width && 
148.       mouseY >= y && mouseY <= y+height) {
149.       return true;
150.     } else {
151.       return false;
152.     }
153.   }
154.   
155.   boolean pressed(){
156.     if( rectOver ) {
157.       return true;
158.     } else {
159.       return false;
160.     }
161.   }
162. }

2. int x; int y; int h; int w; int b = 0; 
3. boolean captured;
4. boolean isOverSomething;
5. ArrayList shapeMove = new ArrayList();
6. 
   
7. int incomingButton;
8. 
   
9. import oscP5.*;
10. import netP5.*;
11. OscP5 incomingOSC;
12. OscP5 oscP5;
13. 
    
14. void setup(){
15.   size(800, 500);
16.   oscP5 = new OscP5(this,12000);
17.   incomingOSC = new OscP5(this, 12000);
18. }
19. 
    
20. void draw(){
21.   background(255);
22.   for( int i = 0; i < shapeMove.size(); i++ ){
23.     ((ShapeMove)shapeMove.get(i)).update();
24.     ((ShapeMove)shapeMove.get(i)).display();
25.   }
26. }
27. 
    
28. void mousePressed(){
29.   if( incomingButton == 1){
30.     shapeMove.add( new ShapeMove((int)random(0,width),(int)random(0,height), (int)random(10,20), (int)random(10,20)) );
31.   }
32. }
33. 
    
34. class ShapeMove{
35.   int x;  int y;  int h;  int w;  int origx;  int origy;  int deltax;  int deltay;  
36.   int posXdiff;  int posYdiff;  int xdragdelta;  int ydragdelta;
37.   boolean over;
38.   boolean locked = false;
39.   boolean imCaptured = false;
40.   boolean overMe = false;
41.   ShapeMove(int _x, int _y, int _h, int _w)  {
42.     x = _x;    y = _y;    h = _h;    w = _w;
43.   }
44.   
45.   void isover(){
46.     if (mouseX >= x && mouseX <=x+w &&
47.       mouseY >= y && mouseY <= y+h) {
48.       over = true;
49.       isOverSomething = true;
50.     } else {
51.       over = false;
52.       isOverSomething = false;
53.     }
54.   }
55.   
56.   void overme() 
57.   {
58.     if (isOverSomething) {
59.       if (overMe) {
60.         if (!over) {
61.           overMe = false;
62.           isOverSomething = false;
63.         }
64.       }
65.     } else {
66.       if (over) {
67.         overMe = true;
68.         isOverSomething = true;
69.       }
70.     }
71.   }
72.   void update()  {
73.     if (over && mousePressed && !imCaptured && !captured)    {
74.       deltax = x - mouseX;
75.       deltay = y - mouseY;
76.       origx = x;
77.       origy = y;
78.       captured = true;
79.       imCaptured = true;
80.     }
81.     
82.     if (!mousePressed && imCaptured)    {
83.       captured = false;
84.       imCaptured = false;
85.     }
86.     
87.     if (imCaptured)    {
88.       xdragdelta = x - (mouseX + posXdiff);
89.       ydragdelta = y - (mouseY + posYdiff);
90.       x = mouseX + deltax;
91.       y = mouseY + deltay;
92.     }
93.   } 
94.   
95.   void display()  {
96.     rect(x, y, h, w);
97.   }
98. }
99. 
    
100. public void oscEvent(OscMessage msg) {
101.   if (msg.checkAddrPattern("/output") && msg.checkTypetag("i")) {
102.           incomingButton = msg.get(0).intValue();
103.           println("Button = " + incomingButton);
104.   } 
105. }

Based on the following example, I would like to know how it is possible to create a line that connects the first added ellipse with the second added ellipse (and then the second with the third, the third with the fourth, and so on. 

http://www.processing.org/learning/topics/arraylistclass.html

I have tried the following but it connects the newly added ellipse with all the previous ellipses, and I want to avoid that.

(The returnPosX and returnPosY is a return statement from the ball class that gives me back the position of x and y).

for (int i = balls.size()-1; i >= 0; i--) { 

Ball ball = (Ball) balls.get(i);

   

     for (int j = balls.size()-1; j >= 0; j--) {

Ball ball2 = (Ball) balls.get(j);

  line(ball.returnPosX(),ball.returnPosY(), ball2.returnPosX(), ball2.returnPosY());

      

ball.move();

ball.display(); 

}

This problem is similar to this:

http://forum.processing.org/topic/controlp5-button-setoff-seton

However, in my case I just want to click a button and show the interface (in the posted code example it just shows the second button), and when the second button is clicked, then to show button1 again. The problem is when the second time you try to click button1. You need to click it twice to work. Why is that?? 

Any ideas?

2. import controlP5.*;
3. ControlP5 controlP5;
4. 
   
5. Button button1, button2;
6. 
   
7. int display = 1;
8. 
   
9. void setup() {
10.   size(600, 480);
11.   smooth();
12.   
13.   controlP5 = new ControlP5(this);
14.   controlP5.addButton("button1", 0, 40, 40, 150, 50);
15.   button1 = (Button) controlP5.controller("button1");
16.   
17.   controlP5.addButton("button2", 1, 40, 140, 150, 50);
18.   button2 = (Button) controlP5.controller("button2");
19. }
20. 
    
21. void draw() {
22.   background(0);
23.   if (display == 1) {
24.     button1.show();
25.     button2.hide();
26.   }
27.   
28.   else {
29.     button1.hide();
30.     button2.show();
31.   }
32. }
33. 
    
34. public void button1(int theValue) {
35.   display = theValue;
36. }
37. 
    
38. public void button2 (int theValue) {
39.   display = theValue;
40. }
41. 
    
42. 
    

I would like, if possible, to educate me on something. 

As in the following example, when you click on the mouse you add new items/particles.

http://www.openprocessing.org/sketch/23268

I would like to be able BEFORE the item/particle is added to be able to configure it in a new window that appears, as in the following pictures:

How is it possible to do that? Are there any examples? I have tried all the references, with no luck.

Best,

Stav.

Does anyone know how I can split a glgraphics offscreen object into three parts?

Thanks.

I am working on a sketch that loads around 100 images (640x480) and processes them. I am studying the following example I found on openprocessing.com (sorry can't remember the name of the owner). However, I've noticed performance issues when loading more than 50 images. Can someone have a look and tell me if you can see where the mistake is?

Thanks

2. int IMGHEIGHT;
3. int IMGWIDTH;
4. int CANVASHEIGHT;
5. int CANVASWIDTH;
6. Image[] j = new Image[50];
7. 
   
8. void setup()
9. {
10.   IMGHEIGHT=600;
11.   IMGWIDTH=800;
12.   CANVASHEIGHT=600;
13.   CANVASWIDTH=800;
14.   size(CANVASWIDTH,CANVASHEIGHT);
15.   frameRate(12);
16.   background(0,0,0);
17.  }
18. void draw()
19. {
20.  float freq;
21.  float amp;
22.  float pan;
23.     for(int i=0;i<j.length;i++){
24.       if(j[i] != null){
25.             if( j[i].draw()){
26.               j[i]=null;
27.             }
28.       }
29.       else{
30.           j[i]=new Image(CANVASHEIGHT,CANVASWIDTH,IMGHEIGHT,IMGWIDTH);
31.       }
32.     }
33.  }
34.  
35. class Image{
36.     
37.   int N=50;
38.   PImage i1;
39.  
40.   int x;
41.   int y;
42.   int o;
43.   int r;
44.   int g;
45.   int b;
46.   int h;
47.   int w;
48.   int dx;
49.   int dy;
50.   float ds;
51.   float dt;
52.   int ch;
53.   int cw;
54.    
55.   public Image(int acHeight, int acWidth,int aiHeight, int aiWidth){
56.           
57.     String f=str(int(random(N))+1);
58.     float rd;
59.     rd=random(.3,.7);
60.  
61.     i1=loadImage("Image_"+f+".jpg");
62.       
63.     h=int(rd*aiHeight);
64.     w=int(rd*aiWidth);
65.     x=int(random(acWidth));
66.      
67.     y=int(random(acHeight));
68.     cw=acWidth;
69.     ch=acHeight;
70.     o=int(random(10,20));
71.  
72.     r=int(random(0,255));
73.     g=int(random(0,255));
74.     b=int(random(0,255));
75.     
76.     dx=int(random(-1,2));
77.     dy=int(random(-1,2));
78.     ds=random(.99,1.01);
79.     dt=random(.99, 1.01);
80.   }
81.    
82.   public boolean draw(){
83.   boolean done;
84.   done=false;
85. if (random(100)>60){
86.   x=x+dx;
87.   y=y+dy;
88. }
89.   h=int(h*ds);
90.   w=int(w*ds);
91.   o=int(o*dt);
92.   tint(r,g,b,o);
93.   image(i1,x,y,w,h); 
94.   if(random(20)>17){
95.     dx=int(random(-1,2));
96.     dy=int(random(-1,2));
97.     ds=random(.95,1.05);
98.   }
99.   if (random(100)>96){
100.     done=true;
101.   }
102.     return done;
103.   }
104. }

How is it possible to split a screen that displays animation/moving images/videos into three different vertical banners; lets say there is a ball moving, how can you make these banners have direct relation with each other? Have a look at the following pics - the first is the normal animation sketch, and the second is what I am looking for.

I know this process is fairly easy with other visual programming languages, but I can't find any clear method to do this in Processing.

Thanks.

Stav.

I am trying to create a sketch that does the following:

1) In the first mouse click the shape fades in, and remains with full opacity

2) In the second mouse click the shape fades out and remains with no opacity

I have written the following code but there are a few problems with it. Also Im not sure if this is the right way to do this.

Thank you for your help.

2. float fade = 0;
3. int passedTime = 0;
4. boolean boolFade = false;
5. 
   
6. void setup(){
7.   size(200,200);  
8. }
9. 
   
10. void draw(){
11.   background(0);
12.   rectFade();
13. }
14. 
    
15. void mousePressed(){
16.     boolFade = !boolFade;
17. }
18. 
    
19. void rectFade(){
20.   if (boolFade==true) {
21.     passedTime = passedTime + 1;
22.     if (passedTime > 0) {
23.       fade = map(passedTime, 0, 20, 0, 255);
24.       fill(255, fade);
25.       rect (50,50,100,100);  
26.     }  
27.     } else {
28.       passedTime = 0;
29.       boolFade = !boolFade;
30.     }
31.   }  

Taken an example such as the following:

http://www.openprocessing.org/visuals/?visualID=18798

I was wondering if you can set the particles fly within a specific area. Ok, I know I can set bounds on a shape such as a rectangle or an ellipse, but what about a complex shape or even an image area (for example stay only within the yellowish area in this image > http://www.win.tue.nl/~vanwijk/seifertview/fig8one.jpg). 

I know this can happen somehow so if you have any tips or suggestions are welcomed. Please let me know if this is complex to do or not, as I am a medium programmer and if this rather more complicated than I expect I must leave it for now due to time limits.

Thanks...

I have this question and I am struggling to find an approach, but I can't find any so far. If someone has a solution, please share it with me.

So, I have this simple code that extracts from a .png image only the pixels that are not transparent, and then draws points every 5 pixels with color taken from that specific area of the image. So far so good, no harm caused.

However, I would like to be able to control the position of each point with motion algorithms based on interaction with the user (i.e. the points start moving when the mouse is closer). How can I control ONLY the points that are drawn from the image - lets assume there are just 200 points that have been created and I want each one to be controlled by the motion algorithms?

Any thoughts?