A static content generator for interactive and parametrisable p5.js canvases.
Project description
Ginpar
Ginpar is a static website generator for interactive P5.js sketches, awkwardly named after Generative Interactive Parametrisable Canvases.
Key features:
- Generate an individual page for each sketch in your project.
- Generate forms to control the parameters of the sketch on the go.
- Specify what parameters from the sketch you want to control.
- Generate an index page that links to every sketch.
Ginpar aims to generate portfolios for generative artists.
Contents
How to use
tl;dr:
- Install
$ pip install ginpar
- Initialize
$ ginpar-quickstart
- Build
$ ginpar
Installing
For now the only way to get ginpar running is by installing the PyPi package:
$ pip install ginpar
Initializing
Ginpar has a quickstart project that imports a theme with jinja2
templates,
an example sketch, and an initial configuration file config.py
:
$ ginpar-quickstart
Preparing sketches
To use an existing sketch, you need to add some constants and functions with tight restrictions.
We suggest to check some examples.
Specifying parameters
First you need to specify the parameters that will be controllable in the sketch page. To do that, you must:
- Declare a variable with a string containing JSON valid syntax that also complies with Ginpar API.
- Enclose the declaration with the delimiters
/* ##ginpar */
/* ##ginpar */
const paramsJSON = `[
{
"var": "WIDTH",
"attrs": {
"type": "number",
"value": 2048,
"min": 0,
"max": 4096
}
},
{
"var": "HEIGHT",
"attrs": {
"type": "number",
"value": 2560,
"min": 0,
"max": 5120
}
},
{
"var": "STOP_ODDS",
"attrs": {
"type": "range",
"value": 0.8,
"step": 0.001,
"min": 0,
"max": 1
}
}]`
/* ##ginpar */
It's necessary, as for the current version, to only include one declaration between the delimiters. Ginpar relies on this to obtain the JSON string.
Assigning variables to corresponding values
This is optional, since Ginpar will automatically generate the JS script that fetches the values of the form and assign it to the variables.
However, following this step will allow you to keep using the sketch script without needing to use Ginpar.
To do this, declare a new function that converts the paramsJSON
string back
into variables:
function jsonToVars(json){
return Object.assign(...json.map(e => {return {[e.var]: e.attrs.value}}))
}
And re-write the declarations of the original variables like this:
const {
WIDTH,
HEIGHT,
// Any other constant you declared in paramsJSON
STOP_ODDS } = jsonToVars(JSON.parse(paramsJSON))
Note that for this to work, the constant symbol (e.g. WIDTH
) must be
equal to the value of var
in the JSON array
(e. g. {"var": "WIDTH", "attrs": {...}}
).
Building
To build, simply run:
ginpar
The building process consists of:
- Making a
public/
directory. - Reading the
config.json
file (this consists of, among other things, the author info, the Ginpar theme, and the website url). - Copying the static content of the selected theme into
public/
- Listing the contents of
sketches/
, and using the ones with.js
extension to:- Make a directory
public/filename/
that contains a generatedindex.html
andsketch.js
. - Create a
public/index.html
file that addsa
tags for everyfilename
.
- Make a directory
If you want to quickstart a project, read initializing.
Deploying
For now, we've only deployed in Netlify. However, using any other server to deliver static content should be easy.
Netlify
How to deploy to Netlify
Built With
- Jinja2 - Templating language for Python.
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
Contributors
- David Omar - Initial work - davidomarf
See also the list of contributors who participated in this project.
License
This project is licensed under the MIT License - see the LICENSE.md file for details
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.