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

Code to use a gradient definition in a QUAD (quadrilateral). You can turn the quad into a triangle very simply. A quad has 4 x,y values, one for each corner. Set two adjacent x,y values the same, and those two corners will become just one, producing a triangle!

Code: Select all

``````/*
by rbytes, August 2018
*/
ea = 6    ' GRADIENT.easeAccel (color interpolation smoothing = SmoothStep)
SET TOOLBAR OFF
GRAPHICS
GRAPHICS CLEAR
DRAW COLOR 0,0,0

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

' COPY THE CODE LINES DEFINING nC and nA FROM A QUAD GRADIENT FILE SAVED BY GradientEditor
' AND PASTE IT BETWEEN THE DOUBLE LINES HERE, ERASING ANY PREVIOUS DEFINITIONS OF nC and nA

nC = 0    '         Pos      Red      Green    Blue
nC += 1   !   DATA  0.0000,  1.0000,  0.7059,  0.0000
nC += 1   !   DATA  0.2510,  0.8902,  0.2627,  0.8902
nC += 1   !   DATA  0.5020,  1.0000,  0.7059,  0.0000
nC += 1   !   DATA  0.7490,  0.8902,  0.2627,  0.8902
nC += 1   !   DATA  1.0000,  1.0000,  0.7059,  0.0000

nA = 0    '         Pos      Alpha
nA += 1   !   DATA  0.0000,  1.0000
nA += 1   !   DATA  1.0000,  0.9608

'-------------------------------------------------------

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

FOR iA = 0 TO nA-1
NEXT iA

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

'Set x,y points to define shape
x1=500
x2=650
x3=800
x4=300

y1=100
y2=200
y3=500
y4=650

DIM xQ1(4), yQ1(4)
xQ1(0) = x1  !  yQ1(0) = y1
xQ1(1) = x2  !  yQ1(1) = y2
xQ1(2) = x3  !  yQ1(2) = y3
xQ1(3) = x4  !  yQ1(3) = y4

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

'Define the direction of the gradient
'dir\$="14to23"     'Vertical
dir\$="12to43"    'Horizontal

'-------------------------------------------------------

DRAW QUAD xQ1(0),yQ1(0), xQ1(1),yQ1(1), xQ1(2),yQ1(2), xQ1(3),yQ1(3)

PAUSE 5``````
Attachments
BECD984C-0075-44DA-A5B6-B7E5B731220E.png (177.44 KiB) Viewed 802 times
8EDB6E03-70DD-47F0-8232-DB69658F0AC1.png (2.25 MiB) Viewed 802 times
Zzzzz

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

You can also make some interesting arcs inside angles if you make two opposite corners the same!

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

I will have to give that a try. I'm having a lot of fun with your GradientEditor. Your coding is a model of what good coding should be, and I am learning from it as well.
Last edited by rbytes on Fri Aug 10, 2018 1:41 am, edited 1 time in total.
Zzzzz

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

Here is a flipped QUAD. I created it by exchanging the two y values on the right side of the quad. The same effect could be created by exchanging the two y values on the left side

Code: Select all

``````/*
by rbytes, August 2018
*/
ea = 6    ' GRADIENT.easeAccel (color interpolation smoothing = SmoothStep)
SET TOOLBAR OFF
GRAPHICS
GRAPHICS CLEAR
DRAW COLOR 0,0,0

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

' COPY THE CODE LINES DEFINING nC and nA FROM A QUAD GRADIENT FILE SAVED BY GradientEditor
' AND PASTE IT BETWEEN THE DOUBLE LINES HERE, ERASING ANY PREVIOUS DEFINITIONS OF nC and nA

nC = 0    '         Pos      Red      Green    Blue
nC += 1   !   DATA  0.0000,  1.0000,  0.7059,  0.0000
nC += 1   !   DATA  0.2510,  0.8902,  0.2627,  0.8902
nC += 1   !   DATA  0.5020,  1.0000,  0.7059,  0.0000
nC += 1   !   DATA  0.7490,  0.8902,  0.2627,  0.8902
nC += 1   !   DATA  1.0000,  1.0000,  0.7059,  0.0000

nA = 0    '         Pos      Alpha
nA += 1   !   DATA  0.0000,  1.0000
nA += 1   !   DATA  1.0000,  0.9608

'-------------------------------------------------------

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

FOR iA = 0 TO nA-1
NEXT iA

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

'Set x,y points to define shape
'Points x1 and x2 were exchanged, creating a bowtie shape
x1=240
x2=840
x3=800
x4=200

y1=100
y2=650
y3=100
y4=650

DIM xQ1(4), yQ1(4)
xQ1(0) = x1  !  yQ1(0) = y1
xQ1(1) = x2  !  yQ1(1) = y2
xQ1(2) = x3  !  yQ1(2) = y3
xQ1(3) = x4  !  yQ1(3) = y4

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

'Define the direction of the gradient
'dir\$="14to23"
dir\$="12to43"

'-------------------------------------------------------

Turning off the outline makes the curves of the gradient easier to see.
'DRAW QUAD xQ1(0),yQ1(0), xQ1(1),yQ1(1), xQ1(2),yQ1(2), xQ1(3),yQ1(3)

PAUSE 5``````
Attachments
31DE1D66-2BB8-42E5-A26E-190FD13CF0A0.png (2.37 MiB) Viewed 794 times
Last edited by rbytes on Fri Aug 10, 2018 2:08 am, edited 1 time in total.
Zzzzz

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

And here is the curved QUAD that matt7 describes, with the code changed to create it.

Code: Select all

``````/*
by rbytes, August 2018
*/
ea = 6    ' GRADIENT.easeAccel (color interpolation smoothing = SmoothStep)
SET TOOLBAR OFF
GRAPHICS
GRAPHICS CLEAR
DRAW COLOR 0,0,0

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

' COPY THE CODE LINES DEFINING nC and nA FROM A QUAD GRADIENT FILE SAVED BY GradientEditor
' AND PASTE IT BETWEEN THE DOUBLE LINES HERE, ERASING ANY PREVIOUS DEFINITIONS OF nC and nA

nC = 0    '         Pos      Red      Green    Blue
nC += 1   !   DATA  0.0000,  1.0000,  0.7059,  0.0000
nC += 1   !   DATA  0.2510,  0.8902,  0.2627,  0.8902
nC += 1   !   DATA  0.5020,  1.0000,  0.7059,  0.0000
nC += 1   !   DATA  0.7490,  0.8902,  0.2627,  0.8902
nC += 1   !   DATA  1.0000,  1.0000,  0.7059,  0.0000

nA = 0    '         Pos      Alpha
nA += 1   !   DATA  0.0000,  1.0000
nA += 1   !   DATA  1.0000,  0.9608

'-------------------------------------------------------

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

FOR iA = 0 TO nA-1
NEXT iA

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

'Set x,y points to define shape
'Points x1 and x2 were exchanged, creating a bowtie shape
x1=240
x2=840
x3=800
x4=200

y1=100
y2=650
y3=100
y4=650

DIM xQ1(4), yQ1(4)
xQ1(0) = x1  !  yQ1(0) = y1
xQ1(1) = x2  !  yQ1(1) = y2
xQ1(2) = x3  !  yQ1(2) = y3
xQ1(3) = x4  !  yQ1(3) = y4

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

'Define the direction of the gradient
'dir\$="14to23"
dir\$="12to43"

'-------------------------------------------------------

Turning off the outline makes the curves of the gradient easier to see.
'DRAW QUAD xQ1(0),yQ1(0), xQ1(1),yQ1(1), xQ1(2),yQ1(2), xQ1(3),yQ1(3)

PAUSE 5``````
Attachments
7ADE7C74-98AC-47C3-BF5F-635C1CC7FA12.png (2.45 MiB) Viewed 792 times
Zzzzz

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

Hi matt7. I created a version of GradientEditor just for my own use that saves a file called "gr.txt"
This file contains all relevant data about the gradient shape designed on the Preview screen, including its color, shape, gradient direction, position and size.
I also created a version of the Gradient Draw program that includes "gr.txt" and then draws the gradient defined by its data.

I know that you will be developing GradientEditor further in 4+ months and eventually I won't need these programs. But please let me know if you would like me to send you the code privately, post it on the Forum for temporary use or just keep it for my own use.
Zzzzz

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

Yeah, PM me the code, I'd love to check it out! (I'm assuming all you did was add to the SAVE_GRADIENT_DATA function in GradientEditor.sb?) I've got no problem adding it to the version I have up on Dropbox if other people want that feature ASAP rather than waiting for me to implement the full-fledged Save screen with all the options for those things.

Btw, you can define gradients with only 1 color and/or 1 alpha value. For example, instead of having two alpha stops both with the same value of 1 for a fully opaque gradient, just have a single alpha stop (its position does not matter). The gradient will be drawn a bit faster if you do this. Why it's faster: Not because the number of gradient stops is fewer, but because you eliminated a "transition" area between two gradient stops. The gradient library interpolates RGB and alpha values between gradient stops, but before the first gradient stop and after the last gradient stop, the color or alpha value is constant, so no interpolation calculations are needed and no updating of the FILL COLOR or FILL ALPHA is needed.

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

I have sent you a PM with the Alt version of GradientEditor, and an update to the Gradient Draw pgm. The programs need to be in the same path to work with each other.
Zzzzz

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

rbytes, I didn't receive your PM, but I went ahead and implemented your idea for gradient.txt anyway because I realized it wasn't that much code to add and I can see where it would be useful to design a gradient and then get a complete, standalone script generated showing how to define and draw the gradient.

I also updated the Gradient Library to a new version that supports different interpolation methods: linear, cosine, parameterized 5th order polynomial, cubic hermite, and cubic hermite (monotonic). You can also now change the gradient library's parameters from the Preview screen in the Gradient Editor, which is kind of cool to play around with and see the changes in real-time. (I'll update the Gradient Library post as well.)

rbytes
Posts: 1329
Joined: Sun May 31, 2015 12:11 am
My devices: iPhone X