Arduino 16x16 WS2812B RGB Matrix Animation Picture Frame - Tutorial

[@DisgruntledPigumon]

This makes me so happy. Coming from back then, you didn’t know about a new arcade game coming out, you were constantly surprised. And often in the most unsuspecting places. Like Q*bert first appeared for me in a gift shop at some highway almond farm rest stop. One or two at a time would pop up in a diner (back when diners or non-chain burger shops existed)... it’s so cool to just grab one of those old characters and have him running around on your wall.

[@ShaneClaussen]

Sincerely appreciate the time you took to build and post this project, it's extremely good, I really like the Michaels bit, the solderless connectors, the borders for the leds, and the overall simplicity of the build - it was a really nice set of trade offs - and precisely the version I have been searching all around youtube for.

[@BrainybitsCanada]

Hi Shane, thank you for taking the time to comment, it's always great to hear that the videos are helping others with their current or future projects. Thanks for watching!

[@ShaneClaussen]

@@BrainybitsCanada Yes, thanks again, just got our prototype up and running this evening and it looks terrific.

[@BrainybitsCanada]

@@ShaneClaussen If you can, please leave a comment on the website with a link or photo of your prototype, would love to see it! Here's the link: www.brainy-bits.com/arduino-16x16-matrix-frame/

[@ShaneClaussen]

@@BrainybitsCanada kzbin.info/www/bejne/Zp-3hHp4l8iHoJY and github.com/cadenclaussen/matrix

[@BrainybitsCanada]

@@ShaneClaussen That is so Cool! Great job! Everyone, go check it out. It's great to see younger generations taking an interest in building and learning technology!

[@TrentSterling]

Really nice result. Id be interested in seeing a version with esp8266 and maybe a basic web editor.

[@BrainybitsCanada]

Great suggestion for a future update I'll keep it in mind. Thanks for watching!

[@tuckerbarber7481]

I believe you could do the with the esp just changing the pin names, cause some esp32 are dual core and can run the same code as arduino

[@WideVisionMetalFab]

Nice! I had no idea an "addressable LED strip" existed! How did I not know this with all the time I spend on Instructables? I need to go do some reading on how to use them! :)

[@BrainybitsCanada]

:) that's funny, I get that all the time with friends telling me "I can't believe you didn't know that!?" I always tell them, that's why you're here, to know the stuff I don't know and vice versa... Thanks for watching!

[@bevx2080]

I found this AFTER I made a very very similar 16x16 matrix like that for my school project and it has a clock module so it shows clock AND I made an android app with color picker and a grid so you can draw on it and it displays what you draw on the display via bluetooth with actual no delay :) it turned out really good !

[@workinprogress9483]

hey would you be willing to share some ressources? i want to do a similar thing

[@ThatTalkingDogGuy]

Decided to build exactly this for someone for xmas this year. One Google later I find that you've already built it and written the code... I'm swiping this, thank you. lol

[@BrainybitsCanada]

Go for it :) Thanks for watching and good luck with your project!

[@ThatTalkingDogGuy]

@@BrainybitsCanada Thanks. It's coming alone really well. Code worked immediately w/ the pre-built 16x16 "BTF-LIGHTING WS2812B" matrix from Amazon. Going to use GIMP to turn some more character graphics into arrays. Added a piezo, and coding in game sound effects (w/ toggle switch to mute). Currently printing the grid, which flares somewhat in order to fit a larger shadow box. Thanks again for sharing such a great tutorial and code. Saved me SO much time

[@timhynde8611]

Nice work, you get a thumbs up and subscribe, straight forward without lots of dead time talking about nothing, nicely done.

[@malcolmmackenzie9645]

THANK YOU so much for this. I've been looking for someone who's example contained matrices for RGB LEDs! Yours was exactly what I needed to see!

[@ElectroLund]

How did you go about converting your images into the byte arrays? Is that a util on a PC? BMP format hacking?

[@hippynurd]

I recently built a LED matrix with ws2812 LEDs, and after building it (and going to a bunch of extra effort to make my display able to be 16x16, or 8x32, and making a bunch of connectors, and soldering a bunch of wires, I realized that you really only need to carry the one data wire from one strip to the next strip, and you can power each strip anywhere you want, so there is really no good reason to run all those wires all over the place, just solder the power wires where ever its easiest, then run the one data wire to connect one strip to the next.

[@Navilin]

Really appreciate the video and the example code. Ending up making two displays due to an accidental double order.

[@BrainybitsCanada]

Wow that's pretty cool, one is hard enough! Thanks for watching!

[@ElisabethMilaRose]

Thank you for the visual of the RGB matrix! I was just looking for a way to make my LED cubes realistic in one of the tech game types in my developing "Nature Hunter" video game, I'm going to take inspiration from the end result to have an LED matrix look :)

[@RND-USA]

So cool! Have you made a wifi clock with this display yet?

[@Dancopymus]

Very cool! What kind of material is it that you used to make the squares to fit the LEDs? Is there any material that is soft to cut using, for example, a blade? Because I don't have cnc!

[@libortelupil7647]

What have you used to generate those HEX values? I really don't want to write them manually :X.

[@BrainybitsCanada]

Check out this tutorial: kzbin.info/www/bejne/oJzKaIdtn9F8sLc

[@libortelupil7647]

@@BrainybitsCanada That's just a link to this video and there's nothing about how did you get them... anyway I found this website in meanwhile and it works ok: javl.github.io/image2cpp/ In the section 4 choose Horizontal - 3 bytes per pixel

[@BrainybitsCanada]

@@libortelupil7647 Sorry, I pasted the wrong link... Here's the correct one: kzbin.info/www/bejne/h2LMh6eChrSNhas Oh yeah, here's the link to the tutorial page as well: www.brainy-bits.com/post/how-to-convert-images-to-arduino-arrays-values-for-use-on-displays Cheers!

[@OfficialRAABITRON]

This video has been such a huge help! Wondering how this can be adapted for more than 1 panel using this method, any advice? I've hooked the second panel into the data out of the previous panel. Everything displays fine on the first panel but the second panel will display garbage every other frame change of the character. Any help would be appreciated!

[@Kiotenhariyo]

Awesome and thank you! Your ideas and methods helped me to set up a work-flow for creating animations in aftereffects and formating animation frames for sending data over serial from PC to an Arduino (Leonardo ProMicro). Again... thank you for your inspiration.

[@BrainybitsCanada]

Thank you for taking the time to share your experience, always great to hear that the videos are helping others. Cheers and hope to be able to provide more tutorials soon.

[@nutmeggaming11261]

@@BrainybitsCanada, jeez, you have a lot of dedication. This comment was a year after you posted the video. You earned my subscription.

[@DylanRainbolt]

Any ideas on how to save a set of animations and then have a new set appear after clicking a next button?

[@GreenOnionBrother]

Thanks for the tutorial, helped a lot. However, I'm using an LED matrix 64*32 and I have a flicker in between frames. A split second where all the LEDs are turned off. Is there any way to prevent that, because when I use brighter animations it is a little hard on the eyes.

[@kenheitmueller69]

i found the tutorial by searching your website but don't see a link to the Arduino sketch. can you help? thanks.

[@theannoyingviolinist4941]

Did you put a 240 ohm resistor on the data pin?

[@CaptZenPetabyte]

This is awesome! I am trying to work on an internet connected / wifi sign I can use as a door indicator, maybe show a pic of a telephone when Im on a call, or a On Air (stop sign) when I am in a meeting ... I shall use this as the foundational inspiration. Thanks fr sharing!

[@christyinnovations]

Impressive project, thanks for sharing. I was thinking ESP8266 as well because of the memory. If you went down that path you could have a character animation when you got a new subscriber and a different one when you got a comment and . . . . well you get the idea. Of course at some point you would have to add sound effects.

[@BrainybitsCanada]

I've got a project in mind to make one of those KZbin/Facebook/whatever notification panel, which would use probably the ESP8266. Just gotta find some time to figure out how to make it :) Thanks for the comment and for watching!

[@christophergraf5929]

Great video! I can't wait to try and make this. Can you explain a bit more about when you say you 'cut' the USB at 3:30?

[@Dancopymus]

He meant that he had to use the Arduino's 5V USB Input because the LED strip needs to be powered with 5V.

[@christophergraf5929]

@@Dancopymus So he is not actually 'cutting' anything to make it fit? I am not an engineer by any means, so I just want to make sure I understand everything as much as possible. I already got all the materials :)

[@Dancopymus]

@@christophergraf5929 Yes, he cut 256 (16x16) squares with a CNC to fit each LED.

[@jstro-hobbytech]

What power is your cutter? I'm building a cnc but I want to add a laser module

[@alikeyhani9080]

It was terrific! I learned a lot of things from it.

[@СашкаБелый-ч6м]

Is it 5x5mm holes in white panel (at 1:52) created by laser cnc? Is it acrilic glass?

[@vamshisaikrishnaarelli9778]

6:24 instead of 16x16 if I want to make 8x32 or 4x64 display.. how should I change the code??

[@rltxandroid]

I'm also looking for this answer.

[@prembo6962]

How many leds were in 1 meter in the addresable leds you bought? Cause I dont know how many should be in a 1 m strip

[@kurtwerbrouck5439]

Nice done. is there a link for downloading the lazercutting files?

[@pratherat]

Have you considered creating a color palette of 256 colors, then using a single byte to represent each pixel? Should be plenty of ram for that.

[@robincrosscarpenter1]

Could the micro bit board be used for this?

[@DylanRainbolt]

Do you know is it possible to make this happen so that you can have a 100x100 matrix and then stream a video to the LED matrix using a raspberry pi or arduino?

[@alduinc]

around how many frames do you think can fit in the UNO? thinking of recycling parts I already have, and was wondering if the UNO can hold enough frames to create animations. also, how close are the led used? is that 60Led strip? hoping to create a smaller one for my desk, would 144 led strip work better for that?

[@marro643]

The uno has 32,000 - 500 = 31,500 bytes of flash memory available for use each frame is 3 * 256 = 768 bytes in size 31,500 / 768 ~ 41 frames, but then there's probably not enough memory left for the program, so I would say at most 40 frames. Also, 144 led/meter strips are too wide to create squares with without overlapping them.

[@andys8805]

Could you use Blynk to create a controller on your phone to select each different animation to play instead of just having them cycle? Im totally new to Arduino coding and have made a 30 by 13 LED strip wall and wanted to later connect it to an Arduino instead of a default controller to add more custom effects and animations. I am trying to get my head around how you can use an app on your phone to choose the different effects or animations.

[@Pistolonly1]

I would like to know if you sell those laser cut frame. if so, I would want to buy some

[@aepfelpfluecker]

Hello, is there someway i could download the code used in this project? also, what power supply do you recommend ?

[@sub-arts128]

great project. can you power with 10A all 256 leds with white (R,G,B=255) at the same time?

[@bluealteran4599]

What material did you use for the black grid on top and the white grid for the led mounts?

[@BrainybitsCanada]

Both were 3mm acrylic panels, the black one has a matte black side. Thanks for watching!

[@DylanRainbolt]

Any ideas on how to save a set of animations and then have a new set appear after clicking a next button?

[@monicahouston6753]

what addition is the Arduino UNO ?? like is the Arduino UNO REV3 [A000066] be ok?

[@yz8302]

What kind of laser cutter did you use on your project. I would like to buy one . Thanks

[@BrainybitsCanada]

It's a generic China 60W laser, Ebay / Aliexpress type of laser cutter, works great and cost way less than the name brands for sure. If you look for one, make sure you get one with a 1200mm laser tube, since that is the length that a 60W should be. Thanks for watching!

[@BeamDeam]

I'd like to see this project with the ESP8266. May you could use it as a clock or you could change the animations over your phone or add new ones :)

[@Bentendo2372]

So you can control every single LED with only one digital Output?

[@zh4k]

Question, what do you think the minimum grid width is feasible when you laser cut those squares out? Like, I'm thinking of doing a higher resolution build using P3, p4, p5, or p6 and I think the choice comes down to how narrow I can get the grid without being to fragile. Thus, either 1 to 2mm thickness. What did you go with, and how thin so you think I can go, and based on that, what is the smallest pixel size I can use with such a grid thickness? Also, what was that black material you laser cut that goes on top?

[@marks99999]

You're talking about HUB75 Matrices. The pixels look square, they are not, only the plastic is, so you can get a way with a less fragile circular cut. Also keep in mind if you want to laser cut a grid for a p1.875 or smaller matrix, you can cut it in multiple low power passes using lower lower instead of a single higher power pass and thereby lower the chance of thinner sections melting. Using a circle instead of a square will also help achieve your goal and is easy to test on a small scrap piece of opaque acrylic.

[@learnelectricalinmarathi2803]

Can we run any image on this matrix means can you run yours image on that

[@MikevomMars]

You forgot to mention what kind of power supply would be suitable - 5A? 10A?

[@shkhamd]

what laser cutter is that?

[@taranagnew436]

can you plz provide me with the links to buy all the stuff?

[@taranagnew436]

what's the panel you put in first in 4:22?

[@vax_ta]

can u make this but controll with app ?

[@timm2020]

How many of these LED Matrix panels would I need to make a sign 48"H x 72"W?

[@rltxandroid]

Let me see if I can help you. It depends on how many leds/meter you are using. If it is 60/m, consider 16,6mm pitch and 10mm wide.

[@juanospina1529]

Hi, i have a question, in my case I have a RGB of 4 pines, there are any form that i can change the programation?

[@felixwaltl5275]

hey. nice video.so do you still have the file for the wood matrix ? or just the dimensions. and how does the platte called wher you put in the leds. thanks for the help. grate work👍

[@jkbanga971]

Hi there , Can you tell me how to convert the any Picture to any array value... Please

[@Texas1FlyBoy]

Did you check his website? www.brainy-bits.com/create-arduino-array-from-pictures/

[@TechGuyNelly]

Can you use a nano arduino?

[@taranagnew436]

if i wanted to do the same thing you are but on a 32x32 led matrix, what would the code look like?

[@BrentEvjen]

Hey! I love the way you did this! I’ve been racking my brain trying to work out the box, I don’t suppose you could share your laser cutter files? 🙂

[@fullbugg]

I am with you Brent. The cutter project would be a great thing to have.

[@carloszunigaaquino8055]

What are dimensions on the grids(base and columns)?

[@rostyslav1499]

Thank you! In great detail👍

[@姚荣]

Up to 30 images can be added, and the first image after 31 will be disordered

[@aqiiiiiiiil]

How much is the power draw. Do I need large Power Supply for this project ?

[@ggsggo]

This is great but it would help if you share a link or at least a name given to the tutorial on your site. I tried sifting through and searching but I could not figure out how all your stuff is categorized or organized. After sifting through 72 tutorials I gave up.

[@BrainybitsCanada]

Here it is: www.brainy-bits.com/arduino-16x16-matrix-frame/ I will put a link in the description from now on :) Thank for watching!

[@BeWhoYouWant2]

please share the laser cut file for the frame.....

[@MPElectronique]

Peux-tu mettre le lien du cadre chez Michaels. Merci

[@croydon21H]

Please can you help with the color codes? HTML RGB hexa codes are no way close to what i am expecting

[@MPElectronique]

Jai acheter le produit frosted glass jai essayer de le mettre sur une vitre de cadre pour photo.. ca pas fonctionner.... :(

[@marcopolofernandes807]

it is possible to use LEDedit or gladiator to control the matrix?

[@nomendoza93]

Thanks for the knowledge 👍🏼

[@germainmichel6892]

Genial !!!! merci pour ce tuto ; ou pourrais je trouver le code pour ce sketch arduino?

[@BrainybitsCanada]

Don't know if you found it already, but here's the link to this tutorial: www.brainy-bits.com/post/making-an-arduino-animated-frame-with-256-rgb-leds Thanks for watching!

[@sebastianmollinedo6953]

Nice video !, excuse me, do you have your code ?

[@jstmag]

would be nice if it was easier to just purchase the matrix spacer plates somewhere

[@HalbesRechteck]

I tried it on my Nodemcu, it worked rly well. But after a short time the array or so broke up? So sometimes the picture got ripped off and idk why - can’t fix it. Maybe it’s the delay or the data connection? Maybe you know what happend (sry for the english im from germany :D). Btw thank you for this great project !

[@JaccobbRomero]

My inner geek just pulled a Daffy Duck...

[@layalibijoux]

I really appreciate your video, but i need to know about the power supply you're using?

[@mohammedamineelyahyaoui1276]

Bro, 5V 10 A

[@layalibijoux]

@@mohammedamineelyahyaoui1276 ml9itch asat had transfo o wahd lmrid galia dir chargeur dyal tel khassr

[@mohammedamineelyahyaoui1276]

@@layalibijoux khuya ana l9itu f garage 3ellal b 120 dh

[@mohammedamineelyahyaoui1276]

@@layalibijoux chargeur a khay dyal tele maghayche33elch lik les leds kamline hytach l amperage taye7

[@layalibijoux]

Sat bi3 lia hadak brojola neatk fih 300dh mhtajo lwahd l pfe

[@adityagautam1707]

How can I use Bluetooth module to make animations?

[@drillzoom668]

Wäre is The Arduino Code ?

[@ernestorivero9909]

Como lo guardarías en una memoria sd

[@arnoldapache3378]

This looks incredibly good! I would like to rebuild this project. I have access to a lasercutter through my university. Would you provide me with the necessary files / code or the dimensions for the grids?

[@BrainybitsCanada]

You can find the code and more information on my website here: brainy-bits.com Will check the dimensions of the grids and get back to you. Unfortunatly I don't have the original Illustrator files anymore.

[@ShaneClaussen]

Having just used a laser cutter for this I have both the SVGs and the dimensions I used if anyone's interested (based on a 60 LED/meter neopixels). I used a 302mm x 302mm size to fit into the Michael's shadow box, and then centered inside that a 264mm x 264mm grid of squares (I arrived at the 264mm as each led in the strip was 16.5mm, so 16.5 x 16 = 264). For the LED panel, within each 16.5mmx16.5mm square, I centered a square 8.5mm x 8.5mm. For the 3 panels above the back, I used the 302, 264, and 16.5 mentioned above, and then centered a square within the 16.5mm that was 12.5mm x 12.5mm.

[@jefffrilot9667]

@@ShaneClaussen I'm interested in the SVGs

[@stuntpk]

@@ShaneClaussen Do you still have the SVG files for this?

[@ShaneClaussen]

@@jefffrilot9667 I apologize Jeff - I guess I missed your original post - I feel bad about that. See below.

[@Bestape]

Frost the glass! Thank you.

[@MariaBethaniaCabrera]

I love it! Sadly I can't find the code in your website. :(

[@BrainybitsCanada]

Here it is: www.brainy-bits.com/arduino-16x16-matrix-frame/ Hope that helps and thanks for watching!

[@Gaatech]

Nice work how do you go about making the images and then writing the code for them

[@BrainybitsCanada]

Yeah that was the 'fun' part of this project. Found a way using photoshop and another software to get the array values. Will make a quick follow up tutorial on how I made it work. Should have it up this week or the next. Thanks for the reminder and for watching of course.

[@taranagnew436]

can you plz provide me with what you searched up for the digdug character?

[@BrainybitsCanada]

The website I used to get the arcade sprite is: www.spriters-resource.com/

[@whodaFru4551]

where did you get this awesome pacman tshirt? :D

[@BrainybitsCanada]

Had it for a while, can't remember where I got it :). Thanks for watching btw!

[@taranagnew436]

what would i type in the search bar for donkey Kong facing right and throwing a barrel?

[@BrainybitsCanada]

I think you can find it here: www.spriters-resource.com/arcade/dk/sheet/45989/

[@CodfishCatfish]

Wow, Bomb Jack, Q'bert and Dig Dug...... what sort of a geek knows these characters..... after 40 years.......eeerrrr " that would be me"

[@The_Mimewar]

This is fantastic!

[@rtml_aerial]

What are dimensions on the box?

[@BrainybitsCanada]

The box used is 13 inches by 13 inches. Thanks for watching!

[@demon96gt7]

can you give me the cod ? i want to try on led matrix NOt RGB just simple please i need it for my project . If u want to help me

[@hansdegroot652]

Great shirt!!!!!!!!

[@MPElectronique]

Bravo tu es un vrai pro!!!

[@BrainybitsCanada]

Merci, pas un pro encore, mais je me debrouille. Merci pour le commentaire et le visionnement!

[@ernestorivero9909]

Me gusto muchas gracias

[@o.pedrobenetti]

4:14 what a ilusion

[@hoangbui4892]

hi, i'm doing this project like this. But I don't know how to write code to do it. Can you show me your code. Thanks.

[@BrainybitsCanada]

You can find more information, including the code, for most of my tutorial here: www.brainy-bits.com/arduino-16x16-matrix-frame/. Thank you for watching.

[@jacobhn2]

I am trying 5x5 pixel, i am using “1000000001100000000111111” this will show an L on my pixelboard. I use 9 collors and 0 as black.

[@layalibijoux]

Hey can someone show me a simulator where i can simulate these kinda projects?

[@tzq33tdq]

I made a 16x16 with RGB LEDs and shift registers with a z80 CPU a while ago. It was very badly made and barely worked 😂

[@BrainybitsCanada]

I remember the Z80 was pretty cool back then. We forget sometimes how hard it was to make something before the arrival of microcontrollers like the Arduino. Thank for watching!

[@martijnvangorp]

Great work !!!

[@procad23]

Nice work. Sir can you change this animation with 1) IR remote 2) forward and reverse push buttons, brightness controled by potentiometer. Please give me the two project code.

[@siroy1214]

it is possible to use a raspberry pi instead of an arduino for the same setup?

[@Xavier-qp7it]

Where could I buy this panel?