fxhash documentation
fxhash documentation
Working with Libraries

Working with Libraries

Working with Libraries

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

While the Canvas API is very versatile, it can at the same time be a little clunky. In this section, we'd like to introduce some of the popular libraries that make it much easier to draw graphics to the HTML canvas and how to properly include them.

Including libraries in your projects

An important thing to point out here, is that libraries cannot be linked as external urls; they need to be included as standalone versions within the project. This is due to two reasons:

  • It ensures the longevity of your projects. An fxhash project should be a self contained project, such that it has everything it requires to run properly
  • It prevents bad actors actors from building malicious fxhash projects intended to access other devices.

Hence generative tokens on fxhash cannot make any network requests, meaning that external resources outside of the project’s own directory can’t be fetched once uploaded to fxhash. It is necessary that any libraries that are used are included as standalone script files within the project directory and referenced in that manner.

For example, we cannot fetch a librarie’s code from popular cdns 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 proper way to include a library is thus by simply downloading it from its the official website that it is distributed from, and then including it in the project directory. All that's left is to reference that script file within our index.html such that we have access to the library functions in the artist script, as such:

// the p5 script exists inside a folder called 'libraries'
<script src="./libraries/p5.min.js"></script>
If you’re developing your project with node.js, you can also download libraries with npm, and then simply bundle your project to prepare it for fxhash.

A Note on Library Licenses

When using any library it is important to make sure that this library is distributed under a permissible license, such that it is allowed to include and make use of that library.

icon
What is a permissible license? A "permissible license" typically refers to a software license that allows certain activities without infringing on the rights granted by the license. The term is often used in the context of open-source software licenses, where the permissions and restrictions placed on the use, modification, and distribution of the software are explicitly outlined.

Licensing is a difficult topic, some licenses are grant completely open source rights, meaning that you can do whatever you want with the code distributed under that license, whereas other licenses put some restrictions in place, for instance on the manners in which derivative work needs to be redistributed. We outline some of these notions in the Licensing page.

The P5 library

Built on top of the canvas API, P5 is the spiritual successor of 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.