Essentials
Getting Started
Artist Guides
Project Setup and Artist Tools
The fx(hash) API
Generative Art with fx(params)
Browser Based Generative Art
Releasing your Project
An introduction to the fx(hash) boilerplate, a starting template to kickstart new projects.
The boilerplate is essentially a minimal, self-contained starting template that serves as a simple starting point for creating an fx(hash) project. It comes out of the box with all of the required files, and you|d just have to fill in the blanks to create an fx(hash) compatible generative artwork. You can download the starting template from this Github repository:
<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/f9d1e984-50ed-4650-a543-95d2b6c0ba90/bf4c0e9d-eb66-4289-9f26-95d0fb39273e/fx_doc-icon_info_001.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/f9d1e984-50ed-4650-a543-95d2b6c0ba90/bf4c0e9d-eb66-4289-9f26-95d0fb39273e/fx_doc-icon_info_001.png" width="40px" /> What's a Boilerplate?
In the context of software development the term "boilerplate" often refers to a template or starting point for a project that includes a set of standardised code or files. These templates are designed to provide a foundation for building software applications quickly and efficiently.
Boilerplates help developers avoid starting from scratch and ensure that best practices and common functionality are already in place. For instance, a web development boilerplate might include a basic HTML structure, CSS styles, and JavaScript libraries to kickstart the development of a website. In the case of the fx(hash) boilerplate, it additionally includes the fxhash.js script file.
</aside>
In the early days of fx(hash), artists needed to include a short snippet of code in their projects for them to be compatible with fx(hash) and function properly once uploaded. This snippet could be found on the fx(hash) site and had to be manually copy-pasted into the artist's project.
With fx(hash) evolving as a platform, and new features being added on a regular basis, this snippet quickly grew in size and had to be frequently updated to account for these changes. For the convenience of the artist, fx(hash) made a boilerplate available - a starter kit that already included this code snippet, becoming the go to method for kickstarting new projects.
Cloning the boilerplate from Github will download a zip file onto your machine - unzipping it will produce a folder with the following content:
This directory essentially contains the necessary files for creating a simple web page, just as we described in the previous section. It contains:
You can actually go ahead and open the index.html in your browser now - although it won't much sense at this point, the page shown below is an indication that the boilerplate is working correctly:
Now let's have a closer look at the content of the different files in the boilerplate.
For the sake of completeness, let's talk just a little bit about HTML - opening the index.html file in a code editor will reveal the following:
<!DOCTYPE html>
<html>
<head>
<title>simple</title>
<meta charset="utf-8" />
<script src="./fxhash.js"></script>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
HTML primarily functions on a basis of tags that define and structure the content of the web page. These tags come in the form of specific keywords that are enclosed in angle brackets <> . Tags usually come in pairs: an opening tag and a closing tag containing some text, or other tags in between. The opening tag indicates the beginning of an element, and the closing tag indicates the end of that element. These tags are then used as instructions by the web browser to structure the content between these tags.
In the case of fx(hash) projects we're usually not going to write much HTML code, usually none at all - except maybe in a scenario in which the artist is creating a generative artwork with HTML and CSS. The index.html that comes with the boilerplate is a very simple web page that references the two js files, the fxhash.js file and index.js file, that are also found in the boilerplate folder.
Why is the fxhash.js script referenced in the head tag, whereas the artist's index.js script is included in the body tag?
It is common practice to include important scripts required for the proper execution of a web page in the head tag - scripts referenced in the head tag are loaded in before the page is actually run by the browser - this makes sure the fx(hash) functions are available when the time comes to execute the artist script. If you include third party libraries in your project, you should also reference them in this head tag.
A few other tags that also exist in the index’s head are:
title: the title tag is the title of the webpage, and should contain the name of your project. When your artwork is opened in live view, this title will appear as the title of the tab it is open in.meta: some metadata information about the document, this is a standard tag that is included in every webpage. Usually it is left as is.stylesheet: a reference to the css stylesheet that takes care of formatting the html document. This will simply bring in the styling instructions, if any.Additionally, you can include a special tag in the head of your project in case you'd like the page to display a favicon when it is opened in live view - you'd simply drop the favicon file (a PNG or SVG file) in the project directory alongside the other files and link it as such:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
A good example for this are loackme's projects - that always include a custom favicon:
The styles.css in the boilerplate is empty - meaning that it applies no styling to the HTML. This file isn’t necessary, but often used for the purpose of displaying tokens correctly within the browser window, we address this in more detail in the Responsive Projects page.
<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/f9d1e984-50ed-4650-a543-95d2b6c0ba90/4f62a9ba-8583-43e6-aa31-c9186e4ac13a/fx_doc-icon_warning_001.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/f9d1e984-50ed-4650-a543-95d2b6c0ba90/4f62a9ba-8583-43e6-aa31-c9186e4ac13a/fx_doc-icon_warning_001.png" width="40px" /> This file should not be edited.
</aside>
A standalone script provided by fx(hash) that exposes several functions required for creating platform compatible projects. The contents of this script file and its purpose are discussed in more detail in the Project SDK & API: Integration and Use section.
This file should be completed by you, the artist, and should contain the code that creates the generative artwork displayed by the index.html. Right now, the boilerplate contains a bunch of code that produces the screen that we've shown above, you don't have to worry about what this information is at this point - it’ll make more sense after reading the Artist Tools section.
<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/f9d1e984-50ed-4650-a543-95d2b6c0ba90/6111dfdc-e643-408e-b27d-5aad6f3608b7/fx_doc-icon_notes_001.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/f9d1e984-50ed-4650-a543-95d2b6c0ba90/6111dfdc-e643-408e-b27d-5aad6f3608b7/fx_doc-icon_notes_001.png" width="40px" /> But make sure to read the rest of the Artist Tools chapter first before you start building your generative token - there are actually a couple of different types of generative tokens for which it is recommended to use some of the more advanced artist tools instead of the simple boilerplate.
</aside>
This file should contain the License that you wish to apply to your project. Because files that are uplaoded to IPFS or OCNCHFS can be viewed an accessed by anyone, it is important to include a legal document that can help protect your intellectual property.
A License is essentially a document that details the usage rights for the code and the generated artworks; whether the code can be used and modified by others or not, and the specifics of it. You can read more about it and find suggestion for some common licenses in the Licensing page of the docs.
← Previous
Next →
