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

Fangry

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!

TfGuy44

Would you be willing to learn how to program with objects to make this a much better program? Do you have the time to do so? What I'm trying to ask is... is this a homework assignment or a personal pet project of passion?

Cuz it's already code spaghetti.

Fangry

This is an assignment from school. And yes, I know it's messy... Do you know any ways to make it work?

TfGuy44

Right. So you have the image loaded into some PImage variable, right?

You can display that PImage directly on the screen, but for drawing on it, that isn't super useful - it's not easy to draw things on a PImage.

The best thing to do would be to use the PImage as a background in a PGraphics object. Then you can draw on the PGraphics object easily. You can also get the resulting image from the PGraphics object.

Here's a quick example:

String http = "http://";
PImage img;
PGraphics pg;
String str = "";
int textX, textY;

void setup() {
  size(600, 400);
  img = loadImage( http + "www.tfguy44.com/MyIcon1.PNG" );
  pg = createGraphics(500, 400);
  pg.beginDraw();
  pg.clear();
  pg.image( img, 0, 0);
  pg.endDraw();
}

void draw() {
  background(255, 0, 255);
  noStroke();
  for ( int i = 0; i < width/10; i++) {
    for ( int j = 0; j < height/10; j++) {
      fill( (((i+j)%2)==0)?196:255 );
      rect(10*i, 10*j, 10, 10);
    }
  }

  fill(64, 0, 64);
  rect(0, 0, 100, 400);



  image( pg.get(), 100, 0);
}

void keyPressed(){
  str += key;
  pg.beginDraw();
  pg.fill(random(255),128,random(255));
  pg.text(str, textX, textY);
  pg.endDraw();
}

void mousePressed(){
  if( mouseButton == RIGHT ){
    pg.get().save("savedImage.PNG");
  } else {
    textX = mouseX;
   textY = mouseY;
   str = "";
  }
}

This is not the best example ever, sorry. Click somewhere on the right side to set the text position then type some letters to make text. Right click your mouse to save the image.

Fangry

Thanks, TfGuy44, I really appreciate it!

Fangry

I am trying to save changes so i can always go back, but the following code isn't working. Plz help!

  void saveChanges(ArrayList<PGraphics> a) {
    a.add(pg);
    if (a.size() > maxUndos) {
      a.remove(0);
    }
  }

  void undo(ArrayList<PGraphics> a) {
    if (a.size()>0) {
      PGraphics temp = a.get(a.size()-1);
      temp.loadPixels();
      arrayCopy(temp.pixels, pg.pixels);   
      a.remove(a.size()-1);
    }
  }
}