Filled Arc

[The Joyful Programmer]

BPlus,

Thank you. I did not realize this was a new thing that was started. This was the first time I had ever seen it done. Of course, I don't browse as much here as I should. I've been trying to get my projects done while I can.

I will remember what you said, and from this point on, I think I will keep this into account and try to keep the posts as short as possible by keeping the bloat out, and placing large pictures into a spoiler tag. This is not a problem.


Walter W. Whitman
The Joyful Programmer (tm)
AstroCosmic Systems (tm)
etc...

[bplus]

OK i hope you remember what i said in the spirit of trying to be helpful to you and inspiring others and not as more evidence of people hate you. I don't, I see a very enthusiastic guy who can go on and on about coding, and likes to share, allot!

[The Joyful Programmer]

BPlus,

I'm not concerned if people hate me or not. I am concerned with keeping the peace and making sure we all can inspire each other, as well as help those in areas we are familiar with. I'm no longer interested in the drama from yester-years, which you know exactly what I am talking about, nor having "heated" discussions. We all need safe and happy places to share our passions, provide help, and provide inspirations that help others to create and grow.

I am not a professional coder (I don't get paid for it), nor am I a simple tinkerer. I am a "Peddle-to-the-Metal" kind of guy that wants to obtain the most power I can gain from a system, even if I have to get it from places like the GPU and such. I started computer programming back in 1982 because I wanted to do graphical things, though now I do other stuff like Sudoku, word search, and so forth. These are some of the reasons why I only use QB64 for prototyping projects, like the full-color image to palette-index colors demo I shared on this forum.


Walter W. Whitman
The Joyful Programmer (tm)
AstroCosmic Systems (tm)
etc...

[grymmjack]

@SMcNeill really sweet. Ableton Live (and other music programs) use these kinds of controls for flat/minimal approach to knobs and dials.

Try to use your arcs as a little sound tool

Here is a plugin my buddy Kieran makes:


See how it uses those arcs?

The idea is you drag up and down on the arc, and it adjusts a parameter.

The arc has a minium, maximum, and default value. Double clicking on the arc resets to default.

You can have bipolar and unpolar types of dials (arcs).

So for example pan which has Left -> Center <- Right, is a bipolar control, with center at 12 o'clock being 0 pan (dead center), while -1.0 is full left pan, and +1.0 is full right pan.
Double clicking it puts it to 12 o'clock with a small line to show that it's still got a value and the control exists.

Where as a volume control has a 0.0 -> 1.0 and as you drag up and down it fills in the arc, with 0.0 being the least, and 1.0 being the most.

In this case, you still want to have at least 1 pixel on 0.0 so you can still see the control when it is at it's minimum.

Typically the arc control/dial has a background color showing the full traversal across the dial in a different color than the value color, a full fg color that is drawn on top.

My challenge to you - make this in QB64PE

You can use the following controls:

STEVE COOLNESS
Min: 0.0
Max: 1.0
Default: 0.5

STEVE RAMBLING
Min: -1.0
Max: 1.0
Default: 0.0

When coolness is MAXed out, and Rambling is MINimumed make a sound somehow, beep, "WOOHOO" or "some stevism.wav"

J/k but i wanted to share you how I may wind up using your work in the future!

IT WOULD BE EXTRA RAD TO HAVE AN SVG version of this @SMcNeill!

[grymmjack]

@The Joyful Programmer

Glad to hear from you. Holy cow, what a post. I am going to be honest, I didn't read hardly any of it because it's like too much man.

I can't drink from the firehose right now, I need to reserve some attention and room for more forum catch-up but, holy cow...there is a LOT to unpack.

Glad you are OK and around still Walter.

[bplus]

@SMcNeill really sweet. Ableton Live (and other music programs) use these kinds of controls for flat/minimal approach to knobs and dials.

Try to use your arcs as a little sound tool

Here is a plugin my buddy Kieran makes:


See how it uses those arcs?

The idea is you drag up and down on the arc, and it adjusts a parameter.

The arc has a minium, maximum, and default value. Double clicking on the arc resets to default.

You can have bipolar and unpolar types of dials (arcs).

So for example pan which has Left -> Center <- Right, is a bipolar control, with center at 12 o'clock being 0 pan (dead center), while -1.0 is full left pan, and +1.0 is full right pan.
Double clicking it puts it to 12 o'clock with a small line to show that it's still got a value and the control exists.

Where as a volume control has a 0.0 -> 1.0 and as you drag up and down it fills in the arc, with 0.0 being the least, and 1.0 being the most.

In this case, you still want to have at least 1 pixel on 0.0 so you can still see the control when it is at it's minimum.

Typically the arc control/dial has a background color showing the full traversal across the dial in a different color than the value color, a full fg color that is drawn on top.

My challenge to you - make this in QB64PE

You can use the following controls:

STEVE COOLNESS
Min: 0.0
Max: 1.0
Default: 0.5

STEVE RAMBLING
Min: -1.0
Max: 1.0
Default: 0.0

When coolness is MAXed out, and Rambling is MINimumed make a sound somehow, beep, "WOOHOO" or "some stevism.wav"

J/k but i wanted to share you how I may wind up using your work in the future!

IT WOULD BE EXTRA RAD TO HAVE AN SVG version of this @SMcNeill!

That is one heck of a Challenge @grymmjack I think it beats the spreadsheet one by a mile! Yes and great use of the RingArc routines! PS how did you get that inflated image posted? Is this one of those forum developer privileges?

[SMcNeill]

PS how did you get that inflated image posted? Is this one of those forum developer privileges?

Images don't auto-resize like the attachments currently are.  You have a lot more control over them with the [ img ] tag.  For example:









Hit REPLY, then the button to VIEW SOURCE and you can see the difference in all those commands.  Folks can customize the images so they're not 4000x8000 pixels and such, if they would take the time to do so.   

If you really want your attachments to be full sized, to emphasize what you're showing, just wrap them in image tags properly.

Instead of just

Code: (Select All)

[attachment=5523]

Use:

Code: (Select All)

[img]https://qb64phoenix.com/forum/attachment.php?aid=5523[/img]

This is also how you can make use of attachments in other people's posts and not just your own as well.  You have a ton more control over what you'd like the display to look like.

[bplus]

Ok good thanks!

[SMcNeill]

@SMcNeill really sweet. Ableton Live (and other music programs) use these kinds of controls for flat/minimal approach to knobs and dials.

Try to use your arcs as a little sound tool

Here is a plugin my buddy Kieran makes:


See how it uses those arcs?

The idea is you drag up and down on the arc, and it adjusts a parameter.

The arc has a minium, maximum, and default value. Double clicking on the arc resets to default.

You can have bipolar and unpolar types of dials (arcs).

So for example pan which has Left -> Center <- Right, is a bipolar control, with center at 12 o'clock being 0 pan (dead center), while -1.0 is full left pan, and +1.0 is full right pan.
Double clicking it puts it to 12 o'clock with a small line to show that it's still got a value and the control exists.

Where as a volume control has a 0.0 -> 1.0 and as you drag up and down it fills in the arc, with 0.0 being the least, and 1.0 being the most.

In this case, you still want to have at least 1 pixel on 0.0 so you can still see the control when it is at it's minimum.

Typically the arc control/dial has a background color showing the full traversal across the dial in a different color than the value color, a full fg color that is drawn on top.

My challenge to you - make this in QB64PE

You can use the following controls:

STEVE COOLNESS
Min: 0.0
Max: 1.0
Default: 0.5

STEVE RAMBLING
Min: -1.0
Max: 1.0
Default: 0.0

When coolness is MAXed out, and Rambling is MINimumed make a sound somehow, beep, "WOOHOO" or "some stevism.wav"

J/k but i wanted to share you how I may wind up using your work in the future!

IT WOULD BE EXTRA RAD TO HAVE AN SVG version of this @SMcNeill!

@grymmjack How about I do this the simple way -- I just make you a simple DrawKnob button and then you can use it however you want. 

Code: (Select All)

$Color:32

Screen _NewImage(1024, 720, 32)

_Font _LoadFont("courbd.ttf", 48)

Color Black, transparent





Do

    k = _KeyHit

    Select Case k

        Case 19712, 18432: value = _Clamp(value + 1, 0, 100)

        Case 19200, 20480: value = _Clamp(value - 1, 0, 100)

        Case 27: System

    End Select

    DrawKnob 512, 360, 50, 80, value, 100

    _Limit 30

    _Display

Loop







Sub DrawKnob (cX As Long, cy As Long, r1 As Single, r2 As Single, value As Long, maxvalue As Long)

    increase = value / maxvalue * 270

    FilledRingArc cX, cy, 0, r1, 0, 360, DarkGray 'the knob

    FilledRingArc cX, cy, r1, r2, -45, 225, LightGray 'the light gray indicator

    FilledRingArc cX, cy, r1, r2, 225 - increase, 225, Red 'the red value

    _PrintString (cX - _PrintWidth(_ToStr$(value)) / 2, cy - _FontHeight / 2), _ToStr$(value)

End Sub







Sub FilledRingArc (cx As Long, cy As Long, r1 As Long, r2 As Long, a1 As Single, a2 As Single, col As _Unsigned Long)

    ' Draws a filled ring arc (donut slice)

    ' cx, cy  = center

    ' r1      = inner radius

    ' r2      = outer radius

    ' a1, a2  = start/end angles in degrees

    ' col    = fill color



    Const angStep! = 1! ' smaller = smoother arc

    Dim As Single vx(0 To 2000), vy(0 To 2000), interX(0 To 2000)

    Dim As Single angle, x, y, x1, y1, x2, y2, temp

    Dim As Long count, i, j, n, minY, maxY, yScan



    ' Normalize angles

    If a1 < 0 _OrElse a1 > 360 Then a1 = a1 Mod 360

    If a2 < 0 _OrElse a2 > 360 Then a2 = a2 Mod 360

    If a2 < a1 Then a2 = a2 + 360



    ' ---- Outer arc (A1 ? A2) ----

    For angle = a1 To a2 Step angStep

        x = cx + r2 * Cos(_D2R(angle)): y = cy - r2 * Sin(_D2R(angle)): vx(n) = x: vy(n) = y: n = n + 1

    Next



    ' Ensure exact endpoint

    x = cx + r2 * Cos(_D2R(a2)): y = cy - r2 * Sin(_D2R(a2)): vx(n) = x: vy(n) = y: n = n + 1



    ' ---- Inner arc (A2 ? A1, reversed) ----

    For angle = a2 To a1 Step -angStep

        x = cx + r1 * Cos(_D2R(angle)): y = cy - r1 * Sin(_D2R(angle)): vx(n) = x: vy(n) = y: n = n + 1

    Next



    ' Ensure exact endpoint

    x = cx + r1 * Cos(_D2R(a1)): y = cy - r1 * Sin(_D2R(a1)): vx(n) = x: vy(n) = y: n = n + 1



    ' ---- Scanline fill ----

    minY = vy(0): maxY = vy(0)

    For i = 1 To n - 1: maxY = _Max(maxY, vy(i)): minY = _Min(minY, vy(i)): Next



    For yScan = minY To maxY

        count = 0

        ' Find intersections

        For i = 0 To n - 1

            j = (i + 1) Mod n: x1 = vx(i): y1 = vy(i): x2 = vx(j): y2 = vy(j)

            If (y1 <= yScan And y2 > yScan) Or (y2 <= yScan And y1 > yScan) Then

                If y2 <> y1 Then interX(count) = x1 + (yScan - y1) * (x2 - x1) / (y2 - y1): count = count + 1

            End If

        Next

        ' Sort intersections

        For i = 0 To count - 2

            For j = i + 1 To count - 1

                If interX(j) < interX(i) Then Swap interX(i), interX(j)

        Next j, i

        ' Draw spans

        For i = 0 To count - 2 Step 2

            Line (CLng(interX(i)), yScan)-(CLng(interX(i + 1)), yScan), col, BF

        Next

    Next yScan

End Sub

[SMcNeill]

Optomized the math on the main routine here a little bit, and then decided to toss it up against the old tried and trusted circle.fill routine for speed comparison.

Code: (Select All)

$Color:32

Screen _NewImage(1200, 800, 32)





Const lim1 = 100, numtests = 30

Dim As _Float t(numtests), t1(numtests), t2(numtests)



For j = 1 To numtests

    t(j) = Timer(0.001)

    For i = 1 To lim1

        Draw.Circle.Fill 600, 400, 400, _RGB32(Rnd * 255, Rnd * 255, Rnd * 255)

    Next

    t1(j) = Timer(0.001)

    Cls , 0

    For i = 1 To lim1

        FilledEllipseRingArc 600, 400, 0, 0, 400, 400, 0, 360, _RGB32(Rnd * 255, Rnd * 255, Rnd * 255)

    Next

    t2(j) = Timer(0.001)

Next

Cls

For i = 1 To numtests

    Print Using "##.#### seconds with circle fill"; t1(i) - t(i),

    Print "", Using "##.#### seconds with ellipse ring fill"; t2(i) - t1(i)

    total1## = total1## + t1(i) - t(i)

    total2## = total2## + t2(i) - t1(i)

Next

Print



Color Yellow

Print "TOTAL TIMES"

Print Using "##.#### seconds with circle fill"; total1##

Print Using "##.#### seconds with ellipse ring fill"; total2##











Sub Draw.Circle.Fill (CX As Integer, CY As Integer, R As Integer, C As _Unsigned Long)

    ' CX = center x coordinate

    ' CY = center y coordinate

    '  R = radius

    '  C = fill color

    Dim Radius As Integer, RadiusError As Integer

    Dim X As Integer, Y As Integer

    Radius = Abs(R)

    RadiusError = -Radius

    X = Radius

    Y = 0

    If Radius = 0 Then PSet (CX, CY), C: Exit Sub

    Line (CX - X, CY)-(CX + X, CY), C, BF

    While X > Y

        RadiusError = RadiusError + Y * 2 + 1

        If RadiusError >= 0 Then

            If X <> Y + 1 Then

                Line (CX - Y, CY - X)-(CX + Y, CY - X), C, BF

                Line (CX - Y, CY + X)-(CX + Y, CY + X), C, BF

            End If

            X = X - 1

            RadiusError = RadiusError - X * 2

        End If

        Y = Y + 1

        Line (CX - X, CY - Y)-(CX + X, CY - Y), C, BF

        Line (CX - X, CY + Y)-(CX + X, CY + Y), C, BF

    Wend

End Sub







Sub FilledEllipseRingArc (cx As Long, cy As Long, a1 As Long, b1 As Long, a2 As Long, b2 As Long, ang1 As Single, ang2 As Single, col As _Unsigned Long)

    ' Filled elliptical ring arc using only LINE

    ' cx, cy  = center

    ' a1, b1  = inner ellipse radii

    ' a2, b2  = outer ellipse radii

    ' ang1, ang2 = start/end angles

    ' col    = fill color

    $Checking:Off

    Const angStep! = 6!

    Dim As Single vx(0 To 4000), vy(0 To 4000), interX(0 To 4000)

    Dim As Single x1, y1, x2, y2, an1, an2, ans, temp, angle

    Dim As Long minY, maxY, i, n, j, count, yScan



    If ang2 < ang1 Then ang2 = ang2 + 360

    an1 = _D2R(ang1): an2 = _D2R(ang2): ans = _D2R(angStep)



    ' ---- Outer ellipse arc (ang1 ? ang2) ----

    For angle = an1 To an2 Step ans

        vx(n) = cx + a2 * Cos(angle): vy(n) = cy - b2 * Sin(angle): n = n + 1

    Next



    ' Exact endpoint

    vx(n) = cx + a2 * Cos(an2): vy(n) = cy - b2 * Sin(an2): n = n + 1



    ' ---- Inner ellipse arc (ang2 ? ang1, reversed) ----

    For angle = an2 To an1 Step -ans

        vx(n) = cx + a1 * Cos(angle): vy(n) = cy - b1 * Sin(angle): n = n + 1

    Next



    ' Exact endpoint

    vx(n) = cx + a1 * Cos(an1): vy(n) = cy - b1 * Sin(an1): n = n + 1



    ' ---- Scanline fill (same as before) ----

    minY = vy(0): maxY = vy(0)

    For i = 1 To n - 1: minY = _Min(minY, vy(i)): maxY = _Max(maxY, vy(i)): Next

    For yScan = minY To maxY

        count = 0

        For i = 0 To n - 1

            j = (i + 1) Mod n

            y1 = vy(i): y2 = vy(j)

            If y2 <> y1 Then

                If (y1 <= yScan _AndAlso y2 > yScan) _OrElse (y2 <= yScan _AndAlso y1 > yScan) Then

                    x1 = vx(i): x2 = vx(j)

                    interX(count) = x1 + (yScan - y1) * (x2 - x1) / (y2 - y1)

                    count = count + 1: If count > 1 Then Exit For

                End If

            End If

        Next

        Line (interX(0), yScan)-(interX(1), yScan), col, BF

    Next yScan

    $Checking:On

End Sub

2.4 seconds vs 2.8 seconds, which means circlefill is about 20% faster.  Which means this thing is actually much faster than what I thought it would be, seeing as how it's so much more flexible and does ellipses and rings and arcs and everything else for us.

I have a feeling that this is going to end up becoming something rather prominently used in my toolbox before long.