https://github.com/tiagofmartins/mai-visual-identity-system
Processing sketch that generates the dynamic visual identity of the MAI program at the University of Coimbra.
https://github.com/tiagofmartins/mai-visual-identity-system
artificial-intelligence coimbra computational-design generator graphic-design logo processing visual-identity
Last synced: 6 months ago
JSON representation
Processing sketch that generates the dynamic visual identity of the MAI program at the University of Coimbra.
- Host: GitHub
- URL: https://github.com/tiagofmartins/mai-visual-identity-system
- Owner: tiagofmartins
- Created: 2025-04-04T21:47:06.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-04-04T22:53:47.000Z (7 months ago)
- Last Synced: 2025-04-04T23:20:45.571Z (7 months ago)
- Topics: artificial-intelligence, coimbra, computational-design, generator, graphic-design, logo, processing, visual-identity
- Language: Processing
- Homepage: https://www.dei.uc.pt/mia
- Size: 10.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Visual Identity System for the MAI Program
This system generates visual compositions that serve as the visual identity of the [Master in Artificial Intelligence (MAI)](https://www.dei.uc.pt/mia) at the University of Coimbra. Designed as a generative and dynamic approach to branding, the compositions are built from a grid-based layout that integrates custom typographic elements with rich media sources such as images and videos. The result is a flexible visual system capable of producing endless variations, suitable for posters, animations, and digital media.
This system is implemented as a Processing sketch, making it easy to run and instantly generate new visual compositions with minimal setup.
### Parameters Overview
Below is a list of the main parameters and what they control in the system.
| Parameter | Description |
|------------------------|-------------|
| `w` | Width of the composition in pixels, including margin. |
| `h` | Height of the composition in pixels, including margin. |
| `margin` | Space in pixels added as outer margin around the composition. |
| `columns` | Number of columns in the layout grid. |
| `rows` | Number of rows in the layout grid. |
| `animateGrid` | If `true`, the grid will animate using Perlin noise over time. |
| `gridAnimationSpeed` | Speed of Perlin noise-based animation; higher values increase motion intensity. |
| `logoCol` | Horizontal position of the logo in the grid (column index). |
| `logoRow` | Vertical position of the logo in the grid (row index). |
| `logoColours` | Array of preset colours that can be used for the logo. |
| `pathInputMedia` | File path to the input image or video used as background media. |
| `minCropZoom` | Minimum zoom applied to cropped media content. |
| `maxCropZoom` | Maximum zoom applied to cropped media content. |
| `maxCropDisplacement` | Maximum offset for randomly displacing the cropped area; `0` means no displacement. |
| `fps` | Frames per second used during animation and [video export](#exporting-video). |
### Keyboard Shortcuts
Use the keyboard to interact with the system. Here’s what each key does:
| Key | Description |
|-------------|-------------|
| `←` (Left) | Move the logo one column to the left in the grid. |
| `→` (Right) | Move the logo one column to the right in the grid. |
| `↑` (Up) | Move the logo one row up in the grid. |
| `↓` (Down) | Move the logo one row down in the grid. |
| `g` | Generate a new grid. |
| `l` | Load a random configuration for the logo from the available set of options. |
| `Enter` | Load a random configuration and immediately regenerate the grid. Useful for exploring new variations quickly. |
| `c` | Cycle through the available logo colours. |
| `Space` | Toggle grid animation. When enabled, the grid deforms over time using Perlin noise. |
| `1`, `2`, `3` | Change the grid mode. Each mode defines a different grid layout logic. |
| `4` | Toggle the visibility of the logo. When off, only the media/grid is shown. |
| `d` | Toggle debug mode. |
| `e` | Toggle multi-frame export. Only available if single-frame export is off. |
| `s` | Toggle single-frame export. Only available if multi-frame export is off. |
### Exporting Video
The system supports video creation by exporting an image sequence of animation frames. These frames are saved into the `outputs` folder and can be compiled into a video using software such as QuickTime ([instructions](https://support.apple.com/en-gb/guide/quicktime-player/qtp315cce984/mac)), ffmpeg, or any other tool that supports frame sequences. When creating the final video, make sure to use the correct frame rate, which is defined by the `fps` parameter in the sketch. This ensures that the timing and playback speed of the final video match the intended animation.