Saving Errors

lindsayhickson

So, it's me once again, sounding like an absolute n00b. I have now come to realize that the starter code given to me for my school project has an error with its save feature. If you upload a photo, put the grayscale effect on it, and then try to save it, it will do a random streak or streaks of color over the image. Every time you save it, the random streak is in a different spot. Please help me. I'm very new to this, so I don't know where to even begin:

  /**   DM Filter Project Starter Code
  /*    v.20131126
  /*    Bradley Beth
  **/

  boolean PicLoaded = false;
  boolean Grayscale = false;
  boolean Effect1 = false;
  boolean Effect2 = false;
  boolean Effect3 = false;
  int picWidth = 0;
  int picHeight = 0;
  PImage img;

  /***********************************/

  void setup() 
  {
    size(800, 480);
    background(185);
    textAlign(LEFT);
    textSize(16); 
  }

  void draw()
  {

    background(185);
    noStroke();
    int picStart = 0;
    int picEnd = 0;

    /* draw buttons */

    stroke(0);
    fill(0);
    textSize(16);
    text("File Operations",665,30);
    line(650,0,650,480);
    noStroke();

    fill(255);
    rect(660, 50, 130, 40, 10);
    fill(55);
    text("Load Picture", 675, 75);

    fill(255);
    rect(660, 100, 130, 40, 10);
    fill(55);
    text("Save Picture", 675, 125);

    stroke(0);
    line(650,150,800,150);
    noStroke();

    stroke(0);
    fill(0);
    textSize(16);
    text("Filter Effects",675,180);
    line(650,0,650,480);
    noStroke();

    if (Grayscale)
      fill(#FFFF7D);    //Effect on means a yellow lighted button
    else
      fill(255);
    rect(660, 200, 130, 40, 10);
    fill(55);
    text("Grayscale", 680, 225);

    if (Effect1)
      fill(#FFFF7D);    //Effect on means a yellow lighted button
    else
      fill(255);
    rect(660, 250, 130, 40, 10);
    fill(55);
    text("Effect One", 680, 275);

    if (Effect2)
      fill (#FFFF7D);     //Effect on means a yellow lighted button 
    else
      fill(255); 
    rect(660, 300, 130, 40, 10);
    fill(55);
    text("Effect Two", 680, 325);

    if (Effect3)
      fill (#FFFF7D);    //Effect on means a yellow lighted button
    else
      fill(255);   
    rect(660, 350, 130, 40, 10);
    fill(55);
    text("Effect Three", 680, 375);

    noStroke();
    textSize(16);

    //The following loads and displays an image file.
    //The image is resized to best fit in a 640x480 frame.
    if (PicLoaded)
    {     
      picWidth = img.width;
      picHeight = img.height;

      if (picWidth > 640)
      {
        picHeight = (int)(picHeight*(640.0/picWidth));
        picWidth = 640;
      }
      if (picHeight > 480)
      {
        picWidth = (int)(picWidth*(480.0/picHeight));
        picHeight = 480;
      }
      image(img, 0, 0, picWidth, picHeight);

      picStart = 0;
      picEnd = picStart+width*picHeight;

      /***** Effects Code *****/

      /* This sample grayscale code may serve as an example */
      if (Grayscale)
      {
        loadPixels();
        int i = picStart;
        while (i < picEnd) 
        {
          color c = pixels[i];
          float gray = (red(c)+green(c)+blue(c))/3.0;  //average the RGB colors
          pixels[i] = color(gray, gray, gray);
          i = i + 1;
          if (i % width >= picWidth)        // This will ignore anything on the line that 
            i = i + width - picWidth;       // after the image (such as buttons)
        }   
      }

      if (Effect1)
      {
        //do stuff
      }

      if (Effect2)
      {
        //do stuff
      }

      if (Effect3)
      {
        //do stuff
      }

      updatePixels(); 
      redraw();
    }

    fill(255);
    noStroke();
  }

  void mouseClicked() {

    redraw();
  }

  void mousePressed()
  {
    //The following define the clickable bounding boxes for any buttons used.
    //Note that these boundaries should match those drawn in the draw() function.

    if (mouseX>660 && mouseX<790 && mouseY>50 && mouseY<90)
    {
      selectInput("Select a file to process:", "infileSelected");
    }

    if (mouseX>660 && mouseX<790 && mouseY>100 && mouseY<140)
    {
      selectOutput("Select a file to write to:", "outfileSelected");
    }

    if (mouseX>660 && mouseX<790 && mouseY>200 && mouseY<240 && PicLoaded)
    {
      Grayscale = true;
    }   

    if (mouseX>660 && mouseX<790 && mouseY>250 && mouseY<290 && PicLoaded)
    {
      Effect1 = true;
    } 

    if (mouseX>660 && mouseX<790 && mouseY>300 && mouseY<340 && PicLoaded)
    {
      Effect2 = true;
    }  

    if (mouseX>660 && mouseX<790 && mouseY>350 && mouseY<390 && PicLoaded)
    {
      Effect3 = true;
    } 

    redraw();
  }

  void infileSelected(File selection) 
  {
    if (selection == null) 
    {
      println("IMAGE NOT LOADED: Window was closed or the user hit cancel.");
    } 
    else 
    {
      println("IMAGE LOADED: User selected " + selection.getAbsolutePath());
      img = loadImage(selection.getAbsolutePath());
      PicLoaded = true;
      Grayscale = false;
      Effect1 = false;
      Effect2 = false;
      Effect3 = false;
      redraw();
    }
  }

  void outfileSelected(File selection) 
  {
    if (selection == null) 
    {
      println("IMAGE NOT SAVED: Window was closed or the user hit cancel.");
    } 
    else 
    {
      println("IMAGE SAVED: User selected " + selection.getAbsolutePath());
      updatePixels();
      redraw();
      save(selection.getAbsolutePath());
      redraw();
    }
  }

cameyo

I have tried your sketch...it works ok: no streak of colors over the grayscale image.
But redraw() function does nothing without using noLoop() . :-?

koogs

continued from here:

https://forum.processing.org/two/discussion/15099/how-to-upload-a-new-image

lindsayhickson

Sometimes you have to save it multiple time to see the streaks. It doesn't do it every time. Also, what, koogs?

koogs

this question follows on from the other question. it's the same, or similar, code.

and if you have two questions open then people don't know which one to answer, which just wastes people's time. so i close the old thread with a link to the new one.

lindsayhickson

No one answered my question on the other one either. The old one was about loading new images.

dsbailey

hmm... I managed to repeat the described behavior. I'm at a loss. Though I will say that it wasn't random streaks of color for me- more like repeats of sections of the image, almost if pixels[] was being used incorrectly

There seems to be more wrong with the code than just that though. It saves the whole window as an image. I can't imagine that's the intended behavior. I would fix that first.

Sometimes when you fix one problem the others magically go away. Certainly it will change your save behavior.

lindsayhickson

Thank you so much!