Including Libraries

An overview of some of the popular libraries for creating generative art on fxhash.

While the Canvas API is already quite versatile, it can at the same time be a little clunky and hard to work with. In this section, we'd like to introduce some of the popular libraries that can be used to create various kinds of graphics in the browser and streamline certain approaches for making generative art.

Including Libraries in your Project

Libraries cannot be linked as scripts that fetch an external URL. Any library that you might use for your project needs to be included as standalone file inside of your project.

Projects on fxhash cannot make any network requests. This means that they cannot communicate with a server, nor send or fetch data over the internet. For example, we cannot fetch a library from a CDN like cdnjs or jsdelivr:

<!-- this is not allowed -->
<script src="<https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.8.0/p5.js>"></script>

The reasons why this is not allowed:

• It ensures the longevity of fxhash projects: projects should be self contained bundles of code that can run independently of external resources.

• A measure against malicious intent: It prevents bad actors actors from building malicious fxhash projects intending to preform certain malicious actions on your device.

It is necessary that any libraries used in the project is included as standalone script file within the project's directory, and referenced correctly via its relative path.

The proper way to use a library is thus simply by downloading it from its official website, then moving/pasting it in the project's directory. In our index.html file we then reference the library (generally in the head tag before your artwork script runs) such that the library's functions are available in our own script:

<!-- The p5 script is inside a folder called 'libraries' -->
<script src="./libraries/p5.min.js"></script>

If you're using node.js to develop your project, you can also download libraries via npm, and them simply bundle your project for fxhash.

A Note on Library Licenses

When using a library, it's crucial to ensure it's distributed under a permissible license that allows for derivative commercial use. Licensing can be complex; some licenses grant full open-source rights, allowing you to use the code however you like, and even modify it for your own purposes, whereas others impose restrictions on derivative work and how the library can be redistributed.

We discuss these concepts in more detail on our Licensing page.

What is a permissible license? A "permissible license" is a software license that allows specific activities without infringing on the granted rights. This term often applies to open-source software licenses, which clearly outline the permissions and restrictions for using, modifying, and distributing the software.

Reusing Libraries stored with ONCHFS

In case you are intending to store your project onchain via ONCHFS, then storage costs are something to be considered as they might get pricey

P5

Built on top of the canvas API, P5 is the spiritual successor to the Processing language. It powers creative coding in the browser, and is by far the most popular library for making generative art on fxhash, many projects make use of it.

The main strength of P5 is that it is very easy to get into, and makes coding accessible to a large group of people. Moreover, it is an open-source library, which allows you to freely use and include it in your projects. It also has a flourishing community around it and there's a plethora of resources out there specifically for making visuals with code.

Here's a simple example of what the code for a P5 sketch looks like:

function setup(){
	createCanvas(400, 400)
}

function draw(){
	ellipse(200, 200, 200)
}

P5 has two integral functions setup() and draw() - and as their name suggests, the setup function should contain all of the code that you want to run before drawing things to the canvas, whereas the draw function usually contains the code that draws things to the canvas.

One immediate useful thing about P5 is that you don't even have to create a canvas element manually, it provides a function that does this for you. By invoking the createCanvas() function P5 will create a canvas element and insert into the html of the page that it is run in. You should also specify the dimensions of the canvas as input parameters to that function. Then all of the p5 drawing functions will automatically draw to that canvas. P5 is very versatile, so there's a lot more that can be done here.

The advantage of using P5 in this scenario is that it adds a layer of abstraction on top of we don't have to write as much code as we would have to with pure CSS and Javascript.

Other popular libraries

There are other popular libraries that are also used for the purpose of making generative art on fxhash, some of them aren’t directly libraries that draw graphics to the canvas, but rather in some cases act as auxiliary helper functions for making certain tasks easier. Some popular ones are:

• Paper.js

• chroma.js

• Spectral.js

• p5.brush

• More added soon

There are many more libraries that can be used.