Commits: 3
Put slides back in MD file for easier editing
Also make Git ignore Emacs temporary files.
Co-Authored-By: Sam Phillips samuel.rodney.phillips@gmail.com
index 0c19f1d..1cf77ef 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
=/elm-stuff
=/**/.DS_Store
=*.swp
+.#*index a2ea019..5704253 100644
--- a/index.md
+++ b/index.md
@@ -6,7 +6,45 @@ presentation:
=
=<!-- slide -->
=
-# FP-Art!
+## Conspect
+
+- Setup the development environment
+
+ - Elm
+
+ - Node.js
+
+ why?
+
+ - Test REPL (2 + 2)
+
+ - Atom
+
+
+
+- Setup the project
+
+ Do we want source control?
+
+ - Create directory
+
+ - `elm init`
+
+ - Open a file in the editor
+
+ - Type hello world program
+
+ - Elm Reactor
+
+ - Web browser
+
+
+
+
+
+<!-- slide -->
+
+# Software Garden
=## A functional programming workshop
=### for non-programmers
=
@@ -29,14 +67,34 @@ presentation:
=We will need:
=
=- a text editor (I use [Atom][])
-- and [Elm programming language][]
+- and the [Elm programming language][]
=
=[Atom]: https://atom.io/
=[Elm programming language]: https://elm-lang.org/
=
=<!-- slide -->
=
-We will use the terminal a little bit.
+### Elm Installation
+
+<!-- slide -->
+
+To install the Elm programming language, go to it's website:
+
+http://elm-lang.org/
+
+and follow the installation instructions.
+
+<!-- slide -->
+
+Some of the tools we use with Elm require Node.js.
+
+Go to the [Node.js website][Node.js] and install the current version (the green button on the right).
+
+[Node.js]: https://nodejs.org/en/
+
+<!-- slide -->
+
+We will need to use the terminal a little bit.
=
=# :fa-terminal:
=
@@ -44,13 +102,17 @@ Don't be scared. It's easy :)
=
=<!-- slide data-background-image="images/mac-launchpad-terminal.png" data-background-size="cover" data-background-position="top center"-->
=
-> <p style="color: white">In Launchpad find a program called <code>terminal</code> and start it.</p>
+<p style="color: white">
+ In Launchpad find a program called <code>terminal</code> and start it.
+</p>
=
=<!-- slide -->
=
=You should see a window like this
=
-<img class="plain" alt="Mac Terminal app window" src="images/mac-terminal-window.png" />
+<!-- slide -->
+
+<img alt="Mac Terminal app window" src="../assets/mac-terminal-window.png" class="plain"/>
=
=<!-- slide -->
=
@@ -185,7 +247,6 @@ apm install language-elm
=
=<!-- slide -->
=
-
=# First program!
=
=<!-- slide -->
@@ -236,7 +297,7 @@ atom src/Main.elm
=
=<small>This command should open a new Atom window with empty text file.</small>
=
-<!-- slide data-transition=zoom -->
+<!-- slide -->
=
=### `main.elm`
=
@@ -308,7 +369,21 @@ elm reactor
=
=<small>you can press up arrow :fa-arrow-up: on the keyboard to get to previous commands</small>
=
+
+<!-- slide -->
+
+Move sliders to change the `x` and `y` coordinates of the dot. It's like moving a thing on a table by telling how far left, right, up or down should it go.
+
+`<CartesianCoordinates program>`
+
=<!-- slide -->
=
-<iframe id="cartesian" data-src="./CartesianCoordinates.html" class="stretch">
-</iframe>
+Move sliders to change the `angle` and `length` properties of the line connecting the dot and origin. The x and y coordinates will be calculated like this:
+
+```
+x = cos(angle) * length
+y = sin(angle) * length
+```
+
+
+`<PolarCoordinates program>`Work on outline for slides
index 5704253..334b686 100644
--- a/index.md
+++ b/index.md
@@ -39,6 +39,236 @@ presentation:
= - Web browser
=
=
+- Let's make a dot!
+
+ - Introduce a problem: We want to have a dot on the screen
+
+ - Show complete code
+
+ - Explain:
+
+ The dot has a position (x + y coordinates) and size (radius)
+
+ Coordinate planes: we can use CartesianCoordinates
+
+ - Introduce SVG
+
+
+- Give a color to the dot
+
+ - Explain SVG attributes (svg elements take a list of attributes)
+
+ - Everyone can pick a color
+
+
+- Multiple dots
+
+ - Introduce a problem: We want to have two dots on the screen
+
+ - Explain a list, and show there is already a list there (with one item)
+
+ Do you see any other lists?
+
+ - Element takes a list of children
+
+ - Mention, how can we have a list with one or zero elements? Shopping list with one one item. Empty spoon drawer (list of spoons)
+
+ - Give your new dot a color and different coordinates
+
+ - Show the code for 2 dots
+
+ - Exercise: make 3 more dots (5 total)
+
+
+- Place the dots in a circle
+
+ - Introduce a problem: We want to place the dots in a circle: show an example in the slides
+
+ - How we will get there: we will change the cartesian coordinates of the dots, nothing else! But figuring out the right coordinates is a bit tricky
+
+ - How can we figure out the correct cartesian coordinates?
+
+ - Story about the flowerpot and the table: two ways to measure relative position, one is distance from a x and y axis (cartesian coordinates), the other is angle and distance relative to origin (polar coordinates)
+
+ - What does this have to do with a circle? Do you know the expression 'I did a 180'. Where would you be looking if you did two 180s (a "360"). We see that circles and angles are closely related!
+
+ - Exercise with compass and 5 objects, place objects evenly along compass. How many degrees apart are they? (observe if we multiply the result by 5, we're back to 360)
+
+ - We have one part of it (angle), we now need the distance. Notice they are all the same distance from the origin (the center dot) of the compass. Definition of circle: points that are an equal distance from a center. Actually, the distance doesn't matter, so long as they all have the same distance. You can have a big circle or a small circle, they're both circles
+
+ - Ok great, we're done! Now, does anyone know how to give an angle and distance to svg? Oh... no? We don't either... you can't. You can only give x and y values relative to the origin
+
+ - So we already know that angle and length are just another way of describing x and y. But we need some way of translating between the two
+
+ Using a visual demonstration, if you draw a line from your object to the x axis, you have a triangle. Same if you draw a line to the y axis. You can figure out the point on the axis using sin and cos functions and multiplying the result by the length.
+
+ Let's use a chart to figure out the sin and cos of our angles
+
+ *It's important to get a chart, otherwise we have to use calculators which work with radians*
+
+ - Now we are done... we can plug in our x and y values, and presto, our dots are arranged in a circle. But we don't see most of them...
+
+ - Our origin is in the top left corner. This means any dots with negative x or y values are off the screen.
+
+ We can shift the dots so they are on the screen, or shift the screen so that it covers the dots. We will be shifting the screen
+
+ Sample viewbox program to demonstrate
+
+ Create a viewbox with correct perimeters (must be more than the radius of the circle plus the radius of a dot in each direction, and width and height are circumference)
+
+
+- Let the computer do the math
+
+ - Introduce the problem: Can we avoid all these repetitive and manual steps?
+
+ - What is a program made of? (in the REPL):
+
+ - Values and names
+
+ ```
+ 5
+ 10.4
+ "Hello World"
+ [1, 2, 3, 4, 5]
+ ```
+
+ Numbers, strings, lists containing numbers and strings are all values. They are self-referential. The simply state what they are. There are other kinds of values that we will see later.
+
+
+ You can give (or assign) a name to a value, as shown.
+
+ ```
+ family = 5
+ price = 10.4
+ morningGreeting = "Hello World"
+ fingers = [1, 2, 3, 4, 5]
+ ```
+
+ Here, `family` is a name and `5` is the value assigned to `family`.
+
+ You can get the value back by calling its name.
+
+ ```
+ ---- Elm 0.19.0 ----------------------------------------------------------------
+ Read <https://elm-lang.org/0.19.0/repl> to learn more: exit, help, imports, etc.
+ --------------------------------------------------------------------------------
+ > family = 5
+ 5 : number
+ > family
+ 5 : number
+ ```
+
+ - Operators (+, -, ++)
+
+ ```
+ > 2 + 5
+ 7 : number
+ ```
+
+ ```
+ > 4 - 6
+ -2 : number
+ ```
+
+ ```
+ > "Hello" ++ " world!"
+ "Hello world!" : String
+ ```
+
+ ```
+ > 1 :: [2, 3, 4, 5]
+ [1,2,3,4,5] : List number
+ ```
+
+ Operators take two values and return a new value. We know that names refer to values, so we can use them in place of values:
+
+ ```
+ > family = 5
+ 5 : number
+ > family + 2
+ 7 : number
+ ```
+
+ You can also give a name to the value returned by an operator:
+
+ ```
+ > family = 5
+ 5 : number
+ > familyAndPets = family + 2
+ 7 : number
+ > familyAndPets
+ 7 : number
+ ```
+
+ Note that different values have different types.
+
+ ```
+ 5 : number
+ 10.4 : Float
+ "Hello World" : String
+ [1,2,3,4,5] : List number
+ ```
+ Different operators work on different types. Adding a number and a string doesn't make sense. So if you try, Elm will complain (and give a helpful hint):
+
+ ```
+ > "Hello " + 5
+ -- TYPE MISMATCH ----------------------------------------------------------- elm
+
+ I cannot do addition with String values like this one:
+
+ 5| "Hello " + 5
+ ^^^^^^^^
+ The (+) operator only works with Int and Float values.
+
+ Hint: Switch to the (++) operator to append strings!
+ ```
+
+ (Int and Float are both types representing numbers)
+
+
+ - Functions
+
+ ```elm
+ fun something = something ++ " is fun."
+ ```
+
+ Mention that operators are really functions:
+
+ ```elm
+ (-) 5 10
+ 5 - 10
+ ```
+
+ - Exercise: In our Main.elm, try to identify some values, names and functions:
+
+ Hint: `"darkred"` is a value, `main` is a name, `width` is a function.
+
+ - Where can we use some functions?
+
+ - Apply to our trigonometry calculations
+
+ - Compose and copy and paste the trigonometry functions to calculate cx and cy:
+
+ ```elm
+ (String.fromFloat (sin (degrees 72) * 100))
+ (String.fromFloat (cos (degrees 72) * 100))
+ ```
+
+ - Eliminate repetition:
+
+ - define and reuse radius (100)
+
+ - define and reuse `x : angle -> cx` and `y : angle -> cy`
+
+ - define and reuse `dot : angle -> color -> Svg`
+
+ - Make it more general
+
+ - Show List and list operations (map and indexedMap)
+
+ - Make a `palette : List color`
+
+ - Use `List.indexedMap dot palette` to generate the dots
=
=
=Add more to the conspect
Co-Authored-By: Sam Phillips samuel.rodney.phillips@gmail.com
index 334b686..936c34e 100644
--- a/index.md
+++ b/index.md
@@ -132,8 +132,7 @@ presentation:
= [1, 2, 3, 4, 5]
= ```
=
- Numbers, strings, lists containing numbers and strings are all values. They are self-referential. The simply state what they are. There are other kinds of values that we will see later.
-
+ Numbers, strings, lists containing numbers and strings are all values. They are self-referential. They simply state what they are. There are other kinds of values that we will see later.
=
= You can give (or assign) a name to a value, as shown.
=
@@ -232,36 +231,146 @@ presentation:
= fun something = something ++ " is fun."
= ```
=
- Mention that operators are really functions:
+ Explain: a function is a thing that takes some values (called arguments) and return one value. So it's similar to operators. In fact operators are functions!
=
= ```elm
= (-) 5 10
= 5 - 10
= ```
=
- - Exercise: In our Main.elm, try to identify some values, names and functions:
+ You can think of a function as a machine. You put something in the machine, and it produces something in return. For example think about a machine that produces rubber ducks. You put a bucket of white plastic pellets and a bucket of red paint, and you get a bunch of red rubber ducks!
+
+ What you get will depends on what you put. The color of the ducks depends on the paint you put. Quantity of ducks depends on how much plastic you put in.
+
+ ```elm
+ makeMeSomeDucks color plastic =
+ String.fromInt plastic ++ " " ++ color ++ " rubber ducks"
+ ```
+
+ Once you have a function, you can call it like this:
+
+ ```elm
+ > makeMeSomeDucks "blue" 12
+ "12 blue rubber ducks" : String
+ ```
+
+ Note: functions help organize code into nice reusable chunks.
+
+ How do you get functions? There are three ways.
+
+ 1. Some functions are always there for you, e.g. `(+)`, `(-)`
+
+ 2. Some functions you can import using code like this:
+
+ ```elm
+ import Svg
+ ```
+
+ and then
+
+ ```
+ Svg.circle [ cx "10", cy "10", r "20" ] [ ]
+ ```
+
+ To call a function that was imported, you have to prefix it with the name of the module (in this example `Svg`).
+
+ 3. Finally, you will write some functions, just like we saw in the `fun` and `makeMeSomeDucks` examples.
+
+
+ Finally there is one special thing: the first line of the program is a module declaration. For now it's enough for us to know, that it has to be there and it has to match the name of the file.
+
+ - Exercise: In our Main.elm, try to identify some values, names and function calls:
=
= Hint: `"darkred"` is a value, `main` is a name, `width` is a function.
=
+ Hint: There is nothing else there now, but we will soon introduce our own functions.
+
= - Where can we use some functions?
=
+ As we said before, functions are good when we have some repetitive operation that can be parametrized (like rubber ducks production).
+
+ Obviously calculating `x` and `y` coordinates is repetitive and can be parametrized (parameters are `radius` and `angle`).
+
= - Apply to our trigonometry calculations
=
= - Compose and copy and paste the trigonometry functions to calculate cx and cy:
=
= ```elm
- (String.fromFloat (sin (degrees 72) * 100))
- (String.fromFloat (cos (degrees 72) * 100))
+ cx (String.fromFloat (cos (degrees 72) * 100))
+ cy (String.fromFloat (sin (degrees 72) * 100))
= ```
=
= - Eliminate repetition:
=
= - define and reuse radius (100)
=
+ Assign a value of `100` to a name `radius`:
+
+ ```
+ radius = 100
+ ```
+
+ and plug it to our functions:
+
+ ```elm
+ cx (String.fromFloat (cos (degrees 72) * radius))
+ cy (String.fromFloat (sin (degrees 72) * radius))
+ ```
+
+ As you see the names are good for repetitive things too.
+
= - define and reuse `x : angle -> cx` and `y : angle -> cy`
=
+
+ ```elm
+ x angle =
+ String.fromFloat (cos (degrees angle) * radius)
+ ```
+
+ ```elm
+ y angle =
+ String.fromFloat (sin (degrees angle) * radius)
+ ```
+
+ Then plug it into the code making circles:
+
+ ```elm
+ circle
+ [ cx (x 72)
+ , cy (y 72)
+ , r "10"
+ , fill "darkred"
+ ]
+ ```
+
= - define and reuse `dot : angle -> color -> Svg`
=
+
+ ```elm
+ dot angle color =
+ circle
+ [ cx (x 72)
+ , cy (y 72)
+ , r "10"
+ , fill color
+ ]
+ ```
+
+ and plug it into our SVG picture:
+
+
+ ```
+ svg [ viewbox "-100 -100 200 200" ]
+ [ dot 0 "darkred"
+ , dot 288 "gold"
+ , dot 72 "fuchsia"
+ , dot 144 "saddlebrown"
+ , dot 216 "deepskyblue"
+ ]
+ ```
+
+ Want some more cool color inspiration. Check out https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords
+
= - Make it more general
=
= - Show List and list operations (map and indexedMap)