It is currently October 18th, 2019, 12:04 pm

Circular Line with Gradient

Tips and Tricks from the Rainmeter Community
User avatar
ChicknwithNoName
Posts: 18
Joined: February 17th, 2018, 11:08 pm

Circular Line with Gradient

ChicknwithNoName » April 19th, 2018, 11:08 pm

As far as I'm aware, there's no option to use gradients on strokes of a shape. Most people seem to want to have a gradient on a circular line. I thought I'd share my version of some visual fakery.

It's basically 4 quarter-circle shapes with individual linear gradients.*
CircleGradient.jpg

Code: Select all

[Rainmeter]
BackgroundMode=2
SolidColor=0,0,0,1

[Metadata]
Name=Circle Line Gradient
Author=ChicknwitNoName
Information=Fake it 'til they make it.
Version=1.0
License=Creative Commons Attribution-NonCommercial-ShareAlike 4.0

[Circle]
Meter=Shape
Shape =Path Path1 | StrokeWidth 0 | Fill LinearGradient NW
Shape2=Path Path2 | StrokeWidth 0 | Fill LinearGradient NE
Shape3=Path Path3 | StrokeWidth 0 | Fill LinearGradient SE
Shape4=Path Path4 | StrokeWidth 0 | Fill LinearGradient SW
Path1=50,3 | CurveTo 3,50,24.06,3,3,24.06 | LineTo 0,50 | CurveTo 50,0,0,22.404,22.404,0 | LineTo 50,3 | ClosePath 1
Path2=50.323,0.001 | CurveTo 100,50,77.77,0.175,100,22.512 | LineTo 97,50 | CurveTo 50,3,97,24.06,75.94,3 | LineTo 50,0 |     LineTo 50.323,0.001 | ClosePath 1
Path3=100,50 | CurveTo 50,100,100,77.596,77.596,100 | LineTo 50,97 | CurveTo 97,50,75.94,97,97,75.94 | LineTo 100,50 | ClosePath 1
Path4=3,50 | CurveTo 50,97,3,75.94,24.06,97 | LineTo 50,100 | CurveTo 0,50,22.404,100,0,77.596 | LineTo 3,50 | ClosePath 1
NW=90 | 255,255,255,200 ; 0.0 | 255,255,255,150 ; 1.0
NE=-90 | 255,255,255,150 ; 0.0 | 255,255,255,100 ; 1.0
SE=0 | 255,255,255,100 ; 0.0 | 255,255,255,50 ; 1.0
SW=0 | 255,255,255,50 ; 0.0 | 255,255,255,0 ; 1.0
*Note: I created an SVG for the shapes then converted it using VectorConverter 0.1.3.

If you have an alternative method, please share it. :)
You do not have the required permissions to view the files attached to this post.
User avatar
eclectic-tech
Rainmeter Sage
Posts: 3575
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Circular Line with Gradient

eclectic-tech » April 22nd, 2018, 2:38 pm

"Fake it 'til they make it" :lol:

Clever work 'Chickn...'!

I think this is the only way, for now, to apply a continuous gradient to a shape that curls back beyond 180 degrees, since a single gradient is applied across the entire shape. Multiple shapes and gradients... sweet! :thumbup:
User avatar
balala
Rainmeter Sage
Posts: 8852
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Circular Line with Gradient

balala » April 22nd, 2018, 6:32 pm

And an addition to ChicknwithNoName's code:

Code: Select all

[Rainmeter]
Update=100
BackgroundMode=2
SolidColor=0,0,0,1
SkinWidth=100
SkinHeight=100

[Metadata]
Name=Circle Line Gradient
Author=ChicknwitNoName
Information=Fake it 'til they make it.
Version=1.0
License=Creative Commons Attribution-NonCommercial-ShareAlike 4.0

[MeasureAngle]
Measure=Calc
Formula=(( MeasureAngle + 10 ) % 360 )

[Circle]
Meter=Shape
Shape =Path Path1 | StrokeWidth 0 | Fill LinearGradient NW
Shape2=Path Path2 | StrokeWidth 0 | Fill LinearGradient NE
Shape3=Path Path3 | StrokeWidth 0 | Fill LinearGradient SE
Shape4=Path Path4 | StrokeWidth 0 | Fill LinearGradient SW
Path1=50,3 | CurveTo 3,50,24.06,3,3,24.06 | LineTo 0,50 | CurveTo 50,0,0,22.404,22.404,0 | LineTo 50,3 | ClosePath 1
Path2=50.323,0.001 | CurveTo 100,50,77.77,0.175,100,22.512 | LineTo 97,50 | CurveTo 50,3,97,24.06,75.94,3 | LineTo 50,0 | LineTo 50.323,0.001 | ClosePath 1
Path3=100,50 | CurveTo 50,100,100,77.596,77.596,100 | LineTo 50,97 | CurveTo 97,50,75.94,97,97,75.94 | LineTo 100,50 | ClosePath 1
Path4=3,50 | CurveTo 50,97,3,75.94,24.06,97 | LineTo 50,100 | CurveTo 0,50,22.404,100,0,77.596 | LineTo 3,50 | ClosePath 1
NW=90 | 255,255,255,200 ; 0.0 | 255,255,255,150 ; 1.0
NE=-90 | 255,255,255,150 ; 0.0 | 255,255,255,100 ; 1.0
SE=0 | 255,255,255,100 ; 0.0 | 255,255,255,50 ; 1.0
SW=0 | 255,255,255,50 ; 0.0 | 255,255,255,0 ; 1.0
TransformationMatrix=(Cos(Rad([MeasureAngle])));(-Sin(Rad([MeasureAngle])));(Sin(Rad([MeasureAngle])));(Cos(Rad([MeasureAngle])));(([Circle:X]+[Circle:W]/2)-([Circle:X]+[Circle:W]/2)*Cos(Rad([MeasureAngle]))-([Circle:Y]+[Circle:H]/2)*Sin(Rad([MeasureAngle])));(([Circle:Y]+[Circle:H]/2)+([Circle:X]+[Circle:W]/2)*Sin(Rad([MeasureAngle]))-([Circle:Y]+[Circle:H]/2)*Cos(Rad([MeasureAngle])))
DynamicVariables=1
Yes, I know there are other ways to add the rotation as well (eg using the COUNTER function), but this was just a quick attempt. I would have been created the original code with Update=-1 and in this case the ActionTimer plugin would have been the only possibility.
User avatar
kyriakos876
Posts: 915
Joined: January 30th, 2017, 2:01 am
Location: Greece

Re: Circular Line with Gradient

kyriakos876 » April 22nd, 2018, 7:51 pm

Well, here's another way:

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 
just 2 arcs, first stops at "127" of opacity which is almost half of 255 and the second starts from where the other ended but in 180 degrees apart.
User avatar
kyriakos876
Posts: 915
Joined: January 30th, 2017, 2:01 am
Location: Greece

Re: Circular Line with Gradient

kyriakos876 » April 22nd, 2018, 9:06 pm

balala wrote: Yes, I know there are other ways to add the rotation as well (eg using the COUNTER function), but this was just a quick attempt. I would have been created the original code with Update=-1 and in this case the ActionTimer plugin would have been the only possibility.
you can't rotate gradient with ActionTimer plugin on a circular way and get this effect. I tried many things and I'm pretty sure it can't be done with that plugin.
User avatar
eclectic-tech
Rainmeter Sage
Posts: 3575
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Circular Line with Gradient

eclectic-tech » April 22nd, 2018, 9:37 pm

kyriakos876 wrote:Well, here's another way:

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 
just 2 arcs, first stops at "127" of opacity which is almost half of 255 and the second starts from where the other ended but in 180 degrees apart.
Also a working alternative :17nodding

I think the point is that you will need to create separate shapes with separate gradients defined for each, that continue the desired overall gradient effect; you can't currently do it with 1 ellipse/curve/arc shape that revolves more than 180 degrees and 1 gradient definition.

You were able to do it with just 2 shapes and 2 gradients. :thumbup:
User avatar
kyriakos876
Posts: 915
Joined: January 30th, 2017, 2:01 am
Location: Greece

Re: Circular Line with Gradient

kyriakos876 » April 22nd, 2018, 10:00 pm

eclectic-tech wrote:Also a working alternative :17nodding

I think the point is that you will need to create separate shapes with separate gradients defined for each, that continue the desired overall gradient effect; you can't currently do it with 1 ellipse/curve/arc shape that revolves more than 180 degrees and 1 gradient definition.

You were able to do it with just 2 shapes and 2 gradients. :thumbup:
I was playing with this one sometime ago trying to create a loading animation (like the one balala created above with TransformationMatrix) and it is actually possible with 1 shape and 1 gradient too, but the code for that is stupid big and unnecessary. (At least the code I came up with... there might be something even simpler but for the time being I stick with my 2 half circles :D )
User avatar
balala
Rainmeter Sage
Posts: 8852
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Circular Line with Gradient

balala » April 23rd, 2018, 12:11 pm

kyriakos876 wrote:you can't rotate gradient with ActionTimer plugin on a circular way and get this effect. I tried many things and I'm pretty sure it can't be done with that plugin.
What I said was that instead of a low Update value, you can set the Update=-1 (or alternatively the default Update=1000) and rotate the meter same way as I did above using the TransformationMatrix, but set the value of the angle (through the [MeasureAngle] measure) using an ActionTimer plugin measure. I assure you it works.
User avatar
balala
Rainmeter Sage
Posts: 8852
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Circular Line with Gradient

balala » April 23rd, 2018, 12:41 pm

kyriakos876 wrote:you can't rotate gradient with ActionTimer plugin on a circular way and get this effect. I tried many things and I'm pretty sure it can't be done with that plugin.
Here are two solutions.
  • The first rotates the meter just once and for each new rotation you have to click:

    Code: Select all

    [Rainmeter]
    Update=-1
    BackgroundMode=2
    SolidColor=0,0,0,1
    LeftMouseUpAction=[!CommandMeasure "MeasureAngle" "Execute 1"]
    
    [Metadata]
    Name=Circle Line Gradient
    Author=ChicknwitNoName
    Information=Fake it 'til they make it.
    Version=1.0
    License=Creative Commons Attribution-NonCommercial-ShareAlike 4.0
    
    [Variables]
    Angle=0
    U=[!UpdateMeasure "MeasureAngle"][!UpdateMeter "Circle"][!Redraw]
    
    [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
    
    [Circle]
    Meter=Shape
    Shape =Path Path1 | StrokeWidth 0 | Fill LinearGradient NW
    Shape2=Path Path2 | StrokeWidth 0 | Fill LinearGradient NE
    Shape3=Path Path3 | StrokeWidth 0 | Fill LinearGradient SE
    Shape4=Path Path4 | StrokeWidth 0 | Fill LinearGradient SW
    Path1=50,3 | CurveTo 3,50,24.06,3,3,24.06 | LineTo 0,50 | CurveTo 50,0,0,22.404,22.404,0 | LineTo 50,3 | ClosePath 1
    Path2=50.323,0.001 | CurveTo 100,50,77.77,0.175,100,22.512 | LineTo 97,50 | CurveTo 50,3,97,24.06,75.94,3 | LineTo 50,0 | LineTo 50.323,0.001 | ClosePath 1
    Path3=100,50 | CurveTo 50,100,100,77.596,77.596,100 | LineTo 50,97 | CurveTo 97,50,75.94,97,97,75.94 | LineTo 100,50 | ClosePath 1
    Path4=3,50 | CurveTo 50,97,3,75.94,24.06,97 | LineTo 50,100 | CurveTo 0,50,22.404,100,0,77.596 | LineTo 3,50 | ClosePath 1
    NW=90 | 255,255,255,200 ; 0.0 | 255,255,255,150 ; 1.0
    NE=-90 | 255,255,255,150 ; 0.0 | 255,255,255,100 ; 1.0
    SE=0 | 255,255,255,100 ; 0.0 | 255,255,255,50 ; 1.0
    SW=0 | 255,255,255,50 ; 0.0 | 255,255,255,0 ; 1.0
    TransformationMatrix=(Cos(Rad(#Angle#)));(-Sin(Rad(#Angle#)));(Sin(Rad(#Angle#)));(Cos(Rad(#Angle#)));(([Circle:X]+[Circle:W]/2)-([Circle:X]+[Circle:W]/2)*Cos(Rad(#Angle#))-([Circle:Y]+[Circle:H]/2)*Sin(Rad(#Angle#)));(([Circle:Y]+[Circle:H]/2)+([Circle:X]+[Circle:W]/2)*Sin(Rad(#Angle#))-([Circle:Y]+[Circle:H]/2)*Cos(Rad(#Angle#)))
    DynamicVariables=1
  • The second starts rotating when you click, but once started, it rotates indefinitely:

    Code: Select all

    [Rainmeter]
    Update=-1
    BackgroundMode=2
    SolidColor=0,0,0,1
    LeftMouseUpAction=[!CommandMeasure "MeasureAngle" "Execute 1"]
    
    [Metadata]
    Name=Circle Line Gradient
    Author=ChicknwitNoName
    Information=Fake it 'til they make it.
    Version=1.0
    License=Creative Commons Attribution-NonCommercial-ShareAlike 4.0
    
    [Variables]
    Angle=0
    U=[!UpdateMeasure "MeasureAngle"][!UpdateMeter "Circle"][!Redraw]
    
    [MeasureAngle]
    Measure=Plugin
    Plugin=ActionTimer
    ActionList1=Repeat Rotate,30,36
    Rotate=[!SetVariable Angle "(Clamp((#Angle#+10),0,360))"]#U#
    IfCondition=(#Angle#>=360)
    IfTrueAction=[!SetVariable Angle "0"][!CommandMeasure "MeasureAngle" "Execute 1"]#U#
    DynamicVariables=1
    
    [Circle]
    Meter=Shape
    Shape =Path Path1 | StrokeWidth 0 | Fill LinearGradient NW
    Shape2=Path Path2 | StrokeWidth 0 | Fill LinearGradient NE
    Shape3=Path Path3 | StrokeWidth 0 | Fill LinearGradient SE
    Shape4=Path Path4 | StrokeWidth 0 | Fill LinearGradient SW
    Path1=50,3 | CurveTo 3,50,24.06,3,3,24.06 | LineTo 0,50 | CurveTo 50,0,0,22.404,22.404,0 | LineTo 50,3 | ClosePath 1
    Path2=50.323,0.001 | CurveTo 100,50,77.77,0.175,100,22.512 | LineTo 97,50 | CurveTo 50,3,97,24.06,75.94,3 | LineTo 50,0 | LineTo 50.323,0.001 | ClosePath 1
    Path3=100,50 | CurveTo 50,100,100,77.596,77.596,100 | LineTo 50,97 | CurveTo 97,50,75.94,97,97,75.94 | LineTo 100,50 | ClosePath 1
    Path4=3,50 | CurveTo 50,97,3,75.94,24.06,97 | LineTo 50,100 | CurveTo 0,50,22.404,100,0,77.596 | LineTo 3,50 | ClosePath 1
    NW=90 | 255,255,255,200 ; 0.0 | 255,255,255,150 ; 1.0
    NE=-90 | 255,255,255,150 ; 0.0 | 255,255,255,100 ; 1.0
    SE=0 | 255,255,255,100 ; 0.0 | 255,255,255,50 ; 1.0
    SW=0 | 255,255,255,50 ; 0.0 | 255,255,255,0 ; 1.0
    TransformationMatrix=(Cos(Rad(#Angle#)));(-Sin(Rad(#Angle#)));(Sin(Rad(#Angle#)));(Cos(Rad(#Angle#)));(([Circle:X]+[Circle:W]/2)-([Circle:X]+[Circle:W]/2)*Cos(Rad(#Angle#))-([Circle:Y]+[Circle:H]/2)*Sin(Rad(#Angle#)));(([Circle:Y]+[Circle:H]/2)+([Circle:X]+[Circle:W]/2)*Sin(Rad(#Angle#))-([Circle:Y]+[Circle:H]/2)*Cos(Rad(#Angle#)))
    DynamicVariables=1
As you can see, both codes have set Update=-1 and both are using ActionTimer plugin measures, to set the value of the angle..
User avatar
kyriakos876
Posts: 915
Joined: January 30th, 2017, 2:01 am
Location: Greece

Re: Circular Line with Gradient

kyriakos876 » April 23rd, 2018, 1:17 pm

Oh I thought you meant do it without TransformationMatrix and replace it with actiontimer by changing the variables and adding some more (which I think I preeeeetty hard)... Yea if you keep TransMatrix it's obviously possible :P

EDIT: Turns out it's possible and pretty simple once you've found the way. Check the next pages.
Last edited by kyriakos876 on April 25th, 2018, 12:29 pm, edited 1 time in total.