You’ve written your own functions and used built-in functions by using Web APIs (things like addEventListener, querySelector).
Now imagine that you want to use functionality that someone else wrote. You could copy and paste their code into your own file, but that’s not very efficient. Instead, you can use a library.
A library is a collection of code that someone else wrote that you can use in your own code. Libraries are usually written by other developers and are made available for free. They can be used to add functionality to your website, like adding a carousel or a map, or to make your code easier to write, like using a library to make an HTTP request.
Libraries for designers & artists
For our context, there are a few libraries that I want to highlight:
Flickity
Flickity is a touch-friendly, responsive carousel library. It’s designed to create sliders that work well on many devices and browsers, with easy-to-use features for scrolling through items:
The official starter example on Codepen. Note that here they’re including the library from a CDN (more details on that in the next section below):
Where’s the JavaScript? They’ve made Flickity so that at its very base, all you need to do is include the data attribute
data-flickityon your carousel element, and it will work right out of the box. However, you can further use JavaScript to customize the behavior in many different ways.
Nowadays there are plain JavaScript ways to make carousels, but at one point libraries were useful because browsers were way more inconsistent. Now, it’s more about saving time and not reinventing the wheel.
p5.js
p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.
Using the metaphor of a sketch, p5.js has a full set of drawing functionality. However, you’re not limited to your drawing canvas. You can think of your whole browser page as your sketch, including HTML5 objects for text, input, video, webcam, and sound.
Check out lots of work from their showcase: p5.js showcase
There is also a YouTube series called the Coding Train, that I highly recommend for exploring p5 (and creative coding in general):
D3.js
D3 (or D3.js) is a free, open-source JavaScript library for visualizing data. Its low-level approach built on web standards offers unparalleled flexibility in authoring dynamic, data-driven graphics. For more than a decade D3 has powered groundbreaking and award-winning visualizations, become a foundational building block of higher-level chart libraries, and fostered a vibrant community of data practitioners around the world.
Examples from the gallery on D3’s site
D3 was developed by Mike Bostock, who was at the time a graphics editor at the New York Times. He has written a lot about D3 and data visualization in general. Check out his blog if you’re into that kind of thing: bost.ocks.org.
Three.js
Three.js is a 3D library that tries to make it as easy as possible to get 3D content on a webpage.
Three.js is often confused with WebGL since more often than not, but not always, three.js uses WebGL to draw 3D. WebGL is a very low-level system that only draws points, lines, and triangles. To do anything useful with WebGL generally requires quite a bit of code and that is where three.js comes in. It handles stuff like scenes, lights, shadows, materials, textures, 3d math, all things that you’d have to write yourself if you were to use WebGL directly.
See more examples on threejs.org/examples.
3D graphics coding is a world unto itself, and the learning curve can be steep. However, people who get into it really enjoy it and can make some amazing things. If you’re interested in learning more, I recommend checking out The Book of Shaders.
How to import a library into your project
Every library will have its own instructions for how to use it. But in general, you’ll need to do three things:
- Download the library, or get a link to a CDN
- Link to the library in your HTML file
- Write code that uses the library
Let’s go through each step, using p5.js as an example.
Download the library, or get a link to a CDN
You can download the library from the library’s website. You’ll get a zip file that you can unzip and put in your project folder. For our p5 example, you can download it from p5js.org/download.
Alternatively, you can link to the library from a CDN (Content Delivery Network). A CDN is a collection of servers distributed across the globe that store copies of files. When you link to a file on a CDN, the file is downloaded from the server closest to you. This makes your website load faster and saves bandwidth on your server. So, when using a CDN you don’t need to download the file. But there can be occasional outages with a CDN, so that’s something to consider.
To look for libraries hosted on a CDN, you can search for the library name on cdnjs.com. For example, if you search for “p5js”, you’ll find a link to cdnjs.com/libraries/p5.js.
Link to the library in your HTML file
You’ll need to link to the library in your HTML file. You can do this by adding a <script> tag to the <head> of your HTML file, or at the end of the <body> before it closes.
<body>
<!-- all your page content -->
<script src="js/p5.min.js"></script> <!-- this is the library code -->
<script src="js/main.js"></script> <!-- this is the code that you write -->
When you see a file that has
.minin it, that means that it’s a minified version of the file. Minification is the process of removing all unnecessary characters from the source code without changing its functionality. This reduces the size of the file, which makes it faster to download and run.
If you’re using a CDN, it looks like this
<head>
<!-- other stuff -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.8.0/p5.min.js" integrity="sha512-pgK6Wo8doipc/IPQ0ilH3b47ww01345nR9ud1/6Qp0n+lQlEW9zuw6JhysRcUpBY4yKuVZjn1MAkDxbnncuGsQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
cdnjs.com has a helpful “script copy” tag that creates this for you:
Write code that uses the library
The fun AND challenging part – learning to use the library. This is where you’ll need to read the documentation and figure out how to use the library.
So for p5, I would first check out some of their basic examples, and then pull up their documentation to see what’s possible:
https://p5js.org/examples/
https://p5js.org/reference/
Some libraries even have nice tutorials for beginners: