//src size becomes // Source

Author: nbogie

src/content/tutorials/en/typography-2.0.mdx

@@ -300,7 +300,7 @@ We'll draw it to the canvas in `draw()`. `imageMode(CENTER)` lets us position th
     image(
       bgImg,
       0, 0, width, height, // Destination size
-      0, 0, bgImg.width, bgImg.height, //Src size
+      0, 0, bgImg.width, bgImg.height, // Source
       COVER // Fill the area without distortion
     );
     
@@ -369,7 +369,7 @@ In WebGL mode, if you want to treat 3D content like a flat 2D image, you can fla
     image(
       bgImg,
       0, 0, width, height, // Destination size
-      0, 0, bgImg.width, bgImg.height, //src size
+      0, 0, bgImg.width, bgImg.height, // Source
       COVER // Fill the area without distortion
     );
     
@@ -443,7 +443,7 @@ At this point, the text starts clipping through the background image. We can rep
     image(
       bgImg,
       0, 0, width, height, // Destination size
-      0, 0, bgImg.width, bgImg.height, //Src size
+      0, 0, bgImg.width, bgImg.height, // Source
       COVER // Fill the area without distortion
     );
     
@@ -525,7 +525,7 @@ To start with, let's remove the stroke on it with `noStroke()`. Then, we'll turn
     image(
       bgImg,
       0, 0, width, height, // Destination size
-      0, 0, bgImg.width, bgImg.height, //Src size
+      0, 0, bgImg.width, bgImg.height, // Source
       COVER // Fill the area without distortion
     );
     
@@ -752,7 +752,7 @@ Here's how it looks in context:
     image(
       bgImg,
       0, 0, width, height, // Destination size
-      0, 0, bgImg.width, bgImg.height, //Src size
+      0, 0, bgImg.width, bgImg.height, // Source
       COVER // Fill the area without distortion
     );
     
@@ -864,7 +864,7 @@ If your paper texture image is darkening the resulting image too much, we can dr
     image(
       bgImg,
       0, 0, width, height, // Destination size
-      0, 0, bgImg.width, bgImg.height, //Src size
+      0, 0, bgImg.width, bgImg.height, // Source
       COVER // Fill the area without distortion
     );
     
@@ -1025,7 +1025,7 @@ function draw() {
   image(
     bgImg,
     0, 0, width, height, // Destination size
-    0, 0, bgImg.width, bgImg.height, //Src size
+    0, 0, bgImg.width, bgImg.height, // Source
     COVER // Fill the area without distortion
   );
   
@@ -1068,7 +1068,7 @@ function draw() {
   image(
     paperImg,
     0, 0, width, height, // Destination size
-    0, 0, paperImg.width, paperImg.height, //Src size
+    0, 0, paperImg.width, paperImg.height, // Source
     COVER // Fill the area without distortion
   );
   pop();
@@ -1205,7 +1205,7 @@ We can use that same `easeOutElastic` to animate a `scale()` that we apply befor
     image(
       bgImg,
       0, 0, width, height, // Destination size
-      0, 0, bgImg.width, bgImg.height, //Src size
+      0, 0, bgImg.width, bgImg.height, // Source
       COVER // Fill the area without distortion
     );
     
@@ -1406,7 +1406,7 @@ Try experimenting with different offsets to see what kind of effect you get! I'v
     image(
       bgImg,
       0, 0, width, height, // Destination size
-      0, 0, bgImg.width, bgImg.height, //Src size
+      0, 0, bgImg.width, bgImg.height, // Source
       COVER // Fill the area without distortion
     );
     
@@ -1527,7 +1527,10 @@ letters.forEach((letter, i) => {
   // Base progress off of the stored letter 
   // start time
   ///////////////////////////////////////////
-  let progress = map(millis(), letterStartTimes[i], letterStartTimes[i] + 2000, 0, 1, true);
+  let progress = map(millis(), 
+          letterStartTimes[i], 
+          letterStartTimes[i] + 2000, 
+          0, 1, true);
   progress = easeOutElastic(progress);
   push();
   scale(progress);
@@ -1617,7 +1620,7 @@ Try wiggling your mouse over the letters!
     image(
       bgImg,
       0, 0, width, height, // Destination size
-      0, 0, bgImg.width, bgImg.height, //Src size
+      0, 0, bgImg.width, bgImg.height, // Source
       COVER // Fill the area without distortion
     );