How do I plot random arrays?

Question

I know the basics of arrays and graphics (plotting of graphs, creating trigonometric functions) in NET Framework.
I cannot seem to visualize how I can manage to generate array elements randomly, represented by the bar heights (in white), just like in the image below:

I have only tried the code below and I only get a single number every time I generate a number. What I am expecting is to have 0 to 100 listed in a random order but I cannot do it.

Public Class FormSortingAlgorithm
    Dim rnd As New Random()
    Dim nums() As Integer
    Dim i As Integer
    Private Sub btnGenerate_Click(sender As Object, e As EventArgs) Handles btnGenerate.Click
        Dim i As Integer
        ReDim nums(19)
        For i = 0 To 19
            nums(i) = rnd.Next(0, 100)
        Next
    End Sub
    Private Sub btnDisplayArray_Click(sender As Object, e As EventArgs) Handles btnDisplayArray.Click
        txtDisplay.Text = nums(j) & nums(i)
    End Sub
End Class

You've got some great code to look at below, but there really wasn't anything wrong with your code other than the display part. Just change `txtDisplay.Text = nums(j) & nums(i)` to `txtDisplay.Text = String.Join(", ", nums)` to see your random numbers. They were all there! — Idle_Mind, Jan 08 '23 at 18:22

Jimi · Accepted Answer · 2023-01-25T09:20:53.223

This line: txtDisplay.Text = nums(j) & nums(i) won't show the content of your array in a TextBox, just a single glued up number, composed by two elements in the array.
In case j is defined somewhere and it represents a valid index
You can use String.Join() to build a string that contains all the elements in a collection using a separator (vbCrLf here, since you have a TextBox)

I suggest you replace the array with a List(Of Integer), it's a quite more flexible type of collection. You can add or remove elements when / if required. You can always call its .ToArray() method, in case an array is needed, for some reason

The upper bound of Random.Next(Int32, In32) is excluded from the range.
To generate values in the range (0 : 100), you have to specify [Random].Next(0, 101)

In the example, I'm using a PictureBox to plot the collection of random Integer values.
The world coordinates of the Graphic surface are converted to the Cartesian Plane, 1st quadrant.
The (0, 0) vertex is the bottom-left vertex of the canvas (the PictureBox) instead of the upper-left vertex.
If you don't care about this. remove the Matrix object and the Graphics.Transform = [Matrix] assignment

About the Matrix used here, see the notes in Flip the GraphicsPath that draws the text

Imports System.Collections.Generic
Imports System.Drawing.Drawing2D
Imports System.Linq

Private Shared ReadOnly rnd As New Random()
Private plotNumbers As List(Of Integer) = Nothing
Private penWidth As Single = 1.0F
Private numOfLines As Integer = 19

Private Sub btnGenerate_Click(sender As Object, e As EventArgs) Handles btnGenerate.Click
    ' Generate a new collection of random integers
    plotNumbers = GenerateNumbers(numOfLines)
    ' Show the generated values in a TextBox
    txtDisplay.Text = String.Join(vbCrLf, plotNumbers)
    ' Plot the lines in a PictureBox (named PlotSurface)
    PlotSurface.Invalidate()
End Sub

Private Sub PlotSurface_Paint(sender As Object, e As PaintEventArgs) Handles PlotSurface.Paint
    If plotNumbers Is Nothing OrElse plotNumbers.Count = 0 Then Return

    Dim canvas = DirectCast(sender, Control).ClientSize
    ' Scales the height of the lines to the Height of the Canvas. Remove if not needed
    Dim scaleFactor = canvas.Height / 100.0F
    Dim horzPosition As Single = 1.0F
    Dim line As Integer = 0

    Using pen As New Pen(Color.White, penWidth),
        toCartesianPlane = New Matrix(1, 0, 0, -1, 0, canvas.Height)
        e.Graphics.Transform = toCartesianPlane
        While horzPosition < canvas.Width
            e.Graphics.DrawLine(pen, horzPosition, 0, horzPosition, plotNumbers(line) * scaleFactor)
            horzPosition += penWidth
            line = (line + 1) Mod numOfLines
        End While
    End Using
    e.Graphics.ResetTransform()
End Sub


Private Function GenerateNumbers(numCount As Integer) As List(Of Integer)
    Return Enumerable.Range(0, numCount).Select(Function(n) rnd.Next(0, 101)).ToList()
End Function

This is how it works:

I've rolled back your edit, because you removed all the code and the sample animation — Jimi, Jan 25 '23 at 09:21

How do I plot random arrays?

1 Answers1