They Said JavaScript Couldn't Make Beautiful Art – They Were Wrong

Hello, everyone, welcome to my session. I'm glad you're here. In this talk, I'm about to take you on a journey where you can create artwork with only JavaScript. So bear with me. Let's get started.

So yeah, a little about me. My name is Trahan Ismara. I'm a seasoned web engineer from Indonesia, currently working as a frontend engineer at DT Labs, a blockchain company headquartered in Singapore. Recently, I helped the private sector, like government projects under Telkom Indonesia, and have been actively involved in the tech community, speaking at conferences on various topics like accessibility, performance, and AI. I also create content such as podcasts and tutorials. If you want to connect with me, feel free to do so.

Here's our agenda for today. First, we'll address the great misconception about digital art. Then, we'll break down how artwork in JavaScript works. Finally, we'll get hands-on and start creating our artwork in JavaScript. Traditionally, digital art involved using advanced tools like CorelDRAW, Photoshop, and expensive devices. As developers, we aim to create digital art with a unique touch, incorporating logic and code.

So yeah, that's a little about me. Let's get going. Here's our problem, our agenda that we're going to deep dive about. The first one is the great misconception about digital art. Then, we're going to break down how the digital arts, the artwork, work in JavaScript. Finally, we're going to get hands-on to start our artwork in JavaScript.

For decades, we understand digital art as using advanced tools like CorelDRAW, Photoshop, and expensive devices. As developers, we aim to create digital art with a unique touch, incorporating logic and code. The second image is actually written in JavaScript, showing consistent and persistent patterns of hexagons. JavaScript offers more than just functionality; it can create beautiful and integrated patterns like organic textures.

Before JavaScript became a tool for creating beautiful art, there is a history to explore. Initially, we had the JIP for basic image animations developed between the late '80s and early '90s by CompuServe, a server company. The JIP animations laid the foundation for what JavaScript can achieve in terms of visual representation and creative possibilities.

Take a look at this example of an image, the second image. This second image is not drawn by lines or fancy desktop applications that require subscriptions. It is actually created using JavaScript, showcasing consistent hexagonal patterns. Initially, many viewed JavaScript as a language for basic tasks like form validation or pop-up ads, lacking beauty. However, encountering artworks like this one reveals its organic textures and intricate patterns.

Before JavaScript evolved into a tool for artistic creations, there is a historical background to explore. The first step was the development of JIP animations between the late '80s and early '90s by CompuServe, a server company. Later, the term DHTML emerged, denoting dynamic HTML, primarily used for simple animations in early JavaScript. Subsequently, the concept was integrated into Internet Explorer in 1997, marking a milestone in web development.

Following the era of DHTML, Macromedia Flash emerged as the predominant platform for web animations for decades. Adobe eventually acquired Macromedia Flash, leading to continuous technological advancements and innovations. The rapid development in technology has significantly enhanced intelligence and speed, driving continuous innovation and progress in web development.

So we just have basic animation just for moving the image. It's developed between 87s to 89s by CompuServe. It's like software house, something like that, the agency. It's a server company back then. They created, invented the JIP animation. So someone want to send the image, that bunch of image. The alternative way or the easiest way to do that is simply using the JIP.

Then later on, the term of DHTML was first introduced. It's just like simple, not fancy term. It's just like simple terms for dynamic HTML. It just, you know, when you're seeing the early JavaScript just to move like images and text box around, something like that. And it's also introduced in the real estate of the Internet Explorer back in 97. And then we all know the king of Macromedia Plus. So then came the undisputed king of web animation for over decades. If you saw something beautiful back then, like interactive animated web, it was almost certainly plus. Then later on, it's acquired by Adobe.

And then time, innovation after innovation, the technology is making more. So making innovation and then also the development of the technology is going really, really fast, really more intelligence. And then the problem never solved correctly or in great way. And then in 2008, new version of HTML came out, which has a lot more features. One of them, they introduced the canvas element. Obviously, with the support from graphical interface, graphical card interface, getting some innovation and processor as well. Getting the technology better, it's like clicking together. So that's breaking down the barriers, how actually the animation or digital art is actually works in JavaScript.

Basically, the mechanism how the animation or something like art is working in JavaScript, in HTML. First thing, it's the same thing like how it works, the CSS in web. Basically, they will load CSS, but instead of CSS, they use the JavaScript as the input on to load it. And then it will parse the JavaScript. We created the DOM. And then from that, if you're using the canvas, the canvas will transform into something like bitmap style, bitmap type, something. And then obviously, from support, the graphical card, it will tell you it will render more smoothly, more versatile, and more faster.

And the technology behind the software in the animation that render in browser, there are two tools. One is WebGL. WebGL is just like web graphical library that can be rendered the high performance of interactivity. 2D version and 3D graphics. And then the canvas is only part of the HTML that allow for dynamic scriptable rendering of the 2D and 3D shapes, curves, something like that. And the difference between those tools, when you use the canvas, you can just imagine like when you painting in white paper canvas, something like that. You can just imagine, make some imagination. But if you know how to use your paint, use your pencil, the paint will be going to be good. If you trying to understand WebGL, WebGL is something like when you make some animation, but in WebGL, it has more a lot of effects.

It's more like to the next level or the next effect in Hollywood cinematic, something like that. Which means that both is kind of having the same mission to make some animation, but it's going to have two different styles. How they render the animation in the browser as well. The art in JavaScript is getting more and more diverse. The tools, these days, are getting more and more rich, versatile and so diverse. For example, if you want to create some animation for the animate style, you can just use the Animate.js. And then the newer version came out, the new tools, Trash.js is coming from Vue. You can create animation, 3D animation using the Vue.js with Trash.js. But obviously, in here, we are using the canvas only. How to see we can create something beautiful with only the canvas. And obviously, GSAP is also really powerful as well.

If you want to take a look how both of the other tools that I mentioned in here, you can just take a look. But in this topic, we're just going to deep dive into the canvas. And obviously, there is something awesome in the canvas. There is a tool library that inherited from the Canvas API, which is created by Matt Deloria. Matt Deloria is a Canadian artist, programmer, creative coder. He made the beta framework for making the artwork. It's called the Canvas Sketch. We're going to use the Canvas Sketch for our next hands-on.

The Canvas Sketch is just a helper if you want to make some artwork in JavaScript using the canvas. Instead, we're using the Canvas API. We just need to use the Canvas Sketch. It just makes it easier to simplify for the Canvas Sketch. And obviously, the artist that inspired me a lot is Matt Deloria as well. He works in something really beautiful, the art. His work has really inspired me to also do some artwork in JavaScript. It's really cool stuff in here.

The next one is Bruno Imbrizzi. Bruno is also a creative coder. I joined his class online. It's really great to teach about how to use the canvas. His work also is really amazing. His artwork, you can just check his website, etc. The last artist is Koby Yu. Koby is anyone who wants to start their artwork in JavaScript. To get started on how to make the art in JavaScript, we can start right now. Let's make some art. You can just check in here, go into my repository. You can see in this repository, I already made the module and the flower today. Frequencies that we need to have, requirements before we jump in how we get one. We need to ensure that Node.js is already installed, and then obviously the PS code and the web browser as well.

To get started, we can just check the opened terminal. Then we can see in here, you can follow along in here. We need to install the canvas sketch CLI first just to make the experience easier for you, and the doperoper experience getting more convenient, seamless. We need to install this canvas sketch CLI. Maybe I need to jump in. Something like this. Oops. Canvas sketch CLI. If it's already done in my machine, you can just check canvas sketch version. There you go. After that, we can just create some folder.

Let's say we want to ... Let's say we want to ... After that, we can just ... Open. Oops. Okay. You can just create a new folder. Then in here, we can just canvas sketch new ... We need to specify the file name first. Something like that. Something like that. Something like this. Canvas sketch and new ... It's going to be created in a new file. And then ... Sketch.js. New and open. Okay. We already have the canvas we can create in here.

In here, we can do something like you want to fill the text in here. You want to do something really cool in here. We can just create in here. For example, let's see in here. We can change the dimension, resolution, et cetera. In here, I want to set ... Let's see. I want to set the font. Something like this one. Font. I want to do something like this. You can just use like here. Hello Canvas. We can also change in here.

Oops. Black. Whatever you want. Oops. Red. There you go. So, yeah. This is going to be really interesting. The first in here is indicate to fill the background. And then it's going to be render the rectangle in here. Right? And then for the white in here, we add some text. So, I need to add a white in here. So, this is just like simple art, something like that. If you want to make something beautiful. Let's see. We want to add some like curve or something.

We want to add something like curves. Okay. For example, we want to create something like here. This is going to be white. I need to change that to white. And then we're going to set something like, you know, like we want to create something like abstract with lines. And rectangles. And make it like, you know, you can turn on to something like animation, GIF or format and MP4.

So, to do that, we can just add something first to the sketch in here. We need to add something like particles. So, in here, we said that we want to add particle. We can just add here. We can create something like key in here. First, we need to set like all. So, we're going to be columns like. And then the rows going to something like this. And then what I'm going to do is.

Sorry. I'm going to do the rows something like that. And then I'm going to add the cell. So, the cell is going to be here. Then we add like. So, it's going to be inherited from this one. So, this actually you can add something here. Yeah. And then for the. For this and for the center, we can add something like this. And then after that, we want to add something like points. So, to add some point, we can just add something like this. For the.

Yeah. And then the points. Oops. Point something like this. In here, we can for the. The points, then we're going to render in here. To render the point, we can just. Safe. Wait. We need to change this going to be black. And then for the points, we still have something like this. And then for the context, we're going to save it first. Set method in here. In Canvas Sketch or in Canvas in general. Is just like saving the step. What happened to the previous style. So, before we need to make sure it's it's safe to the virtual. To RAM something like this before it transform into render into the to the browser. So, we need to draw the point in here. Or in something like this. Instead of that, we need to. Point. Yep. And then. Yeah. Wait. We need to draw the point. Point. Draw. Then it's going to be context in here.

So, the context is going to return from this one and the draw is actually coming from. Here. So, we need to add the class point. This one. Then we have something method grow. Yeah. Something like this. Yeah. And then. Yep. And then. We can save.

Okay. Let's see what we have in here. Canvas Sketch. Draw. Yep. Because it's going to be. These need to be fill style. I am going to be the blue. And then we're going to like. Context. This one. And then context begin. Yep. Right.

Sorry. Going to be. Then. Do something. Yes. It should be. Blue. Blue. Blue. Blue. Last point. We actually have. Push the new point. Here. So, instead. In here. We actually need to. Push to the. New points. Something like this. Wait. New point. Oh. X and Y. X and Y. Is coming. Oh, yeah. I forgot. We need to add some lab X and Y. Something like this.

And then. Yep. For the X. We can say something like this. Then. This. I need to just like. This.

Swan. Oops. I need. Something. This. Okay. That's changing. But.

I didn't see. The curves. So, maybe. We need to change. It. To. Y. Like. Oh. X. Y. Filled style. Wait. Let me see.

There's something. Happening. Here. Throw. In. Then. Oh, yeah. I need to restore. The. Text. So. We need to restore. It back. To the. Previous. That.

Wait. It should be. There's a blue. Style. In here. Or in. Rose. Something like this. Wait. Oops. Oops. Yep. Maybe we don't need. This one.

And then. Translate. To start. Again. But. Then. Yep. But. Yeah. If you. Want to see. Another. Reference. In here. You can just. Create something. Like this. You can just see. In here. Do whatever. You want. But. If you. Want to. Add some. Interactivity. You can use. The animation. Like. You can use.

This. In here. Like. Animate. And then. We can. Specify. How many. Pb. As. Something like this. But. Obviously. We can just. Also. See. On my. Pository in here. I already made. All the. The. The animation. Something like this. Oh yeah. You can just. Copy it all. Here. Now we can see. How. The.

Something like this. See. If you take a look. In here. We can do. Whatever we want. So. Yeah. If you want to. Learn more. About the animation. And. You can just. Check on. The previous. Repository. And. Please do. Connect. On social media. Thank you. For. Your attention. Thank you. For. Watching my. Session. See you. In the next conference.