Apply an arbitrary shape to a component with AffineTransform?

General JUCE discussion
1

We can scale, rotate, flip and shear a component easily using the AffineTransform class, but what if I want to deform a component to make it look like a trapezoid? I haven’t find a way to make it happen, or did I miss something?

2

use

juce::AffineTransform::fromTargetPoints(..)

There’s multiple variants of the call, all allow to define any affine transformation based on three points.

https://docs.juce.com/master/classAffineTransform.html

3

Tried everything, I can’t get a trapezoid.

4

An affine transform cannot transform a rectangle into a trapezoid… sorry I misread and thought rhomboid - so it’s not possible to have a trapezoid component using a transform. If I had to do it, I guess I’d make a rectangular component and calculate the non-affine transform to the trapezoid myself and use that for drawing with transparency outside the trapezoid area. Overriding hittest() should allow to make it behave like it was a trapezoid component. Of course things like text would be tricky. There’s also the option to draw into a rectangular image and then use a non-affine transform to transform the pixels by hand.

1 Like
5

Isn’t there any other method to use a Path to deform an image?

I mean… something that could turn this:
spok-et-les-cohanim

into this:

spock_trapezoid

or into any other shape such as a triangle, a star, a circle, and so on…

OT: are you the D. Haupt that made modules for Synthedit?

6

Not with JUCE. You want to render arbitrary polygons and map their textures in 2D space. That is not something JUCE can do. This is more akin to what a game engine can do.

What is your actual use case?

7

Nothing really important, but if I get to accomplish this, I think I could have a profitable use out of it in the future.

Every time I finish a project, I spend some time to make a fancy about screen with some sort of animation… This part of the job actually relaxes me, helps me staying concentrated while I think about more important things to do.

So, the last time I made this kind of animation:
ezgif-1-e6788308e6

The white rectangle is actually an Image object that will contain some text over an animated background.

I’ve implemented a sort of sequencer that modifies the parameters of a series of AffineTransforms over time, but I thought it would have been cool if the rectangle, at the end of the animation, bent in perspective like a space ship turning and flying away in deep space. :slight_smile:

I’m watching too much of Star Trek lately… :joy: