Okay, then.

Okay.

So hello.

Thank you all.

I really appreciate the opportunity to be a part of CSS comp Budapest Just massive thanks to the organizers.

And most importantly, you all for welcoming me into your ridiculously beautiful and picturesque city.

Um, my name is Jeremy Wagner, and I'm a wen performance consultant for sight improved.

My job is to do all I can to make the web faster for our clients.

And I also write and talk about performance a bit.

I'm just repeating everything.

Uh, that are wonderful.

EMC has already said, but this talk is about paintwork lips, which is a little weird for me because I was talking about performance which has comparably little to do performance.

Well, mostly won't get there.

And right about now, you might be wondering who Jeremy, what the hell are paintwork?

Let's And it's a good question.

And since I don't want to assume everyone knows about this, here's a quick tour of what they are and what they can do.

Paintwork.

Let's are part of a developing set of specifications called Houdini, and with the AP eyes, Houdini provides, you can write what are what are called work.

Let's on.

They'd let you develop expressive and state full animations, custom layout modes.

Even that's a developing thing.

And, as is the sole focus of this talk generative artwork using the CSS paint A P I Seriously.

So I haven't answered your question yet.

And out there you're thinking, OK, fine, Jimmy buying that whatever.

But what even is a work?

Little You get to the point work.

Let's are similar to Web workers.

But unlike Web workers work, let's offer developers lower level access to rendering pipelines for completing very narrowly defined but super specific tasks.

And in the case of paint work, let's we're talking about artwork that we can generate with JavaScript and control with CSS.

Now, I know J s camp is tomorrow and not today.

So you're probably thinking, Well, what the hell is this?

I didn't ask for no javascript that a c s s Khan boo.

And I feel you a cz.

Much as I love javascript, the web can sometimes feel like this.

Um, but I feel that this technology is relevant here, even at C.

S.

S.

Khan.

Because even if you're not a javascript, Dave o t or super fan.

You can still use paint work.

Let's which have already been written in your designs without ever having to do more than write a little CSS.

Here.

They're so they're still relevant to you.

And this is possible because while paintwork, let's are written in Java script there, embed herbal in CSS and this is what I mean by incredible.

When you look at this lonely background image property, you might be thinking.

What?

That's not right?

Isn't background image supposed to take a girl?

Well, that's certainly the prevailing use case, but in browsers that support paintwork lets the background image Property can also take this little nifty paints in tax, too.

So if you think of the U.

R L syntax and CSS is a function that accepts the U.

R L String to an image, you can similarly think of paint as a function, which accepts a string that represents and invokes a paint work late.

And in that work lit is where you write the Java script to generate background images that CSS can use.

So in this example, were calling paint to invoke a work lit that is registered under the name amazing.

But until we actually register a work led to that name, this bit of CSS won't do anything and therefore will not be very amazing.

And this is what that registration process looks like, which is done and JavaScript on your page or your main APP code that runs on the main threat.

Because the paint a p I isn't available in all browsers, you'll need to do a quick check to see if window dot CSS dot paintwork lit is a thing that you can use.

And if it is, you can then use its ad module method to load your work lit from a separate JavaScript file.

And what is a pain worker work lit?

Really?

I mean, what is it?

Turns out it's a class with a predetermined shape, which consists of a method called well paint.

And with that, within that method is where all the code that draws the artwork goes, and the shape of a paintwork lit is not restrictive it all, So you're free to use other class features to organize and do like whatever to organize your drawing code anyway that you prefer.

And that's nifty because without a little organization you're drawing code can start to look like this.

Um and we really don't want that, do we?

Then moving on in the same file after an outside of your paintwork lit class, you can call register paint, which requires two arguments.

The first is the name, the string name that the paintwork, what should be registered under and then the second this that allows it to be accessed by the paint function.

And then the second is the reference to the class that you just wrote that does all of the painting.

And when this all comes together, a paintwork lit finally becomes usable by CSS.

But how do we draw stuff?

What does that even look like?

Well, the AP I you use conveniently to draw stuff is really just the campus AP eyes two D drawing context, something that's been around for a very long time that some of us have good familiarity with, and that makes sense.

Why?

Why develop a separate a p I for drawing in two D when a perfectly good one is like right there?

You know, the second argument is the canvas geometry, which offers the dimensions of the drawing space and this is essential to ensuring your artwork responds to the available space.

Because you know your elements can kind of shift and change size.

That sort of thing happens.

And in this madly responsive world that we live in, we want to make sure that our artwork adapts to the container that it's in.

So here's an example of a minimally viable paint method, which draws a solid black circle with a 64 pixel radius smack dab in the middle of the canvas, no matter what the size of that canvases.

And so if we assume this super basic paintwork lit gets registered under the not at all ironic name of Amazing and we Apply it to an element will get this this totally amazing thing that in no way could be replaced by a static image whatsoever.

So this might be you right about now.

But that's simplistic.

Example was meant to illustrate how we get from one line of CSS to something that lets you generate background images using a familiar AP I there is so much more that this technology is capable of, so let's take a look at it and just think what if you could use this a p I to create randomly generated artwork that could enhance your designs and practical yet spontaneous ways that are just a little bit different.

A little bit of chaos, right?

And that's what we're going to do.

We're going to talk about the other important aspects of this technology as well.

So we're done here.

The only thing that will be able to cage your creativity is you.

So let's see what's possible with this expressive and cool technology, but still, and I sense a little bit of, ah, hesitancy.

Knowing where or just how to start can be kind of paralysing.

So it's a good frame of mind.

You know, a good frame of mind to get into is to think of the canvases like a set of tiles where all the tiles are separate but potentially overlapping or connected pieces which are randomly generated.

This mindset change your focus, conveniently Onley on what to do in each tile, rather than allowing yourself to be overwhelmed by what to do with the entire space.

And once everything is done, you can kind of step back and just see how all these things connect and interlock and how they come together.

And this helps us reach where, I think is the sweet spot with the paint a p I.

We can get weird, yes, but that weirdness can intersect with what's practical and therefore usable.

And that, to me, is like the magical part of Web development with weirdly practical stuff.

Now, some of what you're going to see here and I feel obliged to call this out is very much inspired by a wonderful talk that Tim Holman gave A J S con you last year where he talked about generative aren't using the canvas a P I.

I highly recommend you check it out on YouTube because he is where better at this stuff than I am, and pretty much everything in that talk is something that you will then be able to apply to paint work.

Let's in the CSS paint a p I.

So do check it out.

Okay, let's revisit that paint method in the amazing paintwork lit class and just maybe change things up a little bit.

There's more going on in this example.

Then, when we were just drawing this mundane, lonely circle in the middle of a bleak canvas.

So first we establish the size of each tile, which will be 32 pixels square.

Then we divide the canvases, width and height by the tile size.

And then we'll write two loops using those values to draw each individual tile.

The first loop deals of tiles on the Y axis.

And then the second loop deals with on surprisingly tiles on the X axis, and the second loop is nested inside of the 1st 1 and this will end up populating, or allow us to populate every tile available on the campus with whatever it is we feel like drawing.

So what you do here is up to you, but in this example, I'm going to draw a line in every tile.

But the random part of it of it will be where the line goes in in the tile space, right?

So in every iteration, I call the context objects begin path method to begin drawing a line, and then I leave it to mass dot random or math dot pseudo random in my right to decide if the line will cross the tile space from the upper left corner to the lower lower right corner or draw a line straight line from the upper left corner to the lower left corner.

And after that, I finish up Hillary in oration by telling the context object to draw the stroke.

So what does that look like?

Turns out, it looks like a kind of cool thing that changes every single time.

And that is the kind of spontaneity and randomness I'm talking about here.

And that's just what you can do if you only know, like just a teeny little bit of the of the canvas, a p I.

But with a little ingenuity, that little teeny bit of ingenuity can go extremely far like what if we just decided to throw in a little something extra and randomly decide whether or not to draw a dot in the upper left hand corner of each tile.

This gives the final artwork a sort of circuit board appearance which I think is kind of meat, and we can also make the tile size a bit bigger and we can change the color.

And because a campus background is transparent by default, we can specify a CSS background color property to set to set this artwork on whatever color it is we want.

So I've kind of done like this off black greyish thing.

Now imagine this pattern in the pages masthead background, but maybe at a more subtle and lower opacity that just gives the design just a little bit of extra hoof and like chaos but without overpowering the foreground and like making things like, you know, just kind of subtle, like being cool.

Uh, so that was cool.

But let's do a different take on this idea and let's let's experiment a little bit more like what else can we do?

So here's the paintwork I call blotto, which draws circles of varying size and capacity and every tile like, kind of an inkblot kind of thing.

And so there's a bit of code here, so let's just walk through it at the very beginning.

Beginning of blah does paint method.

We set some variables the tile size, of course, by eight pixels.

And then we define this amplitude variable, which aids us in sort of generating randomly size circles later on, and then we calculate the number of tiles on both axes and then we store the result of pi times two, which means that the circle that we draw will be a full circle a 360 degrees.

And then finally, we set the Phil style to this sort of like, Nice little Blue.

And now here's where we do the heavy lifting.

You'll note that the loops are the same as with the circuit board pattern, and we we do all the work inside of the second nested loop.

Now where it changes is that we generate a random Alfa value by getting the remainder of mass dot random divided against itself.

And this will get us a valid transparency value from 0 to 1.0, and then we multiply the tile size by math, dot random and our amplitude value from earlier.

And now all we do from here is just draw circle with that information that we've just sort of come up with.

And then we registered good old blotto here like this, just like usual, and then we can use it in CSS like so and because paintwork let's draw.

Like I said, they drawn a transparent background by default.

We can add a nice little background color for to sit on.

I've chosen this sort of like off white.

And so after all of that faffing about what does it look like?

Pretty cool, I think.

Not bad.

If I do say so myself.

I mean, I don't think anything I do is cool, but I think that's kind of cool.

Um, and as before, we get a unique result.

Every time the cameras redraws and it gives us again that organic feel that, while stable and familiar, is just slightly chaotic and spontaneous.

And I really like that every single time it draws.

Okay, so that was cool, right?

But let's think outside of tiles, right tiles, they're fun, and they're convenient ways to draw like generative artwork.

But let's, like, step into the world of trigonometry, and I'm sure most of you are pretty comfortable with Trig.

But if not, don't worry, it's it's not too hard.

And I never was a good math student.

So like I was brushing up on my Trig last week, here's another paintwork lit I call flashy, which randomly draw stylized rays of light sorry around a circle which flare outward, which makes it sort of looked like a stylized rendering of the sun, which I think is kind of cool.

So let's look at the paint method and, as before will need to establish variables that we can use later.

The first is the radius of the main circle that the rays will radiate from think like the sun itself, which we've said it 48 pixels.

Next is the amount of deviation of each raise with, and this is what we use to make it look like the rays are flaring outward as they extend from the sun itself out to the edge of the canvas.

And next is the outer radius, which is sort of think like a giant circle around the entire campus that you don't see.