Particles, Pixels, and Purpose: Creative Frontend Beyond the Grid

Hello, everyone. I'm Chris, and I'm very excited to be here with all of you. Today, we're going to talk about particles, pixels, and purpose. And you might be thinking, wait, is this a physics lecture or a React talk? Don't worry. I promise it's neither or maybe it's both. In the next few minutes, I'll take you on a little journey. One that connects creativity, code, and meaning. But before we start, just a little bit about who I am. So I've been building things on the web for about 15 years now. I spent six and a half of those years at Google, where I was one of the first UX engineers. My job was to make Google products feel more human through design systems like material design. And after that, I started my own studio, Torii, where we focus on transforming front ends for startups and companies. What that really means is we make things feel good. But not just look good or work well. But feel like they were crafted with care. Because at the end of the day, great interfaces are like great conversations. They should leave people feeling something.

This is all right about me. So let's talk about particles, pixels, and maybe a little bit of purpose. So before we go any further, I want to pause here for a second and really think about this question. Why are you a React developer? Is it because you love to code? Because you enjoy solving problems and making things work? Because it's fun to play with computers and make them do cool stuff? Or maybe it's for the paycheck. And hey, no judgment there. Or maybe, just maybe, it's because you believe that through what we built, we can actually make people's lives a little bit better. Whatever your answer is, keep that in mind. Because that's why your reason is the foundation of everything we're about to explore together.

For me, it all starts when I was a kid. I grew up watching a lot of anime and Disney movies. Lion King, Dragon Ball Z were my top favorites. The animations, the music, the story, they all brought a mix of emotions that had a profound impact on me. From there, video games took me to the next level.

From being a passive watcher to being part of the story actively, that was a big wow moment for me. I'm a big Nintendo fan, and the same impact Disney had on me, Nintendo did to me. I still remember the Christmas day when I got Zelda, Garena of Time. I remember smelling the instructions book. It smelled so good, like I was, it felt like I was about to embark to the Zelda forest for real. And just playing it, it was unbelievable.

I played endless hours, my eyes would be wide open most of the time, not blinking for hours. They were too red that my mom started to worry. She knew it wasn't weird. So she will sneak to my room and look at my eyes when I was playing, and found that I barely blink for minutes. So she will tell me, if you play, you gotta blink every 10 seconds, damn it. It seems I didn't do it.

And my eyes suffered, and over time, I lost vision, I got myopia and astigmatism. And here I am today with glasses since then. My mom always tells me this phrase of, I told you so. So while growing up, I had two hobbies, playing soccer, and video games. That was it. Actually, soccer looked like this. I had to buy these goggles. For some reason, they didn't work for me. But that's a topic for a different story.

Anyways, so when people ask me, what do you want to become? I had two answers. One that would satisfy me, which is I want to be a soccer player. I said that when my parents weren't around. And another one to satisfy my parents, I want to be a software engineer, so I can build and then play video games. The last part, I didn't say that, because otherwise, my parents will get upset.

Anyhow, I was a terrible student. I leaned more towards video games when soccer started to be more serious, less fun. I imagine I wanted to avoid at all costs any difficulty in my life. But then I turned 18, and I had to make decisions about what I need to study. So the only thing that excites me was software engineering. But I knew I wasn't prepared for this challenge of becoming a software engineer. So life all of a sudden got pretty tough.

My first year in college, I didn't even pass one subject. So I had to decide to either continue my studies as a software engineer or do something else. So then I had this dream where a future self was speaking to me, Chris, if you don't change, if you change to something easier, that you don't like in the first place, you will always regret the fact that you didn't even do the work, you didn't even try. And that is when I realized that I had to give myself a last chance, at least put the work for one more year, do my best and see how far I can get.

So I put the work, I started changing a few habits, and things little by little started to change. I started getting great grades, I started enjoying maths, physics and programming, the boring stuff became fun. So I started finding this joy in things that before felt boring and disgusting. And life with every challenge, little by little, gave me the confidence to what I am today.

The reason why I'm telling you all of this, is it's important to find joy when trying to achieve our goals. When life gets tough, we're gonna put the work, but still find the joy in the little things. Becoming a software engineer was a lot of work for me. But to be able to achieve that, I had to find the joy in the journey, the fun and balance of every single day.

So particles and pixels remind me of this. We live in a world in constant change is very unpredictable, not easy, sometimes very frustrating. But then when it gets tough, it's good to reflect why we started in the first place, doing what we're doing. And I started looking for things that can spark joy and fun. For me, one of my goals as a software engineer has been to create experiences that people love, so I can learn how to create similar emotions and feelings as movies and games did to me when I was a kid.

So when I look at 3js, the experiences that people are able to create, they look so amazing, so powerful. It's so cool and brings me back these feelings I had when I was a kid. That has taken me to where I am today. Now, it's not an easy technology. It's daunting. I'm not gonna lie. But let me share with you a few things I learned while trying to make cool things with the technology.

Not sure that you have noticed, but what you are seeing in front of you is a spiral made in 3js. This is one of my favorite shapes. It's found everywhere in nature, from sunflowers to shells, even in art. You probably have seen this print before. It's the great wave of Kanagawa. It's very beautiful, but it depicts something hidden on its shape. It's built upon a simple mathematical relationship called the golden ratio.

And what is fascinating is that it's not random. What is this golden ratio? For the ones that don't know what this is, let me explain it to you on this interactive playground. Let's imagine we have a grid where we're going to add square pixels to it. We are going to start with a one-on-one square, and our goal is to add squares on the larger side of the preview shape. So if we add one more, we're gonna get two one-by-one squares. If we add one more on the largest side, we're gonna get a two-by-two. And if we do the same process again, now we're gonna get a three-by-three. So three-by-three, one, we should get like a five-by-five on the next one.

And that is what we're getting. If we continue this process, now we get an eight-by-eight. I don't know if you notice, but what we are doing right now is a sequence called Fibonacci. We start with one, one, two, three, five, eight. Fibonacci, what we are doing is doing the sum of the current square plus the previous one. So five plus eight, 13. So the next square should be 13. The next one, 13 plus eight, we should get a 21. All right.

This proportion or ratio that has been used is called the golden ratio. If we were to draw a spiral using the direction of the creation of this square, what happens? This is what happens. We are seeing a spiral using the golden angle. So to summarize what we have done so far, what we have done so far is the golden ratio that is also called phi. It describes the proportion. Each new section is larger than the previous one by the same ratio. And that equals to 1.618.

It's dividing the Fibonacci index of n by the Fibonacci index of n minus one. And that is how nature balances a scale. You see it in sunflowers, shells, even galaxies. But nature doesn't just grow in size. It also grows in terms. If you take that same golden ratio, that proportion, and apply it to a circle instead of a line, you get this spiral built by rotating each step by about 137.5 degrees. That's called the golden angle. It's the rotation that plants use when growing leaves or seeds, so they never overlap. It's a very efficient pattern in nature. So far using the golden angle formula rotating 137.5 degrees, what happens when we go beyond a few particles and start drawing thousands of them all at once?

Shaders run directly on the GPU. They process every single pixel in parallel. Instead of drawing one point at a time, we can compute thousands of them or even millions simultaneously. Isn't that cool? I built this playground that I'm about to show you in React. Takes a few seconds to load. Just give me a second.

So in this playground, what I can do is interact with the shader directly. So I can reduce all these particles to one or even increase. And I don't know if you noticed, but this is actually the golden ratio in motion. We can change the scale, see the different shapes, increasing the point size. Isn't that cool? Anyways, but nature doesn't stand still. It breathes. So we make it breathe on this next iteration by adding a couple of lines as you are seeing there. It's a shader.

I don't know if you noticed if you are familiar with this code, but I think you can understand what's going on there. What we're doing here is adding some natural breathing. Every particle breathes independently, all computed in parallel on the GPU. I'm about to show you as well how this looks like in the playground. Let's wait for a few seconds to load. It's taking more than a few seconds to load. Let's see. One sec, guys. This happens when you make your own presentations. Now we're getting into a very interesting time. And here you go. So we got the playground. Finally. Wow, boom. This is what happens when you make your own presentations.

Wow, boom. This is what happens when you make your own presentations. I don't recommend it, but hopefully you can understand where I'm coming from. So now we have the playground. We have 2000 particles here. Again, we can reduce all these particles all the way to one, increase it, see how it breathes as I am growing these particles, and do the same thing again and again. It's very cool. I can play with this playground for hours.

Anyways, now we're going to take it to the next level. So what about if we live, since we live in a wall where we can interact with it, I wanted to make it react in real time. And that is where React 3 Fiber comes in. With just a few lines of code, I turn the previous shader into a React component, one that I can use anywhere, like a plug and play visual blog. So let's check this out. You are seeing with you the code, but I can also bring the playground, hopefully it takes less seconds.

This is a much larger component, and you're going to see it in a second. Hopefully, again, we're running into these little issues. Here you go. It went faster than before. Anyways, here you are seeing, actually, we went from 2000 particles before to 50,000. Now we have much more particles. Again, I can reduce them, I can increase them, the way that I am populating them, they all use the golden ratio. I can scale it. And you see like very interesting patterns. I can even change the breathing strength. So it feels more alive. I can even add some colors to it. Maybe like a little bit of yellow, and then a little bit of red over here. Maybe we can add here some yellowish again, to finalize in a little bit of white. Why not? Maybe we can also reduce the scale a little bit. So we can see the full of it.

And this is exactly where React shines to me. It lets me grab a piece of complicated shader into an easy plug and play component that I can drop anywhere. And that is when I thought what happens if I take this even further into a different shape. All of this coming from the same golden angle formula.

This is how I made my whole presentation. Not sure if you noticed, but all the transitions, everything was done using three Js using React Fiber. And this is exactly why I love frontend. It's the place where math meets art, where design meets engineering, and where curiosity turns into creation.

So when I ask you at the beginning, why are you a React developer? For me is because of moments like this. Because at the end of the day, what really matters is finding joy in the things that we do, in the things that we create, and meaning in why we do it. I want to leave you with this famous advice from Chris Do. Thank you.