Merge pull request #5 from aldernero/feature-add-checkboxes

added checkboxes

Author: aldernero

controls.go

@@ -6,6 +6,7 @@ import (
 
 	"github.com/fogleman/gg"
 	"github.com/hajimehoshi/ebiten/v2"
+	"github.com/hajimehoshi/ebiten/v2/inpututil"
 )
 
 const (
@@ -17,6 +18,13 @@ const (
 	SliderOutlineColor        = "#ffdb00"
 	SliderFillColor           = "#ffdb00"
 	SliderTextColor           = "#ffffff"
+	CheckboxHeight            = 15.0
+	CheckboxHPadding          = 12.0
+	CheckboxVPadding          = 7.0
+	CheckboxBackgroundColor   = "#1e1e1e"
+	CheckboxOutlineColor      = "#ffdb00"
+	CheckboxFillColor         = "#ffdb00"
+	CheckboxTextColor         = "#ffffff"
 )
 
 type Slider struct {
@@ -36,6 +44,20 @@ type Slider struct {
 	DidJustChange   bool        `json:"-"`
 }
 
+type Checkbox struct {
+	Name            string      `json:"Name"`
+	Pos             Point       `json:"-"`
+	Width           float64     `json:"Width"`
+	Height          float64     `json:"Height"`
+	Checked         bool        `json:"Checked"`
+	OutlineColor    string      `json:"OutlineColor"`
+	BackgroundColor string      `json:"BackgroundColor"`
+	FillColor       string      `json:"FillColor"`
+	TextColor       string      `json:"TextColor"`
+	colors          ColorConfig `json:"-"`
+	DidJustChange   bool        `json:"-"`
+}
+
 func (s *Slider) GetPercentage() float64 {
 	return Map(s.MinVal, s.MaxVal, 0, 1, s.Val)
 }
@@ -137,9 +159,69 @@ func NewRadiansSlider(name string, steps int) Slider {
 	return s
 }
 
+func (c *Checkbox) GetRect(ctx *gg.Context) Rect {
+	x := c.Pos.X - CheckboxHPadding
+	y := c.Pos.Y - CheckboxVPadding
+	w := c.Width + 2*CheckboxHPadding
+	h := c.Height + CheckboxVPadding
+	return Rect{X: x, Y: y, W: w, H: h}
+}
+
+func (c *Checkbox) AutoHeight(ctx *gg.Context) {
+	c.Height = ctx.FontHeight()
+}
+
+func (c *Checkbox) IsInside(x float64, y float64) bool {
+	return x >= c.Pos.X &&
+		x <= c.Pos.X+c.Height && y >= c.Pos.Y && y <= c.Pos.Y+c.Height
+}
+
+func (c *Checkbox) Update() {
+	c.Checked = !c.Checked
+}
+
+func (c *Checkbox) CheckAndUpdate() (bool, error) {
+	didChange := false
+	x, y := ebiten.CursorPosition()
+	if inpututil.IsMouseButtonJustReleased(ebiten.MouseButtonLeft) {
+		if c.IsInside(float64(x), float64(y)) {
+			c.Update()
+			didChange = true
+		}
+	}
+	c.DidJustChange = didChange
+	return didChange, nil
+}
+
+func (c *Checkbox) Draw(ctx *gg.Context) {
+	ctx.SetLineCapButt()
+	ctx.SetLineWidth(1.5)
+	ctx.SetColor(c.colors.Background)
+	ctx.DrawRectangle(c.Pos.X, c.Pos.Y, c.Height, c.Height)
+	ctx.Fill()
+	if c.Checked {
+		ctx.SetColor(c.colors.Fill)
+		ctx.DrawLine(c.Pos.X, c.Pos.Y, c.Pos.X+c.Height, c.Pos.Y+c.Height)
+		ctx.DrawLine(c.Pos.X, c.Pos.Y+c.Height, c.Pos.X+c.Height, c.Pos.Y)
+		ctx.Stroke()
+	}
+	ctx.SetColor(c.colors.Outline)
+	ctx.DrawRectangle(c.Pos.X, c.Pos.Y, c.Height, c.Height)
+	ctx.Stroke()
+	ctx.SetColor(c.colors.Text)
+	ctx.DrawStringWrapped(c.Name, c.Pos.X, c.Pos.Y, 0, 0, c.Width, 1, gg.AlignRight)
+}
+
 func (s *Slider) parseColors() {
 	s.colors.Set(s.BackgroundColor, BackgroundColorType, SliderBackgroundColor)
 	s.colors.Set(s.OutlineColor, OutlineColorType, SliderOutlineColor)
 	s.colors.Set(s.TextColor, TextColorType, SliderTextColor)
 	s.colors.Set(s.FillColor, FillColorType, SliderFillColor)
 }
+
+func (c *Checkbox) parseColors() {
+	c.colors.Set(c.BackgroundColor, BackgroundColorType, CheckboxBackgroundColor)
+	c.colors.Set(c.OutlineColor, OutlineColorType, CheckboxOutlineColor)
+	c.colors.Set(c.TextColor, TextColorType, CheckboxTextColor)
+	c.colors.Set(c.FillColor, FillColorType, CheckboxFillColor)
+}

docs/getting-started.md

@@ -73,7 +73,7 @@ So far this is identical to the previous section. Let's look at the contents of
     "SketchWidth": 800,
     "SketchHeight": 800,
     "ControlWidth": 240,
-    "Controls": [
+    "Sliders": [
         {
             "Name": "control1",
             "MinVal": 1,
@@ -97,7 +97,7 @@ This is the default configuration with 2 example controls. The first 3 lines def
     "SketchWidth": 800,
     "SketchHeight": 800,
     "ControlWidth": 240,
-    "Controls": [
+    "Sliders": [
         {
             "Name": "radius",
             "MinVal": 1,
@@ -139,22 +139,22 @@ func draw(s *sketchy.Sketch, c *gg.Context) {
 Notice that the `draw` function takes two arguments. The first argument stores the Sketch struct used to store our sketch information, including the two slider controls. Here is how you get the value from a slider:
 
 ```go
-val := s.Var("slider name")
+val := s.Slider("slider name")
 ```
 
 The value will be a float64. For our case we could define two variables that are tied to the controls we defined earlier:
 ```go
-radius := s.Var("radius")
-thickness := s.Var("thickness")
+radius := s.Slider("radius")
+thickness := s.Slider("thickness")
 ```
 Notice the argument to `Var` is the same name we used in `sketch.json`.
 
 The other argument to `draw` is a `gg` drawing context. See the [gg](https://github.com/fogleman/gg) documentation for full details. For this example we will simply 1) set a drawing color, 2) set the line thickness, 3) define the circle object, and 4) draw the circle.  Here is the entire draw function:
 ```go
 func draw(s *sketchy.Sketch, c *gg.Context) {
 	// Drawing code goes here
-	radius := s.Var("radius")
-	thickness := s.Var("thickness")
+	radius := s.Slider("radius")
+	thickness := s.Slider("thickness")
 	c.SetColor(color.White)
 	c.SetLineWidth(thickness)
 	c.DrawCircle(s.SketchWidth/2, s.SketchHeight/2, radius)

docs/sketch-configuration.md

@@ -8,7 +8,7 @@ Each sketch is accompanied by a JSON configuration file. Although everything cou
     "SketchWidth": 800,
     "SketchHeight": 800,
     "ControlWidth": 240,
-    "Controls": [
+    "Sliders": [
         {
             "Name": "control1",
             "MinVal": 1,
@@ -55,7 +55,7 @@ There are other parameters not listed in the template. Here are the missing para
 
 # Referencing Sketch Parameters in Code
 
-The Sketch parameters can be referenced like `s.<ParameterName>` in the `update` and `draw` functions. The value of each control can be referenced via `s.Var("<control name>")`, where `<control name>` is the name you used in the JSON configuration file.
+The Sketch parameters can be referenced like `s.<ParameterName>` in the `update` and `draw` functions. The value of each control can be referenced via `s.Slider("<control name>")`, where `<control name>` is the name you used in the JSON configuration file.
 
 
 # Command Line Parameters

examples/10print/main.go

@@ -58,15 +58,15 @@ func (t *Truchet) flip(r int, c int) {
 }
 
 func reset(s *sketchy.Sketch) {
-	cellSize := s.Var("cellSize")
-	board.rng.SetSeed(int64(s.Var("seed")))
-	board.rng.SetNoiseOctaves(int(s.Var("octaves")))
-	board.rng.SetNoisePersistence(s.Var("persistence"))
-	board.rng.SetNoiseLacunarity(s.Var("lacunarity"))
-	board.rng.SetNoiseScaleX(s.Var("xscale"))
-	board.rng.SetNoiseScaleY(s.Var("yscale"))
-	board.rng.SetNoiseOffsetX(s.Var("xoffset"))
-	board.rng.SetNoiseOffsetY(s.Var("yoffset"))
+	cellSize := s.Slider("cellSize")
+	board.rng.SetSeed(int64(s.Slider("seed")))
+	board.rng.SetNoiseOctaves(int(s.Slider("octaves")))
+	board.rng.SetNoisePersistence(s.Slider("persistence"))
+	board.rng.SetNoiseLacunarity(s.Slider("lacunarity"))
+	board.rng.SetNoiseScaleX(s.Slider("xscale"))
+	board.rng.SetNoiseScaleY(s.Slider("yscale"))
+	board.rng.SetNoiseOffsetX(s.Slider("xoffset"))
+	board.rng.SetNoiseOffsetY(s.Slider("yoffset"))
 	board.init(int(s.SketchWidth/cellSize), int(s.SketchHeight/cellSize))
 }
 

examples/10print/sketch.json

@@ -9,7 +9,7 @@
     "SketchBackgroundColor": "#1e1e1e",
     "SketchOutlineColor": "#1e1e1e",
     "RandomSeed": 0,
-    "Controls": [
+    "Sliders": [
         {
             "Name": "cellSize",
             "Width": 226,

examples/lissajous/main.go

@@ -13,14 +13,14 @@ import (
 var lissa sketchy.Lissajous = sketchy.Lissajous{Nx: 3, Ny: 2}
 
 func update(s *sketchy.Sketch) {
-	lissa.Nx = int(s.Var("nx"))
-	lissa.Ny = int(s.Var("ny"))
-	lissa.Px += s.Var("phaseChange")
-	lissa.Py = sketchy.Deg2Rad(s.Var("yphase"))
+	lissa.Nx = int(s.Slider("nx"))
+	lissa.Ny = int(s.Slider("ny"))
+	lissa.Px += s.Slider("phaseChange")
+	lissa.Py = sketchy.Deg2Rad(s.Slider("yphase"))
 }
 
 func draw(s *sketchy.Sketch, c *gg.Context) {
-	radius := s.Var("radius")
+	radius := s.Slider("radius")
 	origin := sketchy.Point{X: s.SketchWidth / 2, Y: s.SketchHeight / 2}
 	curve := sketchy.GenLissajous(lissa, 1000, origin, radius)
 	c.SetColor(color.CMYK{C: 200})

examples/lissajous/sketch.json

@@ -2,7 +2,7 @@
     "SketchWidth": 1080,
     "SketchHeight": 1080,
     "ControlWidth": 240,
-    "Controls": [
+    "Sliders": [
         {
             "Name": "nx",
             "MinVal": 1,

examples/noise/main.go

@@ -13,21 +13,23 @@ import (
 var tick int64
 
 func update(s *sketchy.Sketch) {
-	s.Rand.SetSeed(int64(s.Var("seed")))
-	s.Rand.SetNoiseOctaves(int(s.Var("octaves")))
-	s.Rand.SetNoisePersistence(s.Var("persistence"))
-	s.Rand.SetNoiseLacunarity(s.Var("lacunarity"))
-	s.Rand.SetNoiseScaleX(s.Var("xscale"))
-	s.Rand.SetNoiseScaleY(s.Var("yscale"))
-	s.Rand.SetNoiseOffsetX(s.Var("xoffset"))
-	s.Rand.SetNoiseOffsetY(s.Var("yoffset"))
+	s.Rand.SetSeed(int64(s.Slider("seed")))
+	s.Rand.SetNoiseOctaves(int(s.Slider("octaves")))
+	s.Rand.SetNoisePersistence(s.Slider("persistence"))
+	s.Rand.SetNoiseLacunarity(s.Slider("lacunarity"))
+	s.Rand.SetNoiseScaleX(s.Slider("xscale"))
+	s.Rand.SetNoiseScaleY(s.Slider("yscale"))
+	s.Rand.SetNoiseOffsetX(s.Slider("xoffset"))
+	s.Rand.SetNoiseOffsetY(s.Slider("yoffset"))
 	s.Rand.SetNoiseScaleZ(0.005)
 	s.Rand.SetNoiseOffsetZ(float64(tick))
-	tick++
+	if s.Checkbox("animate") {
+		tick++
+	}
 }
 
 func draw(s *sketchy.Sketch, c *gg.Context) {
-	cellSize := s.Var("cellSize")
+	cellSize := s.Slider("cellSize")
 	c.SetLineWidth(0)
 	for x := 0.0; x < s.SketchWidth; x += cellSize {
 		for y := 0.0; y < s.SketchHeight; y += cellSize {

examples/noise/sketch.json

@@ -2,7 +2,7 @@
     "SketchWidth": 1080,
     "SketchHeight": 1080,
     "ControlWidth": 240,
-    "Controls": [
+    "Sliders": [
         {
             "Name": "cellSize",
             "MinVal": 1,
@@ -66,5 +66,11 @@
             "Val": 0,
             "Incr": 1
         }
+    ],
+    "Checkboxes": [
+        {
+            "Name": "animate",
+            "Checked": false
+        }
     ]
 }

examples/scale_rotate/main.go

@@ -20,10 +20,10 @@ func update(s *sketchy.Sketch) {
 
 func draw(s *sketchy.Sketch, c *gg.Context) {
 	// Drawing code goes here
-	N := int(s.Var("N"))
-	sides := int(s.Var("sides"))
-	rotate := sketchy.Deg2Rad(s.Var("rotate"))
-	scale := s.Var("scale")
+	N := int(s.Slider("N"))
+	sides := int(s.Slider("sides"))
+	rotate := sketchy.Deg2Rad(s.Slider("rotate"))
+	scale := s.Slider("scale")
 	c.SetColor(color.CMYK{
 		C: 200,
 		M: 0,