Tagged with save() - Processing 2.x and 3.x Forum

PGraphics Background Color

james0411 — Fri, 13 Apr 2018 06:23:15 +0000

Hi there, when I save PGraphics to jpg file, the background color is always Black. I've tried ####.background(255) like this to change the background color. But I'm using my canvas with live Video. So the outcome was not what I want. How can I change the background Color when I save PGraphics? Is there any way to change it?

Here is my Code.

import processing.video.*;

Capture video;

color trackColor = color(145,43,54);
color trackColor2 = color(142,156,42);
color trackColor3 = color(18,35,40);

float threshold = 25;
PGraphics topLayer;

float r2;
float g2;
float b2;

float r3;
float g3;
float b3;

float r4;
float g4;
float b4;

float distSq(float x1, float y1, float z1, float x2, float y2, float z2) {
  float d = (x2-x1)*(x2-x1) + (y2-y1)*(y2-y1) +(z2-z1)*(z2-z1);
  return d;

}
float distSq2(float x1, float y1, float z1, float x2, float y2, float z2) {
  float d2 = (x2-x1)*(x2-x1) + (y2-y1)*(y2-y1) +(z2-z1)*(z2-z1);
  return d2;

}
float distSq3(float x1, float y1, float z1, float x2, float y2, float z2) {
  float d3 = (x2-x1)*(x2-x1) + (y2-y1)*(y2-y1) +(z2-z1)*(z2-z1);
  return d3;

}

void setup() {
  size(640, 360);
  String[] cameras = Capture.list();
  printArray(cameras);
  video = new Capture(this, cameras[3]);
  video.start();
  trackColor = color(145,43,54);
  trackColor2 = color(142,156,42);
  trackColor3 = color(18,35,40);

  topLayer = createGraphics(width, height, g.getClass().getName());
}

void captureEvent(Capture video) {
  video.read();
}

void draw() {

  video.loadPixels();
  image(video, 0, 0);

  //threshold = map(mouseX, 0, width, 0, 100);
  threshold = 25;
  float thresholdSquare = threshold * threshold;

  // Begin loop to walk through every pixel

  topLayer.beginDraw();
  topLayer.clear();
  for (int x = 0; x < video.width; x++ ) {
    for (int y = 0; y < video.height; y++ ) {
      int loc = x + y * video.width;
      // What is current color
      color currentColor = video.pixels[loc];

      float r1 = (currentColor>>16)&0xFF;
      float g1 = (currentColor>>7) & 0xFF ;
      float b1 = (currentColor) & 0xFF;

      r2 = (trackColor>>16)&0xFF;
      g2 = (trackColor>>7) & 0xFF;
      b2 = (trackColor) & 0xFF;

      r3 = (trackColor2>>16)&0xFF;
      g3 = (trackColor2>>7) & 0xFF;
      b3 = (trackColor2) & 0xFF;

      r4 = (trackColor3>>16)&0xFF;
      g4 = (trackColor3>>7) & 0xFF;
      b4 = (trackColor3) & 0xFF;
      //
      float d = distSq(r1, g1, b1, r2, g2, b2);
      float d2 = distSq2(r1, g1, b1, r3, g3, b3);
      float d3 = distSq3(r1, g1, b1, r4, g4, b4);

      if (d < thresholdSquare) {
        topLayer.stroke(trackColor);
        topLayer.fill(trackColor);
        topLayer.ellipse(x, y,2,2);
      }
      else if( d2 < thresholdSquare){  
        topLayer.stroke(trackColor2);
        topLayer.fill(trackColor2);
        topLayer.ellipse(x,y,2,2);
      }
      else if(d3 < thresholdSquare){
        topLayer.stroke(trackColor3);
        topLayer.fill(trackColor3);
        topLayer.ellipse(x,y,2,2);
      }
      }
     ////////////////////////////////////////
      }
        topLayer.endDraw(); 
        image(topLayer, 0, 0);

    if(mousePressed){
      topLayer.save("example.jpg");
    }
}

How to permanently type words onto a PImage and save it as jpg?

Fangry — Mon, 15 Jan 2018 03:44:44 +0000

Hello guys,

I am working on an image processing program. I notice that when I type some words onto a PImage, and try to save the PImage, the text is saved in jpg? Any ideas?

class Text {
  PVector textLocation;
  String string;
  float textSize;
  color colour;

  Text (PVector textLocation) {
    this.textLocation = textLocation;
    textSize = 18;
    colour = color(0);
  }

  void display() {
    if (textOn && !(string == null)) {
      fill(colour);
      textSize(textSize);
      text(string, textLocation.x, textLocation.y);
    }
  }
}

my project link https://github.com/Finaros/Pixcell Thanks!

How to save image after edits

Fangry — Thu, 11 Jan 2018 04:28:50 +0000

Hello, forum So I am doing this image processing application, but I haven't found a way to 'undo' changes or to save changes. I get how changing the brightness or the RBG values changes the image.

loadPixels();
      for (int y = 0; y



saveFrame() saves the entire screen, including my user interface. And that's not what I want. I only want the image portion to be saved.

I think PImage.save is the way to go. But I don't know how to save changes to an image object and then it can save.

How do you save store changes so you can go back if you make a mistake?

My code can be found on my Github https://github.com/Finaros/Pixcell
Thank you very much!



Using a code from Processing 10 doesn't work on Processing 13
alenalo — Thu, 07 Dec 2017 14:42:42 +0000
Hello all

I'm running a code from a couple of years ago which worked fine on the old version of processing 
but doesn't work on Processing 13.

line 16 is causing troubles 
please please help?

thank you!

import java.io.*;

int outputWidth = 819;
int outputHeight = 819;
int smallWidth = 9;
int smallHeight = 9;

String imagePath;
String[] images;
int imageCount;
PGraphics pg;

void setup() {
  size(819, 819);
  pg = createGraphics(outputWidth, outputHeight, P2D);
  imagePath = selectFolder();
  if (imagePath != null) { images = loadImageFilenames(imagePath); } else { exit(); }
}

void draw() {
  PImage currentImage = loadImage(imagePath + "/" + images[imageCount % images.length]);
  currentImage.resize(smallWidth, smallHeight);
  int x = (smallWidth * imageCount) % outputWidth;
  int y = ((smallWidth * imageCount) / outputWidth) * smallHeight;
  if (y < outputHeight) {
    pg.beginDraw();
    pg.image(currentImage, x, y);
    pg.endDraw();
    background(0);
    image(pg, 0, 0, width, height);
    imageCount++;
  } else {
    pg.save("output.png");
    exit();
  }
}

String[] loadImageFilenames(String path) {
  File folder = new File(path);
  FilenameFilter imgFilter = new FilenameFilter() {
    public boolean accept(File dir, String name) {
      String lowCase = name.toLowerCase();
      return lowCase.endsWith(".jpg")
      || lowCase.endsWith(".png")
      || lowCase.endsWith(".tga");
    }
  };
  return folder.list(imgFilter);
}




How to use random to get at my color array
Petros — Wed, 23 Aug 2017 03:18:50 +0000
What I'm trying to do: create a bunch of ellipses (in a grid) that each have one of an array of colors and that each mask one or more rectangles that also have a variable color from the same array. I've succeeded at (1) creating a masked shape, (2) duplicating it in a grid, and (3) creating an array of colors. Right now I'm trying to get that array to affect the colors but I'm failing. What am I doing wrong? I'm getting an error "expecting EOF, found 'colorset'." Pretty sure I have my file set up incorrectly. Any tips?

/**
 * Draw rectangles inside of circles
 * 2017-08-22
 **/
PGraphics sourceImage;
PGraphics maskImage;

  int colorset;
  color [] colorsetarray = { 
    color(#3AC459), 
    color(#3D8CFF), 
    color(#8CD6ED), 
    color(#F7CC68), 
    color(#F77068), 
    color(#576984), 
    color(#7A9BB0), 
    color(#D8E8ED), 
    color(#EAF4F7) };
  colorset = colorsetarray[(int)random(0, 8)];

void setup() {
  size(800, 800); //size of canvas
  noLoop();
  smooth();
}

void draw() {

  for (int y = 20; y < height-8; y += 120) {
    for (int x = 20; x < width-80; x += 120) {
      // create source
      sourceImage = createGraphics(100, 100); //size of drawing
      sourceImage.beginDraw();
      sourceImage.background(colorsetarray[(int)random(colorsetarray.length)]); //color the background
      sourceImage.fill(colorsetarray[(int)random(colorsetarray.length)]); //color the rectangle
      sourceImage.translate(width/2, height/2);
      sourceImage.rotate(radians(45));
      sourceImage.noStroke(); //take the stroke off of the rectangle
      sourceImage.rect(-600, -200, 80, 500); //locate the rectangle and draw it
      sourceImage.endDraw();

      // create mask
      maskImage = createGraphics(100, 100); //size of mask
      maskImage.beginDraw();
      maskImage.ellipse(50, 50, 100, 100);
      maskImage.endDraw();

      // apply mask
      sourceImage.mask(maskImage);

      // show masked source
      image(sourceImage, x, y); //move the chip here
    }
  }
}




I have a current code but I need to make the outer squares move, please help
KingSpagooter — Thu, 25 May 2017 15:10:53 +0000
// =================================================================
//Variables
StopWatchTimer sw;
float x = 0;
float y = 100;
float speed = 1;
// =================================================================
// Main
void setup() {
  size(700, 560);
  println (millis());
  sw = new StopWatchTimer();
  sw.start();
  rectMode(CENTER);
}
// Draw
void draw () {
  time();
  println(mouseX);
  println(mouseY);
  stroke (153);
  fill (204, 102, 0);
  rect (555, 275, 50, 50);
  rect (345, 475, 50, 50);
  rect (115, 275, 50, 50);
  rect (345, 75, 50, 50);
  frame.setTitle(int(frameRate) + " fps");
  fill (235, 235, 0);
  noStroke();
  rect (mouseX, mouseY, 30, 30);
}
// =================================================================
// Other
void time() {
  background(#C9C9C9);
  fill(#000000);
  textAlign(CENTER);
  text(nf(sw.minute(), 2)+":"+nf(sw.second(), 2), 656, 14);
}
// =================================================
// classes
class StopWatchTimer {
  int startTime = 0, stopTime = 0;
  boolean running = false; 
  void start() {
    startTime = millis();
    running = true;
  }
  void stop() {
    stopTime = millis();
    running = false;
  }
  int getElapsedTime() {
    int elapsed;
    if (running) {
      elapsed = (millis() - startTime);
    } else {
      elapsed = (stopTime - startTime);
    }
    return elapsed;
  }
  int second() {
    return (getElapsedTime() / 1000) % 60;
  }
  int minute() {
    return (getElapsedTime() / (1000*60)) % 60;
  }
}
// ====================================================
//High Rez
void saveHiRes(int scaleFactor) {
  PGraphics hires = createGraphics(width*scaleFactor, height*scaleFactor, JAVA2D);
  beginRecord(hires);
  hires.scale(scaleFactor);
  draw();
  endRecord();
  hires.save("hires.png");
}
//=======================================================
//collision 
boolean mouseOverRect(int x, int y, int w, int h) {
  return (mouseX >= x && mouseX <= x+w && mouseY >= y && mouseY <= y+h);
}
// =====================================================
void move() {
  x = x + speed;
  if (x > width) {
    x = 0;
  }
}
void display() {
  rect(x,y,30,10);
}``




Saving canvas to img with all p5 elements
archas — Wed, 07 Jun 2017 12:42:56 +0000
Is it possible to save canvas with all custom elements like divs, p, a, etc. created (by p5.dom) and positioned on the canvas?
The simple text() function was quite buggy for me, I decided to use createElement to simulate text on a canvas with possibility to edit it and change its position.

This question is similar to the unaswered question:
https://forum.processing.org/two/discussion/19707/can-the-save-function-include-p5-elements-within-the-saved-image



save() function keeps overwriting file names - how can I make file names increase numerically?
phoeknowles — Sat, 20 May 2017 20:08:27 +0000
Hi, I'm super new to processing.

I've done a key press function where it saves an image that I've made various modifications to, but every time I press 's' to save, a new image saves and overwrites the previous image. I don't know how I can rename the files so that they can change automatically (e.g. every time I save it goes output_1.jpg, output_2.jpg and so on...).

I have two images side by side so I use saveFrame(); to save both of them and this is fine, but when I try to save just the image on the right (titled imgCopy), this is when the overwrite problem happens.
Any solutions?

Thanks in advance! x



Why is this image not displaying?
lifeofmusic13 — Mon, 08 May 2017 14:56:20 +0000
Hi everyone, I have this code setup that on the first program you select a folder and then it displays the folder of images. Then when you click on an image it opens a code that you have to run that allows you to edit and save the images. However on my second code, it isn't displaying the image. It will allow you to save it if you know the right key to press but it also doesn't apply any of the filters if anyone has any help.

here is the first code to display the images and launch the second code.

PImage images;
String[] filenames;
PImage[] imgs;
int len;
String pathName;

void setup() {
  size(1000, 881);
  loadFrames();
}  

void draw() {
  background(0);
  displayImages();
   if (mousePressed && (mouseButton == LEFT)) {
     enlargeAll();
   }

textSize(32);
fill(255);
text("word", 450, 45);
    }

    void loadFrames() {
  selectFolder("Select a folder to process:", "folderSelected");
}

void folderSelected(File selection) {
  if (selection == null) {
    println("Window was closed or the user hit cancel.");
  } else {
    println("User selected " + selection.getAbsolutePath());
    java.io.File folder = new java.io.File(selection.getAbsolutePath()); 
    filenames = folder.list();   // list the files in the data folder
    len = filenames.length;
    imgs = new PImage[len];
    pathName= selection.getAbsolutePath() +"\\";
  }
}


void displayImages(){
  int imageY;
  float imageX;
  //where the photos are placed
  imageX = 8.33;
  imageY = 200;
  int count = 0;
  for(int x = 1; x<=len; x++){
  count = x;
  String toDisplay = pathName + filenames[x - 1];
  //size and display of photos
  images = loadImage(toDisplay);
  images.resize(190, 0);
  image(images, imageX, imageY);
  //spacing of photos
  imageX=imageX+198.33;
  if ((count%5 == 0)) {
    imageX = 8.33;
    imageY = imageY + 150;
  }
  }
}

void enlarge(int imageNumber) {
  //Sets toDisplay as the photo name
  String imageNumbs;
  if (imageNumber <10) {
    imageNumbs = "0" + imageNumber;
  }
  else
  {
    imageNumbs = str(imageNumber);
  }
  String toDisplay = pathName + imageNumbs + ".jpg";
  float lowX, highX;
  float lowY, highY;
  int imageNum = imageNumber;
  //Starting point of photo 1
  lowY = 200;
  highY = 325;
  lowX = 8.33;
  highX = 198.33;
  //Placement of photos 1-5
  if (imageNum <=5) {
  lowX = 8.33 + ((imageNum - 1) * 198.33);
  highX = 198.33 + ((imageNum - 1) * 198.33);
  lowY = 200;
  highY = 325;
  }
  else {
    //Placement of photos 6-10
    if (imageNum >= 6 && imageNum <= 10) {
  imageNum = imageNum - 5;
  lowX = 8.33 + ((imageNum - 1) * 198.33);
  highX = 198.33 + ((imageNum - 1) * 198.33);
  lowY = 350;
  highY = 475;
  }
  else {
    //Placement of photos 11-15
    if (imageNum >= 11 && imageNum <= 15) {
      imageNum = imageNum - 10;
      lowX = 8.33 + ((imageNum - 1) * 198.33);
      highX = 198.33 + ((imageNum - 1) * 198.33);
      lowY = 400;
      highY = 625;
    }
    else {
      //Placement of photos 16-20
      if (imageNum >= 16 && imageNum <= 20) {
          imageNum = imageNum - 15;
          lowX = 8.33 + ((imageNum - 1) * 198.33);
          highX = 198.33 + ((imageNum - 1) * 198.33);
          lowY = 550;
          highY = 775;
      }
    }
  }
  }

//if mouse is on a photo
  if((mouseX >= lowX) && (mouseX <= highX) && (mouseY >= lowY) && (mouseY <= highY)) {
    //Enlarges photo to full screen
    launch(sketchPath() +"\\" +"pic" + imageNumbs + "\\" + "pic" + imageNumbs + ".pde");
  }


}
//Enlarges when mouse is clicked
void enlargeAll() {
  enlarge(1);
  enlarge(2);
  enlarge(3);
  enlarge(4);
  enlarge(5);
  enlarge(6);
  enlarge(7);
  enlarge(8);
  enlarge(9);
  enlarge(10);
  enlarge(11);
  enlarge(12);
  enlarge(13);
  enlarge(14);
  enlarge(15);
  enlarge(16);
  enlarge(17);
  enlarge(18);
  enlarge(19);
  enlarge(20);
}


and here is the second code which is the one that I am having troubles with

PImage images;
String[] filenames;
int len;
String pathName;
String imageToDisplay;
PImage newImage;

void setup() {
  size(1000, 881);
  loadFrames();


}  

void draw() {
  noLoop();
  redraw();
  background(0);
  loadImages();
  filters();
  saveFilter();


  textSize(32);
  fill(255);
  text("word", 450, 45);
}

void loadFrames() {
  selectFolder("Select a folder to process:", "folderSelected");
}

void folderSelected(File selection) {
  if (selection == null) {
    println("Window was closed or the user hit cancel.");
  } else {
    println("User selected " + selection.getAbsolutePath());
    java.io.File folder = new java.io.File(selection.getAbsolutePath()); 
    filenames = folder.list();   // list the files in the data folder
    len = filenames.length;
    pathName= selection.getAbsolutePath() +"\\";
    imageToDisplay = pathName + "04.jpg";
    //size and display of photos


  }
}

void loadImages() {
  if (imageToDisplay != null) {
  images = loadImage(imageToDisplay);
  images.resize(0, 656);
  newImage = images.get();
  image(images, 8.33, 200);


  }
  }



void filters() {
  bFilter();
  tFilter();
  tFilter();
  pFilter();
  dFilter();
  noFilter();
}


void bFilter() {
  if (keyPressed == true) {
    if (key == 'b' || key == 'B') {
      if (pathName != null) {

        image(newImage, 8.33, 200);
        newImage.filter(GRAY);

      }
    }
  }
}

void tFilter() {
  if (keyPressed == true) {
    if (key == 't' || key == 'T') {
      if (pathName != null) {

        image(newImage, 8.33, 200);
        newImage.filter(THRESHOLD);

      }
    }
  }
}

void iFilter() {
  if (keyPressed == true) {
    if (key == 'i' || key == 'I') {
      if (pathName != null) {
        imageToDisplay = pathName + "04.jpg";
        //size and display of photos
        newImage = images.get();

        image(newImage, 8.33, 200);
            newImage.filter(INVERT);

      }
    }
  }
}

void pFilter() {
  if (keyPressed == true) {
    if (key == 'p' || key == 'P') {
      if (pathName != null) {

        image(newImage, 8.33, 200);
        newImage.filter(POSTERIZE, 66);

      }
    }
  }
}

void dFilter() {
  if (keyPressed == true) {
    if (key == 'd' || key == 'D') {
      if (pathName != null) {

        image(newImage, 8.33, 200);
                newImage.filter(DILATE);

      }
    }
  }
}

void noFilter() {
  if (keyPressed) {
    if (key == CODED) {
      if (keyCode == DELETE) {
        image(images, 8.33, 200);
      }
    }
  }
}


void saveFilter() {
  if (keyPressed == true) {
    if (key == CODED) {
      if (keyCode == '=') {
        int fileName = len+1;
        newImage.save(pathName + fileName +".jpg");
      }

      //save
    }
  }
}




Why is it doing that ??? Saving live capture instead of the content of a capture object
Mat007 — Thu, 27 Apr 2017 08:31:51 +0000
Hi all,
I am trying to record incoming data from a serial port as well as capturing video. Because of the speed (data is coming every millisecond) I had to trigger the video capture inside the serialEvent (built-in camera works at 30 fps max). I decided to capture a snapshot every 50ms. It takes too long to save the snapshot so I had to buffer it in an arrayList. I did the same with the serial data.
Acquisition is triggered and stopped using keyPressed. Once it is finished, I come back to my arrayLists and save the pictures one by one (including the serial data in the name, it is just a short string).
Here is the trouble: instead of reading the content of the Capture arrayList it reads whatever is coming from the camera.

I tried without success:
-myPort.stop()
-myVideo.stop()
-noLoop()
-using a PImage arrayList instead of Capture object arrayList
-use different ways to trigger/stop acquisition.

It doesn't make any sense to me... why when I write mySnapshotAL.get(i) do I get the current camera view and not the content of the arrayList which is populated properly (I checked the size) ???

Many thanks!!!

import processing.video.*;
import processing.serial.*;

Capture myVideo;                     // declaring a Capture object
Serial myPort;                       // declaring a  serial port
ArrayList myDataAL;          // declaring an ArrayList of String (serial data)
ArrayList mySnapshotAL;     // declaring an ArrayList of Capture objects
String myFileName;
String myDataString;
String myDate;
int startTime;
String myTime;
int i=0;
boolean saving=false;

void setup() {  
  frameRate(1000);
  size(1000, 700);
  background(0);
  mySnapshotAL= new ArrayList();            // initialising the ArrayList of Capture objets
  myDataAL= new ArrayList();                 // initialising the ArrayList of String
  myVideo = new Capture(this, 320, 240,30);          // initialising the Capture object
  myVideo.start();
  myPort = new Serial(this, Serial.list()[1], 9600); // initialising the port dev/cu.usbmodem1411
  myPort.bufferUntil(10); // char(10) = line feed
}

void serialEvent(Serial myPort) {   // myPort receives data every ms
  i++; 
    if (i==50){
      myVideo.read(); // only acquire every 50 ms
      i=0;
    } 
  myDataString = trim(myPort.readString());
  myTime=nf(millis()-startTime,6,1).substring(0,5);
  myDataString=myTime + "," + myDataString;
  if (saving){
  mySnapshotAL.add(myVideo);
  myDataAL.add(myDataString);
  }
}

void draw() {  
image(myVideo, 600, 40);
}

void keyPressed(){
        if (!saving) {
          saving=true;
          startTime=millis();
          }
        else {
          saving=false;
          myDate= nf(hour(),2,1).substring(0,2) + "h" + nf(minute(),2,1).substring(0,2);
          for (int i =0; i




how to save high quality images from processing PGraphics
jairo_asecas — Mon, 02 Nov 2015 13:30:48 +0000
Hi, I'm trying to get high quality images from processing but I've got a problem.

this is the code I'm using:

PGraphics big;  
void setup() {  
  big = createGraphics(5000, 5000, JAVA2D); // Create a new PGraphics object 5000x5000px  
  big.beginDraw(); // Start drawing to the PGraphics object  
  size(500, 500, P2D); //size of the on-screen display  
}  

int counter; // counter  
void draw() {  
  counter++; // add 1 to counter  
  if(counter%10 == 0) { // every 10th frame we snap a preview and draws it  
    PImage img = big.get(0, 0, big.width, big.height); //snap an image from the off-screen graphics  
    img.resize(width,height); // resize to fit the on-screen display  
    image(img,0,0); // display the resized image on screen  
  }  

  big.fill(255,0,0);//we fill following with red  
  big.ellipse(random(big.width),random(big.height),10,10);//randomly placed circle  
}  

/** 
* We save on any key 
* this could be done in void close() but safer to have it here. 
*/  
void keyPressed() {  
  big.endDraw(); // finish drawing  
  big.save("highRes.tif"); //save to file - use .tif as format for high-res  
  println("saved"); // nice with some feedback  
}  


it is from: Alexander Salveson Nossum, link: http://alexanno.net/2010/06/high-resolution-output-from-processing-processing-in-hd/comment-page-1/#comment-818

It works with easy sketches but when I try to use a function it fails.

example: big.ellipse(random(width),random(height),40,40);

works

but: void example(){ ellipse(random(width),random(height),40,40); }

big.example();

doesn’t works. (says: ****the function example() does not exist.****)

why is it? there is another way to get better quality captures?



Remove processing-java window
usernamevalid — Tue, 14 Feb 2017 17:42:49 +0000
Im running processing-java from cmd line in another app. The app creates an image in an offscreen buffer, saves it and exits. 
However when ever the app is called there is still a window that pops up on screen, it takes focus away anything on screen. Is there a way to run processing-java with no window?

Thanks



Resizing/Saving an Image
mobodcubism — Sun, 15 Jan 2017 15:56:17 +0000
Hey all,

I'm trying to write a program that reduces the size of an image by a predetermined factor.
My program has to load an image file into a PImage, construct a new PImage, eight times smaller in every dimension, with the scaled content, and save that new PImage to disk.

Saving an image with save() works but i'm struggling to simultaneously rescale as well. 
Is it possible to use resize() with save() to achieve this? Or is there perhaps a more efficient way of going about doing this?

Any help would be greatly appreciated!
Thanks



using copy() to copy part of canvas to another graphic
Geoffree3 — Fri, 13 Jan 2017 11:24:17 +0000
I want to copy parts of the canvas to another image, which is then output as a single file.  However, it appears that copy() doesn't take any notice of the pixel density as I get a low res. output.  If I save the canvas directly to a file using save() I get high res. from my MacBook retina screen. 
Any ideas?

What I do:

use output = createImage() to define the image which is eventually output
use output.copy(,,, "png")



How to saveFrame high quality when using .pngs
vincep — Mon, 19 Dec 2016 00:26:30 +0000
Ive made a sketch

I want to output on key press at High Quality.
How do you do it when using imported images rather than Co Ordinates?

Ive got a text screen at the beginning and the images are called 'letter' .png.
The code makes a collage. I'd like to be able to save individual frames at high res.

PImage [] picArray = new PImage [42];
float r = random (.1, 1);




void setup() {

    size (480,777,JAVA2D);

{  textSize(32);
fill(180,75,90);
text("UP ARROW TO GENERATE", 20, 360); 
fill(180,75,90);
text("ENTER TO SAVE FRAME ", 20, 400);
 }

for (int p = 0; p < picArray.length; p++) {
    picArray[p] = loadImage("letter" + nf(p,1) + ".png");
}

}

void draw() {


   background(255);
   for(int b=0; b<2000; b++){
    tint(random(255),random(255));
    rotate(random(360));
 image(picArray[int(random(picArray.length))], random (width), random (height),r*(1080),r*(720));
   }
}

void keyPressed() {




  if (keyCode == ENTER){
    saveFrame("fragment-####.jpg");
  }
}


void mousePressed() {
  keyPressed();

}




Can the save() function include p5 elements within the saved image?
jacorre — Mon, 12 Dec 2016 20:28:39 +0000
I've been playing around with the save() function. I can get it to successfully save the drawing on my canvas as an image. However, when using the DOM library and creating p5.Elements that float on top of the canvas, these are not included when saving the canvas.

Is there a way to include p5.Elements when saving the canvas as an image?

Thank you!



Does anybody have a clue about this very weird color behavior
Matei — Wed, 02 Nov 2016 20:37:29 +0000
Hello, so I have noticed a very weird behavior of colors, which will be better explained visually. First a small introduction to what I want to do : first, open a file, which is a 9x9 pixels JPEG image. Then I want to apply the color of each pixel in the first line to all following vertical pixels. Very simple indeed, there's how I did by code :

PImage loadedImgage;
String selectedPath = "";

void fileSelected(File selection) {
  selectedPath = selection.getAbsolutePath();
  loadedImgage = loadImage(selectedPath);
}

String getFileName(String completeFileName) {
  String[] fileNameParts = split(completeFileName, ".");
  fileNameParts = shorten(fileNameParts);
  return join(fileNameParts, ".");
}

void keyPressed() {
  if(key == 's') {
    save(getFileName(selectedPath) + "__.jpg");
    exit();
  }
}

void settings() {
  selectInput("Select a file to process:", "fileSelected");
  while (loadedImgage == null)  delay(100);
  size(loadedImgage.width, loadedImgage.height); 
}

void draw() {
  background(loadedImgage);

  for(int i = 0; i < loadedImgage.width; i++) {
    color imageColor = get(i, 0);

    noStroke();
    fill(imageColor);
    rect(i, 0, 1, 9);
  }

  noLoop();
}


Here are the visuals :


So as you can see first column of the modified file should have the same color as the first pixel of the original file (255;242;6), but strangely it doesn't, it's even a totally new color (255;225;75) which doesn't exist in any of the existing pixels !

So do any of you know how is this possible?
Thanx a lot for your help



PGraphics Output Doesn't... (large pngs)
Jim_Plaxco — Wed, 17 Aug 2016 14:11:00 +0000
Hi folks, 
My story is that I am running P302 on Ubuntu Linux. I have a sketch that outputs a PGraphics object in PNG format no problem. The other day I upped the size of the PNG output to 10x7K. The program ran the same as always (no error messages) but the output file simply wasn't there. Dropping back to a smaller size, the output file was written to disk. Going back to the 10x7K size - program runs normally but no output file on disk.

I then changed my output file format from PNG to TIF and the output file was output!

So my two questions are:

1) Have others experienced problems saving large PGraphics objects as PNGs?

2) Is there a way I can discover what is going on under the covers in the creation of PNG output such that it fails but produces no error message in the console? Note I haven't tried a try/catch but as the statement appears to run normally (no error messages and program execution continues normally) I'm betting try/catch wouldn't tell me anything.

Thanks.



[Likely a Bug] Processing can't save() different PGraphics of different sizes
Henri — Mon, 27 Jun 2016 02:17:07 +0000
Hi, i was trying to save various PGraphics as an "export" function on my sketch and noticed a strange behavior.
When exporting some PGraphics would be saved perfectly, while others would be saved as entire black images. I've reduced the code and made an minimal sketch to test the PGraphic's save() method and i noticed when you're saving various PGraphics and they have the same size, everything works perfectly. When they have different sizes, the output is buggy and some images will be black (and of varying size)

Below is just the code, but i've uploaded the sketch+images to my dropbox: download (5 kb)

PGraphics[] pg;
PImage[] imgs;
File dir;
File[] files;

void setup() {
  size(300, 300);
  initialize();
}

void draw() { 
  background(0, 255, 0);
  //draw the image on every PGraphics. Then draw the PGraphics on the screen.
  for (int i = 0; i< imgs.length; ++i)
  {
    pg[i].beginDraw();
    pg[i].image(imgs[i], 0, 0);
    pg[i].endDraw();
    image(pg[0], 0, 0);
  }
}

void initialize() {
  dir = new File(sketchPath("")+"/img"); 
  files = dir.listFiles();
  loadImages();
  //initialize the PGraphics
  pg = new PGraphics[imgs.length];
  for (int i = 0; i< imgs.length; ++i)
  {
    pg[i] = createGraphics(imgs[i].width, imgs[i].height);
  }
}

void loadImages() {
  imgs = new PImage[files.length];
  //loads every .png file into the imgs array
  for (int i = 0; i <= files.length - 1; ++i)
  {
    String path = files[i].getAbsolutePath();
    if (   path.toLowerCase().endsWith(".png")   )
    {
      imgs[i] = loadImage(path);
    }
    println("image "+i+":  "+path);
  }
}

void keyPressed() {
  if (key=='s') {
    println("EXPORTING");
    for (int i = 0; i< imgs.length; ++i)
    {
      //pg[i].beginDraw();//tried without beginDraw() and endDraw. Results are the same
      pg[i].save("test-"+i+".png");
      //pg[i].endDraw();//tirar isso se não funfar
    }
  }
}




High Resolution Output for P3D
chrisb78 — Wed, 15 Jun 2016 22:00:23 +0000
I'm using the following code snippet (from https://amnonp5.wordpress.com/2012/01/28/25-life-saving-tips-for-processing/ - number 16) to export a scaled-up high resolution file. Everything works perfectly as long as size() and createGraphics() use the 2D renderer:

void setup() {
  size(500, 500); // IMPLICIT USE OF 2D RENDERER
}

void draw() {
  background(255);
  smooth();
  strokeWeight(10);
  fill(255, 0, 0);
  ellipse(width/2, height/2, 200, 200);
}

void keyPressed() {
  if (key == 's') {
    save("normal.png");
    saveHiRes(5);
    exit();
  }
}

void saveHiRes(int scaleFactor) {
  PGraphics hires = createGraphics(width*scaleFactor, height*scaleFactor, JAVA2D); // CREATION OF 2D PGRAPHICS OBJECT
  beginRecord(hires);
  hires.scale(scaleFactor);
  draw();
  endRecord();
  hires.save("hires.png");
}


However, once the two bold lines use P3D instead (code at the end of this post), the program results in two problems:
1. The following error message appears: "OpenGL error 1282 at top endDraw(): invalid operation" (on Win7 with updated drivers)
2. Scaling doesn't actually happen - instead, unscaled image sits in the left bottom of the hi-res PGraphics object - like this:


The correct result should look like this:


After researching this, I couldn't find any high-resolution output for people working with a 3D renderer. I don't care so much about how to create hi-res output, and tried several approaches - without luck yet.

Any help would be greatly appreciated!

Here's the 3D version of the initial code snippet:
    void setup() {
      size(500, 500, P3D); // 3D RENDERER
    }

void draw() {
  background(255);
  smooth();
  strokeWeight(10);
  fill(255, 0, 0);
  ellipse(width/2, height/2, 200, 200);
}

void keyPressed() {
  if (key == 's') {
    save("normal.png");
    saveHiRes(5);
    exit();
  }
}

void saveHiRes(int scaleFactor) {
  PGraphics hires = createGraphics(width*scaleFactor, height*scaleFactor, P3D); // CREATION OF 3D PGRAPHICS OBJECT
  beginRecord(hires);
  hires.scale(scaleFactor);
  draw();
  endRecord();
  hires.save("hires.png");
}




Is there a file size limit for the save() method
craigson — Tue, 14 Jun 2016 21:31:33 +0000
I'm loading an image into memory and manipulating the pixel data inside of my sketch.  However, when I try and use either the save member function of the p5.image object, or the I/O save() method, if the original image was over over a specific size (larger than about 150kb), the download of the manipulated image fails ( the code doesn't throw any errors, but the download fails in the browser, stating "Failed - Network Error".  Is there a known limit to the size of a file that can be saved using either of these methods?

Here's an example of how I'm using the methods:

var img = createImage(width, height);
img.save("test", "png");
// or this save(img, "test.png");



PImage.save() not working?
RaulF — Tue, 03 May 2016 09:57:23 +0000
Hi,

I'm trying to save a PImage and I'm getting the famous "PImage.save() requires an absolute path...".
The PImage.save() code reference doesn't work either.

size(100, 100);
PImage tower = loadImage("tower.jpg");
PImage newImage = createImage(100, 100, RGB);
newImage = tower.get();
newImage.save("outputImage.jpg");


Any idea? It should work. I'm working with the last version, and Mac OSX.

thanks!



How do I export an image that is larger than my monitor?
BITs_ — Sun, 24 Apr 2016 17:40:16 +0000
Hello! 
I have a bit of experience with processing, but nothing really in depth, so perhaps someone with more experience than me can help. 
I am attempting to write a program that will take an image I have created, and quickly crop it into all the necessary sizes to be put onto Sense6 products. The code I have so far is:

PImage input; 

void setup(){
  size(2047, 2047);
  surface.setResizable(true);

  selectInput("Select an image to process:", "selectImage");     
  interrupt();
  println("Delay stopped");
}

void selectImage(File selection){
  if (selection == null){
    println("error- no file selected");
  }else{
    input = loadImage(selection.getAbsolutePath());
    println("image loaded");
  }
}

void interrupt(){
  while(input == null)delay(200);
}

void draw(){
  PImage phoneCase; //1300px (width) X 2000px (height)

  phoneCase = input.get(input.width/2-650, input.height/2-1000, 1300, 2000);
  println("phonecase image got");
  surface.setSize(phoneCase.width, phoneCase.height);
  image(phoneCase, 0,0);
  saveFrame("output/phoneCase.jpeg");
  exit();

}


I've cut out a lot of the other products because I'm just trying to test it right now. 
So anyway, what I'm expecting currently is an image in the folder (sketch folder)/output called phoneCase.jpeg that is 1300px X 2000px. Except that what I'm getting is an image called phoneCase.jpeg that is 1300px x 741px. 741px happens to be really close to the height of my monitor, which is 768px. This sketch gives no errors, so I have nothing to go on. 
I looked into using code like save(phoneCase, "output/phoneCase.jpeg");, but just based on the reference documentation, it seemed like that wouldn't work. 
So, with my monitor being 1366px X 768px, how can I save a PImage that is 1300px X 2000px?



PGraphics saves messed up images after creating a new PGraphics object in a different size
bckmnn — Wed, 06 Apr 2016 10:24:29 +0000
Hi there,
below i attached a small program that generates PNGs. If i change the size of the new PGraphics objects the saved PNGs start to look messed up.

To reproduce the issue run the code from the bottom. Conversion will start an you will get pngs like this:



if you do a mouse click on the canvas, the size of the pngs that should be generated is changed and a few new items are added. The results look like in the screenshot below, some of the images are blank, some are distorted and they still have the old size.



Is there a way to avoid this behavior? is this a bug in processing? am i missing something?

Any input appreciated!

PGraphics png;
ArrayList cue = new ArrayList();
boolean conversion = false;
int pngSize = 64;

void setup() {
  size(400, 400);
  println("creating 64px letters");
  cue.add("A");
  cue.add("B");
  cue.add("C");
  conversion = true;
}

public void mousePressed(){
  println("creating 128px letters");
  pngSize = 128;
  cue.add("A");
  cue.add("B");
  cue.add("C");
  cue.add("D");
  cue.add("E");
  cue.add("F");
  conversion = true;
}

void saveNextInCue(){
  String letter = cue.remove(0);
  println("pngSize value is "+pngSize);
  png = createGraphics( pngSize, pngSize);
  png.beginDraw();
  png.textSize(30);
  png.text(letter,30,30);
  png.fill(random(255),0,255);
  png.rect(0,0,10,10);
  png.endDraw();
  png.save(sketchPath(letter+".png"));
}

void draw() {
  int bg = color(255,0,0);
  if (!conversion){
    bg = color(0,255,0);
  }
  background(bg);
  if( conversion == true){
    saveNextInCue();
    if(cue.size() == 0){
      conversion = false;
    }
  }
}




p5js - save(); only works in setup();
afzalghareeb — Sun, 27 Mar 2016 15:36:00 +0000
Hi everyone,

I am trying to save a single string in a .txt file, but the save(); function seems to work only inside the setup(); function.
Here is an exemple that doesn't work:


var data;
function setup() {
   Canvas = createCanvas(300, 300);
   data = "I am a string";
}
function saveMe() {
   save(data, 'myText.txt');
}
function mouseClicked() {
   saveMe();
}
function draw() {
   background(255);
}

Any idea??
Thanks!



Saving Errors
lindsayhickson — Sun, 28 Feb 2016 00:07:59 +0000
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();
    }
  }




Capture image from a small portion of screen
spartacus — Mon, 29 Feb 2016 00:06:18 +0000
Hi,
I have created a large interface with a small portion dedicated to my webcam capture.
The problem I am facing is that when ever I attempt to save an image for my webcam, the entirety of my interface is saved.
How can I save just a selected area of my screen?
The relevant code is given below. (I should note that I have created a button to save the images)

`import processing.video.*;

Capture cam;

void setup() {
  size (1600,800);
  cam =  new Capture(this, "name=Logitech HD Webcam C270,size=352x288,fps=30");
  cam.start();

}
void captureEvent(Capture cam) {
cam.read();
}

void draw() {
  background(#BCBCB8);
   image(cam , 1100, 100);
   fill(126,131,245);
   stroke(255);
   rect(1200,450,150,50);

   String s2 = "Capture Image"; 
  stroke(5,5,5); 
  fill(5,5,5);
  textSize(20); 
  text( s2, 1203,480);



    }


void mousePressed() {

  if(mouseX>1200 && mouseX < 1350 && mouseY>440 && mouseY < 500){
  saveFrame("captured_image-##.jpg");


  }
}



  `




saveFrame does not save all frames
plux — Wed, 20 Jan 2016 03:19:12 +0000
Hi, all, I'm using saveFrame() because I need to make a video. The code I have is an audio visualization the nI have a song which is playing. the song is about 3 minutes and I'm running the sketch at 60fps. However when the song is finished and I stop the sketch I will have only (more or less) 7200 frames. 7200/60 is about 2 minutes while the song is instead 3+ minutes..why is that?? I also tried to set the framerate at 30 fps but I get the same issue. Am I missing anything?

Thank you

P.



Render an Animation while using the Minim Library
nightLife — Sat, 16 Jan 2016 23:43:42 +0000
I recently created an audio visualizer with the Minim library. I would now like to render it into mp4. I have tried using saveFrame() to create images of the animation but when I later combine the images into an mp4 file the video does not sync with the audio anymore. I am assuming this is because the saveFrame() function is expensive and can not create the correct amount of images in the time given by the program running. So my question now is how can I render my Processing animation such that when I render it into mp4 the animation matches with audio when I combine the video and audio together in a editing software.



Need Help!! Pgraphics Clear() does not work well in my code..
DongY — Sun, 27 Dec 2015 21:17:59 +0000
Hello, I'm new here and very pleasured to be at a minimun level to ask a question understanding Processing codes (>.<)V.
I'm making an interactive drawing tool to save one's own alphabet types(.png) with a transparent background.
But I have a problem to clear the previous type to draw a new type after using PGrphics...
I've found lots of references for this but I couldn't find a solution to clean the type written.

Maybe for someone it's a simple to solve this problem, I hope your help please~!!

Thank you for your help in advance :)



Here's my code for it :

PGraphics alphaG;

float med_mouseX=mouseX;

float med_mouseY=mouseY;

void setup() {

size(400, 500);
  background(255);
  smooth();
  frameRate(30);
  alphaG = createGraphics(width, height);
}

void draw() {
  alphaG.beginDraw();

if (mousePressed) {

//draw an alphabet type
//alphaG.noStroke();
med_mouseX=mouseX+random(-5, 30);
med_mouseY=mouseY+random(-5, 30);
alphaG.stroke(255);
alphaG.strokeWeight(random(20, 60));
alphaG.strokeCap(ROUND);
alphaG.stroke(0, random(0, 255), random(0, 255));
alphaG.line(mouseX, mouseY, pmouseX, pmouseY);
alphaG.endDraw();
image(alphaG, 0, 0);


}
}

void keyPressed() {
//clear a type written 
  if (key == BACKSPACE) {
    alphaG.clear();
  }
//save an alpha written with keyboard(this code can be shorter? ^^?)
  if (key=='a') {
    String fileName = "data/"+"a"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='b') {
    String fileName = "data/"+"b"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='c') {
    String fileName = "data/"+"c"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='d') {
    String fileName = "data/"+"d"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='e') {
    String fileName = "data/"+"e"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='f') {
    String fileName = "data/"+"f"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='g') {
    String fileName = "data/"+"g"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='h') {
    String fileName = "data/"+"h"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='i') {
    String fileName = "data/"+"i"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='j') {
    String fileName = "data/"+"j"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='k') {
    String fileName = "data/"+"k"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='l') {
    String fileName = "data/"+"l"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='m') {
    String fileName = "data/"+"m"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='n') {
    String fileName = "data/"+"n"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='o') {
    String fileName = "data/"+"o"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='p') {
    String fileName = "data/"+"p"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='q') {
    String fileName = "data/"+"q"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='r') {
    String fileName = "data/"+"r"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='s') {
    String fileName = "data/"+"s"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='t') {
    String fileName = "data/"+"t"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='u') {
    String fileName = "data/"+"u"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='v') {
    String fileName = "data/"+"v"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='w') {
    String fileName = "data/"+"w"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='x') {
    String fileName = "data/"+"x"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='y') {
    String fileName = "data/"+"y"+"1"+".png";
    alphaG.save(fileName);
  }

if (key=='z') {
    String fileName = "data/"+"z"+"1"+".png";
    alphaG.save(fileName);
  }
}