Intro-ML-Arts-IMA-F24/06-transformers-js at main · ml5js/Intro-ML-Arts-IMA-F24

🌱 Tutorial studying:

1 :

8.2: Creating HTML Elements with JavaScript - p5.js Tutorial

Screen Recording 2024-10-29 at 11.30.36 AM.mov

🌟  Add DOM element in JavaScript

// createElement('Tag name', 'content');
createElement('h2', 'My favorite drinks below.');

2 :

8.3: Manipulating DOM Elements with html() and position() - p5.js Tutorial

🌟 Have a transparent background:

clear();
// background(220);

🌟 Assign ABSOLUTE position to created element

h2 = createElement('h2', 'My favorite drinks below.');
h2.position(400, 100);

🔑 Key point:

Two different coordinate system on one page

1. HTML Page: Coordinate system of the PAGE.
2. P5.JS Canvas: Coordinate system of the CANVAS.