Best Practices for Resizing Images - Collage Assignment

Teaching
1

Hello Forum,

I want to confirm that if you are making a simple, animated collage with 20+. png images in Processing and you have to resize the images (in the code) that it is better to use the:

.resize command in void setup()

Rather than adding a 4th and 5th argument to:

image(pic, 0,0,150,150); in void draw()

The reason I ask is that students find it easier to understand the second method because it feels similar to a rect() or ellipse(). Also, they like to grow and shrink their images with basic variables and this works well too.

Thanks for your tips!

Margaret

1 Like
2

Reason is performance! Much better to resize() once in setup() rather than keep resizing via image() at 60 FPS all the time in draw()! :racing_car:

2 Likes
3

Definitely “collages” :slight_smile:

Take a look:
https://nobleeducator.com/interactive-self-portraits/

2 Likes
4

What beautiful student work!

If they want to resize once, they should do it in setup(). .resize() each frame is a very expensive operation, and it can slow sketches down enormously.

If they want to resize dynamically and the five-argument image() is grinding their sketch to a halt, some options to try are:

  1. use scale();
  2. make the image a texture on a PShape (beginShape/endShape) and redraw the shape at different sizes
  3. save a group of pre-resized images in PImage or ArrayList and select one (from smallest to largest) based on the sketch state – for example, by changing an amt from 0-1.0 and using imgs[(int)lerp(0, imgs.length, amt)] to get the image.
2 Likes
5

Thank you for this tips - all very helpful! Our favorite trick is to use noSmooth() when our image based projects are bogged down! That is a huge help.

Hope all is well with you and the Processing foundation team. Coding is a great escape right now!

1 Like