[Tool] Gradient Editor

[rexjericho]

I use gradients a lot in my projects so I made this editor to speed up the process of generating them.



How to use:

1. Choose the initial and final colours using the colour sliders on the right. Colours can be edited by RGB or by HSL values.
2. Edit the HSL curves in the middle to your liking.
3. Once satisfied with the gradient, click the "Save to Clipboard" button to copy the gradient data to the clipboard.

Gradient data is stored in the clipboard as a Lua table of RGBA tables. The order of colours is from top to bottom in the gradient preview bar.

Code: Select all

{
{28,138,184,255},
{27,150,189,255},
{26,163,195,255},
{26,176,200,255},
{26,190,205,255},
{26,204,209,255},
{26,214,210,255},
{27,218,204,255}
}

The graphical interface does not provide a way to choose how many colours are generated. By default, the editor will generate 400 colour values. If you want to change the number of colours generated, you can run the .love file from the command line and pass in the number of colours as an argument.

Code: Select all

Example:
love ./gradient_editor.love 20

-- This will generate 20 colour values

Note: The window size is quite tall (870 pixels), so hopefully this is not too large for you screen.

[josefnpat]

This is really neat. Is there an accompanying function I can use to draw the output in my own games? (Perhaps at a start x,y to an end x,y?

I can see this being really useful!

[rexjericho]

Hey, glad you liked it. I'm just asking for some clarification on your question. Do you mean:

Use the editor to generate a gradient, save that data to a file, and then have some functions for drawing the gradient at some location. This would be very doable.

or

Have the editor open in your game, let the user control the editor, and then the gradient is drawn at some location. Also doable.

or

Have the editor hidden in your game and provide an API to control the editor programmatically while drawing the resulting gradient at some location. This would be difficult, but the result could be very interesting.

[Muris]

This one looks pretty interesting and fun to play with.

I noticed that you can shoot the equations to go out of the area, which makes the color ramp quite bumpy so to say.

I honestly didn't look at the code (and I am sure one day I regret exectuing love-files without checking the code, when someone makes ill mannered program, but I hope / trust people not to do it in loves forums.), but something that I myself if I were to use the program would love to use would be bezier curves. Now setting a point in the curve sometimes creates rather undesirable or hard to predict paths, like in example:

What I want to do is something that first rises fast, then curves smoothly to top right corner:

undesirablecurve.png (7.08 KiB) Viewed 4654 times

It works but at one point the curve goes down a bit, which I would prefer not to.

Here is a program you can play with splines, although the curve can sometimes go backwards which is probably undesirable
http://mbostock.github.io/protovis/ex/splines.html

Then there is bezier curves, but having figure out how to implement control point handling and inserting those in the panels might be more work than having any benefits:
http://math.hws.edu/eck/cs424/notes2013 ... ezier.html

- Another thing that I, if I did use the program to really do the color ramps, would like to have like a preview how the curve would look if i did add a point on where the cursor is. Like lets say i hover over a certain spot with the mouse, it would like "preview" that if I set a point in here the curve would look like this, and then play the color ramp accordingly. Now its kinda trial and error to get the curve go the way I would want to, and having to click a lot of points to change the position of the point to what I would want it to be.

Anyways these are just suggestions/feedback for things what I could consider maybe being useful myself, so you are free to use my feedback any way you want. Changing the curve to bezier / spline might be more of a pain than actually giving any benefits.

[s-ol]

It works but at one point the curve goes down a bit, which I would prefer not to.

Here is a program you can play with splines, although the curve can sometimes go backwards which is probably undesirable
http://mbostock.github.io/protovis/ex/splines.html

Splines don't usually go back, there actually are two splines in that image. One is x/t and the other is y/t, where t is some arbitrary value for each node you set (so the splines "line up").

[josefnpat]

Use the editor to generate a gradient, save that data to a file, and then have some functions for drawing the gradient at some location. This would be very doable.

This one! Perhaps provide it as a small library that I can include in my own games!

[s-ol]

Use the editor to generate a gradient, save that data to a file, and then have some functions for drawing the gradient at some location. This would be very doable.

This one! Perhaps provide it as a small library that I can include in my own games!

Well, the program puts all the colors into your clipboard in lua-formatted rgba-tables... so just paste that into your project and pass one of the colors to love.graphics.setColor

[rexjericho]

@Muris:
I haven't looked at the code in over 2 years, and it looks like a mess with not enough comments, so changing things may be a little difficult. I think I will be able to add a curve preview with a little work.

@josefnpat:

Made a small library for drawing the gradient data into rectangles, circles, and polygons.

Documentation:

Code: Select all

--[[ Set the direction of a gradient ]]--
    
  ---- Set direction from string 
  
        setDirection(string)
          string can be "up", "down", "left", "right", "upright", "downright", "downleft", "upleft"
    
  ---- Set direction from two strings 
  
        setDirection(string1, string2)
          string1 can be "up", "left", "down", "right"
          string2 can be "up", "left", "down", "right"
    
  ---- Set direction from angle  
  
        setDirection(angle)
          number angle
              direction angle in radians
        
  ---- Set direction from vector 
  
        setDirection(vx, vy)
          number vx
              x component of angle vector
          number vy
              y component of angle vector
        
  ---- Set direction from line
  
        setDirection(x1, y1, x2, y2)
          number x1
              The position of first point on the x-axis.
          number y1
              The position of first point on the y-axis.
          number x2
              The position of second point on the x-axis.
          number y2
              The position of second point on the y-axis.

--[[ Draw gradient in a rectangle ]]--

  Gradient:drawRectangle(x, y, width, height)

  number x
      The position of top-left corner along x-axis.
  number y
      The position of top-left corner along y-axis.
  number width
      Width of the rectangle.
  number height
      Height of the rectangle.


--[[ Draw gradient in a circle ]]--

    Gradient:drawCircle(x, y, radius, segments)

    number x
        The position of the center along x-axis.
    number y
        The position of the center along y-axis.
    number radius
        The radius of the circle.
    number segments
        The number of segments used for drawing the circle.

--[[ Draw gradient in a polygon ]]--

  ---- Vertices as a variable number of arguments
  
        number ...
            The vertices of the polygon.
        
  ---- Verticles as a table
  
        table vertices
            The vertices of the polygon as a table.

--[[ Reverse direction of a gradient ]]--

    Gradient:reverse()

--[[ Set the filter mode for the images ]]--

    Gradient:setFilter(min, mag)

  FilterMode min
      How to scale an image down.
  FilterMode mag
      How to scale an image up.
      
  FilterMode can be "nearest" or "linear"

Sample usage:

Code: Select all

function love.load()
  Gradient = require("Gradient")   -- Gradient object table
  grad_table = require("saved_gradient_table")

  grad = Gradient:new(grad_table)
  grad:setDirection("upright")
end

function love.draw()
  grad:drawRectangle(100, 100, 200, 300)

  grad:drawCircle(200, 200, 100)

  grad:drawPolygon(300, 100, 400, 150, 350, 170)
end

I also learned something. If you set the filter to linear, you wont need to generate gradients with many colours. Love will interpolate between the colours smoothly. For example, the blue gradient in the demo contains only 8 colours.