PATRIMOINE.EXE

Votre projet final

En groupe de 2 à 3 étudiants, vous produisez une œuvre numérique issue d'une source patrimoniale nantaise. Le projet peut être génératif, data-driven, interactif ou hybride. La technologie est choisie parce qu'elle renforce le concept, jamais pour elle-même.

Ce qui est obligatoire

• Une source patrimoniale identifiable et documentée.
• Une grammaire explicite : au moins une règle structurante clairement formulée.
• Un prototype fonctionnel lançable dans un navigateur.
• Au moins trois paramètres réellement opérants dans le système.
• Un test par un autre groupe et au moins une itération documentée.
• Une documentation complète permettant à une autre personne de comprendre et relancer le projet.

Ce qui est optionnel

Le patrimoine comme système, pas comme image

Une façade, un escalier, un vitrail, une ferronnerie, un objet industriel, une archive ou un paysage contiennent des relations. Le travail computationnel commence lorsque vous cessez de demander « à quoi cela ressemble ? » pour demander « comment cela fonctionne-t-il visuellement, spatialement ou temporellement ? »

Source → propriétés observables

Copie, citation, traduction, génération

Transformer une observation en règles calculables

Le code ne comprend ni « élégant », ni « ancien », ni « patrimoine ». Il comprend des nombres, des relations, des conditions et des fonctions. Votre grammaire fait le pont entre perception et calcul.

Les primitives utiles

Symétries et opérations

La fiche de grammaire

p5.js : le code comme matériau de design

p5.js permet de travailler directement avec dessin, temps, hasard, interaction et données dans le navigateur. Vous n'avez pas besoin de maîtriser tout JavaScript : vous devez surtout comprendre la logique du système que vous construisez.

Le squelette minimal

function setup() {
  createCanvas(1280, 720);
  pixelDensity(1);
}

function draw() {
  background(244, 241, 233);
  // Votre système est recalculé ici à chaque image.
}

Variables : rendre une forme paramétrique

let moduleSize = 40;
let spacing = 12;
let rotationStep = 0.12;

function drawModule(x, y, index) {
  push();
  translate(x, y);
  rotate(index * rotationStep);
  rectMode(CENTER);
  noFill();
  stroke(20);
  rect(0, 0, moduleSize, moduleSize);
  pop();
}

Boucle : transformer un motif en système

for (let y = 0; y < height; y += moduleSize + spacing) {
  for (let x = 0; x < width; x += moduleSize + spacing) {
    const index = floor(x / (moduleSize + spacing)) +
                  floor(y / (moduleSize + spacing));
    drawModule(x, y, index);
  }
}

Fonctions : isoler votre grammaire

Une bonne fonction correspond souvent à une idée clairement formulable : drawRosette(), drawBalustrade(), applyWeather(), updateInteraction().

Random vs noise

Exemple : radialité

let branches = 12;
let radius = 180;

function draw() {
  background(244, 241, 233);
  translate(width/2, height/2);
  noFill();
  stroke(15);

  for (let i = 0; i < branches; i++) {
    push();
    rotate(TWO_PI * i / branches);
    line(40, 0, radius, 0);
    circle(radius, 0, 18);
    pop();
  }
}

Une œuvre générative n'est pas une animation aléatoire

Un système génératif possède un espace de possibilités. Votre travail consiste à définir les règles, les limites et les relations qui garantissent que les variations restent conceptuellement cohérentes.

Invariants + variables + contraintes

Quatre régimes temporels

Seeds et archive

let seed = 12092026;

function setup() {
  createCanvas(1280, 720);
  randomSeed(seed);
  noiseSeed(seed);
}

function keyPressed() {
  if (key === 'R') {
    seed = floor(random(999999));
    randomSeed(seed);
    noiseSeed(seed);
  }
}

Une donnée ne devient intéressante qu'après un choix de mapping

Ajouter une API ne constitue pas un concept. Vous devez expliquer pourquoi une donnée donnée modifie une propriété précise de l'œuvre et ce que cette relation fait comprendre ou ressentir.

Le principe de mapping

Exemple Open-Meteo : météo de Nantes

Open-Meteo permet de récupérer des données météo JSON sans clé pour des usages simples. Le code ci-dessous doit toujours disposer d'un fallback local.

let weather = {
  temperature: 15,
  windSpeed: 10,
  windDirection: 0,
  rain: 0
};

async function loadWeather() {
  const url = "https://api.open-meteo.com/v1/forecast" +
    "?latitude=47.2184&longitude=-1.5536" +
    "¤t=temperature_2m,wind_speed_10m,wind_direction_10m,precipitation" +
    "&timezone=Europe%2FParis";

  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error("HTTP " + response.status);
    const json = await response.json();
    weather.temperature = json.current.temperature_2m;
    weather.windSpeed = json.current.wind_speed_10m;
    weather.windDirection = json.current.wind_direction_10m;
    weather.rain = json.current.precipitation;
  } catch (err) {
    console.warn("API indisponible : fallback local", err);
  }
}

Mapping possible

let rotationAmount = map(
  constrain(weather.windSpeed, 0, 80),
  0, 80,
  0.02, 0.30
);

let density = map(
  constrain(weather.temperature, 0, 35),
  0, 35,
  8, 30
);

Exemple Nantes Open Data : patrimoine arboré

Le portail Open Data de Nantes Métropole expose des datasets via une API. Le patrimoine arboré peut servir de matière pour travailler espèce, localisation, distribution ou densité.

const treesURL =
  "https://data.nantesmetropole.fr/api/explore/v2.1/catalog/datasets/" +
  "244400404_patrimoine-arbore-nantes-metropole/records?limit=50";

async function loadTrees() {
  try {
    const r = await fetch(treesURL);
    if (!r.ok) throw new Error("HTTP " + r.status);
    const json = await r.json();
    const records = json.results;
    console.log(records.length, "arbres chargés");
  } catch (e) {
    console.warn("Fallback dataset local", e);
  }
}

Normaliser avant de mapper

function normalize(value, minValue, maxValue) {
  return constrain((value - minValue) / (maxValue - minValue), 0, 1);
}

let n = normalize(weather.windSpeed, 0, 80);
let angle = lerp(0.02, 0.30, n);

Choisir une donnée pertinente

Une interaction est une relation perceptible

Le visiteur agit ; le système interprète ; l'œuvre répond. L'interaction est réussie lorsque cette boucle est compréhensible, suffisamment rapide et cohérente avec le concept.

Trois niveaux

Interaction minimale avec la souris

function draw() {
  background(244, 241, 233);

  let nx = constrain(mouseX / width, 0, 1);
  let ny = constrain(mouseY / height, 0, 1);

  let scaleFactor = lerp(0.5, 2.0, nx);
  let rotationSpeed = lerp(-0.02, 0.02, ny);

  // utilisez scaleFactor et rotationSpeed dans votre grammaire
}

Touch / mobile

function touchMoved() {
  // Sur mobile, p5.js expose les touches actives via touches[].
  // Toujours prévoir un comportement clavier/souris alternatif.
  return false; // évite le scroll de page pendant l'interaction
}

Webcam : présence et responsabilité

let cam;

function setup() {
  createCanvas(1280, 720);
  cam = createCapture(VIDEO);
  cam.size(320, 180);
  cam.hide();
}

function draw() {
  // Vous pouvez analyser l'image ou l'utiliser comme entrée visuelle.
  // N'enregistrez pas de personnes sans cadre clair de consentement.
}

Accessibilité de l'interaction

• Prévoir une alternative clavier/touch lorsqu'une interaction corporelle est essentielle.
• Ne pas exiger une posture debout ou des gestes de grande amplitude.
• Éviter les flashs rapides et les effets stroboscopiques.
• Ne pas rendre le son indispensable sans alternative visuelle.
• Le projet doit rester compréhensible sans longue explication orale.

Nantes comme corpus de recherche

Le territoire n'est pas un décor. Il fournit des sources, des histoires, des formes, des usages et des données. Vous pouvez choisir un élément proposé ici ou défendre une autre source documentée.

Méthode d'observation

1. Ne photographiez pas « tout ». Sélectionnez 5 à 10 détails maximum.
2. Pour chaque détail, notez ce qui est structuré : axe, module, rythme, relation, matière.
3. Repérez une source institutionnelle ou documentaire qui contextualise votre observation.
4. Indiquez ce que vous ne savez pas. N'inventez pas d'histoire pour justifier une forme.
5. Choisissez une seule source principale pour le projet final.

Ressources locales recommandées

• Nantes Patrimonia — site patrimonial de la Ville de Nantes.
• Open Data Nantes Métropole — données publiques de la Ville et de la Métropole.
• Sources fournies en cours, archives et références validées par l'équipe pédagogique.

Choisissez une direction ou proposez la vôtre

Ces pistes ne sont pas des sujets imposés. Elles servent de déclencheurs conceptuels. Vous pouvez les hybrider ou en proposer une autre, à condition de maintenir la chaîne source → grammaire → système → œuvre.

Observer → construire → exposer

Jour 1 — lundi 9 novembre — OBSERVER / DÉCODER

Jour 2 — mardi 10 novembre — CODER / CONNECTER

Mercredi 11 novembre — aucune activité obligatoire

Le 11 novembre est férié. Aucun travail obligatoire n'est demandé. Vous pouvez uniquement sauvegarder ou relire vos notes si vous le souhaitez.

Jour 3 — jeudi 12 novembre — PRODUIRE / EXPOSER

Ce que chaque groupe remet

Structure de dossier recommandée

PXE_NTE001_G01_NOM-PROJET/
├── index.html
├── sketch.js
├── style.css
├── data/
│   └── fallback.json
├── assets/
├── source-sheet.pdf
├── grammar.pdf
├── README.md
├── manifest.json
├── hero.jpg
├── detail-01.jpg
├── process.jpg
├── demo.mp4
└── thumb.jpg

README minimal

# Titre du projet
## Auteurs
## Source patrimoniale
## Concept
## Grammaire / règles
## Stack
## Data / interaction
## Lancer le projet
## Fallback / limites connues
## Contributions
## AI usage (si applicable)
## Sources / droits

Cartel

Chaque étudiant reçoit sa propre note

Le projet peut être collectif, mais l'évaluation finale est individualisée. Une partie mesure la qualité commune de l'œuvre ; une partie mesure votre contribution, votre autonomie et votre capacité à expliquer les décisions auxquelles vous avez participé.

A. Projet commun — 70 points

B. Évaluation individuelle — 30 points

Calcul de la note

Exemple : projet commun = 58/70 ; étudiant A = 25/30 → 83/100 → 16,6/20. Étudiant B du même groupe = 17/30 → 75/100 → 15/20.

Comment prouver votre contribution

• Section Contributions du README, nominative et précise.
• Versions, captures de travail, commits ou fichiers intermédiaires.
• Capacité à ouvrir une partie du code ou du design et à l'expliquer.
• Question individuelle pendant la soutenance.
• Observation du travail pendant le workshop.

Fiche individuelle à remplir avant la soutenance

Échelle qualitative

Créer à partir du patrimoine implique des responsabilités

Provenance

• Nommer précisément la source utilisée.
• Conserver l'URL, la référence, la date d'accès et, si disponible, l'auteur / institution.
• Ne pas confondre disponibilité en ligne et liberté de réutilisation.
• Pour une photographie ou archive, vérifier les conditions de réutilisation.

Contextualisation

Un patrimoine n'est pas un simple stock de motifs. Certains objets, images ou mémoires nécessitent une contextualisation particulière. Votre projet doit éviter de transformer une source sensible en décor sans justification.

IA générative : usage autorisé sous déclaration

Exemple de déclaration

## AI usage
Nous avons utilisé un assistant IA pour :
- identifier une erreur de boucle dans sketch.js ;
- proposer trois manières de normaliser la vitesse du vent.
Nous avons réécrit et testé le code final. Les informations historiques
sur la source ont été vérifiées sur Nantes Patrimonia.

Droit à l'image et webcam

Si votre œuvre utilise une webcam, privilégiez l'analyse en temps réel sans enregistrement. Toute captation identifiable de personnes suppose un cadre de consentement adapté.

Accessibilité

• Contraste suffisant pour les informations de médiation.
• Pas de flashs rapides.
• Alternative clavier/touch si l'interaction principale exclut certains gestes.
• Version fonctionnelle sans audio si le son n'est pas nécessaire.
• Temps de compréhension raisonnable : le visiteur doit pouvoir essayer avant votre explication.

Un prototype exposable doit survivre au réel

La méthode de réduction

1. Reproduire le bug.
2. Lire la console.
3. Isoler le sous-système : dessin / data / interaction / asset.
4. Revenir à la dernière version stable.
5. Désactiver la couche la plus récente.
6. Tester une hypothèse à la fois.

Checklist de robustesse

Pattern de fallback

let state = {
  source: "fallback",
  value: 0.5
};

async function loadExternalData() {
  try {
    const r = await fetch("...");
    if (!r.ok) throw new Error("API error");
    const json = await r.json();
    state.source = "live";
    state.value = /* parse json */;
  } catch (e) {
    state.source = "fallback";
    state.value = 0.5;
  }
}

Templates de travail

A. Starter HTML p5.js

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>PXE_NTE001</title>
  <style>
    html,body{margin:0;background:#000;overflow:hidden}
    canvas{display:block}
  </style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
  <script src="sketch.js"></script>
</body>
</html>

Pour une version totalement hors ligne, téléchargez une copie locale de p5.js et remplacez le CDN par un fichier local.

B. Starter sketch.js

let params = {
  moduleSize: 36,
  spacing: 10,
  angle: 0.12,
  density: 16
};

function setup() {
  createCanvas(windowWidth, windowHeight);
  pixelDensity(1);
}

function draw() {
  background(244, 241, 233);
  drawSystem();
}

function drawSystem() {
  // 1. appliquer la grammaire
  // 2. lire data / interaction si nécessaire
  // 3. rendre l'œuvre
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

C. Manifest minimal

{
  "framework": "PATRIMOINE.EXE",
  "edition": "NTE001",
  "city": "Nantes",
  "host": "ESD Nantes",
  "dates": ["2026-11-09", "2026-11-10", "2026-11-12"],
  "project_title": "",
  "authors": [],
  "heritage_source": {
    "title": "",
    "url": "",
    "rights": ""
  },
  "mode": ["generative"],
  "stack": ["p5.js"],
  "data_sources": [],
  "ai_usage": "",
  "version": "1.0"
}

D. Questions de soutenance

1. Quelle propriété de la source avez-vous volontairement laissée de côté ?
2. Quelle règle est la plus importante dans votre système ?
3. Quel paramètre a le plus d'effet perceptuel ?
4. Pourquoi votre mapping est-il pertinent ?
5. Que se passe-t-il si le réseau disparaît ?
6. Quelle itération a réellement amélioré le projet ?
7. Que changeriez-vous avec une semaine supplémentaire ?
8. Quelle partie du projet serait publiable telle quelle et laquelle demanderait une vérification de droits ?

E. Glossaire

Algorithme

Suite de règles ou d'opérations permettant de produire un résultat.

API

Interface permettant à un programme de demander des données ou services à un autre système.

Dataset

Ensemble structuré de données.

Fallback

Comportement de secours lorsque la ressource principale est indisponible.

Feedback

Réponse perceptible du système après une action ou un changement d'état.

Grammaire

Ensemble de primitives, relations, invariants et variables décrivant la logique d'une source.

Invariant

Propriété qui ne change pas dans le système.

Mapping

Relation entre une entrée et un ou plusieurs paramètres de sortie.

Noise

Fonction de bruit continu utile pour produire des variations corrélées.

Paramètre

Valeur modifiable contrôlant le comportement d'un système.

Provenance

Informations permettant de retracer l'origine et le contexte d'une source.

Seed

Valeur initiale permettant de reproduire une séquence pseudo-aléatoire.

Pour aller plus loin

Design, interaction et creative coding

• Norman, D. — The Design of Everyday Things.
• Reas, C. & Fry, B. — Processing: A Programming Handbook for Visual Designers and Artists.
• Buxton, B. — Sketching User Experiences.
• Munzner, T. — Visualization Analysis and Design.
• Shneiderman, B. — « Direct manipulation: A step beyond programming languages ».
• Weiser, M. — « The Computer for the 21st Century ».

Documentation technique officielle

• p5.js Reference — référence officielle des fonctions p5.js.
• Open-Meteo API Documentation — variables météo, paramètres et réponses JSON.
• Open Data Nantes Métropole — portail officiel des données publiques.
• Nantes Métropole — API Explore v2.1.
• Nantes Patrimonia — site de la Ville de Nantes, Direction du patrimoine et de l'archéologie, en lien avec les Archives de Nantes.