ginpar 0.5.0

A static content generator for interactive and parametrisable p5.js canvases.

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
  • Installing
  • Initializing
  • Quickstarting
  • Creating sketch files
    • sketch.js
    • data.yaml
  • Building
  • Deploying
    • Netlify
• Built with
• Versioning
• Contributors
• License

How to use

tl;dr:

1. Install

   $ pip install ginpar
   

2. Initialize a new project

   $ ginpar init
   

3. 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 the createCanvas 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

• Jinja2 - Templating language.
• Click - CLI Tool composer.

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