Commits: 1
Make the Circle example take a radius parameter
It changes the distance of the dots from the center of the circle.
Old parameter radius (controlling the visibility of the lines connecting the dots and center) is renamed to radi.
Also edit day 2.
index 04f4e0a..af026fb 100644
--- a/content/day-2.txt
+++ b/content/day-2.txt
@@ -22,18 +22,17 @@ Previously we have created a program that displays one dot in the center of the
= circle = 0 1
= protractor = False
= center = none
- radius = 0 1
+ radi = 0 1
+ radius = 80
= 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.
+ See the FIXME comment in {Code|Main.elm} on {Code|wip-dots-example} branch.
=
- 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:
+First obvious difference is that now we have multiple dots. The only dot we have is created using {Code|Svg.circle} function on line 9 - 15, this code block:
=
=| Monospace
= Svg.circle
@@ -44,7 +43,7 @@ First obvious difference is that now we have multiple dots. The only dot we have
= ]
= []
=
-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:
+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 {Code|Svg msg} - our lonely, blue dot. Let's add a second one like this:
=
=| Code
= module Main exposing (main)
@@ -81,7 +80,7 @@ If you look closely in your source code, the block above is surrounded by {Code|
= , Element.height Element.fill
= ]
=
-The result should be:
+Now the list spans from lines 9 to 23 and contains two items: skyblue and orange dots. The result should be:
=
=| Monospace
= | Window
@@ -98,7 +97,7 @@ The result should be:
= 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:
+Oh oh! The list contains two dots, but we can only see the orange one on the screen. Where is the blue one? It's behind the orange. Recall how the cartesian coordinates work: if {Code|x} and {Code|y} of the center are the same, then the dots are in the same place. If we want to see both dots, let's move one of them to a different place, like this:
=
=| Code
= module Main exposing (main)
@@ -135,6 +134,23 @@ Oh oh. There we can see the orange dot, but where is the blue one? It's behind t
= , Element.height Element.fill
= ]
=
+Now you should see this:
+
+| Monospace
+ | Window
+ | Dots
+ | Dot
+ cx = 0
+ cy = 0
+ color = skyblue
+ radius = 10
+
+ | Dot
+ cx = 50
+ cy = 0
+ color = orange
+ radius = 10
+
=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
@@ -147,7 +163,8 @@ We all have some intuition about a circle. You can tell if you see one and if yo
= circle = 1 0
= protractor = False
= center = none
- radius = 0 1
+ radi = 0 1
+ radius = 80
= scatter = False
=
=
@@ -158,38 +175,21 @@ But what is it that makes a circle what it is? First of all we have to realize t
= circle = 1 0
= protractor = False
= center = red
- radius = 0 1
+ radi = 0 1
+ radius = 80
= scatter = False
=
-We can say that four or more dots lay on a circle, if the distance to the center is the same for each of them, like this:
+We can say that dots lay on a circle, if the distance to the center is the same for each of them, like this:
=
=| Circle
= dots = 5
= circle = 3 3
= protractor = False
= center = red
- radius = 3 3
+ radi = 3 3
+ radius = 80
= scatter = False
=
-| Note
- Why more than three? One, two or three dots always lay on at least one circle, so it's not much of a challenge that way.
-
- One dot lay on any circle that crosses the place. You could draw very many circles like that (in fact as many as you want).
-
- Similar for two things. Not every circle will do, but still you could draw many different circles that they will lay on.
-
- For three things there will always be exactly one circle that they lay on (except if they lay in one line). So three is still not much of a challenge. You could place them however you like, and always say that they lay on a circle.
-
- Only when it's four or more things, we can seriously ask whether they lay on a circle or not.
-
- TODO: Consider if the above adds more value or confusion.
-
- TODO: An example showing multiple circles crossing one and two points
-
- 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}
-
-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 mathematician would say:
=
@@ -206,8 +206,90 @@ We call this distance /a *radius* of a circle/. We already saw radius used as an
=
=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!
=
+| Row
+ | Monospace
+ radius = 40
+
+ | Monospace
+ radius = 60
+
+ | Monospace
+ radius = 80
+
+| Row
+ | Monospace
+ TODO: Dots example
+ | Dots
+ | Container
+ viewBox = -100 -100 200 200
+ background = none
+ fill = True
+
+ | Dot
+ radius = 40
+ cx = 0
+ cy = 0
+ color = skyblue
+
+ | Monospace
+ TODO: Dots example
+ | Dots
+ | Container
+ viewBox = -100 -100 200 200
+ background = none
+ fill = True
+
+ | Dot
+ radius = 60
+ cx = 0
+ cy = 0
+ color = skyblue
+
+ | Monospace
+ TODO: Dots example
+ | Dots
+ | Container
+ viewBox = -100 -100 200 200
+ background = none
+ fill = True
+
+ | Dot
+ radius = 80
+ cx = 0
+ cy = 0
+ color = skyblue
+
=This time the radius will affect the size of an imaginary circle on which the dots are laying.
=
+| Row
+ | Circle
+ dots = 5
+ circle = 3 3
+ protractor = False
+ center = none
+ radi = 0 1
+ radius = 40
+ scatter = False
+
+ | Circle
+ dots = 5
+ circle = 3 3
+ protractor = False
+ center = none
+ radi = 0 1
+ radius = 60
+ scatter = False
+
+
+ | Circle
+ dots = 5
+ circle = 3 3
+ protractor = False
+ center = none
+ radi = 0 1
+ radius = 80
+ scatter = False
+
=Ok, so this describes what it means to lay on a circle. But what are some efficient methods of putting things there? How about the following.
=
=You choose a center (anywhere, say {Code|(0, 0)}) and radius (any length you like, say 80).
@@ -229,7 +311,8 @@ Now, notice that the dots displayed by the program we are creating are not layin
= circle = 0 1
= protractor = False
= center = none
- radius = 0 1
+ radi = 0 1
+ radius = 80
= scatter = True
=
= | Circle
@@ -237,7 +320,8 @@ Now, notice that the dots displayed by the program we are creating are not layin
= circle = 0 1
= protractor = False
= center = none
- radius = 0 1
+ radi = 0 1
+ radius = 80
= scatter = False
=
=On the right, you immediately see a patern. They form a circle. But in fact both pictures are showing 5 dots laying on a circle. Look:
@@ -248,7 +332,8 @@ On the right, you immediately see a patern. They form a circle. But in fact both
= circle = 3
= protractor = False
= center = none
- radius = 0 1
+ radi = 0 1
+ radius = 80
= scatter = True
=
= | Circle
@@ -256,7 +341,8 @@ On the right, you immediately see a patern. They form a circle. But in fact both
= circle = 3
= protractor = False
= center = none
- radius = 0 1
+ radi = 0 1
+ radius = 80
= scatter = False
=
=
@@ -319,7 +405,8 @@ Turns out that the result is 72. That's the number of degrees we have to turn ou
= circle = 3 3
= protractor = True
= center = red
- radius = 3 3
+ radi = 3 3
+ radius = 80
= scatter = False
=
=| Header
@@ -333,7 +420,8 @@ Now that we understand what it means to be placed on a circle and evenly distrib
= circle = 0 1
= protractor = False
= center = none
- radius = 0 1
+ radi = 0 1
+ radius = 80
= scatter = False
=
=We will start from where we left off yesterday. Open {Code|src//Main.elm} in your editor. It should have the following code:
@@ -399,7 +487,8 @@ and {Link|open the program in your browser|url=http://localhost/src/Main.elm}. Y
= circle = 0 1
= protractor = False
= center = none
- radius = 0 1
+ radi = 0 1
+ radius = 80
= scatter = False
=
=As you can see the dot is no longer in the center - it has moved!
@@ -553,7 +642,8 @@ In the browser it should look exactly as we planned:
= circle = 0 1
= protractor = False
= center = none
- radius = 0 1
+ radi = 0 1
+ radius = 80
= scatter = False
=
=| Emphasizeindex c5d3b90..6e99a6f 100644
--- a/src/Examples/Circle.elm
+++ b/src/Examples/Circle.elm
@@ -18,17 +18,28 @@ type alias Config =
= { dots : Int -- Number of dots
= , circle : String -- Dash array
= , center : String -- Color
- , radius : String -- Dash array
+ , radius : Float -- The radius of the big circle
+ , radi : String -- Dash array
= , protractor : Bool -- Display protractor?
= , scatter : Bool -- Are doot evenly distributed or scattered
= }
=
=
+defaults : Config
+defaults =
+ { dots = 5
+ , circle = "0 1"
+ , center = "none"
+ , radius = 80
+ , radi = "0 1"
+ , protractor = True
+ , scatter = False
+ }
+
+
=
={- TODO:
= - Display radius (text)
- - Display angles of turns (in degrees)
- - Make an arrow head at the end point of the arc representing a turn (see https://package.elm-lang.org/packages/ianmackenzie/elm-geometry/latest/Arc2d#tangentDirection)
=-}
=
=
@@ -69,7 +80,10 @@ ui config =
= protractor =
= case config.protractor of
= True ->
- Protractor.protractor { radius = 60, strokeWidth = 0.5 }
+ Protractor.protractor
+ { radius = config.radius * 0.6
+ , strokeWidth = 0.5
+ }
=
= False ->
= Svg.g
@@ -105,7 +119,7 @@ ui config =
=
= circle =
= Svg.circle
- [ Svg.Attributes.r "80"
+ [ Svg.Attributes.r <| String.fromFloat config.radius
= , Svg.Attributes.stroke "silver"
= , Svg.Attributes.strokeWidth "1"
= , Svg.Attributes.strokeDasharray config.circle
@@ -143,7 +157,7 @@ ui config =
= , Svg.Attributes.transform <|
= Transformations.apply
= [ Rotate angle
- , Translate 80 0
+ , Translate config.radius 0
= ]
= ]
= []
@@ -159,10 +173,10 @@ ui config =
= Svg.line
= [ Svg.Attributes.x1 "0"
= , Svg.Attributes.y1 "0"
- , Svg.Attributes.x2 "80"
+ , Svg.Attributes.x2 <| String.fromFloat config.radius
= , Svg.Attributes.y2 "0"
= , Svg.Attributes.stroke "pink"
- , Svg.Attributes.strokeDasharray config.radius
+ , Svg.Attributes.strokeDasharray config.radi
= , Svg.Attributes.transform <|
= Transformations.apply
= [ Rotate angle
@@ -175,14 +189,3 @@ ui config =
= [ Svg.Attributes.viewBox "-100 -100 200 200"
= ]
= |> Element.html
-
-
-defaults : Config
-defaults =
- { dots = 5
- , circle = "0 1"
- , center = "none"
- , radius = "0 1"
- , protractor = True
- , scatter = False
- }index a02ca19..b92c418 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -442,24 +442,33 @@ document =
= }
= )
= Mark.Custom.title
- (Mark.manyOf
- ([ Mark.Custom.header
- , Mark.Custom.paragraph
- , Mark.Custom.monospace
- , Mark.Custom.code
- , Mark.Custom.terminal
- , Mark.Custom.note
- , Mark.Custom.emphasize
- , Mark.Custom.list
- , Mark.Custom.image
- ]
- ++ examples
- ++ [ Mark.Custom.window (Mark.oneOf (Mark.Custom.paragraph :: examples))
- , Mark.Custom.row (Mark.manyOf examples)
- ]
- )
+ ([ typography, widgets, examples, special ]
+ |> List.concat
+ |> Mark.manyOf
= )
=
+ typography =
+ [ Mark.Custom.header
+ , Mark.Custom.paragraph
+ , Mark.Custom.monospace
+ , Mark.Custom.emphasize
+ , Mark.Custom.list
+ , Mark.Custom.image
+ ]
+
+ widgets =
+ [ Mark.Custom.code
+ , Mark.Custom.terminal
+ , Mark.Custom.note
+ ]
+
+ special =
+ [ Mark.Custom.window <|
+ Mark.oneOf (typography ++ examples ++ widgets)
+ , Mark.Custom.row <|
+ Mark.manyOf (typography ++ examples ++ widgets)
+ ]
+
= examples =
= [ counter
= , dot
@@ -568,12 +577,13 @@ document =
= render config model =
= Examples.Circle.ui config
= in
- Mark.record6 "Circle"
+ Mark.record7 "Circle"
= Examples.Circle.Config
= (Mark.field "dots" Mark.int)
= (Mark.field "circle" Mark.string)
= (Mark.field "center" Mark.string)
- (Mark.field "radius" Mark.string)
+ (Mark.field "radius" Mark.float)
+ (Mark.field "radi" Mark.string)
= (Mark.field "protractor" Mark.bool)
= (Mark.field "scatter" Mark.bool)
= |> Mark.map render