Creating Beautiful LED Art with JavaScript – Bryan Hughes – JSConf US 2019

Creating Beautiful LED Art with JavaScript – Bryan Hughes – JSConf US 2019


Creating Beautiful LED Art with JavaScript Bryan Hughes PARISS: All right, everyone. We’re back. How is everyone feeling? Really? How is everyone feel something
[ Applause ] Much better. All right. So, for our next speaker, they’ll be speaking
about creating beautiful LED art with JavaScript. This is really beautiful right here. Can we give it up for Bryan Hughes? [ Applause ]
BRYAN: Thanks, everyone. LED art is something I’m pretty passionate
about. I got involved doing this three years ago
for various festivals and things of that nature. I wanted to talk about it because I think
there’s a lot of cool stuff here. By the way, I have a lot of resources to go
along with this talk. You can find it at the URL at the bottom of
this slide. And don’t worry, this URL will also be on
the side of most of the other slides in the presentation. So, like LED art is something that I find
really fascinating in a lot of ways. Because it really is a hybrid of technologies,
specifically technology that we already tend to know, and art. And I think there’s a lot of misconceptions
about what art really is. We tend to think of it as this world that’s
just completely separate from technology. We kind of view them as having no overlap
whatsoever. But I don’t think that’s true. I think there’s actually quite a bit of overlap. Because when we really dig into it, art is
quite technical, when you look at it. We just don’t see or think of that. But it really is. For example, have you ever looked at how paints
actually work? We ought to think of painting as one of the
sort of classic arts and we think of it as an artistic medium. When we look at how paints work, they are
deeply technical. There are all sorts of different types of
paints that have different effects, cure differently, different textures, different material properties. There’s different ways you can mix them, different
ways they age. There’s science behind paint. There’s a lot of technology behind paints. And this is true of most art that’s out there. There’s quite a bit of technology. People who create art are really good at their
craft. They’re really good at the technology of their
arts. But there’s still a difference. We do classify these as different things for
a reason. So, why is that? So, the question of what is art, how do we
define art? That’s one of those questions that’s sort
of puzzled philosophers for pretty much all of human history. And I don’t have to claim to have an answer
to that question in its entirety. But I do have one small claim to make to sort
of get at the edges. What I would say about art is that we create
art by using technology to express emotional truth. And this is what separates art from the typical
ways that we use technology. And what we think of as technology. Because in the case of technology, or in our
case what we think of as technology is really we’re thinking about products. We’re thinking about using technology to create
a product, usually with the intention of generating a profit. Or perhaps with users in theory, some magic
Silicon Valley math generates revenue. But we have a concept of revenue at the end
of the day that drives it. And with art, there really isn’t that concept. Our business is a weird thing. We’re going to set that aside for a moment. But with art, we’re not trying to create revenue. That’s not our intention. Our intention is to express truth about ourselves
or the society or the world. It’s kind of an inward look and taking it
out. And we express this outside for what is inside
of ourselves. The way we do that, we first have to master
our craft. We have to understand the basics of what we
do. And for LED art specific, like this piece
here, there’s some technology that goes behind it. And so, the first thing I want to talk about,
I want to talk about how we can create visualizations that look kind of like this. And we have to start by talking about color. And color spaces. And specifically I want to talk about the
HSV color space. Which is the hue saturation value is what
the acronym stands for, color space. This is very similar to one you might have
seen on the web, HSL, hue saturation luminous. They’re almost the same, there’s a tiny difference
to them. But this is pretty important for understanding
color and especially for doing art with it. And to explain why we need this, first let’s
talk about RGB. We all know what RGB is, red green blue. We express it in the space in terms of how
much red is in it, how much green and how much blue and they add together to create
color. We use this model because RGB is mechanically
how we create color and work with color with various visual devices. So, for example, with these LEDs, the way
we create a specific color and hue is actually three LEDs embedded in it, red, green and
blue. And we change how bright those three are to
create any color. Same with LED screens, projectors and anything
we can think that have creates a visual device. In fact the oldest RGB device is our eyes
themselves. We have three nerves that are light sensitive. And specifically sensitive to relatively narrow
ranges of light. One towards green, one towards red, one towards
blue. RGB isvery important. We user it for color production and color
sensing, it’s a mechanical thing. But it’s not how we think about color. We look at my pants. I don’t look at this and see equal amounts
of red, green and blue. That’s not what I’m thinking. I see white. Right? We don’t think in terms of color of RGB. This is where HSV is really, really useful. Because HSV expresses how we think about color. So, to illustrate that, let’s talk about it
a little bit. Let’s talk about hue first. So, hue is kind of like the base color in
a lot of ways. We measure this in degrees from zero to 360. There’s mathematical reasons, graphs, coordinates,
whatever. We’re not going to talk about that. This represents sort of the spectrum of color
and spectrums. The color there is are similar to the colors
from the hue here. Same thing with a rainbow. We can start at zero degrees. And at 360 degrees, by the way, same as zero
degrees, circle. And we get a red color. But then we go in and shift the hue around
a little bit and we can see the color changes. We’ve gone up a little bit. Oh, that’s not great. [ Laughter ]
And so, like, we get a little bit of a color there. We can shift it further. We get a blue color. We kind of go further, we get a purple. And then eventually we come back around to
red. And so, this is what hue is. It’s sort of like a base color. Sort of a primary color in a lot of ways. So, the next step we have is saturation and
saturation is kind of like basically how washed out is this color? If you’ve ever done any sort of image editing
using Photoshop or light room, you’ll notice a saturation slider. You bump it up to make it more colorful. This is what it’s doing under the hood, messing
with the color space. At 100%, saturation is measured from zero
to 100%. 100%, this is full color. This is as much color as you can get. Here we have this fire engine red kind of
color. We start to drop that down and we see it getting
just a little lighter. Starts to turn into sort of a pinkish. It’s not really a vibrant red anymore. It’s lacking vibrancy. And we keep going all the way to zero. And eventually we end up with white. There’s a complete lack of color. In fact, taking the saturation to zero on
any color will give us white as it turns out. Now, similar to saturation is the value. And in a sort of it’s actually mathematically
related. We’re not going talk about the math too much. But we think of it as how bright is the color. Again, we have this really bright colored
red. But as we start to drop this value from 100%
to zero, we see it just getting dimmer and we’re sort of getting a maroon color at about
50%. We take it all the way and then we can get
to black. And so, these are the three channels that
make up hue, saturation, and value on a color space. We put it together, we can create anything
we want. Say we want to create a lilac sort of color. That light purple. My hair is purple, I love purple. Purple, I happen to remember, is kind of over
here. But if I didn’t remember where purple was,
there’s not that much to go through. Mess with the slider, find the color you want. This is the base color. But this isn’t a lilac. Lilac is a fairly washed out color. That tells you that we need to drop the saturation
on that. We will take the saturation and put it over
here and thus we have a lilac color. So, we’ve got that, we mess with hue and saturation. But then the next thing we can do is we can
just make it, you know, darker if we want to. We can make it dimmer. Let’s say we’re having two color themes for
a — we’re doing a light and a dark. The nice thing about the color space, we can
take different colors and make them brighter and darker, but they are the same color. It’s dark colored, but it’s the same thing. They’re super, super related and all the I’m
doing is changing one number. in RGB we have to change it. I have no idea what this is in RGB because
we can’t reason about RGB. But we can about HSV. And so, this is a great thing. Like HSV color space provides a really great
sort of foundation to start doing any sort of color work in art especially but even in
products too. HSV is sort of a universally useful color
space, I think. But that alone isn’t enough to get us an animation. So, how do we get to something like that? Well, this is where we do a little bit of
math. Now, not particularly complicated math. This is like middle school trig level, not
advanced calculus or anything. We’ll do a review because, you know, middle
school was a long time ago. So, it turns out we can do all kinds of animation
using sinewaves. This is the full formulation. Sometimes we see an abbreviated one. But this is all of it. We have a function. This is sort of our output. We have an output that is some function of
a variable that’s an input. For now, it’s abstract, call it T. This could
be distance. It could be we pass in say the value zero
for the first LED, 1 for the next, 2, so on and so forth. It’s a function argument just like we have
in code and so, then the output is going to be A times the sine of omega t plus phi plus
V. What do all the variables do? Start with omega. Omega is what’s called the angular frequency. Sounds kind of technical. But essentially what that means is how fast
or slow is our sine wave? Right now we have an Omega value of 1. But we miss it with, start to increase, we
can see our sine wave starts to get busier. It just starts getting faster and faster. So, next up we have phi, this is the other
part in the sine wave. This is an offset. Where does the sine wave start? We mess with this and we see that sine wave
sliding around on the screen of it. I don’t use it myself, but I want to include
it for completeness sake. Then next up we have A, which is kind of a
scaling factor for the sine wave. Right now this is going from negative 1 to
1. But if we dropped this to, say, 0.5, we could
see this gets a little thinner. And it’s not as tall of a sine wave. And then last up we have the and this issort
of a final offset, like a constant offset and which allows us to shift our sine wave
around the graph like this. With these parameters, we can combine them
to create all kinds of stuff. Now, there’s some interesting things that
happen at edges, sort of the edge cases to this. So, for example, I’m going to scoot this you
were a bit, let’s say we drop our angular frequency all the way to zero. We do that, it’s getting slower and slower. Eventually we just get a straight line. And this can be useful if we ever need to
do something constant or unchanging. But there’s another way that we can achieve
this too, though. We can also take A, you know, that scaling
factor of the sine wave, and drop it to zero. And we also get a straight line. Once we have done that, we get the straight
line, we can use B to increase or decrease how strong it is. So, you can think of B as sort of an overall
brightness for constant, and A is an overall constant for the changes. How does this map to LEDs and color spaces? Well, basically like this. So, here we have thatexact same formula. Instead of F and T, I say color value of X. What this is saying is we have a color, the
value channel in HSV, that value, that channel, we’re going to set if based on the sine wave. And it’s going to be a function of X which
is distance, again, which LED are we talking about here. So, we can see at the bottom we have kind
of what the LED output looks like. When we vary the value across the distance
according to the sine wave. And the software powering the LEDs on the
screen, a lot of it is shared with the power here. It’s sharing the same thing. By the way, it’s really fun. And really hard. So, we can go in and we can change the angular
frequency and according to distance and if we increase this, we can see we start to get
these tiny little waves. Like almost just a couple of dots. But then as we spread it out, we can see them
getting longer and longer. And eventually we end up with just a flat
line. Now, there’s still a little bit of color here. You might be wondering why that is. So, well a perfect sine wave, this is essentially
like floating point math. These are floating numbers between negative
1&1. But a colored space, including HSV, we have
a value that’s been zero and 100% which under the hood is represented as zero to 255 just
like RGB. We have to map those. The way I set this up is so that negative
1 is equal to 0% and positive 1 is equal to 100%. Right now we’re at basically 50% brightness
and this is a flat line. We can use B to make this bright. About as bright as it can get and also turn
it completely off. And it’s a weird thresholding. It’s actually a little bit weird. But nonetheless, we can still do all of this
kind of work. We can control how the LEDs work in across
distance and we can also make it uniform. Now, what if we decided to set value as a
function of another variable. I mentioned distance as one, but we can do
it for something else. Let’s make it a function of time. With time, we get something a that looks like
this. We can see I have where the current marker
in time is shifting across the graph. Again, positive 1 is 100%, negative 1 is zero. You can see the lovely fading in and out sort
of animation. Again, it’s a sine value. And we can change this just like before. We will increase the angular frequency and
we get something that’s flashing really fast. And so, when I look at something like this,
I’m kind of thinking like this kind of makes me think of an emergency warning light. This is an intense animation. It’s a little bit of anxiety producing, a
little bit in your face. So, we can use these mathematical parameters
to evoke an emotional mood. We can use light in society, we have those
correlations, fast, flashing red, that’s a warning sign. So, I can evoke a little bit of a mood just
by setting a couple of sine wave parameters. And I can also slow this way down. And so, this is just like very slowly changing
over time. And if I picked another color, say, then,
you know, this could be a very calming. It’s almost like a sort of breathing a little
bit. So, we can evoke a different mood by just
changing the rate on this. But we can effect this and do even more complicated
things. We can drop A to, say, half. And B we can bump up so that’s sit up top
like that. And here we go to full brightness with a little
bit of clipping. Let me drop that a bit. And down to like half. So, it never gets fully dark. But we could still see a changing and just
sort of morphing a little bit over time. Now, what if we made this a function about
time and space? Turns out we can do that with this modification
of the formula here. So, now you’ll notice we’ve added a little
bit more to the sine wave. We have Omega T times T plus Omega X times
X plus phi. And we combined them together and we get this
roving wave pattern. With this, you can see how this is assembled
in the art piece here. Yeah, we can slow this down and you can just
this is barely moving across. Again, this is a very kind of soothing slow
sort of animation. We can also make it go really fast. This is kind of zipping across. Now, what’s interesting here though is because
this does until we go away, they always see some light. It’s a little bit of a different mood than
we had on the previous in which we were flashing it really fast. It’s not quite that, you know, warning, warning
kind of feeling. To me this just feels more like energy and
movement. Again, by the tweaking of this, we can get
slightly different emotional feelings out of it. And we can also, you know that’s changing
how fast it is. We can also change this distance and change
it, again, like are they little things? We can take this down, now it kind of makes
me think of like ants marching along or something like that. So, you can get some really fun stuff just
by, again, tweaking some mathematical parameters. All right. That’s how we edit the value channel and that’s
kind of what we can do when we’re playing with the value. What about the other channels? Saturation, again, is very closely related
to value in practice. Just sort of an inverse. Here we can see it’s fading from red all the
way down to white. And same thing, we could make this fade really
fast or slow. We can also give it how to change over
distance and again we get this sort of roving wave pattern that we saw before. It’s slightly it’s a different way of doing
it mathematically and gives a different effect, but we can still do that. And we can also do things like drop that down,
bump this up. Now we have it going from red to pink. It’s like this could be a great one to do
on Valentine’s Day if you celebrate that with the red motif going on. We can get different things going on by tweaking
programmers in we saw saturation and value. What about hue? Hue is different. It’s less related. We get a different effect. I want to start here. We have everything set to zero. Nothing is changing over time. And we have B set in the middle. The way this is map 140 zero degrees is negative
1. And 360 is positive 17. Right now we’re at the middle, this is the
light blue color. And you will see it just shifting across the
hue. Like we saw before. Again, there’s weird scaling I have with B.
Just negative numbers with my algorithm. But we can kind of just set this to a solid
color just by changing the B value in the equation. If we want to just set a color, this is how
I do it. But then let’s start to introduce some variance
over time. Let’s just increase this to 1. And we do that. Now we see it just starting to slowly cycle
through all the colors. And in and of itself, this can be kind of
an interesting animation because, you know, we’re just getting this changing sort of vibrancy. And we could make it go slow, we can make
it go fast. And then we can also introduce some distance
over time. Or we make this a function of X. And this is where I think this gets the most
unusual as far as these equations go. Because with this, we get this sort of like
roving rainbow color. And this can be a pretty interesting one in
and of itself too because we’re changing the hue over time. So, it’s like we’re going around that circle
of hue all the way to the end. And the only way we can make that faster or
slower. What also gets interesting is let’s say we’re
going to drop this down to here. What this is doing is sort of clamping what
part of the circle we’re on. You notice we don’t have the all the colors
anymore. We’re not going red it to red. We’re sticking in one part of the circle. This is gonna be, I think, maybe 120 to 180? Like 240 degrees? Something like that? We’re taking like the slice of colors in the
middle. But we can shift this up and down. If you shift it down, we’re gonna mostly see
some more colors I have that weird clipping thing. But here to the top, we’re mostly in the blue
purple side of the spectrum. So, we can sort of clamp into certain ranges
of colors and not get all the colors as well by just tweaking a few more parameters. And so, that’s how the three color we can
vary the three color channels to create animations using sine waves. However, it turns out in most cases there’s
usually a fourth channel. When we talk about color spaces, we pretty
much talk about three chances, RGB, we talk about three. But in practice, there’s always four. If the fourth one is alpha or transparency. We talk about the RGBA, or red, green, blue
alpha. We can do the same in the other color space,
HSVA, hue, plus alpha. We can add transparency to these. Here on the next slide, I’m doing exactly
that. In this case, it’s a black background. This looks exactly like with value. I take parameters and we get the same thing
we saw when we were tweaking value. But this is trans parent so it means we can
put a layer underneath it, composite layers together and put in multiple waves. I didn’t put all the controls on here, it
would have been a lot. But we have the full controls are for the
alpha channel on the top and the B on the bottom. And we have the roving wave, make it faster
or slower, we can change the distance. And now I’m going to bring in the bottom layer. The bottom layer, by the way, I have a hue
of 180 degrees, a teal color. As we bring this in, we start to see, we get
a little bit of blue mixed under the red. With this, we have two separate colors we
have two completely separate waves doing their own thing layered in together. And so, by the way, the full set of equations
running on this looks kind of like that. It’s a lot, I know. It’s hard to read. I don’t like looking at it. Let’s look at code instead. This is a little more what we’re used to. This is a little friendlier looking. Like, I can do this. In this case, it’s an array of colors. But accept instead of sending hue to a constant,
we’re sending it to a function. We can tweak those parameters and then layer
them together. When we look at this piece right here, for
example, there’s three layers going on. The very bottom layer is just a solid blue
color. It never changes, it’s just sitting there
being blue. And on top of that, another layer set to green. But what I’m doing with that, varying the
alpha over time. Nothing with distance. Just going from fully opaque green across
the strip to trans parent green. Fading from blue to green. You can see the color in there. But on top that have, then I have that sort
of roving wave pattern we saw in red that makes it look like it’s going over. And that’s how I created that animation. And I used to do this, the system, it’s a
little bit complex. But we can do all of this from JavaScript. This is one of the really cool things about
Johnny Five and node bots and that whole world is we can write some code that looks like
this. So, we can bring in a library called node
pixel written by A.J. Fisher over there somewhere. And taking in Johnny Five which there’s a
number of collaborators here on. And this node animations which I wrote, that’s
some of the stuff here. And mix them together. And most of the code is initialization. It’s import libraries, getting the node ready,
and the strip. And inside of the event, we’re going to set
colors. Create the layer. I created a helper method. Sometimes I don’t want to use those coefficients
directly. We create an animation, create a layer. And we composite that into a whole set of
wave parameters that we have a helper method for. And then from the wave parameters into a list
of RGB pixels. And finally set each pixel in our LED using
Node Pixel. This code is functional. I think it is, I didn’t test it. What can I say? But this should be functional JavaScript code,
a few bugs aside. That’s not very much code to get something
like this going. And like this is the thing that I love about
JavaScript and why this is so powerful is that once we have this in JavaScript. Once we’re inside of Node, which is where
this is running, that opens all of the web to us. Specifically, we could do something like this. Now, in this case the screen that we see here
isn’t quite I think I can do this. So, most of this the slides were synced to
the specific page all right. I can’t show you. That’s all right. But there’s a Node server running on the Raspberry
Pi that I have kind of hidden behind here which is ultimately controlling this piece
right here. And this is the control panel. This is a web app. You can load it this up on your mobile phone
if you’re connected to the Wi Fi. And we have this one animation, let’s just
set it to rainbow. Now we have we can see it cycling through
the hue. That’s a nice animation as well. We can make it go really fast like it’s just
really chugging along. And again, just controlling this from the
web application. We can go there’s just like a pulsing of
color. We get that reading effect. I kind of like this one myself. We can just cycle through colors as well. Like, you know, we have this now in a web
application. It’s open to the Internet. And once we have this, we can like bring people
in. You know, we can create art pieces that encourage
other people to come and interact with it. Like, this is one of the things I think is
so exciting about a lot of art coming up these days is that it’s interactive. It encourages people to engage and explore
with it. There’s a lot of profound ways that we can
create experiences for people. And so, the thing I want to come back to is
where this is all about doing art. And I want to encourage all of you to express
yourself. Like, art is really, really important. And I personally think that art is the single
greatest thing our species has ever created, ever. Like, I think art is what makes us so unique
and I think it represents the best side of us. And so, I really encourage all of you to try
it out. You know, we have these skills, we have these
technology skills. With if we just rethink how we’re going to
use them, we can use it to create art. Think about art, and one of the reasons I
think it’s so important though is it’s about expressing emotional truth. And to do that, we have to understand ourselves. In order to express what we’re feeling through
art, we first have to know what we are feeling. And that may sound like a tautology or something
simple, but it takes introspection. That’s really, really important because it
makes us better people. When we know who we really are, how we engage
and fit in the world, that enables us to then start interacting with the world in a better
way. Allows us to be more honest, allows us to
be more authentic and be our true selves. It’s better for us as individuals and for
our relationships. Create art. The one thing I want to leave you all with
today is how can you feed your inner artist and not just feed capitalism? [ Applause ]
Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *