color gradient function and tests

Author: aldernero

colors.go

@@ -4,6 +4,7 @@ import (
 	"github.com/lucasb-eyer/go-colorful"
 	"golang.org/x/image/colornames"
 	"image/color"
+	"math"
 	"regexp"
 	"strings"
 )
@@ -22,6 +23,7 @@ type ColorConfig struct {
 	Outline    color.Color
 	Text       color.Color
 	Fill       color.Color
+	Gradient   SimpleGradient
 }
 
 func (cc *ColorConfig) Set(hexString string, colorType ColorType, defaultString string) {
@@ -85,3 +87,43 @@ func (sg *SimpleGradient) Color(percentage float64) color.Color {
 	c2, _ := colorful.MakeColor(sg.endColor)
 	return c1.BlendHcl(c2, val)
 }
+
+type Gradient struct {
+	stops []color.Color
+}
+
+func (g *Gradient) AddStop(colorString string) {
+	g.stops = append(g.stops, StringToColor(colorString))
+}
+
+func (g *Gradient) NumStops() int {
+	return len(g.stops)
+}
+
+func NewGradientFromNamed(names []string) Gradient {
+	var grad Gradient
+	for _, i := range names {
+		grad.AddStop(i)
+	}
+	return grad
+}
+
+func (g *Gradient) Color(percentage float64) color.Color {
+	val := Clamp(0, 1, percentage)
+	n := g.NumStops()
+	if n == 1 {
+		return g.stops[0]
+	}
+	if val == 0 {
+		return g.stops[0]
+	}
+	if val == 1 {
+		return g.stops[n-1]
+	}
+	i := Map(0, 1, 0, float64(n)-1, percentage)
+	lerp := i - math.Floor(i)
+	index := int(math.Floor(i))
+	c1, _ := colorful.MakeColor(g.stops[index])
+	c2, _ := colorful.MakeColor(g.stops[index+1])
+	return c1.BlendHcl(c2, lerp)
+}

controls.go

@@ -18,6 +18,8 @@ const (
 	SliderOutlineColor        = "#ffdb00"
 	SliderFillColor           = "#ffdb00"
 	SliderTextColor           = "#ffffff"
+	SliderGradientStart       = "cyan"
+	SliderGradientEnd         = "magenta"
 	ToggleHeight              = 15.0
 	ToggleHPadding            = 12.0
 	ToggleVPadding            = 7.0
@@ -29,20 +31,23 @@ const (
 )
 
 type Slider struct {
-	Name            string  `json:"Name"`
-	Pos             Point   `json:"-"`
-	Width           float64 `json:"Width"`
-	Height          float64 `json:"Height"`
-	MinVal          float64 `json:"MinVal"`
-	MaxVal          float64 `json:"MaxVal"`
-	Val             float64 `json:"Val"`
-	Incr            float64 `json:"Incr"`
-	OutlineColor    string  `json:"OutlineColor"`
-	BackgroundColor string  `json:"BackgroundColor"`
-	FillColor       string  `json:"FillColor"`
-	TextColor       string  `json:"TextColor"`
-	colors          ColorConfig
-	DidJustChange   bool `json:"-"`
+	Name               string  `json:"Name"`
+	Pos                Point   `json:"-"`
+	Width              float64 `json:"Width"`
+	Height             float64 `json:"Height"`
+	MinVal             float64 `json:"MinVal"`
+	MaxVal             float64 `json:"MaxVal"`
+	Val                float64 `json:"Val"`
+	Incr               float64 `json:"Incr"`
+	OutlineColor       string  `json:"OutlineColor"`
+	BackgroundColor    string  `json:"BackgroundColor"`
+	FillColor          string  `json:"FillColor"`
+	UseGradientFill    bool    `json:"UseGradientFill"`
+	GradientStartColor string  `json:"GradientStartColor"`
+	GradientEndColor   string  `json:"GradientEndColor"`
+	TextColor          string  `json:"TextColor"`
+	colors             ColorConfig
+	DidJustChange      bool `json:"-"`
 }
 
 type Toggle struct {
@@ -126,7 +131,11 @@ func (s *Slider) Draw(ctx *gg.Context) {
 	ctx.SetColor(s.colors.Background)
 	ctx.DrawRectangle(s.Pos.X, s.Pos.Y, s.Width, SliderHeight)
 	ctx.Fill()
-	ctx.SetColor(s.colors.Fill)
+	fillColor := s.colors.Fill
+	if s.UseGradientFill {
+		fillColor = s.colors.Gradient.Color(s.GetPercentage())
+	}
+	ctx.SetColor(fillColor)
 	ctx.DrawRectangle(s.Pos.X, s.Pos.Y, s.Width*s.GetPercentage(), SliderHeight)
 	ctx.Fill()
 	ctx.SetColor(s.colors.Outline)
@@ -253,6 +262,17 @@ func (s *Slider) parseColors() {
 	s.colors.Set(s.OutlineColor, OutlineColorType, SliderOutlineColor)
 	s.colors.Set(s.TextColor, TextColorType, SliderTextColor)
 	s.colors.Set(s.FillColor, FillColorType, SliderFillColor)
+	if s.UseGradientFill {
+		c1 := SliderGradientStart
+		c2 := SliderGradientEnd
+		if s.GradientStartColor != "" {
+			c1 = s.GradientStartColor
+		}
+		if s.GradientEndColor != "" {
+			c2 = s.GradientEndColor
+		}
+		s.colors.Gradient = NewSimpleGradientFromNamed(c1, c2)
+	}
 }
 
 func (c *Toggle) parseColors() {

visual_tests/color_gradient/color_gradient.go

@@ -2,14 +2,16 @@ package main
 
 import (
 	"flag"
+	"image/color"
 	"log"
 
 	"github.com/aldernero/sketchy"
 	"github.com/fogleman/gg"
 	"github.com/hajimehoshi/ebiten/v2"
 )
 
-var cg sketchy.SimpleGradient
+var cg1 sketchy.SimpleGradient
+var cg2 sketchy.Gradient
 
 func update(s *sketchy.Sketch) {
 	// Update logic goes here
@@ -24,15 +26,29 @@ func draw(s *sketchy.Sketch, c *gg.Context) {
 	dx := 1.10 * (right - left) / float64(N)
 	dy := 20.0
 	c.SetLineCapButt()
-	c.SetLineWidth(0)
+	c.SetLineWidth(1)
 	for _, i := range x {
 		p := sketchy.Map(0.05*s.SketchWidth, 0.95*s.SketchWidth, 0, 1, i)
-		c.SetColor(cg.Color(p))
+		c.SetColor(cg1.Color(p))
 		c.DrawRectangle(i, 20, dx, dy)
 		c.Fill()
+		c.SetColor(cg2.Color(p))
+		c.DrawRectangle(i, 120, dx, dy)
+		c.Fill()
 	}
-	c.SetColor(cg.Color(s.Slider("percentage")))
-	c.DrawCircle(s.SketchWidth/2, s.SketchHeight/2, 100)
+	p := s.Slider("percentage")
+	xPos := sketchy.Map(0, 1, 0.05*s.SketchWidth, 0.95*s.SketchWidth, p)
+	c.SetColor(color.White)
+	c.DrawLine(xPos, 42, xPos, 58)
+	c.Stroke()
+	c.DrawRectangle(xPos-10, 60, 20, 20)
+	c.SetColor(cg1.Color(p))
+	c.Fill()
+	c.SetColor(color.White)
+	c.DrawLine(xPos, 142, xPos, 158)
+	c.Stroke()
+	c.DrawRectangle(xPos-10, 160, 20, 20)
+	c.SetColor(cg2.Color(p))
 	c.Fill()
 }
 
@@ -52,7 +68,8 @@ func main() {
 	s.Updater = update
 	s.Drawer = draw
 	s.Init()
-	cg = sketchy.NewSimpleGradientFromNamed("cyan", "magenta")
+	cg1 = sketchy.NewSimpleGradientFromNamed("cyan", "magenta")
+	cg2 = sketchy.NewGradientFromNamed([]string{"blue", "green", "yellow", "red"})
 	ebiten.SetWindowSize(int(s.ControlWidth+s.SketchWidth), int(s.SketchHeight))
 	ebiten.SetWindowTitle("Sketchy - " + s.Title)
 	ebiten.SetWindowResizable(false)

visual_tests/color_gradient/sketch.json

@@ -8,7 +8,11 @@
             "MinVal": 0,
             "MaxVal": 1,
             "Val": 0.5,
-            "Incr": 0.01
+            "Incr": 0.01,
+            "UseGradientFill": true,
+            "OutlineColor": "yellow"
         }
-    ]
+    ],
+    "ControlOutlineColor": "darkcyan",
+    "SketchOutlineColor": "darkmagenta"
 }