repeatedly saving and reopening same picture

fradancis

hello everybody, what i'm trying to do is repeatedly open, rotate (some non square angle), and save a picture in order to accumulate rotation "errors." i just started using processing, so i'm having a little trouble understanding how it works. i have taken some courses in programming with java and the syntax seems pretty similar. i think its just stuff like the infinitely looping draw() function that is throwing me off.

here is my attempt:

PImage img;
String imgFileName = "junk - Copy";
String fileType = "JPG";  
int rotations = 10; // number of times to rotate
int rotCount = 1;


void setup()
{
  img = loadImage(imgFileName + "." + fileType);
  size(img.width, img.height);
}

void draw()
{   
    background(230);
    img = loadImage(imgFileName + "." + fileType);
    translate(img.width/2, img.height/2);
    rotate(radians(17));
    translate(-img.width/2, -img.height/2);
    saveFrame(imgFileName+".jpg");
    System.out.println("rotated " + rotCount + " times");
    image(img, 0, 0);
    rotCount++;
    if(rotCount > rotations) 
      noLoop();
}

at first i didn't realize draw looped indefinitely. so i just had a for loop to open, save and rotate "rotations" number of times. and that technique obviously never finished but i could watch the picture being rotated in the viewing window and slowly warp and manually ending the program kind of worked as a clunky solution. however, with this way, even with 1 rotation the image is saved as just whatever background color is chosen.

thanks for any help

GoToLoop

I think its just stuff like the infinitely looping draw() function that is throwing me off.

You should read about its reference below:

http://processing.org/reference/draw_.html

A very important aspect every Processing programmer needs to know is that everything is drawn to a PGraphics layer.
That's why nothing is shown on screen until draw() is finished. If we stall inside draw(), there won't be any graphics displayed!
Once a draw() iteration completes, Processing calls a renderer to transfer the contents of that PGraphics to the real screen!
And a hidden secret -> the variable that keeps the reference for that PGraphics canvas is merely called g. :P

Poersch

No need to save the image at all:

PImage someImage;
float torque = radians(1);
int iterations = 100;

void setup() {
    someImage = loadImage("http" + "://processing.org/img/processing2-logo.jpg");
    size(someImage.width, someImage.height, P2D);
    image(someImage, 0, 0);
    imageMode(CENTER);
}

void draw() {
    translate(width / 2, height / 2);
    rotate(torque);
    image(this.g, 0, 0);
    if(frameCount >= iterations)
        noLoop();
}

GoToLoop

Yikes @Poersch ! Your example is so over-the-top for some1 who's still getting around the whole draw() callback concept! :-SS

A short explanation is that the current background layer, the very PGraphics g, is being re-stamped over itself, but rotated!

Poersch

@GoToLoop: Sorry. :(

@fradancis: this.g, also referencible by g (I just use this for clarity), is your sketch's canvas, a PGraphics object. An PGraphics object can be casted to an PImage object, so you are able to render it using image().

My little sketch just takes it's canvas content, rotates it and renders it on itself, over and over again, for iterations times.

fradancis

that all makes a decent amount of sense to me. thanks for the explanations. i actually also just started a graphics course with opengl this semester, in which we just started looking at some code, and it all seems very similar to this.

i copied that code that you provided poersch, but all i get is a series of errors and the view screen flashes gray and black quickly for a while and then stops.

Poersch

No problem, we'll help you, just post your error log.

fradancis

Framebuffer error (framebuffer unsupported), rendering will probably not work as expected Read http://wiki.processing.org/w/OpenGL_Issues for help. OpenGL error 1280 at bot beginDraw(): invalid enumerant OpenGL error 1286 at bot endDraw(): invalid framebuffer operation OpenGL error 1286 at bot beginDraw(): invalid framebuffer operation OpenGL error 1286 at top endDraw(): invalid framebuffer operation

thats what i get when i just run exactly what you typed out before. i tried with an image in the same folder as the sketch instead, and did not get any errors. but for both, the resulting image is all black, after going back and forth quickly between grey and black.

Poersch

Sorry for the delay. What's your Processing version? Does the following code work for you (just a simple OpenGL compatibility test)?

void setup() {
    size(200, 200, P2D);
}

void draw() {
    translate(width / 2, height / 2);
    rotate(frameCount / 100.0);
    rect(-width / 2, -height / 2, width, height);
}

fradancis

no problem. thanks for all the help.

that code actually does the same thing with the flashing grey and black.

i recently downloaded the newest version 2.1.1 i think

Poersch

It seems like your (graphics card)/(Java version) doesn't support OpenGL...

In most situations you could simply revert to Processing's default renderer Java2D, by removing the P2D parameter in size(). Unfortunately we need to reference the current canvas (this.g) in our image() call, which afaik is not possible with Java2D (should give you a nullpointer exception).

The slower but working solution is to grab the screens content (with the help of Processing's get() method), put it in another PImage object, then render this PImage object rotated to the screen:

PImage someImage;
float torque = radians(1);
int iterations = 100;

void setup() {
    someImage = loadImage("http" + "://processing.org/img/processing2-logo.jpg");
    size(someImage.width, someImage.height);
    image(someImage, 0, 0);
    imageMode(CENTER);
}

void draw() {
    translate(width / 2, height / 2);
    rotate(torque);
    image(get(), 0, 0);
    // Use "image(get(0, 0, width, height), 0, 0);" in case the code line above is throwing an exception
    if(frameCount >= iterations)
        noLoop();
}

fradancis

ah, this does work now. thanks for all the help. next step is to take some time reading over the info you shared and the code drill it into my head.

Poersch

No problem. :)

If my last example code answers your initial question, please mark it as answer, for others to see that this question has be answered.

GoToLoop

We can use get() w/o arguments if we want the whole image!

void draw() {
  translate(width>>1, height>>1);
  rotate(torque);
  image(get(), 0, 0);
}

Another alternative trick in place of get() is loadPixels(), in order to directly use g in JAVA2D engine:

void draw() {
  translate(width>>1, height>>1);
  rotate(torque);
  loadPixels();
  image(g, 0, 0);
}

You still may try to use the P3D mode in the old Processing 1.5.1, which is rasterized rather than OPENGLed! %%-

Poersch

@GoToLoop: Of course, but I remember reading about several problems caused by get() without parameters. In any case, get() would be more elegant, I'll update my answer above.

So loadPixels() will set the main canvas reference? I should have looked at loadPixels() source code... anyways, thanks for the info! :D

GoToLoop

So loadPixels() will set the main canvas reference?

Well, canvas object's reference (PGraphics) is always stored in variable g!
And b/c it inherits from PImage, it has a color pixels[] field.
Perhaps JAVA2D mode doesn't automatically updates that internal array? :-??

Poersch

In Java2D pixels is null until loadPixels() is called - like mentioned in the description. But you should be able to use the same syntax image(this.g, 0, 0) with all renderers, at least that's my opinion. :/

GoToLoop

We can call loadPixels() once in setup() to avoid the NPE. However, there won't be any updates to the canvas! >:)

But you should be able to use the same syntax image(this.g, 0, 0) with all renderers, at least that's my opinion.

Well, usage of variable g is an "unauthorized" hack! Since it's not in web reference!
Besides, JavaScript mode doesn't have that variable and will crash! 8-X

Poersch

I'm not talking about image(this.g, x, y) in particular, I'm talking about image(PGraphics, x, y) in general, this happens to every PGraphics object that tries to render it's content on itself, but just in the Java2D renderer.

EricLiu

Hi: Wonder if anyone aware that why PGraphics.updatePixels(); cause the PGraphics image to be inverted? below is a simple example. Thanks if anyone know the answer to it.

PFont myFont;
PGraphics myPg;


void setup() {
  size(1900, 800, P2D);
  smooth();
  myFont = createFont("Georgia", 100);
  noLoop();
}

void draw() {

  myPg = makeGraphic();

  myPg.loadPixels();
  //The following line cause inversion, if comment out it is OK.
  myPg.updatePixels();

  image(myPg, 0, 0);
}


PGraphics makeGraphic() {
  int w = 1900;
  int h = 400;
  PGraphics pGraph = createGraphics(w, h, P2D);
  pGraph.beginDraw();
  pGraph.background(255);
  pGraph.fill(0);
  pGraph.textFont(myFont);
  pGraph.textSize(100); 
  pGraph.text("A", 0, 0, 1900, 200);
  pGraph.endDraw();
  return pGraph;
}

GoToLoop

Dunno why it's so! But if we use background() or set() to display it, it turns out alright! :P
Of course, JAVA2D works in all cases! ;;)

// forum.processing.org/two/discussion/2845/
// repeatedly-saving-and-reopening-same-picture

PFont myFont;
PGraphics myPG;

//static final String ENGINE = JAVA2D;
static final String ENGINE = P2D;

void setup() {
  size(800, 600, ENGINE);
  noLoop();

  myFont = createFont("Georgia", 100);
  myPG = makeGraphic();
}

void draw() {
  myPG.loadPixels();
  myPG.updatePixels();

  //image(myPG, 0, 0);
  //set(0, 0, myPG);
  background(myPG);
}


PGraphics makeGraphic() {
  final PGraphics myPGraph = createGraphics(width, height, ENGINE);

  myPGraph.beginDraw();
  myPGraph.smooth(4);
  myPGraph.background(-1);
  myPGraph.fill(0);
  myPGraph.textFont(myFont);
  myPGraph.text("A", width>>1, height>>1);
  myPGraph.endDraw();

  return myPGraph;
}