Gradient Editor

[rbytes]

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

/*
Gradient Draw Quad
by rbytes, August 2018
displays a QUAD gradient created in
GradientEditor by matt7
*/
{{/Library/Graphics/Gradients.lb}}
bw = .5   ' GRADIENT.bandWidth (gradient resolution = Retina)
ea = 6    ' GRADIENT.easeAccel (color interpolation smoothing = SmoothStep)
GRADIENT.bandwidth = bw
GRADIENT.easeAccel = ea
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
      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

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

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

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

'Load x,y values into arrays
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

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


QUADGRAD(cD, aD, xQ1, yQ1, dir$)
DRAW QUAD xQ1(0),yQ1(0), xQ1(1),yQ1(1), xQ1(2),yQ1(2), xQ1(3),yQ1(3)
 
PAUSE 5

[matt7]

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

[rbytes]

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.

[rbytes]

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

/*
Gradient Draw Flipped Quad
by rbytes, August 2018
displays a flipped QUAD 
using a gradient created in
GradientEditor by matt7
*/
{{/Library/Graphics/Gradients.lb}}
bw = .5   ' GRADIENT.bandWidth (gradient resolution = Retina)
ea = 6    ' GRADIENT.easeAccel (color interpolation smoothing = SmoothStep)
GRADIENT.bandwidth = bw
GRADIENT.easeAccel = ea
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
      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

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

'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

'Load x,y values into arrays
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"

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


QUADGRAD(cD, aD, xQ1, yQ1, dir$)

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

[rbytes]

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

Code: Select all

/*
Gradient Draw Flipped Quad
by rbytes, August 2018
displays a flipped QUAD 
using a gradient created in
GradientEditor by matt7
*/
{{/Library/Graphics/Gradients.lb}}
bw = .5   ' GRADIENT.bandWidth (gradient resolution = Retina)
ea = 6    ' GRADIENT.easeAccel (color interpolation smoothing = SmoothStep)
GRADIENT.bandwidth = bw
GRADIENT.easeAccel = ea
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
      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

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

'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

'Load x,y values into arrays
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"

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


QUADGRAD(cD, aD, xQ1, yQ1, dir$)

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

[rbytes]

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.

[matt7]

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]

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.

[matt7]

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]

Not sure what happened to my PM, but glad you took the time to implement this feature. I will take it for a spin this afternoon.
I just posted a new program - Blender Frame. Hope you will check it out.