How do I Draw Logarithmic Axis on Bitmap Image

Question

I am creating a spectrogram where the y axis is the frequency response of an input file. Based on a min and max frequency (which is variable based on the fs), how would I:

1. plot the y axis for frequency in terms of logarithmic distribution in a meaningful way as shown in the example image below. log10(f), in the chart below the frequency is on the x-axis and is only used to illustrate a point

Figure 1

previous image swapped for one with a more suitable representation of a logarithmic scale

2. provide a number of annotated reference points along the y axis which directly correlate to values ie 100Hz, 1kHz, 5kHz (in 1/3 octave bands as noted here )

3. Define pixel to frequency mapping ratio methodology for plotting of frequency where there are n number of frequency bins along y axis

Finally, whilst I have been able to create a basic graph using the following code, I am at a bit of a loss as to how best implement a log scale in a bitmap image:

    Bitmap spectrogram = new Bitmap(xAxisImageSize, yAxisImageSize);
    // Mmake the Image BG Colour Black
    using (Graphics graph = Graphics.FromImage(spectrogram))
    {
        Rectangle ImageSize = new Rectangle(0, 0, xAxisImageSize, yAxisImageSize);
        graph.FillRectangle(Brushes.Black, ImageSize);
        Pen whitePen = new Pen(Color.White, 3);
        // x axis
        graph.DrawLine(whitePen, 124, 900, 634, 900);
        // x axis label
        graph.DrawString("Time", new Font("Arial", 12), Brushes.White, new PointF(600, 924));
        // y axis
        graph.DrawLine(whitePen, 124, 900, 124, 388);
        // y axis label
        graph.DrawString("f (Hz)", new Font("Arial", 12), Brushes.White, new PointF(24, 388));
        // y axis top frequency
        graph.DrawString("20k", new Font("Arial", 12), Brushes.White, new PointF(75, 388));
        // y axis top marker
        graph.DrawLine(whitePen, 110, 388, 124, 388);
        // x axis Zero Point
        graph.DrawString("0", new Font("Arial", 12), Brushes.White, new PointF(124, 924));
        // y axis Zero Point
        graph.DrawString("0", new Font("Arial", 12), Brushes.White, new PointF(75, 886));
    }

A scaled render of the image I have created thus far can be seen below.

Each (monochrome) point in the spectrogram will be plotted using the following snippet:

spectrogram.SetPixel(x, y, Color.FromArgb(255, colour, colour, colour));

I have all the necessary data to plot on the following axis:

1. x time (linear)
2. y frequency (logarithmic)
3. z intensity (logarithmic)

An additional challenge is that the image is rendered from the top left rather than bottom right, so if you can show me a sensible way to manage this, I would be very greatful.

This is ac# console application using .NET 4.5.2

UPDATE

By means of hopefully clarifying the question, what I am looking to achieve is something like the charts logarithmic scale mode and implementing that on a bitmap graph axis rather than a chart control:

axis.IsLogarithmic = true;

so taking the log10(frequency) for which there are (in my example) 256 points/frequency bins between 0 Hz and 21963 Hz then map that onto ay axis with common 1/3 octave center frequency notation on the y axis as shown below:

Note that the above image was taken from this post where the OP is requesting similar information to me but on a chart control, the answer of which I cannot use due to not using a chart object.

For clarification on what I mean by 256 points/frequency bins, please see below:

Frequency Bin 0: 0
Frequency Bin 1: 86
Frequency Bin 2: 172
Frequency Bin 3: 258
Frequency Bin 4: 344
Frequency Bin 5: 430
Frequency Bin 6: 516
Frequency Bin 7: 602
Frequency Bin 8: 689
Frequency Bin 9: 775
Frequency Bin 10: 861
Frequency Bin 11: 947
Frequency Bin 12: 1033
Frequency Bin 13: 1119
.....
Frequency Bin 242: 20844
Frequency Bin 243: 20930
Frequency Bin 244: 21016
Frequency Bin 245: 21102
Frequency Bin 246: 21188
Frequency Bin 247: 21274
Frequency Bin 248: 21360
Frequency Bin 249: 21447
Frequency Bin 250: 21533
Frequency Bin 251: 21619
Frequency Bin 252: 21705
Frequency Bin 253: 21791
Frequency Bin 254: 21877
Frequency Bin 255: 21963

Answer 1

To create a logarithmic scale between two values, let V0 and V1 , take to base-10 logarithms log(V1) and log(V2) and rescale to map to the desired coordinates on your plot, let X0 to X1 .

X = X0 + (X1 - X0)(log(V) - log(V0))/(log(V1) - log(V0))

To draw ticks at simple values, first determine the full decades that are spanned, from 10^floor(log(V0)) to 10^floor(log(V1)) , then get the most significant digits by

ceil(10^(log(V0) - floor(log(V0)))
floor(10^(log(V1) - floor(log(V1)))

to get the starting/ending digit in these decades.

For example, from 19 to 3410, the decades go from 10/100 to 1000/10000, digit 2 to digit 3 inclusive.