Is this type of paint program possible with Processing 2.0?

shawnlau

I want to build a paint program where it is possible to paint on two layers at one time. The only thing the two layers will have is common is where the mouse or pen is, and the pen pressure and/or brush opacity. The colors might be different and the brush sizes might be different. After almost 20 years, you can't paint on two layers in Photoshop. When I ask why not, they ask "why would you want to?" And that's why I'm programming again. "Why would you want to?" is a stupid question from an artist's point of view.

Do you think I could build that program with this? I realize it might take drawing things in memory with line algorithms (Bresenham etc.) but I have to believe processing speeds are at a point that drawing on two layers at one time is possible.

Do you think I could get there with Processing 2.x?

TfGuy44

Yes, easily. Just use a new PGraphics object for each layer, and draw on each of them.

shawnlau

It certainly looks like that will work from this modification of the example:

PGraphics pg;
PGraphics py;
void setup() {
  size(100, 100);
  pg = createGraphics(40, 40);
  py = createGraphics(40, 40);
}

void draw() {
  pg.beginDraw();
  py.beginDraw();
  pg.background(100);
  py.background(100);
  pg.stroke(255);
  py.stroke(255,0,0);
  pg.line(20, 20, mouseX, mouseY);
  py.line(20, 20, mouseX, mouseY);
  pg.endDraw();
  py.endDraw();
  image(pg, 9, 30); 
  image(py, 51, 30);
}

shawnlau

If anyone is interested, it certainly is possible. Following is the beginning of such a program:

  //       L or l loads a new image
  //          Z zooms in on the image
 //           z zoom out
 //           X or X zooms to original size
   //         Hold Space key Drag mouse to drag around zoomed image
 //           Drag mouse to draw. Don't draw on a dragged or zoomed image.
  //          That part isnt working yet.
   //         Up and down arrows changes they layers. Its hard coaded to  
  //          draw on the 1st and second layers.



        String displayL = "";
        int numLayers = 5;
        PImage img = null; 
        PGraphics []layers;
        int curLayer = 0;
        boolean imageSelected = false; 
        float zoom = 1.0;
        float cX = 0;  //corner placement
        float cY = 0;
        float dX = 0.0; //dragged offset
        float dY = 0.0;

        int oX = 0; // mouse offset
        int oY = 0;
        boolean locked = false;
        boolean dragging = false;

        void setup() {
          layers = new PGraphics[numLayers];
          frame.setResizable(true);
          size(600, 600);
          selectInput("Select a file to process:", "fileSelected");

        } 

        void draw() {
            background(100);
            if (!imageSelected) 
                  ;
            else{
                  layers[curLayer].beginDraw();
                  layers[curLayer].endDraw();
                  cornerOffset();                      //process the location of the corner x,y
                  image(layers[curLayer], cX, cY, img.width * zoom, img.height * zoom);
                //  image(canvas,0,0);
            }

        } 

        void fileSelected(File selection) {
          if (selection == null) 
            println("Window was closed or the user hit cancel.");
          else {
            img = loadImage( selection.getAbsolutePath());
            for(int i = 0;i< numLayers;i++){

                layers[i] = createGraphics(img.width,img.height);
                layers[i].image(img,0,0);

            }
            layers[1].filter(GRAY);
            layers[2].filter(POSTERIZE,8);
            layers[3].filter(BLUR,8);
            layers[4].filter(ERODE);

            layers[0].beginDraw();
            layers[1].beginDraw();
            layers[0].stroke(255,0,0);
            layers[1].stroke(0,0,255);
            layers[0].strokeWeight(10);
            layers[1].strokeWeight(1);
            layers[0].endDraw();
            layers[1].endDraw();

            imageSelected = true;

            int h = img.height;                               //process the window size
            if(h > (int)((float) displayHeight * 0.9))
              h = (int)((float)displayHeight * 0.9);
            int w = img.width;
            if(w > (int)((float)displayWidth * 0.9))
                 w = (int)((float)displayWidth * 0.9);

            frame.setSize(w,h);
            zoom = 1.0;
            dX = dY = 0;
          }
        } 

        void keyPressed() {
          switch(key){
              case 'L':
              case 'l':
                  selectInput("Select a file to process:", "fileSelected");
                  break;
              case 'Z':    
                  if (zoom < 4.0){
                     zoom = zoom+0.2;
                 //dX = -(dX/2)-(img.width * zoom - width)/2; // here is my problem
                        //how do I make sure that durning  the zoom, the current cent of the display remains the center?
                //dY = dY-((img.height * zoom) - img.height)/2;

                    }
                    break;
              case 'z':
                    if(zoom > 0.2){
                        zoom = zoom - 0.2;
                    if(dX < width - img.width *zoom) 
                        dX = width - img.width * zoom ;
                    else if (dX >0)
                        dX = 0;
                    if(dY < height - img.height * zoom) 
                        dY = height - img.height * zoom;
                    else if (dY >0)
                        dY = 0;
                     }
                     break;
               case 'X':
               case 'x':      
                     zoom = 1.0;
                     dX =0;
                     dY = 0;
                     break;
               case ' ':
                     dragging = true;
                     cursor(MOVE);
                     break;
               case CODED:
                     switch(keyCode){
                           case UP:
                               if(curLayer < numLayers-1) curLayer++;
                               break;
                           case DOWN:
                               if(curLayer > 0) curLayer--;
                               break;
                     }
                     break;

          }

        }

        void keyReleased() {
          if(dragging){
            dragging = false;
            cursor(ARROW);
          }
        }
        void cornerOffset(){
          if(img.width*zoom < width){            //center smaller image in window
            cX = ((width - img.width*zoom) / 2);
            dX = 0;
          }
          else cX = dX;

          if(img.height * zoom < height){  // center smaller image in window
            cY = ((height - img.height * zoom)/2);
            dY= 0;
          }
          else cY = dY;

        }
        void mousePressed() {
          locked = true;
          oX= mouseX; 
          oY=mouseY;

        }
        void mouseReleased() {
          locked = false;
        }
        void mouseDragged() {
          if(!dragging){
            layers[0].beginDraw();
            layers[1].beginDraw();
            layers[0].line(pmouseX, pmouseY, mouseX, mouseY);
            layers[1].line(pmouseX, pmouseY, mouseX, mouseY);
            layers[0].endDraw();
            layers[1].endDraw();

          }
          if(locked && dragging) {
            dX += mouseX-oX;
            dY += mouseY-oY; 
            if(dX < width - img.width *zoom) 
              dX = width - img.width * zoom ;  // constrain so image isn't pulled past its dimensions
             else if (dX >0)
              dX = 0;
           if(dY < height - img.height * zoom) 
              dY = height - img.height * zoom;
             else if (dY >0)
              dY = 0;
            oX = mouseX;
            oY = mouseY;
          }
        }