Structure of a Project

In this page we provide an overview of the technologies used for the creation of web pages, how they are leveraged for the purpose of creation fxhash projects, and also have a first look at the structure of an fxhash project.

Generative art can be created with a variety of different programming languages and with many different software tools. However, the generative artworks created for fxhash need to be able to run in the browser, meaning that they need to be self-contained web projects. A generative artwork on fxhash is thus simply a web page that displays generative graphics.

For this purpose, we need to have a basic understanding of the essential components that make up a webpage and how they work together to display a generative artwork in the browser.

On Web Technologies

The three core technologies that power the modern internet today are:

HTML: stands for Hypertext Markup Language, constituting the backbone of nearly every webpage today, it is the standard markup language of the internet. A markup language is a system consisting of a set of symbols inserted in a text document to control its structure, formatting, or the relationship between its parts Its primary purpose is the structuring of content on a web page.
CSS: short for Cascading Style-Sheet. Style sheet languages are used for describing the presentation of a document written with a markup language. It is used in conjunction with HTML to make webpages look visually pleasing - with CSS we can control the layout of a page, the visual properties of elements on that page, the typography, and much more. In essence, it is used to give webpages their visual aesthetics.
Javascript: often abbreviated as JS, it's arguably become the most popular programming language today, and is the primary programming language used on the Web as it allows us to add functionality and interactivity to webpages. Additionally, it can also be used for generating graphics in the browser, and has become increasingly popular for the purpose of making generative art. It is also commonly used for fxhash projects.

Structure of a GENTK

Since an fxhash project is at its core just a website that displays generative art, it essentially makes use of HTML, CSS and Javascript to do so. At the bare minimum, an fx(hash) project consist out of an index.html file, a css stylesheet, a Javascript file that contains the artist's code, as well as a necessary Javascript file provided by fxhash that makes it compatible with the platform:

index.html: every web project typically has a primary HTML entry point, also known as the index file. This file usually represents the initial view of a webpage, and in the case of generative tokens is the page that will display the generative artwork - it's the page that fxhash serves and displays whenever a GENTK is viewed on the platform.

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/f9d1e984-50ed-4650-a543-95d2b6c0ba90/d19e8179-9d3f-425f-9926-415c6ee8f1a6/fx_doc-icon_warning_001.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/f9d1e984-50ed-4650-a543-95d2b6c0ba90/d19e8179-9d3f-425f-9926-415c6ee8f1a6/fx_doc-icon_warning_001.png" width="40px" /> It is necessary that every fxhash project has such an index.html file - it sits at the helm of the project and references all other files that are involved in the creation of the artwork.

</aside>

index.js: the script file that generates the generative artwork - most, if not all of the artists' work will happen here. This script file contains the code that powers the generative system behind the art.

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/f9d1e984-50ed-4650-a543-95d2b6c0ba90/76de99fa-cbf2-404e-9d12-0acf020a6b07/fx_doc-icon_notes_001.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/f9d1e984-50ed-4650-a543-95d2b6c0ba90/76de99fa-cbf2-404e-9d12-0acf020a6b07/fx_doc-icon_notes_001.png" width="40px" /> It actually doesn't matter what this file is called, it just needs to be referenced correctly within the index.html file. Alternatively, the script could also be placed directly inside the index.html within a <script></script> tag.

Moreover, it is often the case that larger projects split their code over several script files, which is also perfectly fine. In that scenario the index.html file just needs to reference all of these files.

</aside>

styles.css: the stylesheet will generally only contain a few styling instructions for the purpose of correctly displaying the generative artwork in the browser, such that it's centered and contained within the browser window. We will talk more about this when we start building our generative token.
fxhash.min.js: A necessary script file provided by fxhash - every project needs to include this file. This script exposes a number of functions that make your project compatible with the fx(hash) platform. These functions are geared towards aiding artists in turning their generative artworks into deterministic generators - we will have a detailed look at the contents of this file in the Project SDK & API section, where it'll be properly introduced.

In the next section we'll have a look at the fxhash boilerplate - a starting template that already includes all of these files and essentially constitutes the quickest way to get started building a generative token for fxhash, without you having to manually create these files.

← Previous

fx(params)

The Boilerplate