Image Loading: Processing 2 vs 3

Processing Coding Questions
1

Hello,

My students are making interactive collages and importing a lot of .pngs. We noticed that Processing 3 is really laggy for simple image animations that run fine of Processing 2. Does anyone know why this is and how we can get the same smoothness in Process 3.

//variables
PImage boat;
PImage coral1;
PImage coral2;
PImage oil;
PImage sea;
PImage sky1;
PImage sky2;
PImage skyline;
PImage slum1;
PImage slum2;
PImage text;
PImage trashisle;
//more variables
float fadeIn = 0;
int fadeOut = 255;
int moveBoat = 800;
int fadeTrash = 0;
int skyFade = 255;


void setup() {
  size(900,750);
  
  //variables
  boat = loadImage("boat.png");
  coral1 = loadImage("coral1.png");
  coral2 = loadImage("coral2.png");
  oil = loadImage("oil.png");
  sea = loadImage("sea.png");
  sky1 = loadImage("sky1.png");
  sky2 = loadImage("sky22.png");
  skyline = loadImage("skyline.png");
  slum1 = loadImage("slum1.png");
  slum2 = loadImage("slum2.png");
  text = loadImage("text.png");
  trashisle = loadImage("trashisle.png");
  
}

void draw(){
  //background(255);
  imageMode(CENTER);
 
 noTint();
  image(sea,400,350,1000,800);
 image(sky2,500,250,1000,800);
 tint(255,255,255,skyFade);
 image(sky1,500,400,1000,800);
 
 tint(255,255,255,fadeIn);
    image(oil,mouseY,400,3000,800);
    noTint();
     image(skyline,500,350,1000,800);
     image(slum2,415,395,1000,800);
      image(slum1,400,400,1000,800);
    
     image(boat,moveBoat,430,1400,1200);
     tint(255,255,255,fadeOut);
  image(coral1,400,450,1000,700);
     image(coral2,500,300,1200,1000);
     tint(255,255,255,fadeTrash);
image(trashisle,500,350,1000,900);

noTint();
image(text,mouseX,400,1000,800);


//assign operators
fadeIn = fadeIn + 15;
fadeOut = fadeOut - 15;
moveBoat = moveBoat - 5;
moveBoat = constrain(moveBoat,450,800);
fadeTrash = fadeTrash + 5;
skyFade = skyFade - 3;
}

Links to photos for this student project:
https://drive.google.com/file/d/16X7dCwp8p7OAIgjR7GeLWLq-_bGLYtUO/view?usp=sharing
https://drive.google.com/file/d/1PYUOjUGWoBcTXNLqA2rD6V7VUPoSVx3X/view?usp=sharing
https://drive.google.com/file/d/1rpY433HLLHrq1zk6IWmwmSdTddLZu_ym/view?usp=sharing
https://drive.google.com/file/d/1hm8EWIbjTQakLmdNPUCtH-NUq0jqIBOd/view?usp=sharing
https://drive.google.com/file/d/1GUbTEDrTLFangDWWtf9f2npTnrdTV6Qw/view?usp=sharing
https://drive.google.com/file/d/1-y1IqBNuup-W7hntAQGsGzupLw00TvJD/view?usp=sharing
https://drive.google.com/file/d/1ZyUkkWkCnSlFa7d-vjY9LqbusYYBbm7-/view?usp=sharing
https://drive.google.com/file/d/12OMxxLwGRJ4tXmy9qpBQb23eoI7sZFBj/view?usp=sharing
https://drive.google.com/file/d/1HZ0v4Z742BUzcLV5z5aePh68z8OyPv_9/view?usp=sharing
https://drive.google.com/file/d/1mdshK42Ts2TTSrhwzY0cUBev_5E7k7p2/view?usp=sharing
https://drive.google.com/file/d/1W7tpxs934AT-xgXpx6ppmJzCo0m2Z5XE/view?usp=sharing
https://drive.google.com/file/d/1o2yg8NgtLrx6qT8uo4s9PwDMFRWr15ap/view?usp=sharing
2

-a- your code posting at the end has a problem,
can you edit it? seems like you wanted to show some pictures?

-b- can not comment on the P2 P3 differences?
but a general SPEEDUP idea:
do not use the image resize

image(img,x,y,dx,dy);

in every draw loop
resize the picture in setup ( or at action script like key mouse ) and then draw the resized ones.

/** Image: Load and Display  */

PImage img,imgfit;

void setup() {
  size(300, 200);
//  frameRate(800);
  img = loadImage("moonwalk.jpg");
  imgfit=img.copy();
  imgfit.resize(300,200);
}

void draw() {
  surface.setTitle(nf(frameRate,0,1)+" FPS");
//  image(img, 0, 0, 300,200);      // 300FPS
  image(imgfit,0,0);              //  660FPS 
}

other way:

PImage img;

void setup() {
  size(300, 200);
  img = loadImage("moonwalk.jpg");
  img.copy(0,0,640,360,0,0,300,200);  // resize
}

void draw() {
  image(img, 0, 0);
}
1 Like
3

Hello kll,

Thank you for replying.

  • I added links to my post for the photos used in this project.

  • I will test your input with my class on the photo resizing issue. THANK YOU!

  • I would still love to know why Processing v2 runs better v3 for this project but maybe it doesn’t matter :slight_smile:

4

Follow up question…

  • How do optimize loading images in draw if you want to grow the images?
//photo variables

PImage photo2; 


//movement variables

int change2 = 50;


void setup () {  
  size (400,300);
      photo2 = loadImage("pink.png");  

}


void draw (){
  background (255);
  imageMode (CENTER);
  image (photo2,200,150, change2, change2);
   
  //Assignment Operators
  change2 = change2  + 1;

}
1 Like
5

play

/** Image: Load and Display  */

PImage img, imgfit;
int showx0=300, showx, showy0=200, showy;
int zoom=20;
float dz = 0.05;

void setup() {
  size(300, 200);
  img = loadImage("moonwalk.jpg");
  resize();
  println("use key [+] [-] for zoom");
}

void draw() {
  background(200, 200, 0);
  image(imgfit, mouseX, mouseY);
}

void keyPressed() {
  if ( key == '+' ) zoom++;
  if ( key == '-' ) zoom--;
  resize();
}

void resize() {
  zoom = constrain(zoom,1,100);
  println("zoom: "+zoom);
  showx = int(showx0 * zoom * dz);
  showy = int(showy0 * zoom * dz);
  imgfit=img.copy();
  imgfit.resize(showx, showy);
}
1 Like
6

Thanks! That works really well. :slight_smile:

But this solution is a bit complex for a beginning teen coding class where students are using variables for the first time.

That was what was so nice about the first image resizing option (although painfully lagging), it was clear to explain and simple for kids to try stuff. Any simpler options for beginning coders using multiple images in an interactive collage project for playing with variables to grow and shrink images (like ellipse)?

1 Like
7

-a- sorry late now i loaded your full original project
( the picture thing was heavy )

YES i can confirm on my system / hardware:

// P 3.5.3 run here at 15 slows down to 7 FPS
// P 2.2.1 run here at 15 speeds up to 23 FPS

-b- this found i tested several disable but useless

-c- but now found:

in setup use

  noSmooth();

and P2 and P3 speeds up to

60 FPS.

-d- how i see the FPS? in draw() use:

// /* in P3 use */ surface.setTitle(nf(frameRate,0,1)+" FPS");
// /* in P2 use */ if ( keyPressed && key == 'p' ) println(nf(frameRate,0,1)+" FPS");
1 Like
8

Hello Again kll,

Sorry for late reply. Thank you so much all of your help and input! My students are pretty happy about getting out of simple shapes to use pictures in their interactive art projects (me too!).

If you or anyone else thinks of any more simple (very beginning code strategies) techniques to optimize multiple images in Processing 3 with resizing please share here.

Thanks again!

9

PS:
noSmooth()
CHANGED OUR LIVES :slight_smile:

2 Likes