https://dragonbleapiece.github.io/Paperwork/
Paperwork is an online software for research in art and in the field of computer and visual research. It is developed in the perspective of computer art practice in the context of art schools, colleges, high schools and so on. The application helps producing drawings in the philosophy of generative processes. It is concerned with patterns, polygons, repertories and grammars. Moreover, the interface enables the learning and the editing of algorithms and therefore the construction of simple computational processes. It also offers to export svg format that makes it compatible with the traditional vector work area (graphic design, pen plotter, laser cutting, ...).
Paperwork’s main algorithm is based on Markov chain, an algorithm that was used by artists such as Frieder Nake (Germany), Hiroshi Kawano (Japan), Hervé Huitric and Monique Nahas (France) in early Computer Art. It is now heavily used in our digital environment (google page ranking, chatbots, physical phenomenon modeling, ...). It is also classified in the machine learning area of the computational field.
The Paperwork web application is based on the previous software experiment Generic Images (2018). Paperwork’s project is developed thanks to IMAC-ESIPE training program in the University Gustave Eiffel. Made in React and Paper.js.
Right click on anything you can and add shapes or organizing elements.
- Basic Shapes
- Rectangle / Square
- Triangle
- Ellipse / Circle
- Hatching
- Horizontal
- Vertical
- Right Oblique
- Left Oblique
- Characters
- Zero 0
- One 1
- Arrow
- Void (To be used in Grid)
There are 3 types of input for Transformations Parameters.
- Value : Ponctual
- Increment : From a to b with step s
- Limited : Stop at extremum
- Loop : Restart from a or b (depending on decrement or increment state)
- Loop-Reverse : Alternate between decrement and increment
- Random : Random value in a given range
In a Grid, the increment value is calculated from the previous drawing. The random value is gotten at each drawing. In a Recursion, only the value of the ThisBox drawn at level 1 is kept.
Allow to dispatch elements in a Square Grid
Exist 6 Grid Distribution Modes :
Linear X | Linear Y | Diagonal Left |
---|---|---|
![]() |
![]() |
![]() |
Diagonal Right | Orthogonal | Snail Right |
---|---|---|
![]() |
![]() |
![]() |
Briefly, Markov Serie is a random base serie with states. For each state, there are probabilities for state transitions.
In this exemple, after a Circle, there are 90% chance to obtain a Circle, 5% chance to obtain a Square and 5% chance for a Triangle.
Paperwork use a Random Behavior to generate different pictures based on the same model.
Paperwork implements recursive drawing with another element named ThisBox. ThisBox refers to its parent box -that is a Recursion box- and can only be placed inside of it. Changing its transformation parameters give results like fractals. You can vary the number of recursions and uncheck the Restrained Level Recursion box.
Recursion Number | 1 | 2 | 3 | 4 | 5 |
---|---|---|---|---|---|
Result | ![]() |
![]() |
![]() |
![]() |
![]() |
In sum, an interesting mistake.
You can save your work in JPG or SVG. The SVG is here to permit modifications on the image without information loss.
The library Paper.js is mainly used in that purpose.
Note : You might suppose that the name Paperwork comes from the name of the library used. In fact, it is purely coincidence. At the beginning of the project, it was the P5.js library that was used. The name refers to go back to basis for doing Art.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.