This is the basic boilerplate with minimal installations to setup p5.js for fxhash(Visual Studio Code is most suited although you can use other editors).

1.Visual Studio Code

2.Git(Optional)

There are two ways to download this boilerplate:

1. Basic one is to directly download the zip file from github itself by clicking code->Download Zip

2. Other one is through git clone (git insallation is needed ) Now if you have git setted up head to terminal/command prompt and enter

   git clone https://github.com/Prime351585/p5-boilerplate-for-fxhash.git

   The installation will go like this

   

Now if you've cloned the boilerplate through git you may see this folder

And if you've downloaded it you'll need to extract it.

if you've installed Vs Code then head to the Vs Code Extension place and install Live Server extension(Ritwick Dey)

Once the extension is installed you need to restart Vs Code and you'll see a little Go Live option in bottom right corner of your Vs code window

Now once inside Vs code window go open the boilerplate as a folder by going to File->Open Folder and selecting the p5-boilerplate folder

Once opened you'll see the files to work on

So inside boilerplate we have directories like this...

TSdef folder the two files which enable intellesense in vscode which help to code with ease(i borrowed it from stackOverflow https://stackoverflow.com/questions/54581512/make-vscode-understand-p5js  )

Inside Library folder I've included both core library files of p5.js and p5.min.js one can use any one of it by selecting from html file

Then we have main.js file in which we'll work

Then there is html file which contains fxhash script

There is a css file which keeps the canvas at centre of the screen.

By default the main.js will have a code to display a circle of random radius and random color alongwith the fxhash seed

The first two lines of main.js are for refrencing the intellisense for vscode if you don't want intellisense you can remove these two lines and delete TSDef folder as well.

/// <reference path="./TSDef/p5.global-mode.d.ts" /> "use strict";

Once everything is setted up hit go live to open live preview in a browser and you'll see something like this

Once you've completed writing your code open the folder in which you're working via file explorer or you can directly Reveal it in file explorer from Vs Code

Once the folder is opened select all files

Right Click and compress it to a zip

You'll get a zip file,Rename it to anything you want

Then upload it on fxhash and you are good to go.................... : )