Gradient Library

Post Reply
matt7
Posts: 98
Joined: Sun Jul 12, 2015 5:00 pm
My devices: iPhone 8, Windows
Location: Kentucky, USA

Gradient Library

Post by matt7 » Wed Aug 01, 2018 6:29 pm

UPDATE (6/11/2018):
I added a new parameter for this library: GRADIENT.interpMethod$. This parameter that allows you to choose between one of several interpolation methods. This controls how transitional color and alpha values are calculated. Supported methods:
  • "linear" = Linear Interpolation
  • "cosine" = Cosine Interpolation
  • "poly5" = Parameterized 5th Order Polynomial
  • "cubic" = Cubic Hermite Splines
  • "cubicM" = Cubic Hermite Splines (Monotonic)
For more insight into the differences between these methods, see my post here. Additional info is provided in the documentation in the main library file (filename "gradient").

Overview

Functions provided:
  • RECTGRAD (cD(,), aD(,), x, y, w, h, dir$)
  • QUADGRAD (cD(,), aD(,), x(), y(), dir$)
  • ELPSGRAD (cD(,), aD(,), x, y, rx, ry, dir$)
This library provides functions for drawing gradients. The gradients can be defined with any number of gradient stops (there are separate arrays for color stops and alpha stops), and they can be drawn across a rectangle, quadrilateral, or ellipse.

NOTE: In order to draw smooth gradients at very high resolutions, these functions set the graphics mode to COPY, meaning that wherever a gradient is drawn, data under the gradient will be destroyed. If a gradient with transparency (alpha values < 1) is intended to be placed above other graphics, then draw the gradient in a sprite and position the sprite at the correct location (you can also stamp the sprite and then delete it if you want). Remember to set the graphics mode back to the desired setting after calling one of these functions!
(This is why I requested a GET GRAPHICS MODE M$ command! https://kibernetik.pro/forum/viewtopic.php?f=24&t=1463)

NOTE: Each function sets FILL ALPHA to 1 on completion

More details about function inputs and parameters and info on the interpolation method used for interpolating between gradients stops can be found in the library file's header.

Code

Code can be found here: https://www.dropbox.com/sh/431yatilp3zc ... mCZ6a?dl=0

There are four files required for this library (in the lib folder), though only one needs to be referenced in your code to use the library. The four files are:
  • gradient = The main library file. Include this in any program where you want to draw gradients using this library.
  • gradient_init = File containing an initialization subroutine used by all three gradient functions.
  • gradient_rgba = File containing an interpolation subroutine used by all three gradient functions.
  • cubic_hermite_splines = File containing functions for the "cubic" and "cubicM" interpolation methods.
Also included in the Dropbox folder are several demos:
  • Loading Screen Demo
  • Speed Test (Shapes)
  • Speed Test (Fullscreen)
  • Ease Accel Comparison
  • Interpolation Comparison
Image

Image Image

Image Image
Last edited by matt7 on Sat Aug 11, 2018 10:50 pm, edited 1 time in total.

User avatar
rbytes
Posts: 1329
Joined: Sun May 31, 2015 12:11 am
My devices: iPhone X
iPad 4
MacBook
Dell Inspiron laptop
CHUWI Plus 10 convertible Windows/Android tablet
Location: Calgary, Canada
Flag: Canada
Contact:

Re: Gradient Library

Post by rbytes » Wed Aug 01, 2018 6:55 pm

This is great stuff! I have been looking forward to it since your last post on the topic.

I hope you will post the code for the other examples shown here, and the gradient editing screen shown in the previous post. It is so much easier to apply the library that way.

Well done!
Zzzzz

matt7
Posts: 98
Joined: Sun Jul 12, 2015 5:00 pm
My devices: iPhone 8, Windows
Location: Kentucky, USA

Re: Gradient Library

Post by matt7 » Wed Aug 01, 2018 7:33 pm

Thanks! My post was getting a bit long and I wasn't sure if anyone cared about the code for those test scripts, so I didn't include them. But here they are! The final times in my screenshots are averaged over 50 runs (done in the script, not manually). As you run the script you'll see the averages update as more tests are run. Top right number is counting down from n to 0, bottom right number is total time elapsed.

Speed test for all shapes and gradient directions:

Code: Select all

{{/lib/graphics/gradient}}

'  Test params
' -------------

n = 50    ' Number of draws for each gradient (for time avg)
bw = 0.5  ' GRADIENT.bandWidth (gradient resolution)
ea = 14   ' GRADIENT.easeAccel (color interpolation smoothing)
fs = 19   ' font size

nC = 0          ' Pos   R   G   B
nC += 1  !  DATA  0,    1,  1,  0
nC += 1  !  DATA  0.5,  0,  1,  1
nC += 1  !  DATA  1,    1,  0,  1

nA = 0          ' Pos   Alpha
nA += 1  !  DATA  0,    1
nA += 1  !  DATA  0.8,  0.5
nA += 1  !  DATA  1,    0

DIM cD(nC,4)
FOR iC = 0 TO nC-1
  READ cD(iC,0)
  READ cD(iC,1)
  READ cD(iC,2)
  READ cD(iC,3)
NEXT iC

DIM aD(nA,2)
FOR iA = 0 TO nA-1
  READ aD(iA,0)
  READ aD(iA,1)
NEXT iA

'==============================================================

GRAPHICS
GRAPHICS CLEAR 0,0,0,0
REFRESH OFF

OPTION TEXT POS CENTRAL
DRAW COLOR 0,0,0
DRAW SIZE 0.5
DRAW FONT SIZE fs
GRADIENT.bandwidth = bw
GRADIENT.easeAccel = ea

GET SCREEN SIZE scrW, scrH

'==============================================================

'  Gradient positions and dimensions
' -----------------------------------

d = scrW*0.4
r = d/2
qr = 0.7    ' Quad rotation

x1 = scrW/4
x2 = scrW*3/4

y1 = scrH*0.3
y2 = scrH*0.555
y3 = scrH*0.8

DIM xQ1(4), yQ1(4)
xQ1(0) = x1 - r*qr  !  yQ1(0) = y2 - r
xQ1(1) = x1 + r     !  yQ1(1) = y2 - r*qr
xQ1(2) = x1 + r*qr  !  yQ1(2) = y2 + r
xQ1(3) = x1 - r     !  yQ1(3) = y2 + r*qr

DIM xQ2(4), yQ2(4)
FOR i = 0 TO 3
  xQ2(i) = xQ1(i) + (x2-x1)
  yQ2(i) = yQ1(i)
NEXT i

'  Gradient speed rating
' -----------------------

/*
The number of colors (nC) and number of alpha values (nA) do not have a significant effect on gradient drawing time. Drawing time is better predicted by the following three attributes:

  - Gradient size
  - Gradient resolution (set with GRADIENT.bandWidth)
  - Percentage of gradient with color & alpha transitions (pT)

pT affects gradient drawing speed because drawing each gradient segment is faster when the color and/or alpha values are remaining constant and do not need to be interpolated. Therefore, gradients with a lower pT value are drawn faster than gradients with a higher pT value. Min pT = 0, max pT = 1.
*/

pT = (cD(nC-1,0)-cD(0,0) + aD(nA-1,0)-aD(0,0)) / 2

'==============================================================

'  Speed test
' ------------

DIM tD(6)

FOR i = 0 TO n-1

  GRAPHICS CLEAR 1,1,1,0

  t1 = TIME()
  RECTGRAD(cD, aD, x1, y1, d, d, "x")
  t2 = TIME()
  tD(0) += t2-t1
  DRAW RECT x1, y1 SIZE r+0.5, r+0.5
  DRAW TEXT "RECTGRAD"  AT x1, y1-fs*2
  DRAW TEXT """x"""     AT x1, y1-fs
  DRAW TEXT tD(0)/(i+1) AT x1, y1

  t1 = TIME()
  RECTGRAD(cD, aD, x2, y1, d, d, "y")
  t2 = TIME()
  tD(1) += t2-t1
  DRAW RECT x2, y1 SIZE r+0.5, r+0.5
  DRAW TEXT "RECTGRAD"  AT x2, y1-fs*2
  DRAW TEXT """y"""     AT x2, y1-fs
  DRAW TEXT tD(1)/(i+1) AT x2, y1

  t1 = TIME()
  QUADGRAD(cD, aD, xQ1, yQ1, "14to23")
  t2 = TIME()
  tD(2) += t2-t1
  DRAW QUAD xQ1(0),yQ1(0), xQ1(1),yQ1(1), xQ1(2),yQ1(2), xQ1(3),yQ1(3)
  DRAW TEXT " QUADGRAD"  AT x1, y2-fs*2
  DRAW TEXT """14to23""" AT x1, y2-fs
  DRAW TEXT tD(2)/(i+1)  AT x1, y2

  t1 = TIME()
  QUADGRAD(cD, aD, xQ2, yQ2, "12to43")
  t2 = TIME()
  tD(3) += t2-t1
  DRAW QUAD xQ2(0),yQ2(0), xQ2(1),yQ2(1), xQ2(2),yQ2(2), xQ2(3),yQ2(3)
  DRAW TEXT " QUADGRAD"  AT x2, y2-fs*2
  DRAW TEXT """12to43""" AT x2, y2-fs
  DRAW TEXT tD(3)/(i+1)  AT x2, y2

  t1 = TIME()
  ELPSGRAD(cD, aD, x1, y3, r, r, "r")
  t2 = TIME()
  tD(4) += t2-t1
  DRAW CIRCLE x1, y3 SIZE r+0.5, r+0.5
  DRAW TEXT "ELPSGRAD"  AT x1, y3-fs*2
  DRAW TEXT """r"""     AT x1, y3-fs
  DRAW TEXT tD(4)/(i+1) AT x1, y3

  t1 = TIME()
  ELPSGRAD(cD, aD, x2, y3, r, r, "a")
  t2 = TIME()
  tD(5) += t2-t1
  DRAW CIRCLE x2, y3 SIZE r+0.5, r+0.5
  DRAW TEXT "ELPSGRAD"  AT x2, y3-fs*2
  DRAW TEXT """a"""     AT x2, y3-fs
  DRAW TEXT tD(5)/(i+1) AT x2, y3

  OPTION TEXT POS NORMAL
  DRAW TEXT "bw = "&bw AT scrW*0.1, scrH*0.05
  DRAW TEXT "pT = "&pT AT scrW*0.1, scrH*0.05+fs
  DRAW TEXT n-i-1 AT scrW*0.7, scrH*0.05
  DRAW TEXT STR$(TIME(),"#.##") AT scrW*0.7, scrH*0.05+fs
  OPTION TEXT POS CENTRAL

  REFRESH

NEXT i
Speed test for fullscreen gradients:

Code: Select all

{{/lib/graphics/gradient}}

'  Test params
' -------------

n = 50    ' Number of draws for each gradient (for time avg)
bw = 0.5  ' GRADIENT.bandWidth (gradient resolution)
ea = 14   ' GRADIENT.easeAccel (color interpolation smoothing)
fs = 19   ' font size

nC = 0          ' Pos   R   G   B
nC += 1  !  DATA  0,    1,  1,  0
nC += 1  !  DATA  0.5,  0,  1,  1
nC += 1  !  DATA  1,    1,  0,  1

nA = 0          ' Pos   Alpha
nA += 1  !  DATA  0,    1
nA += 1  !  DATA  0.8,  0.5
nA += 1  !  DATA  1,    0

DIM cD(nC,4)
FOR iC = 0 TO nC-1
  READ cD(iC,0)
  READ cD(iC,1)
  READ cD(iC,2)
  READ cD(iC,3)
NEXT iC

DIM aD(nA,2)
FOR iA = 0 TO nA-1
  READ aD(iA,0)
  READ aD(iA,1)
NEXT iA

'==============================================================

GRAPHICS
GRAPHICS CLEAR 1,1,1,0
REFRESH OFF

DRAW COLOR 0,0,0
DRAW FONT SIZE fs
GRADIENT.bandwidth = bw
GRADIENT.easeAccel = ea

GET SCREEN SIZE scrW, scrH

'==============================================================

'  Gradient position and dimension
' ---------------------------------

w = scrW
h = scrH

x = w/2
y = h/2

'  Text position
' ---------------

xT = scrW/2

yTx = scrH/2 - fs*3
yTy = scrH/2 + fs*3

'  Gradient speed rating
' -----------------------

/*
The number of colors (nC) and number of alpha values (nA) do not have a significant effect on gradient drawing time. Drawing time is better predicted by the following three attributes:

  - Gradient size
  - Gradient resolution (set with GRADIENT.bandWidth)
  - Percentage of gradient with color & alpha transitions (pT)

pT affects gradient drawing speed because drawing each gradient segment is faster when the color and/or alpha values are remaining constant and do not need to be interpolated. Therefore, gradients with a lower pT value are drawn faster than gradients with a higher pT value. Min pT = 0, max pT = 1.
*/

pT = (cD(nC-1,0)-cD(0,0) + aD(nA-1,0)-aD(0,0)) / 2

'==============================================================

'  Speed test
' ------------

DIM tD(2)

FOR i = 0 TO n-1

  GRAPHICS CLEAR 1,1,1,0

  t1 = TIME()
  RECTGRAD(cD, aD, x, y, w, h, "x")
  t2 = TIME()
  tD(0) += t2-t1

  OPTION TEXT POS CENTRAL
  DRAW TEXT "RECTGRAD"  AT xT, yTx-fs*2
  DRAW TEXT """x"""     AT xT, yTx-fs
  DRAW TEXT tD(0)/(i+1) AT xT, yTx

  OPTION TEXT POS NORMAL
  DRAW TEXT "bw = "&bw AT scrW*0.1, scrH*0.05
  DRAW TEXT "pT = "&pT AT scrW*0.1, scrH*0.05+fs
  DRAW TEXT n-i-1 AT scrW*0.7, scrH*0.05
  DRAW TEXT STR$(TIME(),"#.##") AT scrW*0.7, scrH*0.05+fs

  REFRESH

NEXT i


FOR i = 0 TO n-1

  GRAPHICS CLEAR 1,1,1,0

  t1 = TIME()
  RECTGRAD(cD, aD, x, y, w, h, "y")
  t2 = TIME()
  tD(1) += t2-t1

  OPTION TEXT POS CENTRAL
  DRAW TEXT "RECTGRAD"  AT xT, yTx-fs*2
  DRAW TEXT """x"""     AT xT, yTx-fs
  DRAW TEXT tD(0)/n AT xT, yTx
  DRAW TEXT "RECTGRAD"  AT xT, yTy-fs*2
  DRAW TEXT """y"""     AT xT, yTy-fs
  DRAW TEXT tD(1)/(i+1) AT xT, yTy

  OPTION TEXT POS NORMAL
  DRAW TEXT "bw = "&bw AT scrW*0.1, scrH*0.05
  DRAW TEXT "pT = "&pT AT scrW*0.1, scrH*0.05+fs
  DRAW TEXT n-i-1 AT scrW*0.7, scrH*0.05
  DRAW TEXT STR$(TIME(),"#.##") AT scrW*0.7, scrH*0.05+fs

  REFRESH

NEXT i
Ease acceleration comparison:

Code: Select all

{{/lib/graphics/gradient}}

'  Test params
' -------------

nEA = 16   ' Number of ease acceleration values to compare
bw = 0.5  ' GRADIENT.bandWidth (gradient resolution)
fs = 19   ' font size

drawOutlines = 1

IF nEA < 0 THEN nEA = 0
IF nEA > 31 THEN nEA = 31

DIM ea(nEA)
FOR i = 0 TO nEA-1
  ea(i) = i*(30/(nEA-1))
NEXT i

nC = 0          ' Pos   R   G   B
nC += 1  !  DATA  0,    1,  1,  0
nC += 1  !  DATA  0.5,  0,  1,  1
nC += 1  !  DATA  1,    1,  0,  1

nA = 0          ' Pos   Alpha
nA += 1  !  DATA  0,    1
nA += 1  !  DATA  0.8,  0.5
nA += 1  !  DATA  1,    0

DIM cD(nC,4)
FOR iC = 0 TO nC-1
  READ cD(iC,0)
  READ cD(iC,1)
  READ cD(iC,2)
  READ cD(iC,3)
NEXT iC

DIM aD(nA,2)
FOR iA = 0 TO nA-1
  READ aD(iA,0)
  READ aD(iA,1)
NEXT iA

'==============================================================

GRAPHICS
GRAPHICS CLEAR 1,1,1,0
REFRESH OFF
REFRESH

OPTION TEXT POS NORMAL
DRAW COLOR 0,0,0
DRAW SIZE 0.5
DRAW FONT SIZE fs
GRADIENT.bandwidth = bw

GET SCREEN SIZE scrW, scrH

'==============================================================

'  Gradient position and dimension
' ---------------------------------

hOff = scrH*0.15

w = scrW*0.8
h = (scrH-hOff)/nEA

x = scrW*0.6

DIM y(nEA)
FOR i = 0 TO nEA-1
  y(i) = (i+0.5)*h + hOff
NEXT i

'  Text position
' ---------------

xT = scrW*0.05

DIM yT(nEA)
FOR i = 0 TO nEA-1
  yT(i) = y(i)
NEXT i

'  Gradient speed rating
' -----------------------

/*
The number of colors (nC) and number of alpha values (nA) do not have a significant effect on gradient drawing time. Drawing time is better predicted by the following three attributes:

  - Gradient size
  - Gradient resolution (set with GRADIENT.bandWidth)
  - Percentage of gradient with color & alpha transitions (pT)

pT affects gradient drawing speed because drawing each gradient segment is faster when the color and/or alpha values are remaining constant and do not need to be interpolated. Therefore, gradients with a lower pT value are drawn faster than gradients with a higher pT value. Min pT = 0, max pT = 1.
*/

pT = (cD(nC-1,0)-cD(0,0) + aD(nA-1,0)-aD(0,0)) / 2

'==============================================================

'  Ease acceleration comparison
' ------------------------------

DRAW TEXT "ea" AT scrW*0.05, scrH*0.05
DRAW TEXT "↓" AT scrW*0.05, scrH*0.05+fs
DRAW TEXT "bw = "&bw AT scrW*0.6, scrH*0.05
DRAW TEXT "pT = "&pT AT scrW*0.6, scrH*0.05+fs

REFRESH

FOR i = 0 TO nEA-1

  GRADIENT.easeAccel = ea(i)
  RECTGRAD(cD, aD, x, y(i), w, h, "x")
  IF drawOutlines THEN
    DRAW ALPHA 0.5
    DRAW RECT x, y(i) SIZE w/2+0.5, h/2+0.5
    DRAW ALPHA 1
  END IF

  IF INT(ea(i)) = ea(i) THEN
    t$ = ea(i)
  ELSE
    t$ = STR$(ea(i),"#.#")
  END IF

  DRAW TEXT t$ AT xT, yT(i)-fs/2

  REFRESH

NEXT i

matt7
Posts: 98
Joined: Sun Jul 12, 2015 5:00 pm
My devices: iPhone 8, Windows
Location: Kentucky, USA

Re: Gradient Library

Post by matt7 » Wed Aug 01, 2018 7:47 pm

As for the gradient editing screenshot I posted (that shows moveable gradient stops and RGB sliders), that is part of a massive program I am developing that deserves its own post. It has an entire /src folder full of subfolders and different files for managing all the different pages and screens, not to mention configuration, intialization/creation of objects, and input processing.

I only have an editing screen and a preview screen (where you can see the gradient in any shape and direction, and be able to resize it and see it against different backgrounds). I have plans for adding the ability to save, load, and export gradients, but I may just post what I have now (within the next week?) anyway because I have a lot going on right now and may not be able to get back to it until December.

EDIT: Program now posted here: https://kibernetik.pro/forum/viewtopic.php?f=20&t=2232

Image
Last edited by matt7 on Tue Aug 07, 2018 4:51 am, edited 1 time in total.

User avatar
rbytes
Posts: 1329
Joined: Sun May 31, 2015 12:11 am
My devices: iPhone X
iPad 4
MacBook
Dell Inspiron laptop
CHUWI Plus 10 convertible Windows/Android tablet
Location: Calgary, Canada
Flag: Canada
Contact:

Re: Gradient Library

Post by rbytes » Wed Aug 01, 2018 8:50 pm

I'm sure that just the interface you have so far would be useful for designing gradients. I hope to use them a lot more in my future programs.
Last edited by rbytes on Thu Aug 02, 2018 1:20 am, edited 1 time in total.
Zzzzz

User avatar
rbytes
Posts: 1329
Joined: Sun May 31, 2015 12:11 am
My devices: iPhone X
iPad 4
MacBook
Dell Inspiron laptop
CHUWI Plus 10 convertible Windows/Android tablet
Location: Calgary, Canada
Flag: Canada
Contact:

Re: Gradient Library

Post by rbytes » Wed Aug 01, 2018 11:58 pm

I like your "loading" intro, but thought it would add something if it opened in dark grey and the animation faded in. So I juggled a little of the opening code to make that happen.

I hope you like it.

[/*
Gradient Library Demo 1
by matt7, August, 2018
creates a spinning ring to
use as a "loading" animation.
Smooth fadeup from dark grey
added by rbytes
*/

GRAPHICS
GRAPHICS CLEAR .2, .2, .2
pause .1 ' not exactly sure why it needs this pause, but screen color is wrong without it.
refresh off
SET TOOLBAR OFF
SET ORIENTATION LANDSCAPE

OPTION TEXT POS CENTRAL
OPTION SPRITE POS CENTRAL

GET SCREEN SIZE scrW, scrH

'y'
{{/Library/Graphics/Gradients.lb}}
GRADIENT.bandWidth = 0.5
GRADIENT.easeAccel = 14

''

CREATE_LOAD_PAGE()
SPRITE "L_ring" LOOP

' This is code to fade in the ring
PAGE "L" ALPHA 0
PAGE "L" SHOW
refresh on
for t=1 to 100
PAGE "L" ALPHA t/100
PAUSE .01
next t
' End of fadeup

DO
SLOWDOWN
UNTIL TOUCH_X(0) > -1

'==============================================================

DEF CREATE_LOAD_PAGE ()

pi = 2*ACOS(0)

n$ = "L"

w = .scrW
h = .scrH

hR = h/2
wR = hR

PAGE n$ SET
PAGE n$ HIDE
PAGE n$ FRAME 0, 0, w, h
PAGE n$ COLOR 0.2, 0.2, 0.2, 1

nBF$ = "L_back_fade"
nRF$ = "L_ring_fade"
nR$ = "L_ring"


' Background fade sprite
' ------------------------

SPRITE nBF$ BEGIN w, h

DIM cD.temp(1,4)

DIM aD.temp(2,2)
aD.temp(0,0) = 0.4 ! aD.temp(0,1) = 0
aD.temp(1,0) = 0.9 ! aD.temp(1,1) = 0.7

RECTGRAD (cD.temp, aD.temp, w/2, h/2, w, h, "y")

DRAW COLOR 0.4, 0.4, 0.4
DRAW FONT SIZE h/12
DRAW TEXT "loading..." AT w/2, h/8

DRAW COLOR 0.3, 0.3, 0.3
DRAW FONT SIZE h/16
DRAW TEXT "(touch to exit)" AT w/2, h*7/8

SPRITE END

SPRITE nBF$ AT w/2, h/2
SPRITE nBF$ SHOW


' Spinning color ring sprite
' ----------------------------

SPRITE nRF$ BEGIN wR, hR

DIM cD.temp(1,4)

DIM aD.temp(4,2)
aD.temp(0,0) = 0.3 ! aD.temp(0,1) = 0
aD.temp(1,0) = 0.4 ! aD.temp(1,1) = 1
aD.temp(2,0) = 0.5 ! aD.temp(2,1) = 1
aD.temp(3,0) = 0.95 ! aD.temp(3,1) = 0

ea = GRADIENT.easeAccel
GRADIENT.easeAccel = 0
ELPSGRAD(cD.temp, aD.temp, wR/2, hR/2, wR/2, hR/2, "r")
GRADIENT.easeAccel = ea

SPRITE END

SPRITE nR$ BEGIN wR, hR

c1 = 1
c0 = 0.5

nC += 0 ' Pos R G B
nC += 1 ! DATA 0.000, c1, c0, c0
nC += 1 ! DATA 0.167, c1, c1, c0
nC += 1 ! DATA 0.333, c0, c1, c0
nC += 1 ! DATA 0.500, c0, c1, c1
nC += 1 ! DATA 0.667, c0, c0, c1
nC += 1 ! DATA 0.833, c1, c0, c1
nC += 1 ! DATA 1.000, c1, c0, c0

DIM cD.temp(nC,4)
FOR iC = 0 TO nC-1
READ cD.temp(iC,0)
READ cD.temp(iC,1)
READ cD.temp(iC,2)
READ cD.temp(iC,3)
NEXT iC

DIM aD.temp(1,2)
aD.temp(0,1) = 1

ELPSGRAD(cD.temp, aD.temp, wR/2, hR/2, wR/2, hR/2, "a")

GRAPHICS MODE DESTIN
SPRITE nRF$ AT wR/2, hR/2
SPRITE nRF$ STAMP
SPRITE nRF$ DELETE

SPRITE END

SPRITE nR$ AT w/2, h/2
SPRITE nR$ SHOW

SPRITE nR$ DELAY 0.05
SPRITE nR$ DA pi/30

END DEF
/code]
Zzzzz

User avatar
rbytes
Posts: 1329
Joined: Sun May 31, 2015 12:11 am
My devices: iPhone X
iPad 4
MacBook
Dell Inspiron laptop
CHUWI Plus 10 convertible Windows/Android tablet
Location: Calgary, Canada
Flag: Canada
Contact:

Re: Gradient Library

Post by rbytes » Thu Aug 02, 2018 9:48 pm

matt7, I discovered a recurring bug in your demo programs. Not your fault, it is a smart Basic issue. See the thread link.

https://kibernetik.pro/forum/viewtopic.php?f=28&t=2230

I noticed that the screen didn't clear to the color you coded for. After some experimenting I found that there needed to be a tiny delay between clearing the screen to a color and turning refresh off. Otherwise the screen just goes black. You will see the fix in the changed version of demo 1 that I posted. I have always believed, as you probably did, that Smart Basic would execute each command line before moving to the next. But in this case the refresh off command takes effect before the screen is cleared, so the screen stays black, the result of the GRAPHICS command. In fact a quick way to clear the screen to black is just the command GRAPHICS without a GRAPHICS CLEAR 0,0,0 command following it.

If you want the screen to clear to transparent, you can use GRAPHICS CLEAR. It will have the same result as coding GRAPHICS CLEAR 1,1,1,0 or GRAPHICS CLEAR 0,0,0,0 or any other values you choose for r,g and b. As long as the final digit (a, or alpha value) is a 0, the screen will clear to transparent, no different than it would using the GRAPHICS CLEAR command.
Zzzzz

matt7
Posts: 98
Joined: Sun Jul 12, 2015 5:00 pm
My devices: iPhone 8, Windows
Location: Kentucky, USA

Re: Gradient Library

Post by matt7 » Mon Aug 06, 2018 6:14 pm

rbytes, the fade in of the loading screen looks great! The gradients make everything look very "smooth" and clean/polished in my opinion (which is why my first big project in smartBasic was to work on a gradient library and editor). So your change that makes it fade in rather than snapping onto the screen adds to that clean/polished feel I was going for.

Regarding the screen clear/refresh "bug", I've been aware of that before and have tried to figure out the correct sequence of commands for seamless transition from TEXT (default) to GRAPHICS without the screen flashing to black, but I have not been able to figure that out. The PAUSE 0.1 is a good tip. I'll have to experiment with that. Also, thanks for the tip on just using GRAPHICS CLEAR without the x,x,x,0.

I'm hoping to have the Gradient Editor program posted today. Just finishing up some documentation/README stuff.


EDIT:
So apparently the flash of a black screen only occurs when I am holding my phone in portrait mode, and then run a program which sets the orientation to landscape. If I run the program when already oriented in landscape, the following sequence works perfect:

Code: Select all

SET TOOLBAR OFF
SET ORIENTATION LANDSCAPE
REFRESH OFF
GRAPHICS CLEAR 1, 1, 1, 1
REFRESH
PAUSE 0.1
GRAPHICS
So the flash must be from the code forcefully changing the screen's orientation.

Post Reply