Commits: 12
Make sure the title always displays Software Garden
One problem is that it's repeated twice on index document.
index 64059a0..2e6df38 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -151,7 +151,7 @@ view model =
= "Malformed response body: " ++ message
= )
= |> Element.text
- |> View "Software Garden : Error fetching content"
+ |> View "Error fetching content"
=
= ParseError deadEnds ->
= deadEndsView deadEnds
@@ -161,7 +161,7 @@ view model =
=
= loadingView : View
= loadingView =
- { title = "Software Garden"
+ { title = "Loading Content"
= , body =
= "Loading content..."
= |> Element.text
@@ -182,7 +182,7 @@ view model =
= , Element.padding 40
= , Element.spacing 20
= ]
- |> View "Software Garden : Parsing Errors"
+ |> View "Parsing Errors"
=
= deadEndElement : DeadEnd -> Element Msg
= deadEndElement { row, col, problem, contextStack } =
@@ -296,7 +296,7 @@ view model =
= ++ String.fromInt col
= )
= in
- { title = content.title
+ { title = "Software Garden : " ++ content.title
= , body =
= [ Element.layout
= [ -- Below is a hack that enables static site generationWIP: Create a general purpose Dots example
Requirements:
- Specify any viewbox
- Specify any background
- Specify any number of dots, each having it's own
- cx
- cy
- radius
- color
See FIXME comment in Main.elm.
index 5cd1456..2068cdf 100644
--- a/content/day-2.txt
+++ b/content/day-2.txt
@@ -26,6 +26,17 @@ Previously we have created a program that displays five colorful dots. Today we
= radius = 0 1
= scatter = False
=
+| Dots
+ | Container
+ background = brown
+ viewBox = -200 -200 400 400
+
+ | Dot
+ cx = 10
+ cy = 20
+ color = blue
+ radius = 33
+
=| Header
= What does it mean to be placed on a circle?
=new file mode 100644
index 0000000..03cc7bd
--- /dev/null
+++ b/src/Examples/Dots.elm
@@ -0,0 +1,79 @@
+module Examples.Dots exposing
+ ( Config
+ , Container
+ , Dot
+ , main
+ , ui
+ )
+
+import Circle2d
+import Element exposing (Element)
+import Geometry.Svg
+import Html exposing (Html)
+import Point2d exposing (Point2d)
+import Svg exposing (Attribute, Svg)
+import Svg.Attributes
+
+
+type alias Config =
+ { container : Container
+ , dots : List Dot
+ }
+
+
+type alias Container =
+ { background : String
+ , viewBox : String
+ }
+
+
+type alias Dot =
+ { cx : Float
+ , cy : Float
+ , radius : Float
+ , color : String
+ }
+
+
+defaults : Config
+defaults =
+ { container =
+ { background = "none"
+ , viewBox = "-300 -300 600 600"
+ }
+ , dots =
+ [ { cx = 0
+ , cy = 0
+ , radius = 10
+ , color = "skyblue"
+ }
+ ]
+ }
+
+
+main : Html msg
+main =
+ ui defaults
+ |> Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+
+
+ui : Config -> Element msg
+ui { container, dots } =
+ let
+ dot : Dot -> Svg msg
+ dot { cx, cy, color, radius } =
+ ( cx, cy )
+ |> Point2d.fromCoordinates
+ |> Circle2d.withRadius radius
+ |> Geometry.Svg.circle2d [ Svg.Attributes.fill color ]
+ in
+ dots
+ |> List.map dot
+ |> Svg.svg
+ [ Svg.Attributes.viewBox container.viewBox
+ , Svg.Attributes.style <| "background: " ++ container.background
+ ]
+ |> Element.htmlindex 2e6df38..006af8a 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -22,12 +22,10 @@ import Examples
=import Examples.CartesianCoordinates
=import Examples.Circle
=import Examples.Counter
-import Examples.Dot as Dot
-import Examples.DotInElement as DotInElement
-import Examples.DotWithViewBox as DotWithViewBox
+import Examples.DotInElement
+import Examples.Dots
=import Examples.Gradient
=import Examples.Line
-import Examples.MultipleDots as MultipleDots
=import Examples.NestedTransformations
=import Examples.PolarCoordinates
=import Examples.RosetteTypedTransformations
@@ -194,13 +192,13 @@ view model =
= ++ String.fromInt level
=
= Mark.InlineStart ->
- "Inline start"
+ "Expecting inline start"
=
= Mark.InlineEnd ->
- "Inline end"
+ "Expecting inline end"
=
= Mark.BlockStart ->
- "Block start"
+ "Expecting block start"
=
= Mark.Expecting what ->
= "Expecting " ++ what
@@ -232,22 +230,22 @@ view model =
= "Escape"
=
= Mark.EscapedChar ->
- "Escaped character"
+ "Escaped a character"
=
= Mark.Newline ->
- "Expecting newline"
+ "Expecting a newline"
=
= Mark.Space ->
- "Space"
+ "Expecting a space"
=
= Mark.End ->
- "End"
+ "Expecting an end"
=
= Mark.Integer ->
- "Integer"
+ "Expecting an integer"
=
= Mark.FloatingPoint ->
- "Floating point"
+ "ExpectingIndent a floating point number"
=
= Mark.InvalidNumber ->
= "Invalid number"
@@ -461,10 +459,8 @@ document =
=
= examples =
= [ counter
- , dot
= , dotInElement
- , dotWithViewBox
- , twoDots
+ , dots
= , circle
= , line
= , gradient
@@ -494,80 +490,75 @@ document =
= in
= Mark.stub "Counter" render
=
- dot : Mark.Block (Examples.Model -> Element Msg)
- dot =
- let
- render : Dot.Config -> Examples.Model -> Element Msg
- render config model =
- Dot.ui config
- |> Element.html
- |> Element.el
- [ Element.width (Element.px 300)
- , Element.height (Element.px 150)
- ]
- |> Element.el
- [ Element.padding 5 ]
- in
- Mark.record2 "Dot"
- Dot.Config
- (Mark.field "background" Mark.string)
- (Mark.field "fill" Mark.string)
- |> Mark.map render
-
= dotInElement : Mark.Block (Examples.Model -> Element Msg)
= dotInElement =
= let
= render config model =
- DotInElement.ui config
+ Examples.DotInElement.ui config
= in
= Mark.record4 "DotInElement"
- DotInElement.Config
+ Examples.DotInElement.Config
= (Mark.field "background" Mark.string)
= (Mark.field "fill" Mark.string)
= (Mark.field "cx" Mark.string)
= (Mark.field "cy" Mark.string)
= |> Mark.map render
=
- dotWithViewBox : Mark.Block (Examples.Model -> Element Msg)
- dotWithViewBox =
- let
- render config model =
- DotWithViewBox.ui config
- in
- Mark.record3 "DotWithViewBox"
- DotWithViewBox.Config
- (Mark.field "background" Mark.string)
- (Mark.field "fill" Mark.string)
- (Mark.field "viewBox" Mark.string)
- |> Mark.map render
+ dots : Mark.Block (Examples.Model -> Element Msg)
+ dots =
+ {- FIXME: This produces parsing errors
+
+ Markup:
+
+ | Dots
+ | Container
+ background = brown
+ viewBox = -200 -200 400 400
+
+ | Dot
+ cx = 10
+ cy = 20
+ color = blue
+ radius = 33
+
+ Errors:
+ End at 36:1
+ Expecting newline at 36:1
+ Block start at 36:1
=
- twoDots : Mark.Block (Examples.Model -> Element Msg)
- twoDots =
+ TODO: Create a minimal reproducible example on Ellie and report issue at github.com/mdgriffith/elm-markup
+ -}
= let
+ render :
+ Examples.Dots.Config
+ -> Examples.Model
+ -> Element Msg
= render config model =
- MultipleDots.ui config
+ Examples.Dots.ui config
+
+ container : Mark.Block Examples.Dots.Container
+ container =
+ Mark.record2 "Container"
+ Examples.Dots.Container
+ (Mark.field "background" Mark.string)
+ (Mark.field "viewBox" Mark.string)
+
+ dot : Mark.Block Examples.Dots.Dot
+ dot =
+ Mark.record4 "Dot"
+ Examples.Dots.Dot
+ (Mark.field "cx" Mark.float)
+ (Mark.field "cy" Mark.float)
+ (Mark.field "radius" Mark.float)
+ (Mark.field "color" Mark.string)
= in
- Mark.record6 "TwoDots"
- (\background viewBoxConf firstFill secondFill firstCX secondCX ->
- MultipleDots.Config background
- viewBoxConf
- [ [ Svg.Attributes.r "10"
- , Svg.Attributes.fill firstFill
- , Svg.Attributes.cx firstCX
- ]
- , [ Svg.Attributes.r "10"
- , Svg.Attributes.fill secondFill
- , Svg.Attributes.cx secondCX
- ]
- ]
+ Mark.block "Dots"
+ render
+ (Mark.startWith
+ Examples.Dots.Config
+ container
+ (Mark.manyOf [ dot ])
= )
- (Mark.field "background" Mark.string)
- (Mark.field "viewBox" Mark.string)
- (Mark.field "firstFill" Mark.string)
- (Mark.field "secondFill" Mark.string)
- (Mark.field "firstCX" Mark.string)
- (Mark.field "secondCX" Mark.string)
- |> Mark.map render
=
= circle : Mark.Block (Examples.Model -> Element Msg)
= circle =Create Protractor example and display protractor in Circle example
My first real useful code 🥰
Co-Authored-By: Sam Phillips samuel.rodney.phillips@gmail.com
index 5cd1456..6ffd9ca 100644
--- a/content/day-2.txt
+++ b/content/day-2.txt
@@ -21,7 +21,7 @@ Previously we have created a program that displays five colorful dots. Today we
= | Circle
= dots = 5
= circle = 0 1
- angles = 0 1
+ protractor = False
= center = none
= radius = 0 1
= scatter = False
@@ -34,7 +34,7 @@ We all have some intuition about a circle. You can tell if you see one and if yo
=| Circle
= dots = 0
= circle = 1 0
- angles = 0 1
+ protractor = False
= center = none
= radius = 0 1
= scatter = False
@@ -45,7 +45,7 @@ But what is it that makes a circle what it is? First of all we have to realize t
=| Circle
= dots = 0
= circle = 1 0
- angles = 0 1
+ protractor = False
= center = red
= radius = 0 1
= scatter = False
@@ -55,7 +55,7 @@ We can say that four or more dots lay on a circle, if the distance to the center
=| Circle
= dots = 5
= circle = 3 3
- angles = 0 1
+ protractor = False
= center = red
= radius = 3 3
= scatter = False
@@ -119,7 +119,7 @@ Now, notice that the dots displayed by the program we are creating are not layin
= | Circle
= dots = 5
= circle = 0 1
- angles = 0 1
+ protractor = False
= center = none
= radius = 0 1
= scatter = True
@@ -127,7 +127,7 @@ Now, notice that the dots displayed by the program we are creating are not layin
= | Circle
= dots = 5
= circle = 0 1
- angles = 0 1
+ protractor = False
= center = none
= radius = 0 1
= scatter = False
@@ -138,7 +138,7 @@ On the right, you immediately see a patern. They form a circle. But in fact both
= | Circle
= dots = 5
= circle = 3
- angles = 0 1
+ protractor = False
= center = none
= radius = 0 1
= scatter = True
@@ -146,7 +146,7 @@ On the right, you immediately see a patern. They form a circle. But in fact both
= | Circle
= dots = 5
= circle = 3
- angles = 0 1
+ protractor = False
= center = none
= radius = 0 1
= scatter = False
@@ -168,9 +168,9 @@ A common way of representing rotation is in degrees. It works like this: imagine
=
=In physical world we often use a tool called protractor to measure angles. It typically has one degree segments already marked for you. It looks like this:
=
-| Image
- src = /assets/protractor.svg
- description = A protractor by Georges Khaznadar <georgesk@ofset.org>
+| Protractor
+ radius = 400
+ strokeWidth = 2
=
=| Note
= TODO: Modify the image to make marks 0 - 360. We can convert it to Elm code (using https:////level.app//svg-to-elm) and then reuse it in our examples.
@@ -206,6 +206,14 @@ Type {Code|:exit} to close the REPL.
=
=Turns out that the result is 72. That's the number of degrees we have to turn our ruler around the center each time we place a new dot. If you have a protractor like the one pictured above, you can use it to measure the turn. Then measure the distance from the center along the ruler (a length called radius) and place the dot there.
=
+| Circle
+ dots = 5
+ circle = 3 3
+ protractor = True
+ center = red
+ radius = 3 3
+ scatter = False
+
=| Header
= The Code
=
@@ -215,7 +223,7 @@ Now that we understand what it means to be placed on a circle and evenly distrib
= | Circle
= dots = 5
= circle = 0 1
- angles = 0 1
+ protractor = False
= center = none
= radius = 0 1
= scatter = False
@@ -281,7 +289,7 @@ and {Link|open the program in your browser|url=http://localhost/src/Main.elm}. Y
= | Circle
= dots = 1
= circle = 0 1
- angles = 0 1
+ protractor = False
= center = none
= radius = 0 1
= scatter = False
@@ -435,7 +443,7 @@ In the browser it should look exactly as we planned:
= | Circle
= dots = 5
= circle = 0 1
- angles = 0 1
+ protractor = False
= center = none
= radius = 0 1
= scatter = Falseindex 35baf6c..eccb7d7 100644
--- a/src/Examples/Circle.elm
+++ b/src/Examples/Circle.elm
@@ -8,6 +8,7 @@ import Html exposing (Html)
=import List.Extra as List
=import Maybe.Extra as Maybe
=import Point2d
+import Protractor
=import Svg exposing (Svg)
=import Svg.Attributes
=import Transformations exposing (Transformation(..))
@@ -18,7 +19,7 @@ type alias Config =
= , circle : String -- Dash array
= , center : String -- Color
= , radius : String -- Dash array
- , angles : String -- Dash array
+ , protractor : Bool -- Display protractor?
= , scatter : Bool -- Are doot evenly distributed or scattered
= }
=
@@ -57,17 +58,19 @@ ui config =
= [ dots
= , center
= , circle
- , compass
= , radi
+ , protractor
= ]
=
- compass : Svg msg
- compass =
- 0
- :: angles
- |> pairs
- |> List.indexedMap arc
- |> Svg.g []
+ protractor =
+ case config.protractor of
+ True ->
+ Protractor.protractor { radius = 60, strokeWidth = 0.5 }
+
+ False ->
+ Svg.g
+ []
+ []
=
= pairs : List a -> List ( a, a )
= pairs list =
@@ -81,20 +84,6 @@ ui config =
= one :: two :: rest ->
= ( one, two ) :: pairs (two :: rest)
=
- arc : Int -> ( Float, Float ) -> Svg msg
- arc index ( start, end ) =
- Arc2d.with
- { centerPoint = Point2d.origin
- , radius = 30
- , startAngle = degrees start
- , sweptAngle = degrees (end - start)
- }
- |> Geometry.Svg.arc2d
- [ Svg.Attributes.stroke (color index)
- , Svg.Attributes.strokeDasharray config.angles
- , Svg.Attributes.fill "none"
- ]
-
= dots =
= angles
= |> List.indexedMap
@@ -190,6 +179,6 @@ defaults =
= , circle = "0 1"
= , center = "none"
= , radius = "0 1"
- , angles = "0 1"
+ , protractor = True
= , scatter = False
= }new file mode 100644
index 0000000..25b3173
--- /dev/null
+++ b/src/Examples/Protractor.elm
@@ -0,0 +1,41 @@
+module Examples.Protractor exposing (Config, defaults, main, ui)
+
+import Element exposing (Element)
+import Html exposing (Html)
+import Protractor
+import Svg exposing (Svg)
+import Svg.Attributes exposing (fill, stroke, viewBox)
+
+
+type alias Config =
+ { radius : Float
+ , strokeWidth : Float
+ }
+
+
+defaults : Config
+defaults =
+ { radius = 500
+ , strokeWidth = 1
+ }
+
+
+main : Html msg
+main =
+ ui defaults
+ |> Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+
+
+ui : Config -> Element msg
+ui config =
+ Protractor.protractor config
+ |> List.singleton
+ |> Svg.svg
+ [ Svg.Attributes.viewBox "-500 -500 1000 1000"
+ , Svg.Attributes.width "100%"
+ , Svg.Attributes.height "100%"
+ ]
+ |> Element.htmlindex 2e7510a..0905bcd 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -30,6 +30,7 @@ import Examples.Line
=import Examples.MultipleDots as MultipleDots
=import Examples.NestedTransformations
=import Examples.PolarCoordinates
+import Examples.Protractor
=import Examples.RosetteTypedTransformations
=import Examples.Spiral
=import Examples.Transformations
@@ -465,6 +466,7 @@ document =
= , dotInElement
= , dotWithViewBox
= , twoDots
+ , protractor
= , circle
= , line
= , gradient
@@ -479,6 +481,25 @@ document =
= ]
=
= -- Embeded programs' blocks
+ protractor : Mark.Block (Examples.Model -> Element Msg)
+ protractor =
+ let
+ render : Examples.Protractor.Config -> Examples.Model -> Element Msg
+ render config model =
+ Examples.Protractor.ui config
+ |> Element.el
+ [ Element.centerX
+ , Element.centerY
+ ]
+ |> Element.map Examples.CounterMsg
+ |> Element.map ExamplesMsg
+ in
+ Mark.record2 "Protractor"
+ Examples.Protractor.Config
+ (Mark.field "radius" Mark.float)
+ (Mark.field "strokeWidth" Mark.float)
+ |> Mark.map render
+
= counter : Mark.Block (Examples.Model -> Element Msg)
= counter =
= let
@@ -582,7 +603,7 @@ document =
= (Mark.field "circle" Mark.string)
= (Mark.field "center" Mark.string)
= (Mark.field "radius" Mark.string)
- (Mark.field "angles" Mark.string)
+ (Mark.field "protractor" Mark.bool)
= (Mark.field "scatter" Mark.bool)
= |> Mark.map render
=new file mode 100644
index 0000000..f990e26
--- /dev/null
+++ b/src/Protractor.elm
@@ -0,0 +1,92 @@
+module Protractor exposing (protractor)
+
+import Axis2d exposing (Axis2d)
+import Circle2d
+import Element exposing (fill)
+import Geometry.Svg
+import LineSegment2d exposing (LineSegment2d)
+import Point2d
+import Svg exposing (Svg)
+import Svg.Attributes exposing (fill, stroke, viewBox)
+
+
+type alias Config =
+ { radius : Float
+ , strokeWidth : Float
+ }
+
+
+protractor : Config -> Svg msg
+protractor config =
+ let
+ mark : Float -> Svg msg
+ mark direction =
+ if remainderBy 10 (floor direction) == 0 then
+ LineSegment2d.along (axis direction) (config.radius * 0.94) config.radius
+ |> Geometry.Svg.lineSegment2d strokeAttributes
+
+ else if remainderBy 5 (floor direction) == 0 then
+ LineSegment2d.along (axis direction) (config.radius * 0.96) config.radius
+ |> Geometry.Svg.lineSegment2d strokeAttributes
+
+ else
+ LineSegment2d.along (axis direction) (config.radius * 0.98) config.radius
+ |> Geometry.Svg.lineSegment2d strokeAttributes
+
+ axis : Float -> Axis2d
+ axis direction =
+ Axis2d.x
+ |> Axis2d.rotateAround Point2d.origin (degrees direction)
+
+ marks : List (Svg msg)
+ marks =
+ List.range 0 359
+ |> List.map toFloat
+ |> List.map mark
+
+ edge : Svg msg
+ edge =
+ Circle2d.withRadius config.radius Point2d.origin
+ |> Geometry.Svg.circle2d
+ [ Svg.Attributes.stroke "black"
+ , Svg.Attributes.fill "none"
+ ]
+
+ labels : List (Svg msg)
+ labels =
+ List.range 0 35
+ |> List.map ((*) 10)
+ |> List.map String.fromInt
+ |> List.map label
+
+ label : String -> Svg msg
+ label direction =
+ Svg.text_
+ [ Svg.Attributes.x "0"
+ , Svg.Attributes.y "0"
+ , Svg.Attributes.fill "black"
+ , Svg.Attributes.transform ("rotate (" ++ direction ++ ") translate (" ++ String.fromFloat (config.radius * 0.89) ++ ")")
+ , Svg.Attributes.fontSize <| String.fromFloat <| config.radius * 0.05
+ , Svg.Attributes.dominantBaseline "central"
+ , Svg.Attributes.textAnchor "middle"
+ ]
+ [ Svg.text direction ]
+
+ axes : List (Svg msg)
+ axes =
+ [ LineSegment2d.along Axis2d.x (config.radius * 0.84 * -1) (config.radius * 0.84)
+ , LineSegment2d.along Axis2d.y (config.radius * 0.84 * -1) (config.radius * 0.84)
+ ]
+ |> List.map (Geometry.Svg.lineSegment2d strokeAttributes)
+
+ strokeAttributes =
+ [ stroke "gray"
+ , Svg.Attributes.strokeWidth (String.fromFloat config.strokeWidth)
+ ]
+ in
+ edge
+ :: marks
+ |> List.append labels
+ |> List.append axes
+ |> Svg.g
+ []Make Dots example work, but without configurable continer
You can put one or many dots, but the viewbox and background are fixed. See the FIXME comment for more details.
index 03cc7bd..5944489 100644
--- a/src/Examples/Dots.elm
+++ b/src/Examples/Dots.elm
@@ -75,5 +75,7 @@ ui { container, dots } =
= |> Svg.svg
= [ Svg.Attributes.viewBox container.viewBox
= , Svg.Attributes.style <| "background: " ++ container.background
+ , Svg.Attributes.width "100%"
+ , Svg.Attributes.height "100%"
= ]
= |> Element.htmlindex 006af8a..eae8b16 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -506,28 +506,6 @@ document =
=
= dots : Mark.Block (Examples.Model -> Element Msg)
= dots =
- {- FIXME: This produces parsing errors
-
- Markup:
-
- | Dots
- | Container
- background = brown
- viewBox = -200 -200 400 400
-
- | Dot
- cx = 10
- cy = 20
- color = blue
- radius = 33
-
- Errors:
- End at 36:1
- Expecting newline at 36:1
- Block start at 36:1
-
- TODO: Create a minimal reproducible example on Ellie and report issue at github.com/mdgriffith/elm-markup
- -}
= let
= render :
= Examples.Dots.Config
@@ -552,13 +530,48 @@ document =
= (Mark.field "radius" Mark.float)
= (Mark.field "color" Mark.string)
= in
+ {- FIXME: This should really be:
+
+ Mark.block "Dots"
+ render
+ (Mark.startWith
+ Examples.Dots.Config
+ container
+ (Mark.manyOf [ dot ])
+ )
+
+ and then markup:
+
+ | Dots
+ | Container
+ background = brown
+ viewBox = -200 -200 400 400
+
+ | Dot
+ cx = 10
+ cy = 20
+ color = blue
+ radius = 33
+
+ | Dot
+ ...
+
+ but it produces parsing errors:
+
+ End at 36:1
+ Expecting newline at 36:1
+ Block start at 36:1
+
+ TODO: Create a minimal reproducible example on Ellie and report issue at github.com/mdgriffith/elm-markup
+ -}
= Mark.block "Dots"
- render
- (Mark.startWith
- Examples.Dots.Config
- container
- (Mark.manyOf [ dot ])
+ (Examples.Dots.Config
+ { background = "none"
+ , viewBox = "-300 -300 600 600"
+ }
+ >> render
= )
+ (Mark.manyOf [ dot ])
=
= circle : Mark.Block (Examples.Model -> Element Msg)
= circle =Update markup to work with previously commit changes
See the message of the parent commit.
index 2068cdf..c7385a8 100644
--- a/content/day-2.txt
+++ b/content/day-2.txt
@@ -26,16 +26,26 @@ Previously we have created a program that displays five colorful dots. Today we
= radius = 0 1
= scatter = False
=
-| Dots
- | Container
- background = brown
- viewBox = -200 -200 400 400
-
- | Dot
- cx = 10
- cy = 20
- color = blue
- radius = 33
+
+| Window
+ | Dots
+ | Dot
+ cx = 0
+ cy = 0
+ color = skyblue
+ radius = 10
+
+ | Dot
+ cx = -50
+ cy = 0
+ color = pink
+ radius = 10
+
+ | Dot
+ cx = 50
+ cy = 0
+ color = lime
+ radius = 10
=
=| Header
= What does it mean to be placed on a circle?Remove two dots example
It doesnt't compile and I'm working on a more versatile Dots example.
index 5cd1456..4a1800a 100644
--- a/content/day-2.txt
+++ b/content/day-2.txt
@@ -4,7 +4,6 @@
=| Emphasize
= Let's Place the Dots in a Circle
=
-
=| Note
= Today we are going to lear about
=
@@ -15,7 +14,7 @@
=| Header
= The Problem
=
-Previously we have created a program that displays five colorful dots. Today we want to place our five dots in a circle, like this:
+Previously we have created a program that displays one dot in the center of the screen. Today we want to place five dots in a circle, like this:
=
=| Window
= | Circle
@@ -26,6 +25,12 @@ Previously we have created a program that displays five colorful dots. Today we
= radius = 0 1
= scatter = False
=
+| Header
+ Multiple Dots
+
+| Note
+ TODO: Describe going from one to many dots. Most of the content is in Day 3, so just move it here and redact.
+
=| Header
= What does it mean to be placed on a circle?
=index 2e6df38..9104b65 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -464,7 +464,6 @@ document =
= , dot
= , dotInElement
= , dotWithViewBox
- , twoDots
= , circle
= , line
= , gradient
@@ -541,34 +540,6 @@ document =
= (Mark.field "viewBox" Mark.string)
= |> Mark.map render
=
- twoDots : Mark.Block (Examples.Model -> Element Msg)
- twoDots =
- let
- render config model =
- MultipleDots.ui config
- in
- Mark.record6 "TwoDots"
- (\background viewBoxConf firstFill secondFill firstCX secondCX ->
- MultipleDots.Config background
- viewBoxConf
- [ [ Svg.Attributes.r "10"
- , Svg.Attributes.fill firstFill
- , Svg.Attributes.cx firstCX
- ]
- , [ Svg.Attributes.r "10"
- , Svg.Attributes.fill secondFill
- , Svg.Attributes.cx secondCX
- ]
- ]
- )
- (Mark.field "background" Mark.string)
- (Mark.field "viewBox" Mark.string)
- (Mark.field "firstFill" Mark.string)
- (Mark.field "secondFill" Mark.string)
- (Mark.field "firstCX" Mark.string)
- (Mark.field "secondCX" Mark.string)
- |> Mark.map render
-
= circle : Mark.Block (Examples.Model -> Element Msg)
= circle =
= letMerge branch 'fix-9-replace-p-with-div' into 'master'
Temporary fix for #9
See merge request software-garden/software-garden.gitlab.io!6
Merge branch 'protractor' into 'master'
Create Protractor example and display protractor in Circle example
See merge request software-garden/software-garden.gitlab.io!7
Merge remote-tracking branch 'origin/master' into content
Merge remote-tracking branch 'origin/master' into content
Deploy
index 4472935..8d347ad 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -13,5 +13,5 @@ pages:
= paths:
= - public
=
- only:
- - master
+ # only:
+ # - masterDraft transition from one to five dots on day 2
index a809f8b..04f4e0a 100644
--- a/content/day-2.txt
+++ b/content/day-2.txt
@@ -31,6 +31,112 @@ Previously we have created a program that displays one dot in the center of the
=| Note
= TODO: Describe going from one to many dots. Most of the content is in Day 3, so just move it here and redact.
=
+ See the FIXME comment in {Code|Main.elm} on {Code|wip-dots-example}.
+
+First obvious difference is that now we have multiple dots. The only dot we have is created using {Code|Svg.circle} element on line 9 - 15, this code block:
+
+| Monospace
+ Svg.circle
+ [ Svg.Attributes.r "10"
+ , Svg.Attributes.cx "0"
+ , Svg.Attributes.cy "0"
+ , Svg.Attributes.fill "skyblue"
+ ]
+ []
+
+If you look closely in your source code, the block above is surrounded by {Code|[} and {Code|]} characters. That's a list. We will talk about lists during the next day. For now it's enough to say that a list can contain zero, one or more items of the same type. In this case it contains one item of type `Svg msg` - our lonely, blue dot. Let's add a second one like this:
+
+| Code
+ module Main exposing (main)
+
+ import Element
+ import Svg
+ import Svg.Attributes
+
+
+ main =
+ [ Svg.circle
+ [ Svg.Attributes.r "10"
+ , Svg.Attributes.cx "0"
+ , Svg.Attributes.cy "0"
+ , Svg.Attributes.fill "skyblue"
+ ]
+ []
+ , Svg.circle
+ [ Svg.Attributes.r "10"
+ , Svg.Attributes.cx "0"
+ , Svg.Attributes.cy "0"
+ , Svg.Attributes.fill "orange"
+ ]
+ []
+ ]
+ |> Svg.svg
+ [ Svg.Attributes.height "100%"
+ , Svg.Attributes.width "100%"
+ , Svg.Attributes.viewBox "-300 -300 600 600"
+ ]
+ |> Element.html
+ |> Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+
+The result should be:
+
+| Monospace
+ | Window
+ | Dots
+ | Dot
+ cx = 0
+ cy = 0
+ color = skyblue
+ radius = 10
+
+ | Dot
+ cx = 0
+ cy = 0
+ color = orange
+ radius = 10
+
+Oh oh. There we can see the orange dot, but where is the blue one? It's behind the orange. Recall the cartesian coordinates. If we want to see both dots, let's move one of them to a different place, like this:
+
+| Code
+ module Main exposing (main)
+
+ import Element
+ import Svg
+ import Svg.Attributes
+
+
+ main =
+ [ Svg.circle
+ [ Svg.Attributes.r "10"
+ , Svg.Attributes.cx "0"
+ , Svg.Attributes.cy "0"
+ , Svg.Attributes.fill "skyblue"
+ ]
+ []
+ , Svg.circle
+ [ Svg.Attributes.r "10"
+ , Svg.Attributes.cx "50"
+ , Svg.Attributes.cy "0"
+ , Svg.Attributes.fill "orange"
+ ]
+ []
+ ]
+ |> Svg.svg
+ [ Svg.Attributes.height "100%"
+ , Svg.Attributes.width "100%"
+ , Svg.Attributes.viewBox "-300 -300 600 600"
+ ]
+ |> Element.html
+ |> Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+
+We can add more dots, by simply multiplying the code blocks inside the list. Each block must be separated from others with a {Code|,} (comma). Each time the {Code|cx} and {Code|cy} coordinates need to be different. We can also give dots different colors. Make five of them.
+
=| Header
= What does it mean to be placed on a circle?
=
@@ -82,13 +188,10 @@ We can say that four or more dots lay on a circle, if the distance to the center
=
= TODO: An example showing that for three different points there will always be a circle that crosses them, see {Link|circumcircle|url=https://package.elm-lang.org/packages/ianmackenzie/elm-geometry/latest/Triangle2d#circumcircle}
=
-
-Because we are all about challenges, let's make five dots. Also, we already have five dot's we created on {Link|Day 1|url=/day-1.html}, so why not reuse them?
-
=So, once again - we can say that several things (in our case dots) lay on a circle if the distance between each of them and the center of the circle is the same.
=
=| Note
- A matematician would say:
+ A mathematician would say:
=
= /Four or more points belong to a circle when there is a point (called center) that is equally distant from each of the points./
=
@@ -101,7 +204,7 @@ We call this distance /a *radius* of a circle/. We already saw radius used as an
= [ Svg.Attributes.r "10"]
= []
=
-The {Code|r} attribute stands for radius. Then it was basically dictating the size of the dot. The larger the radius the bigger the circle, and a dot is just a filled circle!
+The {Code|r} attribute stands for radius. Then it was basically dictating the size of the dot. The larger the radius the bigger the circle. A dot is just a filled circle!
=
=This time the radius will affect the size of an imaginary circle on which the dots are laying.
=