How to use tint() with copy()

p5.js Coding Questions
1

To put a tint on an image you use the tint function followed by the image function like so:

tint(255, 0, 0);
image(img, 0, 0); //red image

But when I try to use the copy function, the tint isn’t applied as it is only ever applied to the image function:

tint(255, 0, 0);
copy(img, 0, 0, 10, 10, 50, 50, 10, 10); //The part of the image that we moved is still the color of the original image

So my question is: How do I use the copy function and still get a tinted image (or part of image)?

I think I need to somehow use the copy function on an edited image (one that looks like it has had tint() applied to it e.g. a red filter like shown above) but I don’t know what the best way to go about changing the color of the actual image is (or if that is even possible / the best thing to do).

Thanks in advance for any help.

1 Like
2

Try the 9 argument version of image() instead.

2 Likes
3

Or maybe try out blend() o filter():

  1. p5js.org/reference/#/p5.Image/blend
  2. p5js.org/reference/#/p5.Image/filter
4

Thanks. A tiny bit less elegant but it does the same job!

5

I don’t think I am able to tint the image any color with filter(), though.
And I need another image to blend it with for blend().

6

How exactly is one extra letter less elegant?! :smile:

Stay away from filter, etc. It’ll be slower, much slower if you use P2D/P3D.

7

Haha, I suppose you’re right. It’s just a little easier to understand what it is going on with copy() as you are literally copying a part of the image.
Also I just needed something other than “thanks” to say to satisfy the minimum 20 character constraint!

1 Like
8

Sidenote: the part of the image copied from and where that part is placed are in different orders in the image and copy functions.

1 Like