processing
diff --git a/‎content/tutorials/text/arrays/index.mdx‎
Lines changed: 11 additions & 3 deletions b/‎content/tutorials/text/arrays/index.mdx‎
Lines changed: 11 additions & 3 deletions
diff --git a/‎content/tutorials/text/rendering/35_01.png‎
4.05 KB b/‎content/tutorials/text/rendering/35_01.png‎
4.05 KB
diff --git a/‎content/tutorials/text/rendering/35_02.png‎
4.05 KB b/‎content/tutorials/text/rendering/35_02.png‎
4.05 KB
diff --git a/‎content/tutorials/text/rendering/35_03.png‎
4.06 KB b/‎content/tutorials/text/rendering/35_03.png‎
4.06 KB
diff --git a/‎content/tutorials/text/rendering/35_04_1.png‎
3.73 KB b/‎content/tutorials/text/rendering/35_04_1.png‎
3.73 KB
diff --git a/‎content/tutorials/text/rendering/35_04_2.png‎
3.99 KB b/‎content/tutorials/text/rendering/35_04_2.png‎
3.99 KB
diff --git a/‎content/tutorials/text/rendering/35_04_3.png‎
4.34 KB b/‎content/tutorials/text/rendering/35_04_3.png‎
4.34 KB
diff --git a/‎content/tutorials/text/rendering/35_05_1.png‎
4.5 KB b/‎content/tutorials/text/rendering/35_05_1.png‎
4.5 KB
diff --git a/‎content/tutorials/text/rendering/35_05_2.png‎
5.52 KB b/‎content/tutorials/text/rendering/35_05_2.png‎
5.52 KB
diff --git a/‎content/tutorials/text/rendering/35_05_3.png‎
6.3 KB b/‎content/tutorials/text/rendering/35_05_3.png‎
6.3 KB
@@ -252,6 +252,8 @@ void draw() {
 
 As one example of how arrays may be used, this section shows how to use arrays to store data from the mouse. The `pmouseX` and `pmouseY` variables store the cursor coordinates from the previous frame, but there is no built-in way to access the cursor values from earlier frames. At every frame, the `mouseX`, `mouseY`, `pmouseX`, and `pmouseY` variables are replaced with new numbers and their previous numbers are discarded. Creating an array is the easiest way to store the history of these values. In the following example, the most recent 100 values from `mouseY` are stored and displayed on screen as a line from the left to the right edge of the screen. At each frame, the values in the array are shifted to the right and the newest value is added to the beginning.
 
+<Column float={"left"}>
+
 <FixedImage left width={200}>
 
 ![light grey square with a black line that graphs the y position of the mouse as up and down, over time running left to right](./28_15_1.png)
@@ -270,6 +272,8 @@ As one example of how arrays may be used, this section shows how to use arrays t
 
 </FixedImage>
 
+</Column>
+
 ```
 int[] y;
 
@@ -295,24 +299,28 @@ void draw() {
 
 Apply the same code simultaneously to the `mouseX` and `mouseY` values to store the position of the cursor. Displaying these values each frame creates a trail behind the cursor.
 
-<FixedImage left width={200}>
+<Column float={"left"}>
+
+<FixedImage width={200}>
 
 ![black square with white semi-transparent circles creating a trail from the x and y position of the mouse. the older circles are larger and more faded](./28_16_1.png)
 
 </FixedImage>
 
-<FixedImage left width={200}>
+<FixedImage width={200}>
 
 ![same as the previous image but with different x and y mouse position data](./28_16_2.png)
 
 </FixedImage>
 
-<FixedImage left width={200}>
+<FixedImage width={200}>
 
 ![same as the previous image but with different x and y mouse position data](./28_16_3.png)
 
 </FixedImage>
 
+</Column>
+
 ```
 int num = 50;
 int[] x = new int[num];