Loading...
Logo
Processing Forum
I am having an issue with a processing sketch I'm working on, which is going to be used as the GUI for a children's music software program.

I am trying to implement an area where the user can draw in musical motives freely. I can get processing to display and draw into a sketch, much like the way it is described in one of the "Learning" topics at processing.org. However, this only works if you are drawing straight onto the background of the sketch, and you declare the background color in the setup() block of the sketch. What I want to do is have the user draw onto a musical timeline area constructed from a object class that very basically draws the rect() for the drawing area and then marks out the 4 measures where the user can draw in their musical motive.

I've tried calling the display method of the object from the setup() block, but the problem here is that I have other objects that are displayed to encapsulate the entire program (visually), and also encapsulate certain sections of the window (again, visually).

I thought that perhaps drawing into a PGraphics buffer would solve this, but this still draws the "drawing area" rect() over the user drawn lines.

I'm hoping there is a solution (and I would not be surprised if it is a very basic solution) to this issue. If there isn't a work around, I may have to look into a layer drawing library I found around the internet; however this seems like it might require me to rewrite a good portion of my code, which is something I'm trying to avoid.

Thanks,
Travis

Replies(7)

drawing into a PGraphics is the right approach.
it then depends on when you call the image and the rect, what is drawn first.
something like this ?

Copy code
  1. //defined colors
    color c1 = color(255);
    color c2 = color(255,0,0);
    color c3 = color(255,255,0);
    color c4 = color(0,255,0);
    color c5 = color(0,255,255);
    color c6 = color(255,0,255);
    PGraphics pg;

    color brushColor = 255;
    int brushTrans = 180; // brushTransparency 0-255

    void setup(){
      size(400,400);
      background(0);
      noStroke();
      pg = createGraphics(width, height, P3D);
    }



    void draw(){
        pg.beginDraw();
      //drawing with the mouse
      if (mousePressed && (mouseButton == LEFT)) {
        pg.stroke(brushColor,brushTrans);
        pg.strokeWeight(random(1,10));
        pg.line(mouseX, mouseY, pmouseX, pmouseY);
        pg.noStroke();
        pg.fill(brushColor,brushTrans);
        if(frameCount%5==0)pg.ellipse(mouseX+random(-15,15), mouseY+random(-15,15),random(15),random(15));
      }
      pg.endDraw();
    image(pg,0,0);

      //color selection

      fill(c1);
      rect(10,10,30,30);

      fill(c2);
      rect(50,10,30,30);

      fill(c3);
      rect(90,10,30,30);

      fill(c4);
      rect(130,10,30,30);

      fill(c5);
      rect(170,10,30,30);

      fill(c6);
      rect(210,10,30,30);

      //cross
      pushStyle();
      stroke(255,0,0);
      strokeWeight(4);
      line(width-40,10,width-10,40);
      line(width-10,10,width-40,40);
      popStyle();

     
    }


    void mouseReleased(){
      if( mouseX<=240 && mouseY<=40){
        if(get(mouseX,mouseY)==c1)brushColor=c1;
        if(get(mouseX,mouseY)==c2)brushColor=c2;
        if(get(mouseX,mouseY)==c3)brushColor=c3;
        if(get(mouseX,mouseY)==c4)brushColor=c4;
        if(get(mouseX,mouseY)==c5)brushColor=c5;
        if(get(mouseX,mouseY)==c6)brushColor=c6;
      }
       if(mouseX>=width-40 && mouseY<=40){
        pg.background(0);
      }
    }








cedrickiefer-

Thank you for the quick reply! Your answer, although not exactly what I was intending to do, in the end helped me achieve what I was 
trying to do.

Your code showed me that I did not need to specify a background() for the PGraphics buffer, which was what was causing me problems. 
In the code you supplied clicking draws to a PGraphics buffer but the buffer is still displayed over the background of the sketch, and I 
wanted to draw on top of a displayed shape. But by omitting the background() definition for the buffer, only the graphics drawn into the
PGraphics buffer (which in this case is the lines drawn from the mouse) are displayed, thus the buffer can be displayed OVER the 
previously drawn graphic without a problem.

Drawing onto the background color also makes it easy to clear the drawing, but I was able to get the sketch cleared by redrawing into the 
buffer and setting the background() to a color with 0 alpha value, making the buffer clear.

Now the only question will be how drawing into this buffer works with routing the drawn information to MaxMSP for the audio portion of 
the program,  but I won't be tackling this for a few weeks now.

Thanks!
alright. glad it helped you anyway
Does anyone know if this can work for video as well? i would like to draw a video over all my other objects. 
i read your other post.
i dont think this is the right approach. so better keep the discussion on the other thread