Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

FIFART

Data-Driven Brutalist Football Poster Generator

Live Demo Tech Stack License: MIT

An algorithmic generative design engine that transforms raw football match statistics—goals, shots, possession percentages, pass accuracy, and 6-stage intensity timelines—into deterministic, brutalist vector posters.


Geometric Element Target Metric Mathematical Formula / Function
Goal & Shot Radii Goals & Shots on Target r = 45 + (goals × 22) + √(shots) × 4
Attack Triangles Shots, Accuracy & Possession H = Clamp(80 + shots×10 + passAcc×0.7, 120, 260)
Equilibrium Axis Possession Delta Shift Y = H × (0.50 - (Possession - 50)/50 × 0.12)
Intensity Spline 6-Stage Match Timeline Catmull-Rom / Cubic Bézier Wave Generation
Artboard Tilt Match Momentum Trend Rotation = (Trend_home - Trend_away) × 12°

Output Showcase & System Blueprint

Fifart Generated Poster Output
Generated Poster Output
Fifart Design Blueprint Schema
Data Encoding Blueprint & Spatial Schema

Data-Driven Visual Foundations

Unlike static graphics software, Fifart Generation Model treats sports analytics as a primary generative driver. Every shape, coordinate shift, angle, and radius on the canvas maps directly to game event data.

1. Goal & Shot Radius Function

The core radial focal points map goal totals and shot frequency. The radius $r$ scales quadratically with goals scored while incorporating a sub-linear shot weighting factor:

$$r(\text{goals}, \text{shots}) = 45 + 22 \cdot \text{goals} + 4 \cdot \sqrt{\text{shots}}$$

2. Attack Polygon Dynamics

Primary attack triangles scale in height according to offensive volume and pass efficiency, while their base width expands proportionally to spatial control (possession %):

$$\begin{aligned} \text{Height} &= \text{Clamp}\Big(80 + 10 \cdot \text{shots} + 0.7 \cdot \text{passAcc}, \ 120, \ 260\Big) \\ \text{Base Width} &= 250 + 1.2 \cdot \text{possession} \end{aligned}$$

3. Procedural Texture & Noise Fields

An embedded linear congruential pseudorandom number generator (PRNG) hashes team names and match dates into an integer seed:

$$\text{Seed}_{k+1} = (1664525 \cdot \text{Seed}_k + 1013904223) \bmod 2^{32}$$

This seed deterministically places individual grain particles, dust specks, and paper scratches, guaranteeing that every match receives a unique, reproducible vintage noise fingerprint.


Running Locally

No bundlers, build tools, or npm packages required—just native browser technologies.


1. Clone the repository:
    git clone [https://github.com/dkconnect/fifart-generation-model.git](https://github.com/dkconnect/fifart-generation-model.git)
    cd fifart-generation-model

2. Serve the project: Use any standard local HTTP server (e.g., Python's built-in server or VS Code Live Server):
    Python 3.x
    python -m http.server 8000

3. Open in Browser: Navigate to http://localhost:8000.


Created by Dibyanshu Kumar

About

An algorithmic generative design engine that converts football match analytics into brutalist vector posters using pure JavaScript and mathematical SVG mapping.

Topics

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages