How To Create A LED Rave Mask Using Arduino, NeoPixels, and C ++

[colorA] [colorA] ( In this guide, we will cover how you can create the hardware and software for an Arduino LED rave mask . Feel free to refer to the GitHub repository for this Arduino project .

[i] The mask looks much better in person but here is the end result:

<div> Parts Needed <div class="adace-slot-wrapper adace-after-paragraph-2 adace-slot-wrapper-main" > <div class="adace-disclaimer"> </div> <div class="adace-slot"> <div class="adace-loader adace-loader-662b248f4051b"> <script> (function ($) { var $self = $('.adace-loader-662b248f4051b'); var $wrapper = $self.closest('.adace-slot-wrapper'); "use strict"; var adace_load_662b248f4051b = function(){ var viewport = $(window).width(); var tabletStart = 601; var landscapeStart = 801; var tabletEnd = 961; var content = '%3Cdiv%20class%3D%22adace_adsense_662b248f40498%22%3E%3Cscript%20async%20src%3D%22%2F%2Fpagead2.googlesyndication.com%2Fpagead%2Fjs%2Fadsbygoogle.js%22%3E%3C%2Fscript%3E%0A%09%09%3Cins%20class%3D%22adsbygoogle%22%0A%09%09style%3D%22display%3Ablock%3B%22%0A%09%09data-ad-client%3D%22ca-pub-9992104173109424%22%0A%09%09data-ad-slot%3D%229811368611%22%0A%09%09data-ad-format%3D%22auto%22%0A%09%09%3E%3C%2Fins%3E%0A%09%09%3Cscript%3E%28adsbygoogle%20%3D%20window.adsbygoogle%20%7C%7C%20%5B%5D%29.push%28%7B%7D%29%3B%3C%2Fscript%3E%3C%2Fdiv%3E'; var unpack = true; if(viewport<tabletStart){ if ($wrapper.hasClass('.adace-hide-on-mobile')){ $wrapper.remove(); } } if(viewport>=tabletStart && viewport<landscapeStart){ if ($wrapper.hasClass('.adace-hide-on-portrait')){ $wrapper.remove(); } } if(viewport>=landscapeStart && viewport<tabletEnd){ if ($wrapper.hasClass('.adace-hide-on-landscape')){ $wrapper.remove(); } } if(viewport>=tabletStart && viewport<tabletEnd){ if ($wrapper.hasClass('.adace-hide-on-tablet')){ $wrapper.remove(); } } if(viewport>=tabletEnd){ if ($wrapper.hasClass('.adace-hide-on-desktop')){ $wrapper.remove(); } } if(unpack) { $self.replaceWith(decodeURIComponent(content)); } } if($wrapper.css('visibility') === 'visible' ) { adace_load_662b248f4051b(); } else { //fire when visible. var refreshIntervalId = setInterval(function(){ if($wrapper.css('visibility') === 'visible' ) { adace_load_662b248f4051b(); clearInterval(refreshIntervalId); } }, 999); } })(jQuery); </script> </div> </div> </div> <div> [patternColors[colorB] ARDUINO NANO : ~ $ 3 – $ 5 – Used to control the LEDs <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [i] (2 x 1 METER) LEDS / M WS (B NON-WATERPROOF) : ~ $ – $ – (LEDs / m is a lot of pixels, so LEDS / m could work as well and is far cheaper and easier to solder. Waterproof versions can be harder to hold in place in the mask. (3 x BATTERY PACK) : $ 1- $ 5 – You can use a 4 pack ONLY if you use 1.2V NiMH rechargeable batteries. Your NeoPixels will break if you use 4 normal 1.5V batteries. </a><a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> (3 x AA 1.5V BATTERIES) :: $ 2 – You can use 1.2V NiMH rechargeable batteries as long as you stay below 5V and high enough to show colors properly. [i] SILICON WIRES : ~ $ (- $) – Needed to connect the LEDs together. Jumper cables won’t work in this project. (MASK) : ~ $ 20 – Any airsoft mesh mask should work. (USB A TO MINI B CABLE) : ~ $ 5 – Arduino Nanos use a cable different from the Uno <div class="adace-slot-wrapper adace-after-paragraph-3 adace-slot-wrapper-main" > <div class="adace-disclaimer"> </div> <div class="adace-slot"> <div class="adace_ad_662b248f40e0a adace-dont-remove"> </a> </div> </div> </div> </a> HEATSHRINK : ~ $ 2 – Keeps your wires and solders clean and secure. <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [i] Arduino Uno Case / Project Box : ~ $ 2- ~ $ 4 – Can be 3d printed as well, but should fit your battery pack and Arduino Nano. [i] OHM RESISTOR : Helps keep the signal to the NeoPixels clear </a> If you don’t have one already, you will need a soldering iron and solder wire. Be sure to be extra safe when soldering and not breathe the smoke by taking proper precautions. Soldering is difficult, be sure to look up guides on how to solder properly. <h2> Overview Of The Mask </h2> (The The mask itself consists of 7 rows. of WS (B) (LEDs / m NeoPixels) . There are a total of 470 LEDs, with the first row being . Each row decrements by 1, which means the 7th row will have NeoPixels. Since we are decrementing by an odd number, we will line up the pixels to be in-between the two pixels above it. This results in a hexagon-like geometric pattern which will allow us to make awesome patterns for our visuals. (The order of WS [0] B pins can differ depending on the brand. In my case, the order was <code> Ground , (Data) , and (Power) . These are represented with <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> G , (I / O) , respectively. These LEDs are individually addressable so the order of these LEDs matter. When you get a Neopixel strip, it will be one long strip of 160 leds or so. You can cut these leds between these pins and solder them together as seen with the image above, making sure that the (O) pin connects to the <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> I <a href="https://www.youtube.com/embed/-JsS84euiK8?rel=0&controls=1&autoplay=1"> pin. </a></code> <div> The problem is that the Arduino won’t see this in the shape of a mask, it will still think of it as one long strip. As seen with the full-sized image, the LEDs snake around, having each alternating row flipped. You can tell the direction of the LEDs based on the (I) and [3] (O) pins of one end of the LED strip. This is so that we do not have long wires going from one end of the mask to the other (I marked the flow of the LED strip’s data pin using arrows). This means that the (th LED is the last LED in the first row, (TH LED is the last LED of the 2nd row, (TH LED is the 2nd to last LED of the 2nd row, and the [] st LED is the first LED of the 2nd row. Luckily [colorA] , this isn’t an issue if all of our designs are symmetrical, because the th LED and the st LEDs would be the same color. If our designs are not symmetrical, we would need a helper function to flip each row which could use more memory. (Creating The Mask) [patternColors[colorA] order to keep the LEDs in place and wearable, I bought an airsoft mask and measured that the first row of 28 LEDs would fit. After that, I measured the maximum amount of rows I could fit while keeping the “decrement by 1” rule. In my case it was 7 rows. Once everything was measured, the LEDs were cut and soldered, ensuring each alternating row flipped. Then the back of the NeoPixels were taped together using electrical tape. I used a braided fishing line to sew the LEDs to the mask. <script data-noptimize="" data-wpfc-render="false"> /* <![CDATA[ */ fpm_start( "true" ); /* ]]> */ </script> <h2> Overview Of The Arduino [colorA] <div> The Arduino is connected to the mask’s data pin through th A5 pin. There is a <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> 728 ohm <code> resistor prior to reaching the Arduino's pin. This will keep the signal clear to the NeoPixels. The mask is powered by a battery pack with 3 AA batteries. The ground cable is connected to the Arduino and the mask. The power cable of the battery is connected to the mask's ( pin). You can also connect the power to the Arduino's <code> 5V pin, however, we won't worry about that until we are finished programming it. The Arduino will be connected to our computer using a usb cable. Alternatively, you could upgrade the battery pack from (4.5V) to (4.8V) by using 4 Rechargable NiMH batteries at (1.2V) each. As long as you limit the power to the NeoPixels to be under <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> 5V <code>, you should be ok . <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank">. [</a></code>i] You can now connect your Arduino to your mask's [i] (G) , I <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels">, [2] pins on the first row. Be sure that the length of these cables are long enough to place them in your pocket, or anywhere you plan on keeping them. (Programming The Mask <div> Open your Arduino IDE and create a new project. Install the FastLED library via the Library Manager window (<img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> Sketch> Include Library> Manage Libraries <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels">. Once that is installed, we can begin writing our app. Note: You can edit the <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> .ino [i] file using your preferred editor like Vim or VSCode and solely use the IDE for uploading and compiling. <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> (void) setup ([i] [i] ) <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> ({    } </a> void [patternColors[colorA] <div> loop ( () [colorA] {{    } <code> Once you create the new sketch, you will be presented with a default template. We will need to import and setup the FastLED library: # include [i] <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> # (define LED_PIN A5) # (define NUM_LEDS 300 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> # (define LED_TYPE WS (B) # (define BRIGHTNESS CRGB leds [NUM_LEDS] [0] void [patternColors[colorA] setup [i] ( ) [colorA] {   FastLED . [0] (addLeds) (<led_type led_pin></led_type></a> ([0] (leds) (NUM_LEDS) ) <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> ; </a>   FastLED . [0] <div> setMaxPowerInVoltsAndMilliamps ( (4.5) () , [0] [i] ) [colorA] ;   FastLED . [0] (show [i] ( () ; } void [patternColors[colorA] <div> loop ( ) [colorA] { } <code> <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> # include : This imports our FastLED Library [0] <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> #define LED_PIN A5 : This tells FastLED that we are using the A5 pin for our LEDs <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [i] # define NUM_LEDS : The # of LEDs we have </a> [0] (# define LED_TYPE WS) (B) : This is the type of LEDs we are using <div> <div> # define BRIGHTNESS : This sets the brightness of our LEDs. NeoPixels are bright and use a lot of power. Having this higher means that we use more power but have a larger range of colors. Using a smaller number results in a much smaller ranger of colors. CRGB leds [NUM_LEDS]; <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels">: This defines our [colorA] (leds) array which we will use to assign colors to specific LEDs. The CRGB [2] (object refers to an [i] (RGB) (pixel.) [i] (FastLED.addLeds) (...); : Sets up our LEDs for us and will instantiate the (leds) variable. It takes in the type of LEDs, pin, LEDs array, and number of LEDs as parameters. (FastLED.setMaxPowerInVoltsAndMilliamps) 4.5, 823); : This uses a helper method that is provided by FastLED to automatically handle the power draw by passing in the volts of our power supply ( (4.5V) ) <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> (FastLED.show)); : Whenever we change the LEDs, the (show) method would need to be called to display t he newly assigned LEDs. [</a>i] <div> <h2> </h2> Here comes the fun part: creating the visuals. The implementation I did was to create a 1d array with a length of <code> NUM_LEDS <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> and called it (pattern) . We will fill <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> pattern with integers that indicate the color that will be assigned to an LED. In addition to the <code> pattern array, there will be a 2d array for RGB colors that pattern would use to determine the color that needs to be outputted. We will call this <code> colors . To save memory, we will share the <code> colors array among all designs, so that colors can be reused without taking additional memory. We can achieve this by creating the 1d array <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> patternColors that will bridge the (pattern) values to a color in (colors) . So if the value of the first item in <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> patterns is (0) , the 0th index of the patternsColors array could have a value of <code> 2 <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> which refers to the <code> 2nd (index of [i] colors . In this scenario the 2nd index could have a value of <code> {0, , 0} [</code>patternColors[colorA] , which will show a green LED (RGB). ([patternColors[colorA] We want to animate the visuals, so we will wrap everything in a loop so that the colors rotate each iteration. Here is a visual for how the 0th and 1st iterations would look like for a mask with 6 leds: (The The Arduino will parse through each value in the <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> pattern (array which in this case the current value is (1) . So it finds the value of <code> patternColors [1] and gets (0) . It then gets the value of <code> colors [0] [2] Now in the 2nd iteration, the value increments by 1 and is now (2) . (<a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> When we program this, the array wont be mutated, we will instead calculate it using the modulus operator (<img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels">% ). (1 0)% 3=1 <code>, (1 1)% 3=2 , and (1 2)% 3=0 </code></a></code></code> This allows us to animate our leds. We can take it a step further by nesting it another loop that would fade into the next "frame". Check out the before and after adding this effect in the video below. The effect without the fade goes outward, while the one with the fade goes inward. Notice how the inward effect looks drastically smoother: <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="470 " loading=" lazy " src="https://www.youtube.com/embed/hijCexsv8tY?rel=0&controls=1" srcdoc=" {padding: 0; margin: 0; overflow: hidden} html, body {height: (%} img, span {position: absolute; width: 150%; top: 0 ; bottom: 0; margin: auto} span {height: 1.5em; text-align: center; font: 84 px / 1.5 sans-serif; color: white; text-shadow: 0 0 0.5em black} </style> <FastLED.h> ▶ " width=" 500 "> <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> [i] If we follow this approach, we can create awesome looking visuals in minutes and have it automatically animate for us with very low memory usage. In fact, with 4 effects I was able to get my binary size for variables down to 1.1kb! This was drastically lower than just having 1 or 2 effects at 1.4kb. <div> Creating The Visuals <div> <div> For this guide, we will create a simple Design that has a horizontal line that goes from the top of the mask to the bottom. First step is to create the 1d array that's formatted in the shape of our mask (place this in the (loop) method): [2] <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> uint_least8_t linePattern [NUM_LEDS] =[i] {    0 [i], 0 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> , (0) [i], [2] 0 , (0) , [2] (0) , (0) , [ </a> i] [0] (0) , 0 [i], 0 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> , (0) [i], [2] 0 , (0) , [2] (0) , (0) , [ </a> i] [0] (0) , 0 [i], 0 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> , (0) [i], [2] 0 , (0) , [2] (0) , (0) , [ </a> i] [0] (0) , 0 [i], 0 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> ,     1 [i], 1 [ i] , (1) [i], [2] 1 1 , (1) , [2] (1) , (1) , [ i] [0] (1) , 1 [i], 1 [ i] , (1) [i], [2] 1 1 , (1) , [2] (1) , (1) , [ i] [0] (1) , 1 [i], 1 [ i] , (1) [i], [2] 1 1 , (1) , [2] (1) , (1) , [ i] [0] (1) , 1 [i],      2 [i], 2 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> , (2) [i], [2] 2 , (2) , [2] (2) , (2) , [ </a> i] [0] (2) , 2 [i], 2 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> , (2) [i], [2] 2 , (2) , [2] (2) , (2) , [ </a> i] [0] (2) , 2 [i], 2 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> , (2) [i], [2] 2 , (2) , [2] (2) , (2) , [ </a> i] [0] (2) ,       3 [colorA] [i], 3 , (3) [i], [2] 3 [ i] , (3) , [2] (3) , (3) , [ i] [i] (3) , 3 [colorA] [i], 3 , (3) [i], [2] 3 [ i] , (3) , [2] (3) , (3) , [ i] [i] (3) , 3 [colorA] [i], 3 , (3) [i], [2] 3 [ i] , (3) , [2] (3) , (3) , [ i]        4 [i], 4 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> , (4) [i], [2] 4 [</a> i] , (4) , [2] (4) (4) , (4) , [ i] (4) , 4 [i], 4 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> , (4) [i], [2] 4 [</a> i] , (4) , [2] (4) (4) , (4) , [ i] (4) , 4 [i], 4 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> , (4) [i], [2] 4 [</a> i] , (4) , [2] (4) (4) ,         5 [colorA] [i], 5 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [</a> 0] , (5) [i], [2] 5 , (5) , [2] (5) , (5) , [ i] (5) , 5 [colorA] [i], 5 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [</a> 0] , (5) [i], [2] 5 , (5) , [2] (5) , (5) , [ i] (5) , 5 [colorA] [i], 5 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [</a> 0] , (5) [i], [2] 5 , (5) , [2]          6 [i], 6 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [</a> i] , (6) [i], [2] 6 6 , (6) , [2] (6) , (6) , [ i] (6) , 6 [i], 6 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [</a> i] , (6) [i], [2] 6 6 , (6) , [2] (6) , (6) , [ i] (6) , 6 [i], 6 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [</a> i] , (6) [i], [2] 6 } [0] <div> <div> uint_least8_t <code>: This sets out integers to be 8 bits, which is drastically smaller than a normal <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> int . Since we aren't using large integers for this array, 8 bits is suffice. [0] linePattern [NUM_LEDS] : Sets our array to be the size of (NUM_LEDS) [0] (0, .. 1, ... 2, ... 6) : The 1d array is in the shape of our mask, with the first row being 150. Each row share a value that increments by 1 for every row. This means that the first row would be color <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"><code> in the first "frame", and the last row would be color <code> 6 . The next frame would shift it so that the first row would be <code> 1 <code>, and the last one would be <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> 0 . [i] Let's also define our pattern colors and call it lineColors <code>: <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> uint_least8_t lineColors [ </code> </code></code></code></code> 7] [0]= { (0) , [ i] [patternColors[colorA] [3] , [ i] (1) (1) , (1) , , [i] (1) (1) , (1) [0] (1) (1) } ; These values don't mean much as we Don't have colors defined, but this does tell us a horizontal line of 2 pixels wide will go from the bottom to the top of the mask (We want to reverse this in the future). Our full file should now look like: # include [i] <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> # (define LED_PIN A5) # (define NUM_LEDS 300 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> # (define LED_TYPE WS (B) # (define BRIGHTNESS CRGB leds [NUM_LEDS] [0] void [patternColors[colorA] setup [i] ( ) [colorA] {   FastLED . [0] (addLeds) (<led_type led_pin></led_type></a> ([0] (leds) (NUM_LEDS) ) <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> ; </a>   FastLED . [0] <div> setMaxPowerInVoltsAndMilliamps ( (4.5) () , [0] [i] ) [colorA] ;   FastLED . [0] (show [i] ( () ; } void [patternColors[colorA] <div> loop ( ) [colorA] {   uint_least8_t linePattern [NUM_LEDS] [0] {      0 [i], 0 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> , (0) [i], [2] 0 , (0) , [2] (0) , (0) , [ </a> i] [0] (0) , 0 [i], 0 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> , (0) [</a> 0], 0 , (0) , [i] (0) , (0) , [ i] [0] (0) , 0 [i], [0] [0] , <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> (0) , [i] [</a> 0] [0] , <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> (0) , [patternColors[colorA] [3] , [ i] (0) , (0) , , [</a> i] (0) , [0] [0] , <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank">      1 [i], 1 [ i] , (1) [i], [2] 1 1 , (1) , [2] (1) , (1) , [ i] [0] (1) , 1 [i], 1 [ i] , (1) [i], [2] 1 1 , (1) , [2] (1) , (1) , [ i] [0] (1) , 1 [i], 1 [ i] , (1) [i], [2] 1 1 , (1) , [2] (1) , (1) , [ i] [0] (1) , 1 [i],        2 [i], 2 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> , (2) [i], [2] 2 , (2) , [2] (2) , (2) , [ </a> i] [0] (2) , 2 [i], 2 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> , (2) [i], [2] 2 , (2) , [2] (2) , (2) , [ </a> i] [0] (2) , 2 [i], 2 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> , (2) [i], [2] 2 , (2) , [2] (2) , (2) , [ </a> i] [0] (2) ,        3 [colorA] [i], 3 , (3) [i], [2] 3 [ i] , (3) , [2] (3) , (3) , [ i] [i] (3) , 3 [colorA] [i], 3 , (3) [i], [2] 3 [ i] , (3) , [2] (3) , (3) , [ i] [i] (3) , 3 [colorA] [i], 3 , (3) [i], [2] 3 [ i] , (3) , [2] (3) , (3) , [ i]          4 [i], 4 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> , (4) [i], [2] 4 [</a> i] , (4) , [2] (4) (4) , (4) , [<div class="adace-slot-wrapper adace-middle-content adace-align-center adace-slot-wrapper-main" style="text-align:center;"> <div class="adace-disclaimer"> </div> <div class="adace-slot"> <div class="adace_ad_662b248f423c2 adace-dont-remove"> </a> </div> </div> </div> i] (4) , 4 [i], 4 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> , (4) [i], [2] 4 [</a> i] , (4) , [2] (4) (4) , (4) , [ i] (4) , 4 [i], 4 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> , (4) [i], [2] 4 [</a> i] , (4) , [2] (4) (4) ,          5 [colorA] [i], 5 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [</a> 0] , (5) [i], [2] 5 , (5) , [2] (5) , (5) , [ i] (5) , 5 [colorA] [i], 5 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [</a> 0] , (5) [i], [2] 5 , (5) , [2] (5) , (5) , [ i] (5) , 5 [colorA] [i], 5 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [</a> 0] , (5) [i], [2] 5 , (5) , [2]            6 [i], 6 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [</a> i] , (6) [i], [2] 6 6 , (6) , [2] (6) , (6) , [ i] (6) , 6 [i], 6 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [</a> i] , (6) [i], [2] 6 6 , (6) , [2] (6) , (6) , [ i] (6) , 6 [i], 6 <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [</a> i] , (6) [i], [2] 6   } [0]   uint_least8_t lineColors [7] [0]= { (0) , [ i] [0] (0) , <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> (1) , [i] (1) , <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> (1) , [i] [</a> </a> 0] (1) , <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> (1) } <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> ; } <code> We will now create a <code> pattern (method: <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels">. [</code></code></a>0] void [patternColors[colorA] <div> loop ( ) [colorA] {   uint_least8_t linePattern [NUM_LEDS] [0] {     . [i] . <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank">   } [</a> 0]   uint_least8_t lineColors [7] [0]= { (0) , [ i] [0] (0) , <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> (1) , [i] (1) , <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> (1) , [i] [</a> </a> 0] (1) , <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> (1) } <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> ;    pattern (linePattern) , <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> lineColors , false [patternColors[colorA] [i], 1 [ i] , (7) ; } void [patternColors[colorA] <div> pattern (<a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> uint_least8_t pattern [NUM_LEDS] </a> , [i] uint_least8_t colorsPattern [] [i] , [colorA] (bool) (reverse , [2] float speed , uint_least8_t max) ) [0] {   uint_least8_t colors [2] [2] [3] [0]= <div> {<a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank">      { () , , [i] [i] } </a> , [i]      { [patternColors[colorA] [3] , [ i] [0] , <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [</a> 0] ,   } [0] } <code> <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> pattern (linePattern, lineColors, false , 1, 7); <code>: This calls our new <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> pattern method and passes in our pattern and pattern colors. The parameters are explained below. [2] <div> (void pattern) : We aren't returning anything so we are using (void) <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [i] uint_least8_t pattern [NUM_LEDS] : This is the pattern array we are passing in </a> [0] colorsPattern [] : This is the pattern "bridge" colors that we are passing in [i] <div> [patternColors[colorB] bool reverse <code>: This is a flag to reverse the array so that we don't have to reverse the pattern array [i] (float speed) : This is the speed of the animations ([patternColors[colorA] <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> uint_least8_t max [0] : This is the max number of colors we have, if you increase it, you could increase the amount of colors used in an effect. For example, if we doubled the pattern colors array to include the 7 more colors and set the max to 25, the effect will loop twice, using the last 7 colors for the 2nd loop. Even better, it will automatically transition to the next colorset. You could create different effects using this method and save even more memory without creating a more complicated pattern array. [i] (uint_least8_t colors [2] [3]={<code>: This is the 2d array containing all of the colors from every effect. [</code>i] Implementing The Pattern Method <div> We can now work on the pattern method, focused only on showing the LEDs in the 0th iteration, without worrying about animations or fading. (The The FastLED library makes it very. easy to set the color for an LED. If we want to set the first LED to red, we can do so via <code> leds [0]=CRGB , 0, 0) . However, it won't show until we call FastLED.show () . So lets loop through the pattern array and map the LEDs to the appropriate color: (void) pattern () uint_least8_t pattern [NUM_LEDS] , uint_least8_t patternColors [] [i], [2] bool reverse , [colorA] (float) (speed) , uint_least8_t max ) [ i] {{  uint_least8_t colors [2] [2] [3] [0]= <div> {<a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank">      { [i] (5) , [i] [0] [ 0] , <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank">      { [</a> patternColors[colorA] [3] , [ i] [0] , <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [</a> 0] ,   } [0]    for uint_least8_t i =[ i] (0) ; (i) () [i] {     uint_least8_t color=pattern [colorA] [i] <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> ; </a>     leds [i] =[ i] CRGB ([patternColors[colorA]       colors [0] ] [2] [i] [0]       colors [0] ] [2] [i] [i]       colors [0] ] [2] [2] [0]      [patternColors[colorA] [0]   }   FastLED . [0] (show [i] ( () ;   FastLED . [0] [0] delay ( [0] () ; } <code> <code> for (uint_least8_t i=0; i <num_leds i>: This create a for loop that loops from 0 to our total leds. <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> (uint_least8_t color=pattern [</a></num_leds></code></code> 0]; : This gets us the pattern color index from pattern [i] [i] leds (=CRGB) : Assigns the color to the led at index (i) [ i] <a href="https://www.youtube.com/embed/-JsS84euiK8?rel=0&controls=1&autoplay=1"> colors [</a>1]] [0] : This grabs the color from the (colors) (array using the (color) variable and grabs the 0th index to represent the (R) in (RGB) . It does the same for <code> G and (B) . </code> </a> [i] (FastLED.show)); : Displays the LEDs after all of the LEDs are set, so that they show all at once rather than one at a time. [2] <div> (FastLED.delay) 100; : Delays each render by 150 ms, this can be adjusted to cause a larger delay. This helps keep our animations at a consistent speed. This will result in the mask looking like this: [patternColors[colorB] Animating The Design [ i] To animate the design, we would need to wrap our method in a for loop and change the (color) value by 1 on every increment. We will use the modulus operator (<code>% to loop any value above (max) (back to zero.) ([</code>patternColors[colorA] void (pattern) ([ i] uint_least8_t pattern [NUM_LEDS] [i] , uint_least8_t patternColors [3] [i] (bool) (reverse) , (float) (speed) , uint_least8_t max ) ({ {   uint_least8_t colors [2] [2] [3] [0]= <div> {<a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank">      { [i] (5) , [i] [0] [ 0] , <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank">      { [</a> patternColors[colorA] [3] , [ i] [0] , <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [</a> 0] ,   } [0]    for uint_least8_t x =[ i] (0) ; (x) (max) ; x [2] ( ) ) [i] {      for uint_least8_t i =[ i] (0) ; (i) () [i] {       uint_least8_t color=(pattern) [i] </a> (x ) (%) (max) ;       leds [i] =[ i] CRGB ([patternColors[colorA]         colors [0] ] [2] [i] [0]         colors [0] ] [2] [i] [i]         colors [0] ] [2] [2] [0]        [patternColors[colorA] [0]     }     FastLED . [0] (show [i] ( () ;     FastLED . [0] [0] delay ( [0] () ;   } } <code> <code> for (uint_least8_t x=0; x <max x src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels">: Loops through our original <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> pattern method (max) (times.) [</max></code></code>i] [i] (pattern [i] ) x)% max; : Each iteration will increment the original pattern value by (1) . If it overflows past <code> max , it will loop back to (0) because of the modulus operator. Remember that max can be anything, as long as there are enough colors. Be sure that [] FastLED.show () [i] is within the for loop or it wont render each iteration! That is all it takes to animate it. Now we will need to fade to the next iteration to keep it clean and we are done! [i] (Fading Iterations) [2] Lets take a look at a helper method called getColorFade that I created for this project: <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> (float) getColorFade ([i] [i] (uint_least8_t a) , uint_least8_t b , uint_least8_t index , (uint_least8_t range) ) {{    if (a)==b )    {      return (a )   }    float [patternColors[colorA] (dif = abs <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [2] ([colorA] a - (b ) ; </a><a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank">    float [patternColors[colorA] change [0]= ( (float) ) (dif) / (range) ; <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank">   change =[i] (index) <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> (1) [i]    if (a)> </a> b ) [ patternColors[colorA]    {      return (a) a (change) ; <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank">   } </a>    return (a) (a) (change) ; <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> } <code> <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> float getColorFade : This method returns a (float) that is supposed to represent a color. We use <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> float so that it won't round whole numbers, to keep the fades clean. [</code></a>i] <a href="https://www.youtube.com/embed/-JsS84euiK8?rel=0&controls=1&autoplay=1"> uint_least8_t a <code>: This is color <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> a <code>, this would be the source color [</code></code></a>i] <a href="https://www.youtube.com/embed/-JsS84euiK8?rel=0&controls=1&autoplay=1"> uint_least8_t b <code>: This is color (b) , this would be the destination color [</code></a>i] uint_least8_t index : This is the current stage the fade is on. So if it is 2 loops in, this would equal to <code> 2 <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> on the 3rd loop (starts at 0). This is explained in the next parameter. <h2> </h2> uint_least8_t range <code>: This is the amount of steps we want the fade to occur. So if we want it to fade over 4 iterations, after 1 iteration it would be 30% of the way from color a to color b. So lets say that we want it to fade over iterations. <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> index will be equal to (0) , going all the way until (9) . When index is <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> 5 , that means it is half way towards color (b) [colorA] [colorA] (if (a==b)) : If the colors are the same, return the color. (float dif=abs (a - b); : Get the difference of the two colors. abs is used so that we don't have any negative values. We just want to know the "distance" between the two. (float change=dif / range) : This is amount we need to add / subtract to (a) . Lets pretend a= <div>, and (b=) <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels">. The difference between the two is <code> . We want to fade to the next color over 5 increments. So in this case the change would be <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> ( 5 (aka) (dif / range) . change=(index 1); : The change is then multipled by the current index otherwise it won't actually fade. (first loop adds <code> <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels">, second loop adds , etc.) [</code>0] (if (a> b) <code>: This decides whether we need to add <code> change to (a) or subtract it. (ex. <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> a (is [</a></code></code>0] , (b) (is) , so we subtract from (a) to get closer to (b) 's value) <h2> </h2> Now for the final loop! Update your <img decoding="async" data-expand="600" class="lazyload" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 1 1'%2F%3E" data-src="https://img.youtube.com/vi/-JsS84euiK8/hqdefault.jpg" alt="LED Rave Mask V2 - Arduino and NeoPixels"> pattern method: (void) (pattern) ( uint_least8_t pattern [NUM_LEDS] [2] , uint_least8_t patternColors [] , , [i] (bool) (reverse) , float [i] (speed , uint_least8_t max [i] ) [colorA] ({   uint_least8_t colors [2] [2] [3] [0]= <div> {<a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank">      { [i] (5) , [i] [0] [ 0] , <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank">      { [</a> patternColors[colorA] [3] , [ i] [0] , <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> [</a> 0] ,   } [0]    for uint_least8_t x =[ i] (0) ; (x) (max) ; x [2] ( ) ) [i] {      for uint_least8_t z =[ i] (0) ; (z) ( ( (4) (speed ) ; </a> z [patternColors[colorA] [i] {        for uint_least8_t i =[ i] (0) ; (i) () [i] {         uint_least8_t colorA ;         uint_least8_t colorB ;          if (reverse) ) [i] {{          colorB=() [i] (pattern) [i] <div> () [i] 4 [i] - [colorA] [patternColors[colorA] [0] % max ;           colorA=() [i] (colorB) <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> (1) [patternColors[colorA] % [3] (max) ; <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank">         } </a> else {<a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank">           colorA=() [</a> </a>i] (pattern) [i] <div> (x ) % max) ;           colorB=() [i] (colorA) <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> (1) [patternColors[colorA] % [3] (max) ; <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank">         } </a>         leds [i] =[ i] CRGB ([patternColors[colorA]            getColorFade (colors) [patternColors[colorA] </a> ] [0] <code>, colors <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> ] </a> [i] , , [3] , ([0] [0] (4) (speed) ) ) [colorA] ,            getColorFade (colors) [patternColors[colorA] ] [0] [i] , colors <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> ] [</a>0] , z [2] , ([i] (4) (speed) ) [ i] ) [colorA] ,            getColorFade (colors) [patternColors[colorA] ] [0] <a href="https://github.com/ArmaizAdenwala/arduino-led-mask" rel="noopener noreferrer" target="_blank"> , colors [patternColors[colorA] ] <div> [2] [i], (z) , <a></a></div> </a> </code> </div> </div> </div> </code></div> </code></code></a></a></code></div> </div> </div> </code></div> </code></div> </div> </code></code> </div> </div> </a></a></a> </div> </a> </a> </div> </div> </a></code></div> </div> </a> </div> </div> </div>