Project 5.04 Fading Neopixels Using Buttons

This project is a bit more complicated than the last. In this project the goal is to slowly fade a Neopixel on while a button is pressed but instead of the Neopixel shutting off when the button is released, it slowly fades off. Again, SW1 will control the left Neopixel, and SW2 will control the right Neopixel.

Project Code:

////////////////////////////////////////////////////////
// 5.04 - Fading Neopixels Using Buttons

#include <Adafruit_NeoPixel.h>
  
byte dataPin = 10;        
byte numberOfPixels = 2;  
byte SW1 = 1;
byte SW2 = 0;

bool pressed = LOW;

byte saturation = 255;
long neoPixelOneColor = 0;       
long neoPixelTwoColor = 45000;    
byte neoPixelOneBrightness = 0;    
byte neoPixelTwoBrightness = 0;    

Adafruit_NeoPixel pixels(numberOfPixels, dataPin, NEO_GRB + NEO_KHZ800);
void setup() {
  
  pixels.begin();

  pinMode(SW1, INPUT);
  pinMode(SW2, INPUT);
}

void loop() {
  if (digitalRead(SW1) == pressed) {                     
    if (neoPixelOneBrightness < 255) {                   
      neoPixelOneBrightness = neoPixelOneBrightness + 1;

    }
  }
  else {
    if (neoPixelOneBrightness > 0) {                      
      neoPixelOneBrightness = neoPixelOneBrightness - 1; 
    }
  }

  if (digitalRead(SW2) == pressed) {                     
    if (neoPixelTwoBrightness < 255) {                   
      neoPixelTwoBrightness = neoPixelTwoBrightness + 1; 
    }
  }
  else {
    if (neoPixelTwoBrightness > 0) {                   
      neoPixelTwoBrightness = neoPixelTwoBrightness - 1;
    }
  }

  pixels.setPixelColor(0, pixels.ColorHSV(neoPixelOneColor, saturation, neoPixelOneBrightness)); 
  pixels.setPixelColor(1, pixels.ColorHSV(neoPixelTwoColor, saturation, neoPixelTwoBrightness)); 

  pixels.show(); 

  delay(10); 
}
////////////////////////////////////////////////////////

Copy

*If you’re copying and pasting the code, or typing from scratch, delete everything out of a new Arduino sketch and paste / type in the above text.

This sketch introduces two new byte type variables from the last. These two variables are used to keep track of the individual brightness of each Neopixel:

byte neoPixelOneBrightness = 0;    
byte neoPixelTwoBrightness = 0;    

Copy

Moving on to the loop(), we once again need to make a decision. Is the button pressed? For this we will use an if-statement:

if (digitalRead(SW1) == pressed) {       
Copy

We can make increasingly complex decisions with an if-statement inside another if-statement. In this example we set the color using ColorHSV. This makes it very easy for us to set the brightness of an individual pixel. Remember that the last parameter for ColorHSV is the “Value” of the Neopixel (brightness). It is important to note that this function takes 8-bit number for value, so it’s numbers between 0-255. If we pass a value over 255 unexpected things can happen. For that reason, we have to check and see if the brightness value for this pixel is less than 255 before we increase the brightness any.

if (neoPixelOneBrightness < 255) {

Copy

If the button is pressed, we need to increase the brightness of the Neopixel associated with that button (if it is below 255). In this example we increase the brightness variable by one every time that the loop() runs and the button is found to be pressed.

neoPixelOneBrightness = neoPixelOneBrightness + 1;

Copy

If the associated button is not pressed, the else part of the if-statement executes. Along with not being able to pass numbers above 255 for the value parameter of ColorHSV we cannot pass numbers below 0 for the value parameter. It doesn’t make sense to have a brightness below 0. For that reason, we have to check and see that the associated brightness variable is greater than 0 before subtracting 1:

if (neoPixelOneBrightness > 0) {                      

Copy

If it is above 0 we can subtract 1 from it:

neoPixelOneBrightness = neoPixelOneBrightness - 1; 

Copy

The exact same thing happens with the other button and Neopixel:

if (digitalRead(SW2) == pressed) {                     
  if (neoPixelTwoBrightness < 255) {                   
    neoPixelTwoBrightness = neoPixelTwoBrightness + 1; 
  }
}
else {
  if (neoPixelTwoBrightness > 0) {                   
    neoPixelTwoBrightness = neoPixelTwoBrightness - 1;
  }
}

Copy

Next, we need to update the Neopixels with their associated brightness values. Remember that the first Neopixel is number 0 and the second Neopixel is number 1. All we have to do is address the Neopixels and pass the new brightness values to ColorHSV.

pixels.setPixelColor(0, pixels.ColorHSV(neoPixelOneColor, saturation, neoPixelOneBrightness)); 

pixels.setPixelColor(1, pixels.ColorHSV(neoPixelTwoColor, saturation, neoPixelTwoBrightness)); 

Copy

After we update the Neopixels we have to show the new brightness:

pixels.show(); 

Copy

Lastly, there is a delay added so that we can see the incremental changes. Try deleting this delay and see what happens!

  delay(10); 
}
////////////////////////////////////////////////////////

Copy

Let’s do a brief recap.

First, we checked to see if a button was pressed. If the button was pressed, we checked to see if the brightness associated with the Neopixel was below 255. If it was, we increased its brightness by 1.

If the button was not pressed, we checked to see if the brightness of the associated Neopixel was greater than 0. If it was, we decreased its brightness by 1.

Next, we updated the Neopixels with the correct brightness variables. Then showed the Neopixel updates and added a small delay.