Drawing

Just starting out? Need help? Post your questions and find answers here.
Everything
Enthusiast
Enthusiast
Posts: 224
Joined: Sat Jul 07, 2018 6:50 pm

Drawing

Post by Everything »

What is the best way to draw graph like this one:

Image

I'm interested in full compliance of the curve "form" (in my opinion this view is optimally balanced | roundness\sharpness)
The only way I know is GDI+ with some antialiasing, but not sure if it will be sharp enough in small sizes...
User avatar
skywalk
Addict
Addict
Posts: 3972
Joined: Wed Dec 23, 2009 10:14 pm
Location: Boston, MA

Re: Drawing

Post by skywalk »

Lots of ways. Webgadget and Javascript lib to google plot or roll your own with canvasgadget and vector drawing lib(antialias built-in) or 3rd party pay lib + PB wrapper code.
The nice thing about standards is there are so many to choose from. ~ Andrew Tanenbaum
Bitblazer
Enthusiast
Enthusiast
Posts: 733
Joined: Mon Apr 10, 2017 6:17 pm
Location: Germany
Contact:

Re: Drawing

Post by Bitblazer »

Javascript or ActiveX solutions, but a simple line graph like that can be easily done yourself in Purebasic with 2D Drawing or Vector drawing.

Or maybe extend this module.
webpage - discord chat links -> purebasic GPT4All
Everything
Enthusiast
Enthusiast
Posts: 224
Joined: Sat Jul 07, 2018 6:50 pm

Re: Drawing

Post by Everything »

skywalk wrote:Webgadget and Javascript lib to google plot
God, no! :)
skywalk wrote:vector drawing lib(antialias built-in)
Not really sure it can draw exactly like that... at least for all the time I have not seen a single example.
skywalk wrote:or 3rd party pay lib + PB wrapper code
Hmm... I'll go look for candidates
User avatar
mk-soft
Always Here
Always Here
Posts: 5335
Joined: Fri May 12, 2006 6:51 pm
Location: Germany

Re: Drawing

Post by mk-soft »

TrendGadget...

Link: viewtopic.php?f=27&t=73321
My Projects ThreadToGUI / OOP-BaseClass / EventDesigner V3
PB v3.30 / v5.75 - OS Mac Mini OSX 10.xx - VM Window Pro / Linux Ubuntu
Downloads on my Webspace / OneDrive
#NULL
Addict
Addict
Posts: 1440
Joined: Thu Aug 30, 2007 11:54 pm
Location: right here

Re: Drawing

Post by #NULL »

Here is an example with PB's vector drawing library:

Code: Select all

EnableExplicit
Define ww, wh, style, win, canvas, font, event, quit

ww=820
wh=220
style | #PB_Window_ScreenCentered
style | #PB_Window_SystemMenu
style | #PB_Window_MinimizeGadget

win = OpenWindow(#PB_Any, 50,100, ww,wh, "", style)
AddKeyboardShortcut(win, #PB_Shortcut_Escape, 10)
#timer = 0
AddWindowTimer(win, #timer, 100)
canvas = CanvasGadget(#PB_Any, 10, 10, ww-20, wh-20)

CompilerIf #PB_Compiler_OS = #PB_OS_Windows
  font = LoadFont(#PB_Any, "courier new", 10)
CompilerElse
  font = LoadFont(#PB_Any, "monospace", 10)
CompilerEndIf

NewList values.i()
AddElement(values())
values() = 10
AddElement(values())
values() = 20
AddElement(values())
values() = 30
AddElement(values())
values() = 40
AddElement(values())
values() = 50

Procedure draw(canvas, List values.i())
  Protected i
  Shared font
  
  StartVectorDrawing(CanvasVectorOutput(canvas))
    
    VectorSourceColor($fff8f8f8)
    FillVectorOutput()
    
    For i=0 To 100 Step 20
      ; left labels
      MovePathCursor(50, VectorOutputHeight()- 50 - i - VectorTextHeight(Str(i))/2.0)
      VectorFont(FontID(font), 10.0)
      AddPathText(Str(i))
      VectorSourceColor($ffaaaaaa)
      FillPath()
      
      ; y/horizontal lines
      MovePathCursor(80, VectorOutputHeight()-50-i)
      AddPathLine(VectorOutputWidth()-50, VectorOutputHeight()-50-i)
      VectorSourceColor($ffcccccc)
      StrokePath(1)
    Next
    
    For i=50 To 500 Step 50
      ; bottom labels
      MovePathCursor(50 + i - VectorTextWidth(Str(i))/2.0, VectorOutputHeight()- 50 + 10)
      VectorFont(FontID(font), 10.0)
      AddPathText(Str(i))
      VectorSourceColor($ffaaaaaa)
      FillPath()
      
      ; x/vertical ticks
      MovePathCursor(50 + i, VectorOutputHeight()-50)
      AddPathLine(50 + i, VectorOutputHeight()-50 + 4)
      VectorSourceColor($ffcccccc)
      StrokePath(1)
    Next
    
    Protected.f xFrom, yFrom
    Protected.f xTo, yTo
    Protected.f xStep, yStep
    Protected.f x1, y1, x2, y2, x3, y3, x4, y4
    
    ; origin
    xFrom = 80
    yFrom = VectorOutputHeight() - 50
    MovePathCursor(xFrom, yFrom)
    
    yTo = yFrom
    xTo = xFrom
    
    ; step width
    xStep = 6
    
    ForEach values()
      xTo = xFrom + xStep
      yTo = VectorOutputHeight() - 50 - values()
      yStep = yTo - yFrom
      
      ;
      ;  +----------------------------+  +----------------------------+  +----------------------------+  +----------------------------+
      ;  |                            |  |                            |  |                            |  |                            |
      ;  |                     x3 x4  |  |                x3      x4  |  |             x3         x4  |  |   x3                   x4  |
      ;  |                     ###    |  |                   #####    |  |                  ######    |  |                ########    |
      ;  |                  ###       |  |                ###         |  |                ##          |  |              ##            |
      ;  |                ##          |  |              ##            |  |               #            |  |             #              |
      ;  |               #            |  |             #              |  |              #             |  |             #              |
      ;  |              #             |  |            #               |  |             #              |  |             #              |
      ;  |             #              |  |            #               |  |             #              |  |             #              |
      ;  |           ##               |  |           #                |  |            #               |  |             #              |
      ;  |         ##                 |  |         ##                 |  |           #                |  |            #               |
      ;  |      ###                   |  |      ###                   |  |        ###                 |  |          ##                |
      ;  |   ###                      |  |  ####                      |  |  ######                    |  |  ########                  |
      ;  | x1 x2                      |  | x1      x2                 |  | x1          x2             |  | x1                    x2   |
      ;  |                            |  |                            |  |                            |  |                            |
      ;  +----------------------------+  +----------------------------+  +----------------------------+  +----------------------------+
      ;
      x1 = xFrom
      x4 = xFrom + xStep
      Select 3
        Case 1
          x2 = xFrom + 0.1 * xStep
          x3 = xFrom + 0.9 * xStep
        Case 2
          x2 = xFrom + 0.33 * xStep
          x3 = xFrom + 0.66 * xStep
        Case 3
          x2 = xFrom + 0.5 * xStep
          x3 = xFrom + 0.5 * xStep
        Case 4
          x2 = xFrom + 0.99 * xStep
          x3 = xFrom + 0.01 * xStep
      EndSelect
      
      y1 = yFrom
      y2 = yFrom
      y3 = yTo
      y4 = yTo
      
      AddPathCurve(x2, y2, x3, y3, x4, y4)
      
      xFrom = xTo
      yFrom = yTo
    Next
    
    ; draw back down to zero baseline
    xTo = 80
    yTo = VectorOutputHeight() - 50
    AddPathLine(xFrom, VectorOutputHeight() - 50)
    
    VectorSourceColor($dd88C282)
    StrokePath(1, #PB_Path_Preserve)
    
    VectorSourceColor($8888C282)
    FillPath()
    
  StopVectorDrawing()
EndProcedure

draw(canvas, values())

Repeat
  event = WaitWindowEvent(10)
  Select event
    Case #PB_Event_CloseWindow
      quit = #True
    Case #PB_Event_Menu
      Select EventMenu()
        Case 10
          quit = #True
      EndSelect
    Case #PB_Event_Timer
      Select EventTimer()
        Case #timer
          AddElement(values())
          values() = Random(100)
          draw(canvas, values())
      EndSelect
  EndSelect
Until quit
Last edited by #NULL on Wed Sep 18, 2019 9:16 am, edited 1 time in total.
User avatar
oreopa
Enthusiast
Enthusiast
Posts: 281
Joined: Sat Jun 24, 2006 3:29 am
Location: Edinburgh, Scotland.

Re: Drawing

Post by oreopa »

Nice example, looks good.
Proud supporter of PB! * Musician * C64/6502 Freak
Everything
Enthusiast
Enthusiast
Posts: 224
Joined: Sat Jul 07, 2018 6:50 pm

Re: Drawing

Post by Everything »

#NULL wrote:Here is an example
Wow, I have no words... it's amazing!
Usually in the examples there were quite ugly-looking curves so I got the impression that the vector library just can't draw like that, looks like in the right hands it can :D
Thx!
#NULL
Addict
Addict
Posts: 1440
Joined: Thu Aug 30, 2007 11:54 pm
Location: right here

Re: Drawing

Post by #NULL »

I added some initial values (previous post updated)..

Code: Select all

NewList values.i()
AddElement(values())
values() = 10
AddElement(values())
values() = 20
AddElement(values())
values() = 30
AddElement(values())
values() = 40
AddElement(values())
values() = 50
..to show that there is kind of like a plateau for each data point. This is because the curve will always cross the data point horizontally, which makes it easier to fit the segments to each other. I also added a Select to change the width of the plateau, so you can get sharp or round spikes.

Code: Select all

;-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
      ;  +----------------------------+  +----------------------------+  +----------------------------+  +----------------------------+
      ;  |                            |  |                            |  |                            |  |                            |
      ;  |                     x3 x4  |  |                x3      x4  |  |             x3         x4  |  |   x3                   x4  |
      ;  |                     ###    |  |                   #####    |  |                  ######    |  |                ########    |
      ;  |                  ###       |  |                ###         |  |                ##          |  |              ##            |
      ;  |                ##          |  |              ##            |  |               #            |  |             #              |
      ;  |               #            |  |             #              |  |              #             |  |             #              |
      ;  |              #             |  |            #               |  |             #              |  |             #              |
      ;  |             #              |  |            #               |  |             #              |  |             #              |
      ;  |           ##               |  |           #                |  |            #               |  |             #              |
      ;  |         ##                 |  |         ##                 |  |           #                |  |            #               |
      ;  |      ###                   |  |      ###                   |  |        ###                 |  |          ##                |
      ;  |   ###                      |  |  ####                      |  |  ######                    |  |  ########                  |
      ;  | x1 x2                      |  | x1      x2                 |  | x1          x2             |  | x1                    x2   |
      ;  |                            |  |                            |  |                            |  |                            |
      ;  +----------------------------+  +----------------------------+  +----------------------------+  +----------------------------+
      ;
      x1 = xFrom
      x4 = xFrom + xStep
      Select 3
        Case 1
          x2 = xFrom + 0.1 * xStep
          x3 = xFrom + 0.9 * xStep
        Case 2
          x2 = xFrom + 0.33 * xStep
          x3 = xFrom + 0.66 * xStep
        Case 3
          x2 = xFrom + 0.5 * xStep
          x3 = xFrom + 0.5 * xStep
        Case 4
          x2 = xFrom + 0.99 * xStep
          x3 = xFrom + 0.01 * xStep
      EndSelect
BarryG
Addict
Addict
Posts: 3292
Joined: Thu Apr 18, 2019 8:17 am

Re: Drawing

Post by BarryG »

Everything wrote:I got the impression that the vector library just can't draw like that, looks like in the right hands it can
PureBasic is just as capable as other languages if you're a skilled coder.
User avatar
Mijikai
Addict
Addict
Posts: 1360
Joined: Sun Sep 11, 2016 2:17 pm

Re: Drawing

Post by Mijikai »

Really nice @#NULL :D
Post Reply