smooth vs noSmooth, images vs. animations

General Discussion Other

newmiracle

smooth vs noSmooth, images vs. animations

in General Discussion • Other • 1 year ago

I have some questions about using smooth(); and noSmooth(); if anyone can help.

I am loading images from flickr. Using smooth(); makes them look good.

When you type and press enter, it displays text and searches for a new batch of flickr photos. After a few moments, I initiate an animation that will clear the search field. The text goes down and fades out (color and alpha) simultaneously.

When smooth is on, the animation is slow and jittery. When smooth is off, the animation is great but the pictures look bad.

I've tried using smooth, and then noSmooth when the animation gets executed. But it doesn't just apply to the image, the entire screen is noSmooth, making the image blocky again.

My code is kind of a mess right now, so if you think seeing it will help you understand the problem I will post it. But for now I just wanted to know how people handle animating text, do so with multiple assets, use (or don't use) the smooth/noSmooth functions, and if those functions can be assigned to individual elements.

Replies(3)

calsign

Re: smooth vs noSmooth, images vs. animations

1 year ago

You could use two separate PGraphics, but I'm not sure if that will help with speed.

I know that smooth() slows down the frameRate, so changing what objects it applies to will not help.
If you're using the internet to access flickr, that would explain why your frameRate is slow in the first place.

You could try threading.

amnon.owed

Re: smooth vs noSmooth, images vs. animations

1 year ago

I think the first example sketch shows your problem. Press the mouse to see the frameRate drop significantly. Smooth() can be assigned on an individual basis, however that unfortunately won't solve your problem, since you want to smooth exactly the image where the slowdown problem arises.

Two suggestions to tackle this issue:

Do not change the display size with the image() function in the draw() loop. Instead resize the image elsewhere once and display it at the actual size.
Change the renderer to OPENGL and use anti-aliasing.

Code Example (Problem)

Copy code

PImage img = loadImage("http://img-fotki.yandex.ru/get/3012/lexincorp.e4/0_248ce_fb5c1e3d_XL.jpg");
void setup() {
size(600, 300);
textSize(100);
textAlign(CENTER, CENTER);
frameRate(1000);
}
void draw() {
if (mousePressed) {
background(255, 0, 0);
smooth();
} else {
background(0);
noSmooth();
}
// the following line causes the problem in combination with smooth() and JAVA2D
image(img, 10, 10, width-20, height-20);
float f = frameCount%255;
fill(f, f);
text("PROBLEMS?", width/2, height/2);
frame.setTitle("fps: " + int(frameRate));
}

Code Example (Solution 1)

Copy code

PImage img = loadImage("http://img-fotki.yandex.ru/get/3012/lexincorp.e4/0_248ce_fb5c1e3d_XL.jpg");
void setup() {
size(600, 300);
textSize(100);
textAlign(CENTER, CENTER);
frameRate(1000);
img.resize(img.width-20, img.height-20);
}
void draw() {
if (mousePressed) {
background(255, 0, 0);
smooth();
} else {
background(0);
noSmooth();
}
image(img, 10, 10);
float f = frameCount%255;
fill(f, f);
text("PROBLEMS?", width/2, height/2);
frame.setTitle("fps: " + int(frameRate));
}

newmiracle

Re: smooth vs noSmooth, images vs. animations

1 year ago

Thanks so much for your help.

I see what you mean about the re-sizing. My issue was that I was getting all different kinds of images dynamically from Flickr. I wanted to make sure they would be full screen, and also in the correct proportions when being scaled. So I was going to make a image loading/resizing/displaying function outside of draw, but I didn't have to.

And the reason I didn't have to was because putting the sketch in OPENGL mode fixed everything magically.

I will probably wind up going back and putting it in it's own function anyways, for the sake of cleanliness and readability. But for now I can continue my sloppy coding!

Top Reply