Objectifs

• Bibliothèques
• Rappel P5.js
• Intégrer un script P5.js à un projet web
• Travailler dans le canvas
• Créer/modifier les éléments html avec p5.js + https://p5js.org/reference/#DOM
• Articulation avec CSS : qui fait quoi?

Getting started

• Créez votre dossier
• Ouvrez-le dans VSCode
• Créez votre fichier index.html
• Créez votre fichier css (le nom de votre choix)
• Liez les 2
• Créez votre fichier javascript (le nom de votre choix)
• Chargez P5.js au niveau de votre page html
• Chargez votre fichier JS
• Testez un script simple
• Mettez en ligne sur Netlify

Le chargement de P5.js

<script src="https://cdn.jsdelivr.net/npm/p5@1.11.11/lib/p5.js"></script>

canvas ou noCanvas?

function setup() {
  noCanvas();
}

function mouseClicked() {
  createButton(mouseX + ", " + mouseY); 
  // Ou `${mouseX}, ${mouseY}`
}

Et avec un positionnement absolu:

function setup() {
  noCanvas();
}

function mouseClicked() {
  let monBouton = createButton(mouseX + ", " + mouseY); 
  monBouton.position(mouseX, mouseY);
}

En mode Canvas :

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(255);
}

function mouseClicked() {
  dessineMoiUnBouton(mouseX, mouseY);
}

function dessineMoiUnBouton(x, y) {
  fill(239);
  stroke(180);
  rect(x, y, 75, 25, 2);
  fill(0);
  textSize(14);
  text(x+", "+y, x+11, y+17);
}

Quelle est la différence entre les deux?

Exercice pratique

• Créez un "dessin" (balise HTML canvas)
• Ajoutez des éléments html (button, p) en cliquant dans votre page. Placez-les à l'endroit du clic.

// EN JS classique (vanilla JS)
const element = document.getElementById("myElementId");

// Avec P5.js
const element = select('#myElementId'); // pour un identifiant (id)
const element = select('.myElementId'); // pour une classe (class)

Liens

• https://editor.p5js.org/jps723/sketches/HJyPPJc3W
• https://codepen.io/sbuellet/pen/JqqKMp
• Teachable Machine
• Manipulation HTML avec p5.js
• DOM manipulation
• Creating and Styling HTML (avec P5js)
• https://www.freecodecamp.org/news/what-is-the-dom-explained-in-plain-english/

Reconnaître les différents langages

Chaque langage a son utilité (html, css, js). Tout ne doit pas être fait avec javascript. Certaines choses peuvent préexister dans votre fichier html. Certains styles peuvent être rapatriés dans une feuille de style.

Créez un petit projet en "nettoyant" le script ci-dessous:

let stickyNote;
let textInput;

function setup() {
  createCanvas(400, 400);
  background(200);
  stickyNote = createDiv('Note');
  stickyNote.draggable();

  stickyNote.position(5, 5);
  stickyNote.size(80, 20);
  stickyNote.style('font-size', '16px');
  stickyNote.style('font-family', 'Comic Sans MS');
  stickyNote.style('background', 'orchid');
  stickyNote.style('padding', '5px');

  let panel = createDiv('');
  panel.draggable();
  panel.position(5, 40);
  panel.size(80, 50);
  panel.style('background', 'orchid');
  panel.style('font-size', '16px');
  panel.style('padding', '5px');
  panel.style('text-align', 'center');

  textInput = createInput('Note');
  textInput.parent(panel);
  textInput.input(handleInput);
  textInput.size(70);
}

function handleInput() {
  stickyNote.html(textInput.value());
}