A static content generator for interactive and parametrisable p5.js canvases.
Project description
Ginpar
Ginpar is, and will be unstable until we don't release a v1.0.0.
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 a new project
$ ginpar init
- Build
$ ginpar build
Alternatively to init
, you can use quickstart
and import a working example
automatically.
Use ginpar --help
to see a list of commands and options for each one.
Installing
For now the only way to get ginpar running is by installing the PyPi package:
$ pip install ginpar
Initializing
$ ginpar init
Ginpar will prompt you for the variables of your site, such as name
,
description
, author
, etc.
This will create a new directory under the name you specified for name
.
Available flags:
--quick, -q
: Skip the prompt and load the default values--force, -f
: If there's a directory with the same name, remove it.
Quickstarting
$ ginpar-quickstart
Ginpar includes a working example so you can modify its contents, and learn how to set your own projects if current docs are not enough (they're not).
Available flags:
--force, -f
: If there's a directory with the same name, remove it.
Creating sketch files
Every directory inside the sketches/
folder will be considered a sketch if
it contains:
sketch.js
data.yaml
For example, for a sketch named rectangle
, you'd need this file structure:
sketches/
|- rectangle/
|- sketch.js
|- data.yaml
sketch.js
This is the script for the sketch. The only modifications you need to do to be able to use ginpar are:
- Add a
.parent("artwork-container")
to thecreateCanvas
instruction.
data.yaml
The data.yaml
file will contain the list of variables that you'll be able to
control in the final sketch page.
The structure is this:
---
# The name of the variable to control in your sketch.js file
- var: NUMBER_OF_POINTS
# Valid HTML input attributes, or ones that fit our API
attrs:
type: number
value: 30
step: 1
- var: SOME_RATIO
# You can specify a custom name to display in the HTML form
name: Minimum column height factor
attrs:
type: range
value: 0.1
step: 0.01
# These are all valid HTML attributes
min: 0
max: 1
Ginpar will automatically produce the HTML forms, and the scripts to update the script variables everytime the input values change.
You don't need to declare these values in your JS file, but you can do it. If
you decide to, declare them with either let
or var
, not with const
.
Building
To build, simply run:
ginpar build
Deploying
For now, we've only deployed in Netlify. However, using any other server to deliver static content should be easy.
Netlify
You need to specify:
- the python version to run
$ echo "3.7" > runtime.txt
- add
ginpar
as dependency$ echo "ginpar" > requirements.txt
- tell Netlify how to build
$ echo -e "[build]\n command = \"ginpar build\"\n publish = \"public\"" > netlify.toml
Then just make a deployment and you'll be ready to go.
To see a site in production, check gen.algorithms
Built With
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.