It is currently April 19th, 2024, 2:06 pm

How to glow effect on visualizer

Get help with creating, editing & fixing problems with skins
AnryuKen
Posts: 18
Joined: September 1st, 2020, 10:18 pm

How to glow effect on visualizer

Post by AnryuKen »

As the title suggests, I want to add a glow effect on a visualizer (Visbubble). I'm using 2 Visbubble skins simultaneously if that matters. I just want to know if it's possible to edit the code and and add a glow effect on the visualizers and if it's possible, how do I do it?
mak_kawa
Posts: 908
Joined: December 30th, 2015, 9:47 am

Re: How to glow effect on visualizer

Post by mak_kawa »

Hi AnryuKen

This thread and balala's solution help you?

But... though I am not sure about ViisBubble skin, it seems to be a hard way to implement this glow effect to the visualizer skin, even if not impossible.
AnryuKen
Posts: 18
Joined: September 1st, 2020, 10:18 pm

Re: How to glow effect on visualizer

Post by AnryuKen »

mak_kawa wrote: September 10th, 2020, 2:54 am Hi AnryuKen

This thread and balala's solution help you?

But... though I am not sure about ViisBubble skin, it seems to be a hard way to implement this glow effect to the visualizer skin, even if not impossible.
Thanks for reply and I checked the thread. I think the code only works for images, I got a bit lost where the code Balala posted needed an image which I don't even know if I need an image and what image I needed. I'm not very familiar with coding in Rainmeter sorry.
mak_kawa
Posts: 908
Joined: December 30th, 2015, 9:47 am

Re: How to glow effect on visualizer

Post by mak_kawa »

Hi AnryuKen

His solution doesn't need image. It renders a number of Shape meters having slightly different sizes and colors around the meter as "glow". At the beginning of the thread, target meter is image, but of course it can be used for other kind of the meter.

As for the "visualizer" skin, it uses many fast-moving meters as bars, so there may be some performance problem. I am not sure whether it can be figured out or not.
User avatar
balala
Rainmeter Sage
Posts: 16144
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: How to glow effect on visualizer

Post by balala »

mak_kawa wrote: September 10th, 2020, 2:54 am This thread and balala's solution help you?
Thank you mak_kawa for promoting / posting my codes.
mak_kawa wrote: September 10th, 2020, 6:02 am As for the "visualizer" skin, it uses many fast-moving meters as bars, so there may be some performance problem. I am not sure whether it can be figured out or not.
It might be, however indeed visualizer skins are using a lot of resources. But:
mak_kawa wrote: September 10th, 2020, 6:02 am His solution doesn't need image. It renders a number of Shape meters having slightly different sizes and colors around the meter as "glow". At the beginning of the thread, target meter is image, but of course it can be used for other kind of the meter.
For first give please us a link of any of the visualizer skins you want to work with.
User avatar
Yincognito
Rainmeter Sage
Posts: 7125
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: How to glow effect on visualizer

Post by Yincognito »

balala wrote: September 10th, 2020, 12:08 pm For first give please us a link of any of the visualizer skins you want to work with.
It's VisBubble, he mentioned it already. Regarding the glow, I can't test this right now as I'm on mobile, but wouldn't a radial gradient color on an identical Shape's Stroke do the job? Assuming the stroke is set to be thicker, of course.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
Yincognito
Rainmeter Sage
Posts: 7125
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: How to glow effect on visualizer

Post by Yincognito »

AnryuKen wrote: September 10th, 2020, 1:18 am As the title suggests, I want to add a glow effect on a visualizer (Visbubble). I'm using 2 Visbubble skins simultaneously if that matters. I just want to know if it's possible to edit the code and and add a glow effect on the visualizers and if it's possible, how do I do it?
Normally, if the meters were Shapes, things would have been easier, I think, since one can use radial gradients there, like I mentioned in my previous reply to balala. However, since the meters are Roundlines and only a single "normal" color can be specified in its LineColor option, not to mention we deal with Lua here which automatically writes to the .inc files, we must use only the tools that we have at our disposal.

First, make a backup of your current settings in VisBubble, as we're going to modify some files.
Next, paste this into your Factory.lua script, replacing its contents:

Code: Select all

-- @author Malody Hoe / GitHub: undefinist / Twitter: undefinist
-- Structure of Script Measure:
---- IncFile=
---- Number=
---- SectionName=
---- OptionN=
---- ValueN=
---- where N is an ordered number from 0
-- Use %% to substitute it as the iteration number (which is specified by the Number option)
---- For example, if you specify 10, it will create 10 sections and replace the first section's %%
---- with 0, the second section's %% with 1, etc...
-- Wrap any formulas you want to parse in {} that otherwise RM would treat as a string
---- For example, [Measure{%%+1}] will have this script parse it for you

function Initialize()
	local num = SELF:GetNumberOption("Number")
	local GsectionName = SELF:GetOption("GSectionName")
	local sectionName = SELF:GetOption("SectionName")

	local file = io.open(SKIN:MakePathAbsolute(SELF:GetOption("IncFile")), "w")

	local t = { "; auto-generated by " .. SELF:GetName() }

	for i = 0, num-1 do

		table.insert(t, "[" .. doSub(GsectionName, i) .. "]")
		local j = 0

		while true do
			local opt = SELF:GetOption("GOption" .. j)
			if opt == "" then
				break
			end
			table.insert(t, opt .. "=" .. doSub(SELF:GetOption("GValue" .. j), i))
			j = j + 1
		end

		table.insert(t, "[" .. doSub(sectionName, i) .. "]")
		local j = 0

		while true do
			local opt = SELF:GetOption("Option" .. j)
			if opt == "" then
				break
			end
			table.insert(t, opt .. "=" .. doSub(SELF:GetOption("Value" .. j), i))
			j = j + 1
		end

	end

	file:write(table.concat(t, "\n"))
	file:close()
end

-- does all the substitution!
function doSub(value, i)
	return value:gsub("%%%%", i):gsub("{.-}", parseFormula)
end

-- sub to remove {the curly braces}, then add (parentheses), then parse it
function parseFormula(formula)
	return SKIN:ParseFormula("(" .. formula:sub(2, -2) .. ")")
end
This allows specifying 2 sets of [Section] and Key=Value parts that Factory.lua will write into your Lines.inc file, instead of just one. Therefore, we're now able to create some sort of a "duplicate" Roundline meter for each normal meter in Lines.inc - and those duplicates, starting with "G" (from "glow") are going to be our glow simulation.

Next, paste the following into your BarExtrude.ini, replacing its contents:

Code: Select all

[Metadata]
Name=VisBubble
Author=undefinist
Version=3.1
License=CC BY-NC-SA 3.0
Information=The default | Double-click for settings.

[Rainmeter]
Update=25
ContextTitle=SETTINGS (double-click)
ContextAction=[!ActivateConfig "#ROOTCONFIG#\SettingsWindow"]
ContextTitle2=SETTINGS FILE
ContextAction2=["#ROOTCONFIGPATH#Settings.inc"]

[Variables]
@Include=Settings.inc
FORMULA_SUM=([mBand%%]+(#Smoothing#=0?0:(%%={#NumOfItems#-1}?0:[mBand{(%%+1)%#NumOfItems#}])+(%%=0?0:[mBand{%%=0?#NumOfItems#-1:%%-1}])))
FORMULA_SUM_FULL=([mBand%%]+(#Smoothing#=0?0:[mBand{(%%+1)%#NumOfItems#}]+[mBand{%%=0?#NumOfItems#-1:%%-1}]))
FORMULA_AVG_NUM=((%%={#NumOfItems#-1}||%%=0)?2:3)
FORMULA_AVG_NUM_FULL=3
FORMULA_AVG=#FORMULA_SUM_FULL#/#FORMULA_AVG_NUM_FULL#
FORMULA_THETA=(#AngleTotal#-#AngleTotal#/#NumOfItems#*(#ClockWise#=0?%%:#NumOfItems#-%%-1)+#AngleStart#)
@Include2=#INC#Common.inc
GlowColor=0,0,0,0

[mFullCircle]
Measure=Calc
IfCondition=#AngleTotal# >= PI * 2
IfTrueAction=[!WriteKeyValue Variables FORMULA_AVG "#*FORMULA_SUM_FULL*#/#*FORMULA_AVG_NUM_FULL*#"]
IfFalseAction=[!WriteKeyValue Variables FORMULA_AVG "#*FORMULA_SUM*#/#*FORMULA_AVG_NUM*#"]
UpdateDivider=-1

[mGlowColor]
Measure=String
String=#ItemColor#
UpdateDivider=-1
RegExpSubstitute=1
Substitute="(\d+)$":"32"
OnUpdateAction=[!SetVariable GlowColor "[mGlowColor]"]
DynamicVariables=1

;=
; base measures
;============================

[mAudioOut]
Bands=(#NumOfItems#+4)

;=
; meterstyles
;============================

[styleGlow]
LineColor=#GlowColor#
LineWidth=(#ItemWidth#*3)
RotationAngle=(#Inward#*PI)
ControlAngle=0
AntiAlias=1
DynamicVariables=1

[styleLine]
LineColor=#ItemColor#
LineWidth=(#ItemWidth#/2)
RotationAngle=(#Inward#*PI)
ControlAngle=0
AntiAlias=1
DynamicVariables=1

;=
; meters + scripts + includes
;============================

[sFactoryBandMeasures]
Measure=Script
ScriptFile=#SCRIPT#Factory.lua
IncFile=#INC#BandMeasures.inc
Number=#NumOfItems#
SectionName=mBand%%
Option0=Measure
Value0=Plugin
Option1=Plugin
Value1=AudioLevel
Option2=Parent
Value2=mAudioOut
Option3=Type
Value3=Band
Option4=BandIdx
Value4={%%+1}
UpdateDivider=-1
@Include=#INC#BandMeasures.inc

[sFactoryBars]
Measure=Script
ScriptFile=#SCRIPT#Factory.lua
IncFile=#INC#Lines.inc
Number=#NumOfItems#

SectionName=%%
Option0=Meter
Value0=Roundline
Option1=MeterStyle
Value1=styleLine
Option2=StartAngle
Value2={#FORMULA_THETA#}
Option3=X
Value3={#Radius#*Cos(#FORMULA_THETA#%(PI*2))+#Radius#+#ExtrudeMax#}
Option4=Y
Value4={#RadiusY#*Sin(#FORMULA_THETA#%(PI*2))+#RadiusY#+#ExtrudeMax#}
Option5=LineLength
Value5=((#FORMULA_AVG#=0)?{#ExtrudeMin#=0?-1:#ExtrudeMin#}:((#FORMULA_AVG#-[mBand%%])*{#Smoothing#}+[mBand%%])*{#ExtrudeMax#-#ExtrudeMin#}+#ExtrudeMin#)
Option6=DynamicVariables
Value6=1

GSectionName=G%%
GOption0=Meter
GValue0=Roundline
GOption1=MeterStyle
GValue1=styleGlow
GOption2=StartAngle
GValue2={#FORMULA_THETA#}
GOption3=X
GValue3={#Radius#*Cos(#FORMULA_THETA#%(PI*2))+#Radius#+#ExtrudeMax#}
GOption4=Y
GValue4={#RadiusY#*Sin(#FORMULA_THETA#%(PI*2))+#RadiusY#+#ExtrudeMax#}
GOption5=LineLength
GValue5=((#FORMULA_AVG#=0)?{#ExtrudeMin#=0?-1:#ExtrudeMin#}:((#FORMULA_AVG#-[mBand%%])*{#Smoothing#}+[mBand%%])*{#ExtrudeMax#-#ExtrudeMin#}+#ExtrudeMin#)
GOption6=DynamicVariables
GValue6=1

UpdateDivider=-1
@Include=#INC#Lines.inc

; Helper script to always refresh skin twice instead of once
; This is so that it loads the updated .inc files
[sRefresher]
Measure=Script
ScriptFile=#SCRIPT#Refresher.lua
UpdateDivider=-1
Refreshed=0

[sColor]
Measure=Script
ScriptFile=#SCRIPT#Color.lua
UpdateDivider=-1
NumOfItems=#NumOfItems#
Color=#ItemColor#
;C4FB7200:0|C4FB72cc:30|85ECF099:60|85ECF099:80|85ECF000
This modifies the Alpha value (i.e. the adjustable transparency, currently being set to 32 in [mGlowColor]) of #ItemColor# and stores the result into the #GlowColor# variable. A new style named [styleGlow] is created to apply it to the future "glow Roundline meters", where, beside the use of #GlowColor#, the LineWidth of the Roundline is increased by a factor of 3. Finally, the glow meters are created by adding the "G....." options to [sFactoryBars], taking advantage of the fact that we modified the Factory.lua script beforehand to write another meter before each original one.

This doesn't look as good as a gradient glow, but it's a start - if anyone else has a better idea on how to do this, feel free to share your thoughts.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
Yincognito
Rainmeter Sage
Posts: 7125
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: How to glow effect on visualizer

Post by Yincognito »

dvo wrote: September 11th, 2020, 3:20 pm do you have a working version wanna see :)
There you go - around my "new" rotating Earth skin:
VisBubble Glow Preview.jpg
The things can be obviosly adjusted for a better look, from modifying the Alpha value from 32 to another number, adding more Roundline meters displaying a gradually more transparent color, or, if one is good at math and trigonometry, he could very well replace the Roundline meter duplicate with a Shape one having the same coordinates and using a radial gradient color.
You do not have the required permissions to view the files attached to this post.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
Yincognito
Rainmeter Sage
Posts: 7125
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: How to glow effect on visualizer

Post by Yincognito »

dvo wrote: September 11th, 2020, 4:17 pm ow glowing in the dark :P we could do it like that yes :) :sly: looks like a neon bar a bit :P
Haha, yes. As I said, the actual glow effect can be best replicated by using a radial gradient in a Shape meter, or even generally using a gradient that "fades" from opaque to transparent. This is obviously not the case here, but it can be done, assuming good math skills to position and / or rotate that Shape precisely as its corresponding Roundline.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
balala
Rainmeter Sage
Posts: 16144
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: How to glow effect on visualizer

Post by balala »

Yincognito wrote: September 11th, 2020, 10:49 am It's VisBubble, he mentioned it already.
Right, indeed. Its name have been written as Visbubble (not VisBubble, as I'm used with it), so I didn't realize this is the skin.