Differences

This shows you the differences between two versions of the page.

--- tips:batterymeters [2015/01/21 21:28] – [Circle Shaders (Segments)] jt3
+++ tips:batterymeters [2015/01/22 05:01] (current) – jt3
@@ Line 36: / Line 36: @@
 ===== Explanation of Examples =====
 ==== Rotation ====
-{{ :tips:rotation1.png?200|}}So let’s explain those examples.  The first set uses rotation.  This assumes that you’re using a watch hand as a battery meter.  However, you can use circle shaders too.  The only difference is that instead of using the Rotation field, you’ll use the Circle Shader’s Start and End fields.  ONE of those fields will have the formula, and the other will have the start or end point as appropriate (similar to the segmented examples, which we’ll cover in a bit).
+{{ :tips:rotation1.png?200|}}So let’s explain those examples.  The first set uses rotation.  This assumes that you’re using a watch hand as a battery meter.  However, you can use circle shaders too, with the exact same formulas.  The only difference is that instead of using the Rotation field, you’ll use the Circle Shader’s Start and End fields.  ONE of those fields will have the formula, and the other will have the start or end point as appropriate (similar to the segmented examples, which we’ll cover in a bit).
 The first example is a simple meter, working as a clock hand.  100% at 12:00, moving counterclockwise, and ending up back at 12:00.  There are 100 possible values for battery percentage, and we need to move 360ᵒ.  360/100 is 3.6, so we multiply battery level by 3.6.
@@ Line 55: / Line 55: @@
 This is where things tend to get tricky.  You want to simulate LED sections lighting up, but you want to ensure that the ENTIRE segment lights up (or extinguishes) at once, or you ruin the effect.  Luckily, it may sound like a challenge, but it’s really pretty simple.
-{{:tips:segmented1.png?200 |Segmented}}Here, rotation won’t work, because a smoothly rotating circle would slowly cut into a segment, and we want to light it up (or extinguish) it all at once, so you’ll need to add a circle object, go into its shader section, and create a “Segment Between” shader.  There are two types of shaders.  One that hides, and one that reveals.  Which one you use is up to you, and probably depends on the graphic you’re using to simulate the LED effect, and the color of the shader.  To turn a REVEAL shader into a HIDE shader (or vice versa), all you need to do is swap the Opacity In Range and Opacity Out of Range values.  Or, you can swap the Start and End values, whichever works for you.  Keep in mind though that shaders always move clockwise.  The end value should be higher than the start value.
+{{:tips:segmented1.png?200 |Segmented}}Here, rotation won’t work, because a smoothly rotating circle would slowly cut into a segment, and we want to light it up (or extinguish it) all at once, so you’ll need to add a circle object, go into its shader section, and create a “Segment Between” shader.  There are two types of shaders.  One that hides, and one that reveals.  Which one you use is up to you, and probably depends on the graphic you’re using to simulate the LED effect, and the color of the shader.  To turn a REVEAL shader into a HIDE shader (or vice versa), all you need to do is swap the Opacity In Range and Opacity Out of Range values.  Or, you can swap the Start and End values, whichever works for you.  Keep in mind though that shaders always move clockwise.  The end value should be higher than the start value.
 For these examples, we’re going to duplicate the “watch on one side/battery on the other” approach, where 100% is at 12:00 and 0% is at 6:00.  We’re also going to assume that EACH side has 20 equal segments (LEDs) to be lit.  Red HIDE shaders will be shown in the pictures to illustrate what we're doing, but normally, they'd be the same color as your background (HIDE Shader), or the desired color (REVEAL Shader).