Artworks made during the Generative Art course given by Isaac Pante at UNIL during the spring semester 2023.
![](https://private-user-images.githubusercontent.com/48287183/291885334-02b89c07-0b79-4d84-bf32-432409a4a049.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDk4MTMsIm5iZiI6MTcyNDEwOTUxMywicGF0aCI6Ii80ODI4NzE4My8yOTE4ODUzMzQtMDJiODljMDctMGI3OS00ZDg0LWJmMzItNDMyNDA5YTRhMDQ5LmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDIzMTgzM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE3YWQ2OGE1ZTc4NzZmM2JiNDQxZWUyZTY5MmE2ZTZmNDk4YmM3ZjEwZjNlODhlMmY4ODFhZmRjYTQ0NzExMDQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ej3jzrQC6Th64W0Ft2tAePIWQ7bDJ5BgVlsxTYf7dY8)
For this serie of p5.js works, I was inspired to try and recreate some of Georg Nees most famous artworks. I selected Schotter, Untitled (Werkstatt Edition Kroll), and Untitled (Bild 13), for their elegance and exploration of the theme of chaos and order, a theme strongly present in Nees' body of work. Bild 13 was especially tricky to recreate, due to its extensive use of trigonometry.
In this serie, I use and combine simple geometric shapes to produce intricate patterns. Motherboard explores creative rectangle packing using a tricky maximal rectangle algorithm, while Moiré explores Moiré patterns using simple rotating hashes to create complex wavy patterns. Finally, Lignes uses random lines in a grid, rotated in increments of 45°, to create grid-like symbols.
In this serie, I used trigonometric functions, mainly sines, to generate various "sinescapes" in the spirit of - notably Charles Csuri - many artists who used such functions to generate organic landscapes. In some of the artworks, I also make use of Perlin noise to add touches of organic chaos.
The inspiration behind this online gallery draws from the timeless principles of Swiss design — also known as the International Typographic Style — offering a refined and understated canvas reminiscent of the "white cube" often found in museography — a term denoting a neutral and unobtrusive gallery space. Purposefully selecting this minimalistic backdrop serves to highlight the vivid and geometric generative artworks within a neutral environment, directing focus solely on the art. The goal here is to seamlessly blend the classic sophistication of Swiss design with the lively expressiveness inherent in generative art and web design, resulting in an enticing and contemporary online gallery experience.
This site uses the p5.js
library to generate artworks. The styling uses SCSS and the layout uses Pure CSS.
A small templating system built with Python is also used to facilitate development. It makes use of jinja2
, watchdog
, and markdown2
.
To set up the development environment for this website, follow these steps:
For a smoother development workflow, it's recommended to use Visual Studio Code (VS Code) with the following extensions:
- Live Server: This extension enables live reloading of your web page when changes are made, making development more efficient.
- Live SASS compiler: This extension compiles SCSS files in real-time, simplifying the management of the styles.
In order to properly render SCSS to the correct path: Go to VScode User Settings > Select "Live Sass Compiler Config > add
"liveSassCompile.settings.formats": [{
"format": "expanded",
"extensionName": ".css",
"savePath": "./assets/css"
}]
To set up the Python environment, follow these steps:
Create the virtual environment by running the following command in your project's root directory:
python -m venv venv
Activate the virtual environment based on your operating system:
source venv/bin/activate
venv\Scripts\activate
Install the required Python packages using pip:
pip install -r requirements.txt
Finally, start the templating engine to render the website's index.html
file and listen for further modifications:
python templating_engine.py
With these steps completed, you'll have the necessary development environment set up to work on this website efficiently. You can now make changes to the code and see the live updates in the browser.