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.