You are not logged in or registered. Please login or register to use the full functionality of this board...
SIGN IN Join Our Community For FREE


The Joyful Programmer's Site Top Animation By Ashish In QB64
08-16-2017, 01:08 PM (This post was last modified: 08-16-2017 01:09 PM by KingAshish.)
Post: #1
 (Print Post)
The Joyful Programmer's Site Top Animation By Ashish In QB64
Hi Everyone! Smile
I had liked the top animation of this site (the top animaiton when you open the home page) very much!
So, I decided to code one in QB64 using OpenGL.
And was successful!

Code Snippet: [Select]
_TITLE "The Joyful Programmer's Site Top Animation By Ashish In QB64"

SCREEN _NEWIMAGE(800, 400, 32)

DIM SHARED glAllow AS _BYTE
glAllow = -1

DO
   _LIMIT 40
LOOP

SUB _GL () STATIC
   IF NOT glAllow THEN EXIT SUB

   IF NOT glSetup THEN
       _glViewport 0, 0, _WIDTH, _HEIGHT
   END IF

   _glClearColor 0.211, 0.533, 0.854, 1
   _glClear _GL_COLOR_BUFFER_BIT


   _glMatrixMode _GL_MODELVIEW
   _glLoadIdentity


   FOR i = clock# TO _PI(2) + clock# STEP .3
       _glColor3f 0.117, 0.482, 0.847
       _glBegin _GL_TRIANGLES
       _glVertex2f 0, -1
       _glVertex2f COS(i) * 3, SIN(i) * 3 - 1
       _glVertex2f COS(i + .15) * 3, SIN(i + .15) * 3 - 1
       _glEnd
   NEXT

   clock# = clock# - .01
END SUB


Attached File(s) Image(s)
   
Find all posts by this user
Like Post
08-16-2017, 02:20 PM
Post: #2
 (Print Post)
RE: The Joyful Programmer's Site Top Animation By Ashish In QB64
Great! Now I've got to give it a go! There go my plans for this afternoon.

B += _
Find all posts by this user
Like Post
08-16-2017, 05:02 PM
Post: #3
 (Print Post)
RE: The Joyful Programmer's Site Top Animation By Ashish In QB64
Ashish,

Great job! I always wondered if my home page would ever be noticed, and if any of the cool things I have on it would ever inspire someone.

Your demo inspired me to create one myself of the spinning sun rays. I set the drawing aspect ratio of the screen to be equal in both directions, and I added my logo. I even set the spinning speed to close to  what the website shows.

Here is the code/ Please note, you will need to download the logo with it.

Code Snippet: [Select]
DIM SHARED NumberOfRays AS _UNSIGNED INTEGER
DIM SHARED RayAngleWidth AS _FLOAT
DIM SHARED Degree AS _FLOAT
DIM SHARED AspectRatio AS DOUBLE
DIM SHARED Logo AS LONG

_TITLE "The Joyful Programmer's Spinning Sun Rays"

SCREEN _NEWIMAGE(800, 142, 32)

Logo = _LOADIMAGE("TheJoyfulProgrammer_LOGO1.png", 33)

NumberOfRays = 30
Degree = _PI / 180
RayAngleWidth = (360 / NumberOfRays) * Degree

AspectRatio = _WIDTH(_DEST) / _HEIGHT(_DEST)

DO
    _LIMIT 60

    _PUTIMAGE ((_WIDTH(0) - _WIDTH(Logo)) / 2, (_HEIGHT(0) - _HEIGHT(Logo)) / 2), Logo

    k& = _KEYHIT
    IF k& = 27 THEN SYSTEM

    _DISPLAY

LOOP



SUB _GL () STATIC

    DIM Angle AS _FLOAT
    DIM CurrentAngle AS _FLOAT
    DIM LeftAngle AS _FLOAT
    DIM RightAngle AS _FLOAT
    DIM CenterX AS _FLOAT
    DIM CenterY AS _FLOAT
    DIM Scale AS _FLOAT

    CenterX = 0
    CenterY = -1
    Scale = 3 * AspectRatio

    _GLRENDER _BEHIND

    _glMatrixMode _GL_PROJECTION
    _glOrtho -AspectRatio, AspectRatio, -1, 1, -1, 1

    _glClearColor 0.211, 0.533, 0.854, 1
    _glEnable (_GL_BLEND)

    FOR Angle = 0 TO _PI(2) - RayAngleWidth STEP RayAngleWidth * 2
        LeftAngle = ((Angle - CurrentAngle) - (RayAngleWidth / 2))
        RightAngle = ((Angle - CurrentAngle) + (RayAngleWidth / 2))
        _glColor4f 1, 1, 1, 0.1
        _glBegin _GL_TRIANGLES
        _glVertex2f CenterX, CenterY
        _glVertex2f COS(LeftAngle) * Scale, SIN(LeftAngle) * Scale + CenterY
        _glVertex2f COS(RightAngle) * Scale, SIN(RightAngle) * Scale + CenterY
        _glEnd
    NEXT

    CurrentAngle = CurrentAngle + 0.0012

END SUB


Here is a screenshot:

   


Walter Whitman
The Joyful Programmer


Attached File(s) Image(s)
   

My goal is to bring joy, excitement, fun and education to all computer programming hobbyists, tinkerers, and amateurs. I also enjoy helping and working with those who aspire at becoming masters of their craft.
Find all posts by this user
Like Post
08-16-2017, 10:12 PM (This post was last modified: 08-16-2017 10:19 PM by bplus.)
Post: #4
 (Print Post)
RE: The Joyful Programmer's Site Top Animation By Ashish In QB64
OK I practiced a different route:
Code Snippet: [Select]
'Sun spectacle.bas for QB64 fork (B+=MGA) 2017-08-16

CONST xmax = 800
CONST ymax = 200
SCREEN _NEWIMAGE(xmax, ymax, 32)
_TITLE "Sun spectacle.bas"


DIM logo AS LONG
DIM sunx AS INTEGER
DIM ray AS INTEGER
DIM px1 AS INTEGER
DIM py1 AS INTEGER
DIM angle AS SINGLE
DIM n AS INTEGER
DIM colr AS LONG
DIM c1 AS LONG
DIM c2 AS LONG
DIM border AS LONG
DIM shift AS SINGLE

logo = _LOADIMAGE("TJP logo.png", 32)
sunx = INT(xmax / 2)
ray = SQR(sunx ^ 2 + ymax ^ 2)
angle = _PI(1 / 30)
c1 = _RGB(244, 244, 100)
c2 = _RGB(244, 244, 255)
border = _RGB(244, 244, 245)
shift = 0

WHILE 1
   _LIMIT 180
   CLS
   LINE (0, 0)-(xmax, ymax), border, B
   IF shift < angle THEN colr = c1 ELSE colr = c2
   PAINT (sunx - 100, ymax - 1), colr, border
   FOR n = -1 TO 31
       px1 = sunx + ray * COS(_PI(1) + n * angle + shift)
       py1 = ymax + ray * SIN(_PI(1) + n * angle + shift)
       LINE (sunx, ymax)-(px1, py1), border
       IF n > -1 THEN
           px1 = sunx + .25 * ray * COS(_PI(1) + n * angle - .5 * angle + shift)
           py1 = ymax + .25 * ray * SIN(_PI(1) + n * angle - .5 * angle + shift)
           IF n MOD 2 THEN colr = c2 ELSE colr = c1
           PAINT (px1, py1), colr, border
       END IF
   NEXT
   _PUTIMAGE ((xmax - _WIDTH(logo)) / 2, (ymax - _HEIGHT(logo))), logo
   _DISPLAY
   shift = shift + angle * 1 / 11
   IF shift >= 2 * angle THEN shift = 0
WEND

Edit snap shot to fit width


Attached File(s) Image(s)
   

B += _
Find all posts by this user
Like Post
08-17-2017, 01:38 AM
Post: #5
 (Print Post)
RE: The Joyful Programmer's Site Top Animation By Ashish In QB64
Excellent animation and modifications. Well done!

J

May your journey be free of incident.

Live long and prosper.
Find all posts by this user
Like Post
08-17-2017, 06:01 AM
Post: #6
 (Print Post)
RE: The Joyful Programmer's Site Top Animation By Ashish In QB64
@bplus
Thanks! I liked your software rendered sun rays! Smile

@Waltersmind
I liked your code! It was perfectly matching the animation with the site's one. Big Grin

@johnno56
Thanks! Smile
Find all posts by this user
Like Post
08-18-2017, 06:24 PM
Post: #7
 (Print Post)
RE: The Joyful Programmer's Site Top Animation By Ashish In QB64
Mark,

Very nicely done! Good job.

There are some things that I see your doing that I use to do before I really understand all of QB64, and I would like to share some pointers with you if you don't mind.

You no longer need to keep track of the width and height of the screen or any image as you now have access to that internal information with the _WIDTH and _HEIGHT commands. There are several ways of using the _WIDTH and _HEIGHT commands.

The first way is, "w = _WIDTH(ImageHandle&Wink". This allows you to get the dimension of a specific image loaded or created in code.

The second way is, "w = _WIDTH(0)". While this is very similar to the first method, it differs in the fact that you can hard code an images handle value. However, you can never be certain what the actual image id value will be due to when an image gets loaded or created, which changes the position in the internal image array. But you can always count on "0" to always mean the SCREEN window.

The third way, which I learned thanks to Ashish, is to not used the imageHandle& parameter at all. This method will retrieve the dimensions of the destination imageHandle, which can be set with the, "_DEST ImageHandle&" statement.

If you look at my more modern QB64 projects, you will see things like, "CenterX = _WIDTH / 2: CenterY = _HEIGHT / 2". Using these commands allow us to remove the need to define extra variables to hold the image dimensions, saving a little bit of memory space, and no need to worry if the data is still correct. However, there is a bit of trade off by using this last method, and that is speed. It is much faster to use predefined variables that the _WIDTH and _HEIGHT statements, as they are slower. But you may never see a delay in any of your projects.

To show you the difference in speed between predefined variables and the _WIDTH & _HEIGHT functions, here is an over-the-top, speed-comparison demo. It's over the top because I added a progress bar to each test.

Code Snippet: [Select]
DIM ImageWidth AS _UNSIGNED INTEGER
DIM ImageHeight AS _UNSIGNED INTEGER
DIM StartTimer1 AS _FLOAT
DIM EndTimer1 AS _FLOAT
DIM StartTimer2 AS _FLOAT
DIM EndTimer2 AS _FLOAT
DIM CurrentTimer AS LONG

DIM SHARED CurrentTest AS _UNSIGNED INTEGER
DIM SHARED CurrentIteration AS _UNSIGNED LONG
DIM SHARED MinimumIteration AS _UNSIGNED LONG
DIM SHARED MaximumIteration AS _UNSIGNED LONG
DIM SHARED Degree AS _FLOAT


MinimumIteration = 1
MaximumIteration = 100000000

Degree = _PI / 180

ImageWidth = 800
ImageHeight = 600

SCREEN _NEWIMAGE(800, 600, 32)

CurrentTimer = _FREETIMER
ON TIMER(CurrentTimer, 0.01) DrawProgressBar

COLOR _RGB32(0, 220, 0)
'      1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
PRINT "' THIS DEMO TEST HOW LONG IT TAKES TO CALCULATE THE CENTER OF THE SCREEN USING VARIABLES THAT HOLD"
PRINT "' THE WIDTH AND HEIGHT OF THE CURRENT SCREEN, VERSUS USING THE _WITH AND _HEIGHT VARIABLES. EACH"
PRINT "' TEST CALCULATES THE CENTER OF THE SCREEN"; (MaximumIteration - MinimumIteration + 1); "TIMES AND DISPLAYS THE AMOUNT OF TIME IT TOOK"
PRINT "' FOR EACH TEST."
PRINT
PRINT

COLOR _RGB32(255, 0, 255)
PRINT "<PRESS ANY KEY TO START THE FIRST STRESS TEST>"
_DISPLAY
a$ = INPUT$(1)

PRINT "Starting..."
PRINT



' START TEST #1
COLOR _RGB32(80, 80, 255)
' THE FOLLOWING PRINT STRING CAN BE ANY SIZE YOU WANT AS THE PROGRESS BAR WILL ADJUST ITS WIDTH ACCORDINGLY AND AUTOMATICALLY.
PRINT "Test #1: ";

' TURN THE PROGRESS BAR ON
TIMER(CurrentTimer) ON

'
StartTimer1 = TIMER(0.001)

' TEST HOW LONG IT TAKES TO CALCULATE VALUE USING VARIABLES
FOR CurrentIteration = MinimumIteration TO MaximumIteration
   CenterX = ImageWidth / 2
   CenterY = ImageHeight / 2
NEXT

EndTimer1 = TIMER(0.001)
TIMER(CurrentTimer) OFF

' DRAW THE PROGRESS BAR ONE LAST TIME SO IT WILL SHOW THE MAXIMUM ITERATION
CurrentIteration = MaximumIteration
DrawProgressBar

' LET THE USER KNOW HOW LONG IT TOOK.
COLOR _RGB32(255, 255, 255)
PRINT
PRINT "Test ONE took "; INT((EndTimer1 - StartTimer1) * 10000) / 10000; " seconds."
PRINT
PRINT





COLOR _RGB32(255, 0, 255)
PRINT "<PRESS ANY KEY TO START THE SECOND STRESS TEST>"
_DISPLAY
a$ = INPUT$(1)

PRINT "Starting..."
PRINT



COLOR _RGB32(80, 80, 255)
PRINT "Test #2: ";

TIMER(CurrentTimer) ON
StartTimer2 = TIMER(0.001)

' TEST HOW LONG IT TAKES TO CALCULATE VALUE USING VARIABLES
FOR CurrentIteration = MinimumIteration TO MaximumIteration
   CenterX = _WIDTH / 2
   CenterY = _HEIGHT / 2
NEXT

EndTimer2 = TIMER(0.001)
TIMER(CurrentTimer) OFF

CurrentIteration = MaximumIteration
DrawProgressBar

COLOR _RGB32(255, 255, 255)
PRINT
PRINT "Test TWO took "; INT((EndTimer2 - StartTimer2) * 10000) / 10000; " seconds."
PRINT
PRINT

COLOR _RGB32(255, 255, 255)
PRINT
PRINT "Difference time between Test #1 and Test #2: "; ABS(INT(((EndTimer1 - StartTimer1) - (EndTimer2 - StartTimer2)) * 10000)) / 10000; " seconds."
_DISPLAY




SUB DrawProgressBar

   DIM OriginalCOLUMN AS _UNSIGNED INTEGER
   DIM OriginalROW AS _UNSIGNED INTEGER
   DIM ColumnPixel AS _UNSIGNED INTEGER
   DIM RowPixel AS _UNSIGNED INTEGER
   DIM Progress AS _FLOAT
   DIM MaxCharactersWide AS _UNSIGNED INTEGER
   DIM MaxCharactersHigh AS _UNSIGNED INTEGER
   DIM CharWidth AS _UNSIGNED INTEGER
   DIM CharHeight AS _UNSIGNED INTEGER
   DIM OriginalPRINTMODE AS LONG
   DIM OriginalTextColor AS _UNSIGNED LONG

   ' SAVE THE CURRENT PRINT MODE SO WE CAN RESTORE IT AT THE END OF THIS SUB
   OriginalPRINTMODE = _PRINTMODE
   ' SAVE THE ORIGINAL TEXT COLOR SO WE CAN RESTORE IT AT THE END OF THIS SUB
   OriginalTextColor = _DEFAULTCOLOR

   ' GET THE CURRENT TEXT CURSOR COLUMN (HORIZONTAL) POSITION
   OriginalCOLUMN = POS(0)
   ' GET THE CURRENT TEXT CURSOR ROW (VERTICAL) POSITION
   OriginalROW = CSRLIN

   ' GET THE WIDTH OF THE CURRENT FONT (AT LEAST FROM THE BIGGEST CHARACTER)
   CharWidth = _PRINTWIDTH("#")
   ' GET THE HEIGHT OF THE CURRENT FONT
   CharHeight = _FONTHEIGHT(_FONT(0))

   ' CALCULATE HOW MANY CHARACTERS WIDE AND HIGH THE CURRENT SCREEN SIZE CAN HOLD OF THE CURRENTLY SELECTED FONT
   MaxCharactersWide = INT(_WIDTH / CharWidth)
   MaxCharactersHigh = INT(_HEIGHT / CharHeight)

   ' GET THE PIXEL POSITION OF THE CURRENT TEXT CURSOR POSTION
   ColumnPixel = (OriginalCOLUMN - 1) * CharWidth
   RowPixel = (OriginalROW - 1) * CharHeight

   ' CALCUALTE THE AMOUNT OF PROGRESS THAT HAS BEEN MADE SO FAR
   Progress = ((MaxCharactersWide - 1 - OriginalCOLUMN) / (MaximumIteration - MinimumIteration)) * (CurrentIteration - MinimumIteration)

   ' SINCE THIS SUB IS CALLED MANY TIMES BY THE ONTIMER STATEMENT, WE NEED TO ERASE THE BACKGROUND OF THE AREA WE ARE DRAWING THE PROGRESS BAR ON.
   COLOR _RGB32(0, 0, 0)
   LOCATE OriginalROW, OriginalCOLUMN
   ' WE CAN SIMPLY PRINT A STRING OF SPACES TO ACCOMPLISH THIS
   PRINT SPACE$(MaxCharactersWide - OriginalCOLUMN + 1);

   ' DRAW THE START AND STOP BRACKETS
   COLOR _RGB32(0, 255, 0)
   LOCATE OriginalROW, OriginalCOLUMN
   PRINT "[";
   LOCATE OriginalROW, MaxCharactersWide
   PRINT "]";

   ' DRAW THE PROGRESS BAR ITESELF
   BoxX1 = OriginalCOLUMN * CharWidth
   BoxY1 = RowPixel
   BoxX2 = (Progress + OriginalCOLUMN) * CharWidth
   BoxY2 = RowPixel + CharHeight - 1

   LINE (BoxX1, BoxY1)-(BoxX2, BoxY2), _RGB32(0, 120, 0), BF


   _PRINTMODE _KEEPBACKGROUND

   ' NOW WRITE THE CURRENT ITERATION AMOUNT ON TOP OF THE PROGRESS BAR.
   COLOR _RGB32(255, 255, 0)
   LOCATE OriginalROW, OriginalCOLUMN + 2
   PRINT "CurrentIteration:"; CurrentIteration

   ' RESET THE ORIGINAL TEXT COLOR
   COLOR OriginalTextColor

   _DISPLAY

   ' SINCE QB64 DOES NOT ALLOW YOU TO SET _PRINTMODE FROM A VARIABLE, WE HAVE TO
   ' SET THE ORINGAL PRINT MODE ANOTHER WAY.
   SELECT CASE OriginalPRINTMODE
       CASE 1
           _PRINTMODE _KEEPBACKGROUND
       CASE 2
           _PRINTMODE _ONLYBACKGROUND
       CASE 3
           _PRINTMODE _FILLBACKGROUND
   END SELECT

   ' RESET THE ORIGINAL TEXT CURSOR POSITION
   LOCATE OriginalROW, OriginalCOLUMN

END SUB

There are some great gems in the above demo. I hope some of you will find some uses for them.


Walter Whitman
The Joyful Programmer

My goal is to bring joy, excitement, fun and education to all computer programming hobbyists, tinkerers, and amateurs. I also enjoy helping and working with those who aspire at becoming masters of their craft.
Find all posts by this user
Like Post
08-18-2017, 07:44 PM
Post: #8
 (Print Post)
RE: The Joyful Programmer's Site Top Animation By Ashish In QB64
Hi Walter, 

I like helpful hints, thanks! Progress bar == excellent. Look at the difference of using a constant instead of a variable:
Code Snippet: [Select]
CONST xmax = 800
CONST ymax = 600
DIM ImageWidth AS _UNSIGNED INTEGER
DIM ImageHeight AS _UNSIGNED INTEGER
DIM StartTimer1 AS _FLOAT
DIM EndTimer1 AS _FLOAT
DIM StartTimer2 AS _FLOAT
DIM EndTimer2 AS _FLOAT
DIM CurrentTimer AS LONG

DIM SHARED CurrentTest AS _UNSIGNED INTEGER
DIM SHARED CurrentIteration AS _UNSIGNED LONG
DIM SHARED MinimumIteration AS _UNSIGNED LONG
DIM SHARED MaximumIteration AS _UNSIGNED LONG
DIM SHARED Degree AS _FLOAT


MinimumIteration = 1
MaximumIteration = 100000000

Degree = _PI / 180

ImageWidth = 800
ImageHeight = 600

SCREEN _NEWIMAGE(800, 600, 32)

CurrentTimer = _FREETIMER
ON TIMER(CurrentTimer, 0.01) DrawProgressBar

COLOR _RGB32(0, 220, 0)
'      1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
PRINT "' THIS DEMO TEST HOW LONG IT TAKES TO CALCULATE THE CENTER OF THE SCREEN USING VARIABLES THAT HOLD"
PRINT "' THE WIDTH AND HEIGHT OF THE CURRENT SCREEN, VERSUS USING THE _WITH AND _HEIGHT VARIABLES. EACH"
PRINT "' TEST CALCULATES THE CENTER OF THE SCREEN"; (MaximumIteration - MinimumIteration + 1); "TIMES AND DISPLAYS THE AMOUNT OF TIME IT TOOK"
PRINT "' FOR EACH TEST."
PRINT
PRINT

COLOR _RGB32(255, 0, 255)
PRINT "<PRESS ANY KEY TO START THE FIRST STRESS TEST>"
_DISPLAY
a$ = INPUT$(1)

PRINT "Starting..."
PRINT



' START TEST #1
COLOR _RGB32(80, 80, 255)
' THE FOLLOWING PRINT STRING CAN BE ANY SIZE YOU WANT AS THE PROGRESS BAR WILL ADJUST ITS WIDTH ACCORDINGLY AND AUTOMATICALLY.
PRINT "Test #1: ";

' TURN THE PROGRESS BAR ON
TIMER(CurrentTimer) ON

'
StartTimer1 = TIMER(0.001)

' TEST HOW LONG IT TAKES TO CALCULATE VALUE USING VARIABLES
FOR CurrentIteration = MinimumIteration TO MaximumIteration
    CenterX = xmax / 2
    CenterY = ymax / 2
NEXT

EndTimer1 = TIMER(0.001)
TIMER(CurrentTimer) OFF

' DRAW THE PROGRESS BAR ONE LAST TIME SO IT WILL SHOW THE MAXIMUM ITERATION
CurrentIteration = MaximumIteration
DrawProgressBar

' LET THE USER KNOW HOW LONG IT TOOK.
COLOR _RGB32(255, 255, 255)
PRINT
PRINT "Test ONE took "; INT((EndTimer1 - StartTimer1) * 10000) / 10000; " seconds."
PRINT
PRINT





COLOR _RGB32(255, 0, 255)
PRINT "<PRESS ANY KEY TO START THE SECOND STRESS TEST>"
_DISPLAY
a$ = INPUT$(1)

PRINT "Starting..."
PRINT



COLOR _RGB32(80, 80, 255)
PRINT "Test #2: ";

TIMER(CurrentTimer) ON
StartTimer2 = TIMER(0.001)

' TEST HOW LONG IT TAKES TO CALCULATE VALUE USING VARIABLES
FOR CurrentIteration = MinimumIteration TO MaximumIteration
    CenterX = ImageWidth / 2
    CenterY = ImageHeight / 2
NEXT

EndTimer2 = TIMER(0.001)
TIMER(CurrentTimer) OFF

CurrentIteration = MaximumIteration
DrawProgressBar

COLOR _RGB32(255, 255, 255)
PRINT
PRINT "Test TWO took "; INT((EndTimer2 - StartTimer2) * 10000) / 10000; " seconds."
PRINT
PRINT

COLOR _RGB32(255, 255, 255)
PRINT
PRINT "Difference time between Test #1 and Test #2: "; ABS(INT(((EndTimer1 - StartTimer1) - (EndTimer2 - StartTimer2)) * 10000)) / 10000; " seconds."
_DISPLAY




SUB DrawProgressBar

    DIM OriginalCOLUMN AS _UNSIGNED INTEGER
    DIM OriginalROW AS _UNSIGNED INTEGER
    DIM ColumnPixel AS _UNSIGNED INTEGER
    DIM RowPixel AS _UNSIGNED INTEGER
    DIM Progress AS _FLOAT
    DIM MaxCharactersWide AS _UNSIGNED INTEGER
    DIM MaxCharactersHigh AS _UNSIGNED INTEGER
    DIM CharWidth AS _UNSIGNED INTEGER
    DIM CharHeight AS _UNSIGNED INTEGER
    DIM OriginalPRINTMODE AS LONG
    DIM OriginalTextColor AS _UNSIGNED LONG

    ' SAVE THE CURRENT PRINT MODE SO WE CAN RESTORE IT AT THE END OF THIS SUB
    OriginalPRINTMODE = _PRINTMODE
    ' SAVE THE ORIGINAL TEXT COLOR SO WE CAN RESTORE IT AT THE END OF THIS SUB
    OriginalTextColor = _DEFAULTCOLOR

    ' GET THE CURRENT TEXT CURSOR COLUMN (HORIZONTAL) POSITION
    OriginalCOLUMN = POS(0)
    ' GET THE CURRENT TEXT CURSOR ROW (VERTICAL) POSITION
    OriginalROW = CSRLIN

    ' GET THE WIDTH OF THE CURRENT FONT (AT LEAST FROM THE BIGGEST CHARACTER)
    CharWidth = _PRINTWIDTH("#")
    ' GET THE HEIGHT OF THE CURRENT FONT
    CharHeight = _FONTHEIGHT(_FONT(0))

    ' CALCULATE HOW MANY CHARACTERS WIDE AND HIGH THE CURRENT SCREEN SIZE CAN HOLD OF THE CURRENTLY SELECTED FONT
    MaxCharactersWide = INT(_WIDTH / CharWidth)
    MaxCharactersHigh = INT(_HEIGHT / CharHeight)

    ' GET THE PIXEL POSITION OF THE CURRENT TEXT CURSOR POSTION
    ColumnPixel = (OriginalCOLUMN - 1) * CharWidth
    RowPixel = (OriginalROW - 1) * CharHeight

    ' CALCUALTE THE AMOUNT OF PROGRESS THAT HAS BEEN MADE SO FAR
    Progress = ((MaxCharactersWide - 1 - OriginalCOLUMN) / (MaximumIteration - MinimumIteration)) * (CurrentIteration - MinimumIteration)

    ' SINCE THIS SUB IS CALLED MANY TIMES BY THE ONTIMER STATEMENT, WE NEED TO ERASE THE BACKGROUND OF THE AREA WE ARE DRAWING THE PROGRESS BAR ON.
    COLOR _RGB32(0, 0, 0)
    LOCATE OriginalROW, OriginalCOLUMN
    ' WE CAN SIMPLY PRINT A STRING OF SPACES TO ACCOMPLISH THIS
    PRINT SPACE$(MaxCharactersWide - OriginalCOLUMN + 1);

    ' DRAW THE START AND STOP BRACKETS
    COLOR _RGB32(0, 255, 0)
    LOCATE OriginalROW, OriginalCOLUMN
    PRINT "[";
    LOCATE OriginalROW, MaxCharactersWide
    PRINT "]";

    ' DRAW THE PROGRESS BAR ITESELF
    BoxX1 = OriginalCOLUMN * CharWidth
    BoxY1 = RowPixel
    BoxX2 = (Progress + OriginalCOLUMN) * CharWidth
    BoxY2 = RowPixel + CharHeight - 1

    LINE (BoxX1, BoxY1)-(BoxX2, BoxY2), _RGB32(0, 120, 0), BF


    _PRINTMODE _KEEPBACKGROUND

    ' NOW WRITE THE CURRENT ITERATION AMOUNT ON TOP OF THE PROGRESS BAR.
    COLOR _RGB32(255, 255, 0)
    LOCATE OriginalROW, OriginalCOLUMN + 2
    PRINT "CurrentIteration:"; CurrentIteration

    ' RESET THE ORIGINAL TEXT COLOR
    COLOR OriginalTextColor

    _DISPLAY

    ' SINCE QB64 DOES NOT ALLOW YOU TO SET _PRINTMODE FROM A VARIABLE, WE HAVE TO
    ' SET THE ORINGAL PRINT MODE ANOTHER WAY.
    SELECT CASE OriginalPRINTMODE
        CASE 1
            _PRINTMODE _KEEPBACKGROUND
        CASE 2
            _PRINTMODE _ONLYBACKGROUND
        CASE 3
            _PRINTMODE _FILLBACKGROUND
    END SELECT

    ' RESET THE ORIGINAL TEXT CURSOR POSITION
    LOCATE OriginalROW, OriginalCOLUMN

END SUB

B += _
Find all posts by this user
Like Post
08-19-2017, 02:59 AM (This post was last modified: 08-19-2017 03:02 AM by Waltersmind.)
Post: #9
 (Print Post)
RE: The Joyful Programmer's Site Top Animation By Ashish In QB64
Mark,

I created that demo to help teach a few advanced tricks in QB64. While QB64 language may not be natively event driven, it does have the ON TIMER event which can help us create a type of event system. Since BASIC, QB45, QBasic, and QB64 does not have classes or other modern programming paradigms (/ˈperəˌdīm/), we are forced to use SHAREd variables to communicate with the ON TIMER listener SUB (we can not use FUNCTIONs with ON TIMERs), and have to call other possible SUBs and FUNCTIONs to do the things we need. The good thing is, with a little ingenuity, it can be done. We can create complex event systems in QB64 to do things we want to do.

I really loved the little demo I created, not because of what it tests for, but for the intelligent progress bar I created for it. When I started creating the tests, I knew that huge loops would take some time to finish, and I hate wondering if a program is locked up or not, so I decided to create a little animation of a small stop watch (a circle and a line). During the creation of the StopWatch SUB, I starting thinking it might be better to actually show the progress with a progress bar.

The progress bar is very intelligent as it adjusts it width from the last printed character to the end of the line (at the left edge of the window). It calculates the width and height of the currently selected font and then calculates the number of characters high and wide the current screen can contain.

I plan on using this feature on future projects, and everyone is welcomed to do the same. All code I share on this forum (except for the code that makes up this forum) is in the public domain (unless otherwise noted) and you can do what you want with it. However, the images I share on here may be copyrighted materials, so please do not use them in commercial products unless you ask me first.

The only issue that I have with QB64 at the moment is the fact that you can not use a variable with _PRINTMODE which is stupid if you ask me. However, that is an easy internal fix, but I will leave that to the powers to be deal with it. I will just write a workaround for it.


Walter Whitman
The Joyful Programmer

My goal is to bring joy, excitement, fun and education to all computer programming hobbyists, tinkerers, and amateurs. I also enjoy helping and working with those who aspire at becoming masters of their craft.
Find all posts by this user
Like Post



Forum Jump:


User(s) browsing this thread: 1 Guest(s)




QB64 Member Project - OpenGL Triangles
QB64 Member Project - Pivot version two
QB64 Member Project - Domain
QB64 Member Project - Sabotage
QB64 Member Project - Spinning Color Wheel
QB64 Member Project - STxAxTIC 3D World
QB64 Member Project - Rubix's Magic
QB64 Member Project - Score 4
QB64 Member Project - Bowditch curve
QB64 Member Project - Kobolts Monopoly
QB64 Member Project - Input
QB64 Member Project - Red Scrolling LED Sign
QB64 Member Project - Spiro Roses
QB64 Member Project - Color Triangles
QB64 Member Project - ARB Checkers
QB64 Member Project - Point Blank
QB64 Member Project - Kings Valley verion one
QB64 Member Project - Basic Dithering
QB64 Member Project - Color Rotating Text
QB64 Member Project - Touche
QB64 Member Project - Kings Court
QB64 Member Project - Qubic
QB64 Member Project - MAPTRIANGLE
QB64 Member Project - Inside Moves
QB64 Member Project - Amazon
QB64 Member Project - Foursight
QB64 Member Project - Isolation
QB64 Member Project - Martin Fractals version four
QB64 Member Project - 9 Board
QB64 Member Project - Algeria Weather
QB64 Member Project - Line Thickness
QB64 Member Project - Rotating Background
QB64 Member Project - Martin Fractals version three
QB64 Member Project - Othello
QB64 Member Project - Dakapo
QB64 Member Project - Martin Fractals version two
QB64 Member Project - Swirl
QB64 Member Project - Connect Four
QB64 Member Project - Kings Vallery version two
QB64 Member Project - RGB Color Wheel
QB64 Member Project - Quarto
QB64 Member Project - Exit
QB64 Member Project - Martin Fractals version one
QB64 Member Project - Pivet version one
QB64 Member Project - Overboard
QB64 Member Project - Splatter
QB64 Member Project - Dreamy Clock
QB64 Member Project - Blokus
QB64 Member Project - Full Color LED Sign