Package: ginpar
GinparGinpar is astatic content generatorfor interactive P5.js sketches,
awkwardly named afterGenerative Interactive Parametrisable Canvases.By separating the primary development and the parametric experimentation,
it allows you to stop thinking about code once your pieces have reached an
acceptable level of complexity, freeing you to experiment in a GUI for the
browser.Features:Simple API to define the controllable variables in your sketch.Easy to adapt existing sketches.Easy replicability of each final result.Index page to list all your sketches.Checkginpar-quickstar.netlify.comto
see how a site generated with Ginpar looks like.The following Introduction is part of theGinpar Documentationand
may be read atIntroductionTable of contentsIntroductionPrerequisitesInstallationQuickstartInitializationCreating new sketchesAdapting existing sketchesSpecifying the parametersServing & BuildingBuild withVersioningContributorsLicenseIntroductionThis is a quick introductory documentation for the Ginpar static content
generator.Ginpar works similarly to other engines such as Jekyll, Hugo, or Pelican, but
with a narrower and deeper set of functionalities, since it's very specific in
its task.The two main objectives of Ginpar are:Allowing artists to stop thinking about code when experimenting with the
parameters that control the results of the artwork, achieving aquicker
feedback loop.Making interactive websites to share the artist's work, letting users play
with the same GUI.The basic structure of a Ginpar project consists of aconfig.yamlfile,
and asketchesdirectory.It's easy to adapt your existing sketches to work with Ginpar. In fact, the
onlynecessarystep is to add.parent("artwork-container")to thecreateCanvas()call.But to fully take advantage of Ginpar ---that is, the interactive sketch with
custom parameters---, you need to create adata.yamlfile. CheckAdapting existing sketchesandSpecifying the parameters.To be fully sure of how easy is to use Ginpar, check thisexampletogether with itssource code.You can ignorerequirements.txt,runtime.txt,netlify.toml,README.md, and.gitignore.PrerequisitesFor now Ginpar only runs using Python >= 3.6.
Future versions will add compatibility with Python 2.InstallationThe easiest way to install the latest version of Ginpar is using pip:pip install ginparTo make sure it's installed and working, run:ginpar --versionQuickstartGinpar has an example project ready for installation, it contains the default
project structure and a sketch example.If you're new to static content generators, this may be the best way to start.ginpar quickstartThis will create the following directory structure::.
├── config.yaml
└── sketches/
    ├── circles/
    │   ├── sketch.js
    │   └── data.yaml
    └── ...To build the project and start a server, run:cd quickstart
ginpar serveAnd the project will be live inlocalhost:8080Now, you can start to modify the contents ofconfig.yamlandsketches/.Next, you should readCreating new sketches,
orServing & Building.InitializationAlternatively, if you want to start a new project without importing anything
extra, run:ginpar initThis will prompt you for the values to build your configuration file and then
create the project using those values.With this command, you may configure things like the destination and source
directories (publicandsketchesby default).Checkginpar initor runginpar init --helpfor more
information.Creating new sketchesGinpar has a handy command to start new projects with some configuration
already set:ginpar new [SKETCH]This will create a new sketch inside your predefined source directory.
You can set the name when running the command, but it's optional.Checkcli:ginpar newor runginpar new --helpfor more
information.Now, you must bespecifying the parameters.Adapting existing sketchesFor Ginpar to build the interactive page, you'll need to add some modifications
to your sketch code.Adding it to the list of sketchesFirst, make your sketch detectable for Ginpar:Create a directorymy-sketch/insidesketches/.Copy your existent sketch script insidemy-sketchand rename it tosketch.js.Create adata.yamlfile.You should end with a structure like this::.
└── sketches/
    └── my-sketch/
        ├── sketch.js
        └── data.yamlMaking your sketch compatible with GinparIn yourcreateCanvasinstruction, add.parent("artwork-container").Now, you must bespecifying the parameters.Specifying the parametersEach sketch is a directory that contains two files:sketch.jsanddata.yaml. Thedata.yamlfile is where the parameters specification
takes place.To create a parameters list, add this to your data file:---date:2019-11-04# ... other data# ...# Key that contains a list of parametersparams:# The name of the parameter must be the key of the element# It must match a variable in your sketch.js file-MY_VARIABLE:# Ginpar parameters definition keys. All optional.# For a full list check the APIrandomizable:Truename:My displayed variable name# HTML valid attributesattrs:type:numbervalue:30step:1min:0max:100Once parsed, Ginpar will produce:A form containing each of the items in theparameterslist:<form><divclass="form-field"><labelfor="my-variable">My displayed variable name</label><inputname="my-variable"id="my-variable"type="number"value="30"step="1"></div><!-- More form-fields. One for each params element. ---></form>A JS code fragment to update each of the parameters using the form values:functionupdateVars(){MY_VARIABLE=document.getElementByID("my-variable").value;// More variable updates. One for each params element.}If the type of the input is anumber, Ginpar will parse it before
assigning it to the variable.To use this parameters inside your sketch, just use the same name you used as
key:console.log(MY_VARIABLE)// ==> 30Serving & BuildingGinpar has two different commands to build your site:ginpar buildWill build your site into thebuild_directorypath, which by default ispublic.ginpar serveWill start a new server onlocalhost:8000and open your default web
browser. You can specify the port with--port.Checkginpar serveandginpar build, or runginpar serve --help,ginpar build --helpto see the full list of
options and arguments available.Built WithJinja2- Templating language.Click- CLI Tool composer.PyYAML- YAML framework.Livereload- Hot reloading server.VersioningWe useSemVerfor versioning. For the versions
available, see thetags on this repository.ContributorsDavid Omar-Initial work-davidomarfSee also the list ofcontributorswho participated in this project.LicenseThis project is licensed under the MIT License - see theLICENSE.mdfile for details