Commits: 7
Add shapes block to day 1, day 2 and day 3.
index b8bce0e..6b759b8 100644
--- a/content/day-1.txt
+++ b/content/day-1.txt
@@ -123,10 +123,12 @@ We want to display a dot at the center of the screen, like this:
=
=
= | Dot
- cx = 0
- cy = 0
= color = skyblue
= radius = 10
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
=Below is the complete code to draw a dot like this, but don't type it in your editor yet! We are going to recreate it together, step by step.
=
@@ -221,9 +223,11 @@ Reload the browser. You should see something like this:
=
= | Dot
= radius = 10
- cx = 0
- cy = 0
= color = black
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
=At this point we have a dot on the screen - it's at the top left corner of the viewport (the area of the browser window where the content is displayed). We can see only a quarter of it - the rest is outside of the viewport.
=
@@ -260,9 +264,11 @@ Reloading the browser should reveal something like this:
=
= | Dot
= radius = 10
- cx = 0
- cy = 0
= color = black
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
=Since the dot is inside the {Code|svg} element, and the {Code|svg} element doesn't cover the center of the screen, it's impossible to place the dot at the center. Before anything else, let's make the {Code|svg} fill entire {Definition|term=viewport|definiens=the area of the browser window where the content is displayed}.
=
@@ -323,9 +329,11 @@ Reload the browser. The SVG space now fills the entire viewport. Even the small
=
= | Dot
= radius = 10
- cx = 0
- cy = 0
= color = black
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
=It should now be possible to place our dot in the center of the screen. Currently the dot is in the top left corner of the viewport, but at least the parent {Code|svg} element is covering it, so the center of the viewport is somewher within the {Code|svg} element.
=
@@ -400,9 +408,11 @@ To change the position of the dot, we can use the {Code|cx} and {Code|cy} attrib
=
= | Dot
= radius = 10
- cx = 100
- cy = 50
= color = black
+ transformations =
+ | Translate
+ x = 100
+ y = 50
=
=| Note
= The {Code|cx} stands for /center x/ and {Code|cy} for /center y/, where center refers to the circle. We will discuss what the center of the circle is in more exact terms on day 2, but you probably get the concept.
@@ -505,9 +515,11 @@ There are only two changes here. First we reset the {Code|cx} and {Code|cy} attr
=
= | Dot
= radius = 10
- cx = 0
- cy = 0
= color = black
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
=You can also remove line 19 to remove the pink background, or set it to some other color.
=
@@ -571,9 +583,11 @@ The only change is on line 13. Reload the browser and see this:
=
= | Dot
= radius = 10
- cx = 0
- cy = 0
= color = skyblue
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
=| Emphasize
= Wow!index 5a1bac3..afa080b 100644
--- a/content/day-2.txt
+++ b/content/day-2.txt
@@ -101,15 +101,19 @@ Now the list spans from lines 9 to 23 and contains two items: skyblue and orange
=
= | Dot
= radius = 10
- cx = 0
- cy = 0
= color = skyblue
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
= | Dot
= radius = 10
- cx = 0
- cy = 0
= color = orange
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
=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:
=
@@ -175,15 +179,19 @@ Now you should see this:
=
= | Dot
= radius = 10
- cx = 0
- cy = 0
= color = skyblue
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
= | Dot
= radius = 10
- cx = 50
- cy = 0
= color = orange
+ transformations =
+ | Translate
+ x = 50
+ y = 0
=
=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.
=
@@ -263,9 +271,11 @@ The {Code|r} attribute stands for radius. Then it was basically dictating the si
=
= | Dot
= radius = 40
- cx = 0
- cy = 0
= color = skyblue
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
= | Shapes
= | Container
@@ -275,9 +285,11 @@ The {Code|r} attribute stands for radius. Then it was basically dictating the si
=
= | Dot
= radius = 60
- cx = 0
- cy = 0
= color = skyblue
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
= | Shapes
= | Container
@@ -287,9 +299,11 @@ The {Code|r} attribute stands for radius. Then it was basically dictating the si
=
= | Dot
= radius = 80
- cx = 0
- cy = 0
= color = skyblue
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
=This time the radius will affect the size of an imaginary circle on which the dots are laying.
=index 0046d76..f39b2ad 100644
--- a/content/day-3.txt
+++ b/content/day-3.txt
@@ -1057,95 +1057,88 @@ You should see something like this in the browser:
= fill = True
= viewBox = -100 -100 200 200
=
- | Group
- x = 0
- y = 0
- rotation = 0
- children =
- | Line
- x1 = 0
- y1 = 0
- x2 = 80
- y2 = 0
- color = skyblue
-
- | Dot
- cx = 80
- cy = 0
- radius = 10
- color = skyblue
-
- | Group
- x = 0
- y = 0
- rotation = 72
- children =
- | Line
- x1 = 0
- y1 = 0
- x2 = 80
- y2 = 0
- color = orange
-
- | Dot
- cx = 80
- cy = 0
- radius = 10
- color = orange
-
- | Group
- x = 0
- y = 0
- rotation = 144
- children =
- | Line
- x1 = 0
- y1 = 0
- x2 = 80
- y2 = 0
- color = red
-
- | Dot
- cx = 80
- cy = 0
- radius = 10
- color = red
-
- | Group
- x = 0
- y = 0
- rotation = 216
- children =
- | Line
- x1 = 0
- y1 = 0
- x2 = 80
- y2 = 0
- color = lime
-
- | Dot
- cx = 80
- cy = 0
- radius = 10
- color = lime
-
- | Group
- x = 0
- y = 0
- rotation = 288
- children =
- | Line
- x1 = 0
- y1 = 0
- x2 = 80
- y2 = 0
- color = maroon
-
- | Dot
- cx = 80
- cy = 0
- radius = 10
- color = maroon
+ | Line
+ length = 80
+ color = skyblue
+ transformations =
+ | Rotate
+ 0
+ | Dot
+ radius = 10
+ color = skyblue
+ transformations =
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length = 80
+ color = orange
+ transformations =
+ | Rotate
+ 72
+ | Dot
+ radius = 10
+ color = orange
+ transformations =
+ | Rotate
+ 72
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length = 80
+ color = red
+ transformations =
+ | Rotate
+ 144
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ 144
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length = 80
+ color = lime
+ transformations =
+ | Rotate
+ 216
+
+ | Dot
+ radius = 10
+ color = lime
+ transformations =
+ | Rotate
+ 216
+ | Translate
+ x = 80
+ y = 0
+
+
+ | Line
+ length = 80
+ color = maroon
+ transformations =
+ | Rotate
+ 288
+
+ | Dot
+ radius = 10
+ color = maroon
+ transformations =
+ | Rotate
+ 288
+ | Translate
+ x = 80
+ y = 0
+
=
=| Emphasize
= Congratulations!Merge branch 'shapes-example' of gitlab.com:software-garden/software-garden.gitlab.io into shapes-example
Merge remote-tracking branch 'origin/master' into shapes-example
Merge branch 'growing-tree' into 'master'
Add a growing option to the tree example.
See merge request software-garden/software-garden.gitlab.io!21
Merge remote-tracking branch 'origin/master' into shapes-example
Add shapes code block.
Changed code monospace to code window.
index 50a54e8..5b8499f 100644
--- a/content/day-4.txt
+++ b/content/day-4.txt
@@ -2645,7 +2645,7 @@ We also have to change the definition of {Code|main}. Segment no longer takes tw
=
=The result should be exactly like we wanted it to be:
=
-| Monospace
+| Window
= | Tree
= | Axiom
= color = brownMerge branch 'shapes-example' into 'master'
Shapes example
See merge request software-garden/software-garden.gitlab.io!18