fixing images for tutorials

Author: digitalcoleman

content/tutorials/text/sound/index.mdx

@@ -40,15 +40,15 @@ Simply put, we define sound as a vibration traveling through a medium (typically
 
 <FixedImage center width={650} height={170}>
 
-![](./56-1.svg)
+![a plot of pressure over time showing dots that spread out with less pressure and are tight with more pressure](./56-1.svg)
 
 </FixedImage>
 
 This time-domain representation of sound provides an accurate portrayal of how sound works in the real world, and, as we shall see shortly, it is the most common representation of sound used in work with digitized audio. When we attempt a technical description of a sound wave, we can easily derive a few metrics to help us better understand what's going on. In the first instance, by looking at the amount of displacement caused by the sound pressure wave, we can measure the amplitude of the sound. This can be measured on a scientific scale in _pascals_ of pressure, but it is more typically quantified along a logarithmic scale of _decibels_. If the sound pressure wave repeats in a regular or _periodic_ pattern, we can look at the wavelength of a single iteration of that pattern and from there derive the frequency of that wave. For example, if a sound traveling in a medium at 343 meters per second (the speed of sound in air at room temperature) contains a wave that repeats every half-meter, that sound has a frequency of 686 hertz, or cycles per second. The figure below shows a plot of a cello note sounding at 440 Hz; as a result, the periodic pattern of the waveform (demarcated with vertical lines) repeats every 2.27 ms:
 
 <FixedImage center width={650} height={180}>
 
-![](./56-2.svg)
+![a plot of a cello note sounding at 440 Hz where the repeating pattern is visible](./56-2.svg)
 
 </FixedImage>
 
@@ -58,7 +58,7 @@ When a sound reaches our ears, an important sensory translation happens that is
 
 <FixedImage center width={650} height={210}>
 
-![](./56-3.svg)
+![Frequency domain plot of a sustained 220hz note bowed on a cello](./56-3.svg)
 
 </FixedImage>
 
@@ -74,7 +74,7 @@ Sound typically enters the computer from the outside world (and vice versa) acco
 
 <FixedImage center width={650} height={150}>
 
-![](./56-4.svg)
+![diagram showing air pressure going into a microphone, being converted by a ADC, stored on memory, sent to a DAC and played on a speaker when it becomes analog again](./56-4.svg)
 
 </FixedImage>
 

content/tutorials/text/strings-and-drawing-text/boxes.jpg

@@ -188,7 +188,7 @@ Let's look at two more useful Processing functions related to displaying text:
 
 <FixedImage side width={302} height={168}>
 
-![textAlign](./textalign.jpg)
+![resulting sketch showing position of text using different align,ments and a vertical line in the middle](./textalign.png)
 
 </FixedImage>
 
@@ -258,7 +258,7 @@ Now comes more difficult part. It was easy to test when a circle reached the lef
 
 <FixedImage center width={645} height={570}>
 
-![textWidth](./textwidth.jpg)
+![visual diagram showing how if you know the text width you can move it off the edge of the screen](./textwidth.svg)
 
 </FixedImage>
 
@@ -398,7 +398,7 @@ The proper spacing can be achieved using the [textWidth()](http://processing.org
 
 <FixedImage side width={302} height={131}>
 
-![Character by character](./charbychar.jpg)
+![resulting sketch with each letter in the sentence being a different size](./charbychar.png)
 
 </FixedImage>
 
@@ -509,7 +509,7 @@ The character by character method also allows us to display text along a curve.
 
 <FixedImage side width={200} height={200}>
 
-![Boxes along a curve](./boxes.jpg)
+![Boxes along a curve](./boxes.png)
 
 </FixedImage>
 
@@ -570,7 +570,7 @@ What we need to do is replace each box with a character from a String that fits
 
 <FixedImage side width={200} height={200}>
 
-![Characters along a curve](./textcurve.jpg)
+![Characters along a curve](./textcurve.png)
 
 </FixedImage>