Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/guidoschmidt/potzblitz
Generative UI library for generative projects
https://github.com/guidoschmidt/potzblitz
generative p5 p5-library p5js p5js-library threejs ui-lib ui-library user-interface
Last synced: 1 day ago
JSON representation
Generative UI library for generative projects
- Host: GitHub
- URL: https://github.com/guidoschmidt/potzblitz
- Owner: guidoschmidt
- Created: 2022-08-02T10:35:17.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-23T21:17:27.000Z (12 months ago)
- Last Synced: 2024-11-09T23:15:17.365Z (6 days ago)
- Topics: generative, p5, p5-library, p5js, p5js-library, threejs, ui-lib, ui-library, user-interface
- Language: TypeScript
- Homepage: https://potzblitz.guidoschmidt.cc
- Size: 4 MB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
##### :warning: Pre-Alpha Prototype
# Potzblitz
> Generative UI toolkit for generative projects
---
### Rationale
The idea of potzblitz is to use a more declarative approach for defining control
user interfaces (UI) for generative artworks and interactive systems. Instead of
copy-pasting imperative code over and over again, the UI should be automatically
built from the systems configuration.
Speaking in code, instead of doing this:
```jsx
const ui = new UI();
const button = ui.addButton("redraw");
button.onChange(() => sketch.draw());
ui.add(button);
```
potzblitz aim to provide a more declarative way. Any system might already have
some form of state or a bunch of variables which define a controlable parameter
space and a set functions to tweak and change the system:
```jsx
const settings = {
seed: 12,
backgroundColor: "#eebe82",
particleCount: 2000,
randomize: () => randomizeParameters(),
download: () => downloadCanvas(),
}
new UI().build(settings);
```
Additionally I wanted to have a control library which would could easily
be adapted in style and functionality, as well as being able to work with a
bunch of different frameworks (React, Solid.js, small Javascript only projects etc.)
---
### Ideas
This section outlines some thoughts and ideas for this project
- Generalize components in a framework-independant structure? Generate source
code for React, Solid.js and other frameworks from a generalize data
structure? [Web Components API](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
- Separate a UI builder from its set of components. Have a `Map` which gets fed into the UI Builder to be able to customize and ad
in project-specific components easily
- SCSS Themeing
- Plugin API to be able to add in middleware like functionality (e.g. websocket
connector for controlling remote systems)
- Track state for an undo/redo history
- Use decorators for specifying UI parameters (range of sliders, which UI
component to use, labels, etc.)
---