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.