Programming for Art
Tags: programming, javascript, art, p5js
Published: 2021-06-08 20:36:26

---
title: Programming for Art
published: true
description: Programming for art is easier than ever before with the help of high-level programming languages and programming libraries. Learn about some of the exciting JavaScript libraries for creative coding.
tags: programming, javascript, art, p5js
canonical_url: https://www.codingforvisuallearners.com/blog/programming-for-art
cover_image: https://www.codingforvisuallearners.com/images/programming-for-art.jpg
---

Programming is not something that readily comes into mind when thinking about art, but many applications of programming allow for artistic expression. There is even a field of programming called **[creative coding](https://en.wikipedia.org/wiki/Creative_coding)** where the goal is not to create something functional but rather expressive.

Even though programming for art has been a thing for a while, it used to be fairly inaccessible as it required deep knowledge in the field. Take **[Demoscene](https://en.wikipedia.org/wiki/Demoscene),** for example. Demoscene is a **computer art subculture** that has been around since the 1980s. It involves creating audiovisual presentations, called **demos**, that are not only artistic creations but also technical achievements.

{% youtube UsxEZ1ZNxyM %}

It can be challenging, even for a programmer, to understand how a demo is implemented. That is not to say other fields of art are devoid of technicalities. But, I can hope to create something that resembles a painting given a brush and a paint but creating a programmatic art given a computer and a programming environment can remain a monumental challenge for a non-expert.

Nowadays, we have modern, **high-level** **programming languages** and **libraries** that make programming a lot more accessible. Tasks like creating a website, building a game, or creating programmatic art have become a lot easier

If you are not too familiar with programming, there are two concepts to unpack there. **High-level programming languages** and **programming libraries**.

## High-Level Programming Languages

According to Wikipedia, a **[high-level programming language](https://en.wikipedia.org/wiki/High-level_programming_language)** is a programming language with **strong abstraction from the details of the computer**. Essentially, high-level refers to the **level of abstraction**. A high-level abstraction means a concept is presented in a way that is stripped away from the underlying details. Think of using a phone. At a **high level**, to use a phone, you would need to turn it on and press the buttons on the screen. At a **low level**, the battery in the phone needs to power the processor of the phone, and the touch screen needs to register the pressure, etc. Honestly, I don't even know how a phone works at a low level to give accurate examples here. The good thing is that I don't need to. I am still able to use a phone without knowing how it works. That is made possible by abstracting away the low-level details.

![https://i.imgur.com/jg4pvFM.png](https://i.imgur.com/jg4pvFM.png%5B/img%5D)

A high-level programming language provides similar flexibility. It allows you to program the computer without having to worry about low, machine-level details. This is one of the factors that makes programming so much easier than it used to be. With a low-level programming language, you need to worry about how the memory is **allocated** in your program, how it is **garbage collected**, etc... Essentially, we would need to tackle concerns that don't directly relate to the task at hand. High-level programming languages abstract away those details so you can focus on the primary goal and ignore the complex peripheral issues.

Another thing that makes programming easier is **programming libraries**.

## Programming Libraries

![https://i.imgur.com/jnifRiq.png](https://i.imgur.com/jnifRiq.png)

A programming library (or package) is a bundle of code that is previously written for a specific purpose that is packaged and shared for reusability.

Imagine trying to build a first-person shooter game. If we had to write every piece of functionality we need by ourselves, we would have to write a lot of code to handle the 3D graphics. That means a lot of complex mathematical operations would need to be implemented in code. We would have to spend weeks or even months developing the foundational pieces before doing anything unique to our game. Luckily, creating and displaying 3D graphics on the computer is a solved problem. Many other smart people out there had to work on similar issues, and some of them choose to share their solutions to these problems in the form of **programming libraries**.

That is why getting started with programming is so much easier nowadays than it was before. You can simply install a library that would do the most complex tasks for you to focus on building things that will be unique to your application.

There are libraries out there that would allow you to build 3D graphics, data visualizations, e-commerce solutions, and even artificial intelligence applications. Nowadays, building a software application is mostly about figuring out how to use these libraries and bringing them together in ways that are unique to what you are trying to build.

A high-level programming language and programming language libraries can help you focus on creating art using programming instead of wrestling with technicalities.

One of the most suitable programming languages for this task is **JavaScript**. JavaScript is a **modern**, **dynamic,** and **expressive** programming language with vast popularity and a huge ecosystem. It has a lot of programming libraries that would help you to create all kinds of artistic works. One example of those libraries is [**p5.js**](https://p5js.org/). p5.js is a **creative coding** library that makes it easy to create visuals and animations. Here is an editable example below for a visual created by p5.js.

{% codepen https://codepen.io/twhite96/pen/XMMjjP %}

## Programming Libraries for Art

It is hard to prescribe any programming libraries for programming art since what you choose to use is only limited by your creativity. Nevertheless, here are some programming libraries in JavaScript that can help you in programming artistic works.

### Three.js

![https://i.imgur.com/mcaRA4J.png](https://i.imgur.com/mcaRA4J.png)

[**Three.js**](https://threejs.org/) is a JavaScript library that allows you to create 3D visuals in the web browser. It has been around for a long time and is used to deliver a lot of impressive projects. If you want to create **3D**, **Virtual Reality**, or **Augmented Reality** experiences on the web, then Three.js is the tool for the job. We could already create 3D graphics in the browser by using an **API (application programming interface)** called **WebGL** but Three.js abstracts away the complexity of this API to make working with 3D much easier.

### ml5.js

![https://i.imgur.com/zW8Pmlo.png](https://i.imgur.com/zW8Pmlo.png)

**Machine Learning** is an exciting frontier in computer science that is ripe for artistic exploration. Unfortunately, working with machine learning can be quite challenging for someone who doesn't have in-depth knowledge in the field. **[ml5.js](https://ml5js.org/)** is a JavaScript programming library that makes it easy to work with machine learning by providing high-level abstractions.

### Matter.js

![https://imgur.com/ePdWz1C.png](https://imgur.com/ePdWz1C.png)

[**Matter.js**](https://brm.io/matter-js/) is a **2D physics engine** that works in the web browser. It allows you to create realistic interactions on and in between shapes by simulating forces such as kinetic or gravity. You can combine it with other libraries such as **p5.js** to create visuals that can interact with each other in realistic ways.

These are just a few examples of all the awesome libraries in the JavaScript ecosystem that can help you create art and express your creativity. There are a lot more examples, such as **[Phaser.js](https://phaser.io/)** for creating games, **[howler.js](https://howlerjs.com/)** for working with audio, [**natural**](https://github.com/NaturalNode/natural) for natural language processing, etc.

This is not to say even a person without any coding knowledge can start programming as soon as they sit in front of a computer. But thanks to modern programming languages and libraries, programming for art is a lot more accessible than before for anyone willing to learn the basics of programming. I have created **[Coding for Visual Learners](http://www.codingforvisuallearners.com/)** exactly for this purpose. It is not specifically a Programming for Art course, but it teaches programming in an artist-friendly way. Once you learn programming fundamentals, you can apply it to whatever you want, whether creating art, building web applications, or even programming robots!