Skewed/Tilted Album Art?

[Spritanium]

Let me start off by saying that I love Rainmeter. I've only been using it for a week or so, but I've started working on a skin. It's a simulation of an iPod that allows you to control whatever song is currently playing in iTunes. Nothing special, but I'm learning.

Anyway, I've been trying to get the album art to appear "3D", like on an actual iPod Classic.



The image on the left is what I have right now, and the one on the right is what I'm trying to get.

From what I understand, this should be possible using TransformationMatrix, but I have no clue how that works. If somebody who knows more about it could help me out, I'd appreciate it.

This is the current Album Art code:

Code: Select all

[Icon]
Meter=IMAGE
MeasureName=MeasureArt
X=35
Y=60
H=60
W=60
AntiAlias=1
LeftMouseDownAction=!execute [!RainmeterShowMeter LargeAA][!RainmeterHideMeter Icon][!RainmeterRedraw]

[IconReflect]
Meter=IMAGE
MeasureName=MeasureArt
X=35
Y=120
H=56
W=60
AntiAlias=1
ImageFlip=Vertical

[IconReflection]
Meter=IMAGE
ImageName="reflection.png"
X=35
Y=120
H=56
W=60

[Icon] is the album art itself, [IconReflect] is the vertically-flipped version of the album art, and [IconReflection] is the gradient overlay that makes it appear to fade out. Though I'm sure you could've figured that out.

http://spritanium.deviantart.com/#/d2s79xa Here's a link to the project, if anyone's interested.

[Alex2539]

From what I understand, this should be possible using TransformationMatrix, but I have no clue how that works. If somebody who knows more about it could help me out, I'd appreciate it.

Unfortunately you've misunderstood. TransformationMatrix doesn't do this. With a transformation matrix, opposite sides always remain parallel to each other. The closest you can get with transformation matrix is skewing it:

[Spritanium]

Unfortunately you've misunderstood. TransformationMatrix doesn't do this. With a transformation matrix, opposite sides always remain parallel to each other. The closest you can get with transformation matrix is skewing it:

That seems close enough. How would I go about doing this?

Alternatively, can you think of any other methods that would work?

[Alex2539]

Sorry for the late reply. I got stuck dealing with some issues in a new version the devs have going.

Skewing is pretty simple. Just add a line like this to your image meter: TransformationMatrix=1;-0.25;0;1;0;0

To change how much it is skewed, just change the -0.25. In short, the numbers in the transformation matrix are as follows:
If you had TransformationMatrix=A;B;C;D;E;F
A - Scale horizontally
B - Skew vertically
C - Skew horizontally
D - Scale vertically
E - Shift horizontally
F - Shift vertically

For a more in-depth explanation, check out Tips and Tricks: Transformation Matrix

[Spritanium]

Sorry for the late reply. I got stuck dealing with some issues in a new version the devs have going.

Skewing is pretty simple. Just add a line like this to your image meter: TransformationMatrix=1;-0.25;0;1;0;0

To change how much it is skewed, just change the -0.25. In short, the numbers in the transformation matrix are as follows:
If you had TransformationMatrix=A;B;C;D;E;F
A - Scale horizontally
B - Skew vertically
C - Skew horizontally
D - Scale vertically
E - Shift horizontally
F - Shift vertically

For a more in-depth explanation, check out Tips and Tricks: Transformation Matrix

Thank you, it's working well.

The only problem is that AntiAliasing doesn't seem to be working. As you can see, the image is really jagged.

[Alex2539]

Yeah, that's the only downside. There's nothing you can really do about it.

[Spritanium]

Yeah, that's the only downside. There's nothing you can really do about it.

Alright. I think I'll make it optional, since not everyone will like the jagged edges.

Thanks for the help.

[jsmorley]

I found that if you use -0.30 it is less jaggy.

[jsmorley]

Code: Select all

[Rainmeter]
Update=1000
BackgroundMode=2
DynamicWindowSize=1
SolidColor=255,255,255,255

[MeterBack]
Meter=Image
W=500
H=500
SolidColor=255,255,255,255

[MeterImage]
Meter=Image
ImageName=guns.jpg
W=400
H=400
X=50
Y=140
TransformationMatrix=1;-0.30;0;1;0;0
AntiAlias=1

6-22-2010 5-44-55 PM.png

[Spritanium]

It looks fine when it's large like that, but it still looks jagged when it's the correct size.