Skip to content

Final Project

PIXEL BOX

the idea of this project is to create a box that contains an (n) amount of RGB led lights, with this i can display a pixelated images and make it interact with the user by useing the arduino seneor.

Research

1 - Digital fabrication process:

  • for the prototype i will be using laser cutting on cardboard to make a 6x6 or 3x3 led light.

  • and using also the laser machine for the final product to create a housing box for a 16x16 led light grid.

2 - a sketch shows the initial idea of the project.

3 - the electronic elements are:

  • Arduino

  • LED light strip

  • wires to connect the lights

4 - for the Materials

  • the material will be mainly made out of 3mm thick MDF that is cut with laser cutter and an acrylic sheet to cover the led lights.

2D and 3D Modeling

Prototype

At first i designd a small prototype to test and have an idea of the project

Final Product

After that, by learning from my mistakes in the prototype to design the final box.

astetecic elements

I also created some asthtetec elements to put it on the final design.

to go with the pixel concept, i created a pac man themed iconcs.

Downloads

Here you can download the prototype and the final box with the full dimentions.

Fabrication of the Prototype

Here i started cutting the prtotype frame using a cardbord material with the laser cutter.

i compiled all the picecs and connected the lights

i tried to hide the wires a littel bit but still i can access them incase i need to edit anything.

and here is the testing.

This is a video that shows how the lights works

Note: a Detailed explination on how I connected the led light strip together will be in the final product fabrication.

Fabrication of the Final Product

After the prototype I started to fabricate the final box, while learning from my mistakes in the prototype.

  • this is the led light strip that i will be using.

1 - I cut the wire to the length of 16 led light.

2 - I repeated the process to have 16 strips with 16 leds.

note that a calculation on how I spaced the led strips is shown in the research part.

3 - after that I connected the wires through soldering.

  • a detail view on how i connected the wires.

Note that each strip should be placed on the opesset of the previos strip to create a zig zag connection.

  • I connceted each ending with the other ( GND with GND , 5V with 5V and so on.) and finally connecting the wires to the arduino, you can check my week07 work to see how to connect the wires.

4- now we start Testing

You can notice that there is a tracing paper on top of the led lights this is to diffuse the light so any thing that i can disply on the led can be understandable.

5- after many testing and experamiting with arduino

6- I finally managed to display on the led.

A video showing the first animation test.


part 2 of fabricarion.

the second part was to assemble the project.

1- First I placed the led to the housing box.

2- then i created the cover sheet by wet sanding a clear acryilic panel and then using a super glue to hold the panel into place.

3- and then assembled the box

4- adding also the icons that i have created.

Final

this video shows the demo of the final project

what’s next?

with more time to develop, this project can create many things, creating a pixelated videogame display, creating more interaction than just guesters, or even connecting a wireless controller to the arduino and using the display to play various indie games.

Resources

this is the code i used

#include <Adafruit_GFX.h>
#include <Adafruit_NeoMatrix.h>
#include <Adafruit_NeoPixel.h>
#include <Arduino_APDS9960.h>

// Which pin on the Arduino is connected to the NeoPixels?
#define PIN 3

// Max is 255, 32 is a conservative value to not overload
// a USB power supply (500mA) for 12x12 pixels.
#define BRIGHTNESS 96

// Define matrix width and height.
#define mw 16
#define mh 16
#define LED_BLACK    0

int counter = 0;
int bilderanzahl = 0;

// When we setup the NeoPixel library, we tell it how many pixels, and which pin to use to send signals.
// Note that for older NeoPixel strips you might need to change the third parameter--see the strandtest
// example for more information on possible values.
Adafruit_NeoMatrix *matrix = new Adafruit_NeoMatrix(mw, mh, PIN,
    NEO_MATRIX_TOP     + NEO_MATRIX_LEFT +
    NEO_MATRIX_ROWS + NEO_MATRIX_ZIGZAG,
    NEO_GRB            + NEO_KHZ800);

static const uint16_t PROGMEM
// These bitmaps were written for a backend that only supported
// 4 bits per color with Blue/Green/Red ordering while neomatrix
// uses native 565 color mapping as RGB.
// I'm leaving the arrays as is because it's easier to read
// which color is what when separated on a 4bit boundary
// The demo code will modify the arrays at runtime to be compatible
// with the neomatrix color ordering and bit depth.


RGB_bmp[][256] = {


//Mario 4

{
0xBB0,  0xBB0,  0xBB0,  0xBB0,  0xBB0,  0x008,  0x000,  0x008,  0x008,  0x000,  0x008,  0xBB0,  0xBB0,  0xBB0,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0xBB0,  0xBB0,  0x008,  0x000,  0x00B,  0x00B,  0xFFF,  0xFFF,  0x000,  0x008,  0xBB0,  0xBB0,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0xBB0,  0x000,  0x000,  0xFFF,  0xFFF,  0x00F,  0x00F,  0x00F,  0x00B,  0x000,  0x000,  0xBB0,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0x008,  0x008,  0x00B,  0x000,  0x00F,  0x00F,  0x00F,  0x00F,  0x000,  0x00B,  0x008,  0x008,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0x008,  0x00B,  0x00F,  0x00F,  0x000,  0x00F,  0x00F,  0x000,  0x00F,  0x00F,  0x00B,  0x008,  0xBB0,  0xBB0,
0xBB0,  0x008,  0x008,  0x00B,  0x00F,  0x00F,  0x00F,  0x000,  0x000,  0x00F,  0x00F,  0x00F,  0x00B,  0x008,  0x008,  0xBB0,
0xBB0,  0x008,  0x008,  0x00B,  0x00B,  0x00F,  0x000,  0x00F,  0x00F,  0x000,  0x00F,  0x00B,  0x00B,  0x008,  0x008,  0xBB0,
0xBB0,  0x000,  0x008,  0x008,  0x00B,  0x000,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x000,  0x00B,  0x008,  0x008,  0x000,  0xBB0,
0xBB0,  0x008,  0x000,  0x000,  0x000,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x000,  0x000,  0x000,  0x008,  0x008,
0x008,  0x000,  0x008,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x008,  0x000,  0x008,
0x000,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x000,
0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0xFFF,  0xFFF,  0xFFF,  0xFFF,
0xFFF,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0xFFF,
0xBB0,  0x000,  0xFFF,  0xFFF,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0xFFF,  0xFFF,  0x000,  0xBB0,
0xBB0,  0xBB0,  0x000,  0x000,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x000,  0x000,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0xBB0,  0xBB0,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0xBB0,  0xBB0,  0xBB0,  0xBB0,




},
{
0xBB0,  0xBB0,  0xBB0,  0xBB0,  0xBB0,  0x008,  0x008,  0x000,  0x008,  0x008,  0x008,  0xBB0,  0xBB0,  0xBB0,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0xBB0,  0xBB0,  0x008,  0x008,  0x00B,  0x000,  0xFFF,  0xFFF,  0x008,  0x008,  0xBB0,  0xBB0,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0xBB0,  0x008,  0x00B,  0xFFF,  0xFFF,  0x00F,  0x00F,  0x000,  0x000,  0x000,  0x008,  0xBB0,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0x008,  0x000,  0x00B,  0x00B,  0x00F,  0x000,  0x00F,  0x00F,  0x00F,  0x00B,  0x008,  0x000,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0x008,  0x000,  0x00F,  0x00F,  0x00F,  0x000,  0x00F,  0x00F,  0x00F,  0x00B,  0x00B,  0x000,  0xBB0,  0xBB0,
0xBB0,  0x000,  0x00B,  0x00B,  0x00B,  0x00F,  0x00F,  0x00F,  0x00F,  0x000,  0x000,  0x000,  0x00B,  0x00B,  0x008,  0xBB0,
0xBB0,  0x008,  0x00B,  0x000,  0x00B,  0x00B,  0x00B,  0x000,  0x00F,  0x00F,  0x00B,  0x00B,  0x00B,  0x000,  0x008,  0xBB0,
0x008,  0x008,  0x00B,  0x000,  0x00B,  0x00B,  0x00B,  0x000,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x000,  0x008,  0x008,
0x000,  0x000,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x000,  0x000,  0x000,  0x00B,  0x008,  0x008,  0x008,
0xBB0,  0x008,  0x008,  0x000,  0x008,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x008,
0xFFF,  0xFFF,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,
0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0xFFF,
0xBB0,  0xFFF,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,
0xBB0,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0xFFF,  0x000,  0xBB0,
0xBB0,  0xBB0,  0x000,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x000,  0x000,  0x000,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0xBB0,  0xBB0,  0xBB0,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0xBB0,  0xBB0,  0xBB0,




},
{
0xBB0,  0xBB0,  0xBB0,  0xBB0,  0xBB0,  0x008,  0x008,  0x008,  0x008,  0x008,  0x008,  0xBB0,  0xBB0,  0xBB0,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0xBB0,  0xBB0,  0x008,  0x000,  0x00B,  0x00B,  0xFFF,  0xFFF,  0x000,  0x008,  0xBB0,  0xBB0,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0xBB0,  0x008,  0x00B,  0xFFF,  0xFFF,  0x000,  0x000,  0x000,  0x00B,  0x00B,  0x008,  0xBB0,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0x008,  0x00B,  0x00B,  0x000,  0x00F,  0x00F,  0x00F,  0x00F,  0x000,  0x00B,  0x00B,  0x008,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0x000,  0x00B,  0x000,  0x00F,  0x00F,  0x00F,  0x00F,  0x00F,  0x00F,  0x000,  0x00B,  0x000,  0xBB0,  0xBB0,
0xBB0,  0x008,  0x00B,  0x000,  0x00F,  0x00F,  0x00F,  0x00F,  0x00F,  0x00F,  0x00F,  0x00F,  0x000,  0x00B,  0x008,  0xBB0,
0xBB0,  0x008,  0x000,  0x00B,  0x000,  0x00F,  0x00F,  0x00F,  0x00F,  0x00F,  0x00F,  0x000,  0x00B,  0x000,  0x008,  0xBB0,
0x008,  0x000,  0x008,  0x00B,  0x00B,  0x000,  0x00F,  0x00F,  0x00F,  0x00F,  0x000,  0x00B,  0x00B,  0x008,  0x000,  0x008,
0x000,  0x008,  0x008,  0x008,  0x00B,  0x00B,  0x000,  0x000,  0x000,  0x000,  0x00B,  0x00B,  0x008,  0x008,  0x008,  0x000,
0xFFF,  0xFFF,  0xFFF,  0x008,  0x008,  0x000,  0x00B,  0x00B,  0x00B,  0x00B,  0x000,  0x008,  0x008,  0xFFF,  0xFFF,  0xFFF,
0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x000,  0x008,  0x008,  0x008,  0x008,  0x008,  0x008,  0x000,  0xFFF,  0xFFF,  0xFFF,  0xFFF,
0x000,  0x000,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x000,  0x000,
0xBB0,  0x000,  0x000,  0x000,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x000,  0x000,  0x000,  0xBB0,
0xBB0,  0xBB0,  0x000,  0xFFF,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0xFFF,  0x000,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0xBB0,  0x000,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x000,  0xBB0,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0xBB0,  0xBB0,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0xBB0,  0xBB0,  0xBB0,  0xBB0,




},
{
0xBB0,  0xBB0,  0xBB0,  0xBB0,  0xBB0,  0x008,  0x008,  0x008,  0x000,  0x008,  0x008,  0xBB0,  0xBB0,  0xBB0,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0xBB0,  0xBB0,  0x008,  0x008,  0xFFF,  0xFFF,  0x000,  0x00B,  0x008,  0x008,  0xBB0,  0xBB0,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0xBB0,  0x008,  0x000,  0x000,  0x000,  0x00F,  0x00F,  0xFFF,  0xFFF,  0x00B,  0x008,  0xBB0,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0x000,  0x008,  0x00B,  0x00F,  0x00F,  0x00F,  0x000,  0x00F,  0x00B,  0x00B,  0x000,  0x008,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0x000,  0x00B,  0x00B,  0x00F,  0x00F,  0x00F,  0x000,  0x00F,  0x00F,  0x00F,  0x000,  0x008,  0xBB0,  0xBB0,
0xBB0,  0x008,  0x00B,  0x00B,  0x000,  0x000,  0x000,  0x00F,  0x00F,  0x00F,  0x00F,  0x00B,  0x00B,  0x00B,  0x000,  0xBB0,
0xBB0,  0x008,  0x000,  0x00B,  0x00B,  0x00B,  0x00F,  0x00F,  0x000,  0x00B,  0x00B,  0x00B,  0x000,  0x00B,  0x008,  0xBB0,
0x008,  0x008,  0x000,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x000,  0x00B,  0x00B,  0x00B,  0x000,  0x00B,  0x008,  0x008,
0x008,  0x008,  0x008,  0x00B,  0x000,  0x000,  0x000,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x000,  0x000,
0x008,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x008,  0x000,  0x008,  0x008,  0xBB0,
0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0xFFF,  0xFFF,
0xFFF,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,
0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0xFFF,  0xBB0,
0xBB0,  0x000,  0xFFF,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xBB0,
0xBB0,  0xBB0,  0x000,  0x000,  0x000,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0xFFF,  0x000,  0xBB0,  0xBB0,
0xBB0,  0xBB0,  0xBB0,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0x000,  0xBB0,  0xBB0,  0xBB0,  0xBB0,  0xBB0,





},
};



void display_rgbBitmap(uint8_t bmp_num) {
  static uint16_t bmx, bmy;

  fixdrawRGBBitmap(bmx, bmy, RGB_bmp[bmp_num], 16, 16);
  bmx += 16;
  if (bmx >= mw) bmx = 0;
  if (!bmx) bmy += 16;
  if (bmy >= mh) bmy = 0;
  matrix->show();
}

// Convert a BGR 4/4/4 bitmap to RGB 5/6/5 used by Adafruit_GFX
void fixdrawRGBBitmap(int16_t x, int16_t y, const uint16_t *bitmap, int16_t w, int16_t h) {
  uint16_t RGB_bmp_fixed[w * h];
  for (uint16_t pixel = 0; pixel < w * h; pixel++) {
    uint8_t r, g, b;
    uint16_t color = pgm_read_word(bitmap + pixel);

    //Serial.print(color, HEX);
    b = (color & 0xF00) >> 8;
    g = (color & 0x0F0) >> 4;
    r = color & 0x00F;
    //Serial.print(" ");
    //Serial.print(b);
    //Serial.print("/");
    //Serial.print(g);
    //Serial.print("/");
    //Serial.print(r);
    //Serial.print(" -> ");
    // expand from 4/4/4 bits per color to 5/6/5
    b = map(b, 0, 15, 0, 31);
    g = map(g, 0, 15, 0, 63);
    r = map(r, 0, 15, 0, 31);
    //Serial.print(r);
    //Serial.print("/");
    //Serial.print(g);
    //Serial.print("/");
    //Serial.print(b);
    RGB_bmp_fixed[pixel] = (r << 11) + (g << 5) + b;
   // Serial.print(" -> ");
    //Serial.print(pixel);
    //Serial.print(" -> ");
    //Serial.println(RGB_bmp_fixed[pixel], HEX);
  }
  matrix->drawRGBBitmap(x, y, RGB_bmp_fixed, w, h);
}

void setup() {
  Serial.begin(115200);

  matrix->begin();
  matrix->setTextWrap(false);
  matrix->setBrightness(BRIGHTNESS);
  // Test full bright of all LEDs. If brightness is too high
  // for your current limit (i.e. USB), decrease it.
  //matrix->fillScreen(LED_WHITE_HIGH);
  //matrix->show();
  //delay(1000);
  matrix->clear();
  bilderanzahl=(sizeof(RGB_bmp) / sizeof(RGB_bmp[0]));
  Serial.print("Anzahl Bilder: ");
  Serial.println(bilderanzahl);

   Serial.begin(9600);
  while (!Serial);

  if (!APDS.begin()) {
    Serial.println("Error initializing APDS-9960 sensor!");
  }
  Serial.println("Detecting gestures ...");
}



void loop() {

  // clear the screen after X bitmaps have been displayed and we
  // loop back to the top left corner
  // 8x8 => 1, 16x8 => 2, 17x9 => 6
  static uint8_t pixmap_count = ((mw + 7) / 8) * ((mh + 7) / 8);
  // Cycle through red, green, blue, display 2 checkered patterns
  // useful to debug some screen types and alignment.

  if (APDS.gestureAvailable()) {
    // a gesture was detected, read and print to Serial Monitor
    int gesture = APDS.readGesture();

  Serial.print("Screen pixmap capacity: ");
  Serial.println(pixmap_count);
  Serial.println(counter);

switch (gesture) {

case GESTURE_UP:

Serial.println("Detected LEFT gesture");
display_rgbBitmap(0);
break;

case GESTURE_DOWN:

Serial.println("Detected RIGHT gesture");
display_rgbBitmap(1);
break;


  if (counter >=bilderanzahl){
    counter = 0;
  }
}
  }
}

Materials

Qty Description Price Link Notes
1 Material one 22.00 $ http://amazon.com/test
1 Material two 22.00 $ http://amazon.com/test
1 Material three 22.00 $ http://amazon.com/test
1 Material five 22.00 $ http://amazon.com/test
1 Material eight 22.00 $ http://amazon.com/test
1 Material twelve 22.00 $ http://amazon.com/test
1 Material eleven 22.00 $ http://amazon.com/test

Last update: January 19, 2022