Gradient Editor

[rbytes]

Looks good. I like the new options on the Preview screen.

One glitch with Quad. I set Dir to 1-2 to 4-3 but when playing it back from Gradient.txt I get 1-4 to 2-3. Photos below.

Very cool to be able to dynamically adjust Bandwidth. The stripes are a nice variation in design.

[rbytes]

Did some more testing. Found something surprising in Preview. Once I had ten color tabs assigned, I could not add any more. When I tried to drag color tab #11 into position, it would not align with the other color stops, but immediately jumped up above the color display box and positioned itself as an alpha tab. When I quit and reloaded, I could then add color stop 11 but not 12. And repeating the quit and load still only allowed 11 stops. Normally I would find this to be sufficient, but sometimes I like to create regular bands of alternating color, as in the photos below. Is there a reason to limit the number of color stops?

[matt7]

Yeah, there are parameters that set the maximum number of gradient stops. The reason is that I wanted to generate all the gradient stop sprites during initialization since that was easier than trying to create and delete sprites on the fly and manage their IDs/names. I limited both color and alpha stops to 10 for testing and then didn't think about increasing it. Go to src/screens/edit/config_E and increase ED.maxColorGradStops and ED.maxAlphaGradStops. 255 for each is the absolute limit because of how gradient.dat is saved and loaded, but I can't imagine you would need more than 255, haha.

[matt7]

Good catch on the quadrilateral direction error. I forgot a line of code that saved the shape's dir$ string in gradient.txt, so it was defaulting to the other since I used an ELSE in the library. I added that missing line of code to fix that, and while I was at it I increased the max gradient stop parameters to 30 each, though feel free to increase those to whatever you want for your own purposes.

[rbytes]

That was fast work! Thanks, matt7.

Feature ideas for the edit screen:

A selector for the desired number of color and alpha stops, which automatically spaces them evenly along the palette.

Copy and paste buttons for the color and alpha parameters.

[rbytes]

I worked up a little calculator that will make it easy to create evenly-spaced color or alpha stops between any two stops on a gradient. The user just needs to enter 3 values: firststop, laststop, and the total number of desired stops (including firststop and laststop). All numbers are formatted to four decimal places. Results are saved to the clipboard and printed on the screen.

The screen capture shows a series of stops located from .4 to .6 along a color gradient.

Code: Select all

/*
Gradient Calculator
by rbytes, August 2017
Calculates positions for color or alpha stops
to distribute them evenly along a gradient.
*/

lf$=chr$(10)    ' line feed character

'r'
' 1. Set the "firststop" variable
'    the first stop will often be set to position 0.0000 (minimum possible)

firststop = .4

' 2. Set the "laststop" variable
'    the last stop will often be set to position 1.0000 (maximum possible)

laststop = .6

' set the "stops" variable to the TOTAL number of stops including firststop and laststop

stops = 17

' if you wish a band of color centered between the end stops, you should use an odd number of stops
' if you wish to do an angular gradient in an ellipse, the starting and ending colors should be
'  the same, if you want to avoid a hard-edged discontinuity at 0 degrees (360 degrees)

''

'*** create formatting string

z$= "0000"


'*** calculate increment between stops

inc=(laststop-firststop)/(stops-1)


'*** format the first stop

if firststop =0 then
  sf$="0.0000"
else
  sf$=firststop
  if len(sf$)<6 then
    sf$&=left$(z$,6-len(sf$))
  endif
endif


'*** format the last stop

if laststop = 1 then
  sl$="1.0000"
else
  sl$=laststop
  if len(sl$)<6 then
    sl$&=left$(z$,6-len(sl$))
  endif
endif


'*** calculate and format the inner stops

a$= "stop 1 = "&sf$&lf$
for t=1 to stops-1
  n=firststop+t*inc
  t2=t+1
  a$&= "stop "&t2&" = "
  n$=n
  if t = stops-1 then
    n$=sl$
  else
    if len(n$)<6 then
      n$&=left$(z$,6-len(n$))
    endif
  endif
  a$&=n$&lf$
next t


'*** copy all stops to clipboard

clipboard clear
clipboard write a$


'*** print the stops

print a$


end

[rbytes]

I notice that when editing gradients on the edit screen, I can't set positions that are precise to 4 decimal places. The position values jump in steps of .0008 with the slightest horizontal movements of the stop sliders. I wonder if the resolution is constrained by the width of the palette box.

A cure for this would be to provide a finer adjustment for position. Maybe if a finger on a stop slider is slid up or down into the palette box area, it could trigger a 1/10 scale adjustment.

Thanks.

[matt7]

Yes, I have thought about how to add scrubbing to the gradient stops, similar to the RGBA sliders. Moving the touch vertically to the bottom of the screen is already reserved for removing the gradient stop. I could do something like if the user touches and holds the preview color/alpha box (the box in the bottom left corner of the screen) while moving a gradient stop (so touch 0 is moving the gradient stop, and touch 1 is holding the box), then gradient movement is scrubbed.

For now just get the gradient stop as closely as you can, save the gradient data, and then manually clean up the decimal values in the auto-generated code. There are a lot of super nice features I would love to implement, but for now, this tool is just a quick and dirty way of designing gradients without having to rerun a program or script over and over after tweaking decimal values in your color and alpha arrays. But thanks for the suggestion! I agree that being able to fine tune the stop positions would be very useful. I'll keep a list of requested features so I don't forget when I return to this.

[rbytes]

OK. It has been the custom on the Forum for members to add features to each other's program contributions and post them, but I sense that you would rather not have us do this with GradientSlider. For my own use, for any program posted on the Forum, I add the features I want for my personal use. For example, I have already modified GradientEditor version 3 so that in addition to the binary file gradient.dat, it saves an ASCII file with the same data but a different name, gradient.tn. When I launch GradientEditor it loads gradient.tn rather than gradient.dat. That way I can make changes to the ASCII file outside of GradientEditor and then run it to see how they look. I couldn't do that with the gradient.dat file. I will send you my version by PM. I hope it gets through.

When I used it, that's when I discovered the limit on stop slider resolution.

I had calculated equally-spaced stop positions for a gradient with 17 stops (Image 1)
After running GradientEditor and saving the gradient.txt file, I got the positions seen in Image 2.

You are right, all of these things can be worked around. I'm looking forward to the full version.

[matt7]

Sorry if it came off like I didn't want you changing anything. I've got no problem if you want to add features and change things for your own personal use, and you're welcome to share your modified code here on the forum! I just wasn't planning on updating the OP or my Dropbox version with those modifications. (Or is that what others typically do?)

Btw, the increment for slider values and gradient stop positions is dependent on screen resolution. On your iPad, you said you can change the stops by 0.0008. On my iPhone 8, I can only change them by ~0.003.