It is currently April 20th, 2019, 3:16 pm

Circular Line with Gradient

Tips and Tricks from the Rainmeter Community
User avatar
balala
Rainmeter Sage
Posts: 8080
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Circular Line with Gradient

balala » April 25th, 2018, 6:03 pm

ChicknwithNoName wrote:I meant that I tried implementing balala's ActionTimer routine to your half-circle alternative, but I couldn't get the offset anchors right and so the rotation wasn't a smooth circle; it was wobbling because it was off-center.
The only thing I'd change in your code is that I'd rotate the meter backward (anticlockwise), probably. This is very simple, starting from your last code. There are even two different solutions:
  • Replace the Rotate and IfCondition options of the [MeasureAngle] measure, as it follows:

    Code: Select all

    [MeasureAngle]
    ...
    Rotate=[!SetVariable Angle "(Clamp((#Angle#-10),-360,0))"]#U#
    IfCondition=(#Angle#<=-360)
  • Leave unchanged the above options and replace the #Angle# variable in the ExtraNW, ExtraNE, ExtraSE and ExtraSW options of the [Circle] meter with -#Angle#:

    Code: Select all

    [Circle]
    ...
    ExtraNW=Rotate -#Angle#,50,50 | Scale #Size#,#Size#,0,0
    ExtraNE=Rotate -#Angle#,0,50 | Scale #Size#,#Size#,-50,0
    ExtraSE=Rotate -#Angle#,0,0 | Scale #Size#,#Size#,-50,-50
    ExtraSW=Rotate -#Angle#,50,0 | Scale #Size#,#Size#,0,-50
User avatar
kyriakos876
Posts: 912
Joined: January 30th, 2017, 2:01 am
Location: Greece

Re: Circular Line with Gradient

kyriakos876 » April 25th, 2018, 8:49 pm

ChicknwithNoName wrote:I meant that I tried implementing balala's ActionTimer routine to your half-circle alternative, but I couldn't get the offset anchors right and so the rotation wasn't a smooth circle; it was wobbling because it was off-center.
Oh yeah... you would have to rewrite the Transformation matrix to match the 2 halfs instead of the 4 quadrants.
User avatar
ChicknwithNoName
Posts: 18
Joined: February 17th, 2018, 11:08 pm

Re: Circular Line with Gradient

ChicknwithNoName » April 25th, 2018, 10:18 pm

balala wrote:The only thing I'd change in your code is that I'd rotate the meter backward (anticlockwise), probably. This is very simple, starting from your last code. There are even two different solutions:
The original design was based on a linear thought, applying the gradient from the beginning of my first shape to the end of my last shape. You introduced the rotation with the use of TransformationMatrix. I merely implemented your [MeasureAngle] routine using Rotate.

Since my original shape is now rotating, like yourself, I thought about reversing the rotation, but I didn't know how to go about modifying your routine. There's another, much simpler solution: rearrange the order of the gradients.

Code: Select all

NW=90 | 255,255,255,100 ; 0.0 | 255,255,255,150 ; 1.0
NE=-90 | 255,255,255,150 ; 0.0 | 255,255,255,200 ; 1.0
SE=0 | 255,255,255,0 ; 0.0 | 255,255,255,50 ; 1.0
SW=0 | 255,255,255,50 ; 0.0 | 255,255,255,100 ; 1.0
User avatar
ChicknwithNoName
Posts: 18
Joined: February 17th, 2018, 11:08 pm

Re: Circular Line with Gradient

ChicknwithNoName » April 25th, 2018, 10:39 pm

kyriakos876 wrote:Oh yeah... you would have to rewrite the Transformation matrix to match the 2 halfs instead of the 4 quadrants.
You misunderstand me.

After successfully getting balala's [MeasureAngle] routine working on my original code using the Rotate setting for Shapes, I tried adding the same routine and technique to your half-circles shape meter (below).

Code: Select all

[MeterCircle]
Meter=Shape
Shape=Arc 3,200,203,200,100,100,0,0,0,0 | StrokeWidth 6 | Stroke LinearGradient MyStrokeGradient
MyStrokeGradient=180 | 255,0,0 ; 0.0 | 255,0,0,127 ; 1.0
Shape2=Arc 203,200,3,200,100,100,0,0,0,0 | StrokeWidth 6 | Stroke LinearGradient MyStrokeGradient2
MyStrokeGradient2=0 | 255,0,0,127 ; 0.0 | 255,0,0,0 ; 1.0
I just couldn't get it to work because my offset anchors were incorrect, causing the wobble.

You've given an example using 2 half-circles (for a loading animation), but your Arcs are no longer using the original settings.

Code: Select all

Shape=Arc 3,103,203,103,100,100,0,0,0,0
Shape2=Arc 203,103,3,103,100,100,0,0,0,0
User avatar
kyriakos876
Posts: 912
Joined: January 30th, 2017, 2:01 am
Location: Greece

Re: Circular Line with Gradient

kyriakos876 » April 26th, 2018, 11:59 am

ChicknwithNoName wrote:You misunderstand me.

After successfully getting balala's [MeasureAngle] routine working on my original code using the Rotate setting for Shapes, I tried adding the same routine and technique to your half-circles shape meter (below).

Code: Select all

[MeterCircle]
Meter=Shape
Shape=Arc 3,200,203,200,100,100,0,0,0,0 | StrokeWidth 6 | Stroke LinearGradient MyStrokeGradient
MyStrokeGradient=180 | 255,0,0 ; 0.0 | 255,0,0,127 ; 1.0
Shape2=Arc 203,200,3,200,100,100,0,0,0,0 | StrokeWidth 6 | Stroke LinearGradient MyStrokeGradient2
MyStrokeGradient2=0 | 255,0,0,127 ; 0.0 | 255,0,0,0 ; 1.0
I just couldn't get it to work because my offset anchors were incorrect, causing the wobble.

You've given an example using 2 half-circles (for a loading animation), but your Arcs are no longer using the original settings.

Code: Select all

Shape=Arc 3,103,203,103,100,100,0,0,0,0
Shape2=Arc 203,103,3,103,100,100,0,0,0,0
Yea, you need to take balala's code and modify it to work with my code because now it's written so it works with for shapes. I would do that for you but I don't really know transformation matrices.
User avatar
ChicknwithNoName
Posts: 18
Joined: February 17th, 2018, 11:08 pm

Re: Circular Line with Gradient

ChicknwithNoName » April 26th, 2018, 1:06 pm

kyriakos876 wrote:Yea, you need to take balala's code and modify it to work with my code because now it's written so it works with for shapes. I would do that for you but I don't really know transformation matrices.
Yeah, I don't know where your head is at, but you're still not understanding me. I'm going to drop this matter here.
User avatar
kyriakos876
Posts: 912
Joined: January 30th, 2017, 2:01 am
Location: Greece

Re: Circular Line with Gradient

kyriakos876 » April 26th, 2018, 1:32 pm

ChicknwithNoName wrote:Yeah, I don't know where your head is at, but you're still not understanding me. I'm going to drop this matter here.
I guess we don't understand each-other so yea... let's just drop it
User avatar
balala
Rainmeter Sage
Posts: 8080
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Circular Line with Gradient

balala » April 26th, 2018, 3:23 pm

ChicknwithNoName wrote:I just couldn't get it to work because my offset anchors were incorrect, causing the wobble.
Yep, this definitely is a problem in such cases. Although it can be made to properly work, it's a bit weird how does it look. I rewrote the code, but I have to say I don't like it and it can cause a lot of headache anytime you'll try to change anything.
Because the Shape meters use offset, being centered in a different point then their "origin", I had to add a Radius variable to the code, which is the radius of the arcs. Then I also had to add half of the thickness of the arc. Made all this, to avoid the wobble. The result can be seen below:

Code: Select all

[Rainmeter]
Update=-1
BackgroundMode=2
SolidColor=0,0,0,1
LeftMouseUpAction=[!CommandMeasure "MeasureAngle" "Execute 1"]

[Variables]
Angle=0
U=[!UpdateMeasure "MeasureAngle"][!UpdateMeter "MeterCircle"][!Redraw]
Radius=200

[MeasureAngle]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat Rotate,30,36
Rotate=[!SetVariable Angle "(Clamp((#Angle#+10),0,360))"]#U#
IfCondition=(#Angle#>=360)
IfTrueAction=[!CommandMeasure "MeasureAngle" "Stop 1"][!SetVariable Angle "0"]#U#
DynamicVariables=1

[MeterCircle]
Meter=Shape
Shape=Arc 3,#Radius#,(#Radius#+3),#Radius#,(#Radius#/2),(#Radius#/2),0,0,0,0 | StrokeWidth 6 | Stroke LinearGradient MyStrokeGradient
MyStrokeGradient=180 | 255,0,0 ; 0.0 | 255,0,0,127 ; 1.0
Shape2=Arc (#Radius#+3),#Radius#,3,#Radius#,(#Radius#/2),(#Radius#/2),0,0,0,0 | StrokeWidth 6 | Stroke LinearGradient MyStrokeGradient2
MyStrokeGradient2=0 | 255,0,0,127 ; 0.0 | 255,0,0,0 ; 1.0
TransformationMatrix=(Cos(Rad(#Angle#)));(-Sin(Rad(#Angle#)));(Sin(Rad(#Angle#)));(Cos(Rad(#Angle#)));(([MeterCircle:X]+#Radius#/2+3)-([MeterCircle:X]+#Radius#/2+3)*Cos(Rad(#Angle#))-([MeterCircle:Y]+#Radius#)*Sin(Rad(#Angle#)));(([MeterCircle:Y]+#Radius#)+([MeterCircle:X]+#Radius#/2+3)*Sin(Rad(#Angle#))-([MeterCircle:Y]+#Radius#)*Cos(Rad(#Angle#)))
DynamicVariables=1
User avatar
eclectic-tech
Rainmeter Sage
Posts: 3290
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Circular Line with Gradient

eclectic-tech » April 26th, 2018, 6:07 pm

I started doing the same as balala, only using the shape meter ROTATE; got called away, so balala beat me with his TransformationMatrix solution.

As balala said, you need to consider the stroke width in you calculations for rotation centering.

Here is the SHAPE ROTATE example code, with Radius and Strokewidth variables...

Code: Select all

[Rainmeter]
Update=50

[Variables]
Radius=100
StrokeSize=6

; To change direction simply add 1 instead of subtracting 1
[m360]
Measure=Calc
Formula=m360-1%360
DynamicVariables=1

[MeterCircle]
Meter=Shape
X=#StrokeSize#
Y=#StrokeSize#

Shape=Arc (#StrokeSize#/2),(#Radius#*2),(#Radius#*2+(#StrokeSize#/2)),(#Radius#*2),#Radius#,#Radius#,0,0,0,0 | StrokeWidth #StrokeSize# | Stroke LinearGradient MyStrokeGradient | Rotate [&m360],(#Radius#+(#StrokeSize#/2)),(#Radius#+(#StrokeSize#/2))

MyStrokeGradient=180 | 255,0,0 ; 0.0 | 255,0,0,127 ; 1.0

Shape2=Arc (#Radius#*2+(#StrokeSize#/2)),(#Radius#*2),(#StrokeSize#/2),(#Radius#*2),#Radius#,#Radius#,0,0,0,0 | StrokeWidth #StrokeSize# | Stroke LinearGradient MyStrokeGradient2 | Rotate [&m360],(#Radius#+(#StrokeSize#/2)),-(#StrokeSize#/2)

MyStrokeGradient2=0 | 255,0,0,127 ; 0.0 | 255,0,0,0 ; 1.0

DynamicVariables=1
EDIT: Modified variables to match previous code... :p
User avatar
balala
Rainmeter Sage
Posts: 8080
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Circular Line with Gradient

balala » April 26th, 2018, 6:56 pm

eclectic-tech wrote:Here is the SHAPE ROTATE example code, with Radius and Strokewidth variables...
Very good! Works perfectly for me.
However I have just one thing to mention, about the Formula option of the [m360] measure. Using the posted formula, the value returned by the measure is decreasing from 0, with no limit, although you've used the % operation. This is caused by a missing parentheses. I rewrote the formula to Formula=((m360-1)%360) and with this, the value of the measure varies between 0 and -359, then starts over again. With the initial formula, on each update cycle the measure extracted from its own value 1 (more precisely 1%360, which is the rest of the division of 1 with 360 and this is equal to 1), which means no lower limit.
Definitely in both cases, the result is the same, because once the angles goes below -360 degrees, everything is starting over again, but strictly mathematically you should have to not forget the parenthesis.
Also, the DynamicVariables=1 option isn't needed on the same [m360] measure.

:confused: Probably I have to study the Rotate parameter of the Shape meters, because I'm not familiar with it, for me the TransformationMatrix is much - much easier. :confused: