-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create `if` statement lab. This is our third lab. I've tested it with my daughter Mali (thank you!). She managed to do pretty much all of it by herself with the code hints. The Monte Carlo Pi simulation was the trickiest I think, but that's more intended as a walk through on the facilitators side anyway. The content is on the wordy side but I intend to add some [[ NEXT ]] buttons within the lab notes in the follow up commit.
- Loading branch information
1 parent
e3ec890
commit 6b8caf3
Showing
46 changed files
with
1,313 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
w := 2 | ||
dw := 0.1 | ||
s := 10 | ||
|
||
while true | ||
clear "slategrey" | ||
x := s | ||
y := s | ||
|
||
while x <= 100 - s | ||
while y <= 100 - s | ||
c := hsl 2*x+2*y | ||
fill c | ||
move x-w/2 y-w/2 | ||
rect w w | ||
y = y + s | ||
end | ||
x = x + s | ||
y = s | ||
end | ||
|
||
if w < 2 or w > 8 | ||
dw = -dw | ||
end | ||
w = w + dw | ||
sleep 0.001 | ||
end | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
<h1>🪺🪟 Squares on a Grid</h1> | ||
|
||
<p>Build a static image of the program first.</p> | ||
|
||
<p>Animate it second.</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
blue := (hsl 240 100 50 100) | ||
yellow := (hsl 60 100 50 100) | ||
|
||
color "red" | ||
move 50 50 | ||
circle 30 | ||
|
||
color blue | ||
move 0 0 | ||
rect 50 100 | ||
|
||
color yellow | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
<h1>🌈 Transparent Colors</h1> | ||
<p> | ||
⭐ <strong>Run</strong> the code. Does it make sense to you? Complete it to create the following | ||
drawing: | ||
</p> | ||
<p> | ||
<img src="samples/ifs/img/red-dot-two-squares.svg" alt="simple drawing of circles and squares" /> | ||
</p> | ||
<p> | ||
⭐ Modify the the <strong>Alpha</strong> parameter to the <code>[hsl]</code> function to make the | ||
bottom quadrant grey, like so: | ||
</p> | ||
<p> | ||
<img | ||
src="samples/ifs/img/red-dot-two-squares-alpha.svg" | ||
alt="simple drawing of circles and squares" | ||
/> | ||
</p> | ||
<details> | ||
<summary>Understanding Alpha 📖</summary> | ||
<p> | ||
In the interactive <a href="/docs/builtins.html#hsl"><code>hsl</code></a> function | ||
<a href="#hsl">color explorer</a> We learned how hsl takes four values: hue, saturation, | ||
lightness values to create a color. | ||
</p> | ||
<p> | ||
There is an optional fourth value called <strong>alpha</strong> that controls the transparency | ||
of the color. The alpha value ranges from <code>0</code> to <code>100</code>, where | ||
<code>0</code> is fully transparent and <code>100</code> is fully opaque. | ||
</p> | ||
</details> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
# 🌈 Transparent Colors | ||
|
||
⭐ **Run** the code. Does it make sense to you? Complete it to create the | ||
following drawing: | ||
|
||
![simple drawing of circles and squares](samples/ifs/img/red-dot-two-squares.svg) | ||
|
||
⭐ Modify the the **Alpha** parameter to the `[hsl]` function to make the bottom | ||
quadrant grey, like so: | ||
|
||
![simple drawing of circles and squares](samples/ifs/img/red-dot-two-squares-alpha.svg) | ||
|
||
[`hsl`]: /docs/builtins.html#hsl | ||
|
||
## [>] Understanding Alpha 📖 | ||
|
||
In the interactive [`hsl`] function [color explorer](#hsl) | ||
We learned how hsl takes four values: hue, saturation, lightness values to create a color. | ||
|
||
There is an optional fourth value called **alpha** that controls the transparency of the color. The alpha value ranges from `0` to `100`, where `0` is fully transparent and `100` is fully opaque. | ||
|
||
[`hsl`]: /docs/builtins.html#hsl |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
x:num | ||
x = 10 | ||
s:num | ||
s = 0.4 | ||
width 1 | ||
fill (hsl 0 0 0 3) | ||
stroke "springgreen" | ||
|
||
while true | ||
clear (hsl 0 0 0 4) | ||
move x 50 | ||
circle 10 | ||
x = x + s | ||
if x < 10 or x > 90 | ||
s = -s | ||
end | ||
sleep 0.001 | ||
end | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
<h1>🏓 Bounce</h1> | ||
<p>Hit <strong>Run</strong> and watch the ball bounce!</p> | ||
<h2>Observe the Animation</h2> | ||
<ul> | ||
<li>What shape do you see?</li> | ||
<li>What color is it?</li> | ||
<li>How is the fading effect created?</li> | ||
<li>What concepts from previous labs are being used here?</li> | ||
</ul> | ||
<p>Let's explore further in the interactive <a href="#bounce">Bounce Challenge</a>.</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
# 🏓 Bounce | ||
|
||
Hit **Run** and watch the ball bounce! | ||
|
||
## Observe the Animation | ||
|
||
- What shape do you see? | ||
- What color is it? | ||
- How is the fading effect created? | ||
- What concepts from previous labs are being used here? | ||
|
||
Let's explore further in the interactive [Bounce Challenge](#bounce). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
<h1>🏓 Bouncy Ball Bonus</h1> | ||
<p>⭐ <strong>Your Challenge:</strong> Can you create a bouncing ball animation?</p> | ||
<p> | ||
Check out the <a href="#bounce-show">bouncing ball page 🏓📺</a> or observe the animation below. | ||
</p> | ||
<details> | ||
<summary>Animation demo</summary> | ||
<p><img src="samples/ifs/img/bounce.gif" alt="small centered circle" /></p> | ||
</details> | ||
<h2>Animation notes 🗒</h2> | ||
<ul> | ||
<li>Circle radius: <code>10</code></li> | ||
<li>Outline width: <code>1</code></li> | ||
<li>Outline color (stroke): <code>springgreen</code></li> | ||
<li>Fill color: <code>hsl 0 0 0 3</code></li> | ||
<li>Clear with transparent black: <code>hsl 0 0 0 4</code></li> | ||
<li>Sleep one millisecond</li> | ||
</ul> | ||
<p>⭐ Start by making a single green circle at position <code>0 50</code>.</p> | ||
<p> | ||
⭐ Move the ball horizontally across the screen, like in the | ||
<a href="#move">🟣🚚 Move challenge</a> in the Introduction lab, don't worry about the bounce yet. | ||
</p> | ||
<p> | ||
⭐ Finally, use the reversible increment trick from the <a href="#pulse">Pulse challenge</a> to | ||
change direction at the edges. | ||
</p> | ||
<details> | ||
<summary>Code hint 🧚</summary> | ||
<p>Inside the loop body add:</p> | ||
<pre><code class="language-evy">x = x + inc | ||
if x < 10 or x > 90 | ||
inc = -inc | ||
end | ||
</code></pre> | ||
</details> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
# 🏓 Bouncy Ball Bonus | ||
|
||
⭐ **Your Challenge:** Can you create a bouncing ball animation? | ||
|
||
Check out the [bouncing ball page 🏓📺](#bounce-show) or observe the | ||
animation below. | ||
|
||
<details> | ||
<summary>Animation demo</summary> | ||
<p><img src="samples/ifs/img/bounce.gif" alt="small centered circle" /></p> | ||
</details> | ||
|
||
## Animation notes 🗒 | ||
|
||
- Circle radius: `10` | ||
- Outline width: `1` | ||
- Outline color (stroke): `springgreen` | ||
- Fill color: `hsl 0 0 0 3` | ||
- Clear with transparent black: `hsl 0 0 0 4` | ||
- Sleep one millisecond | ||
|
||
⭐ Start by making a single green circle at position `0 50`. | ||
|
||
⭐ Move the ball horizontally across the screen, like in the | ||
[🟣🚚 Move challenge](#move) in the Introduction lab, don't worry about the bounce yet. | ||
|
||
⭐ Finally, use the reversible increment trick from the | ||
[Pulse challenge](#pulse) to change direction at the edges. | ||
|
||
### [>] Code hint 🧚 | ||
|
||
Inside the loop body add: | ||
|
||
```evy | ||
x = x + inc | ||
if x < 10 or x > 90 | ||
inc = -inc | ||
end | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
print "Do you like cookies?" | ||
answer := read | ||
|
||
if answer == "yes" | ||
print "🍪 Sweet!" | ||
else | ||
print "I'm confused" | ||
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
<h1>💬 Let's Chat</h1> | ||
<p>⭐ <strong>Before you run the code:</strong> Can you predict what will happen?</p> | ||
<p>Now, hit <strong>Run</strong> and see if you were right!</p> | ||
<p>⭐ <strong>Think about it:</strong> What's the purpose of the <code>:=</code> operator?</p> | ||
<details> | ||
<summary><code>:=</code> Declaration with type inference 📖</summary> | ||
<p>In Evy, you can declare a variable and assign it a value in one step using <code>:=</code>.</p> | ||
<p>Instead of</p> | ||
<pre><code class="language-evy">s:string | ||
s = "banana" | ||
</code></pre> | ||
<p>you can use the shortcut</p> | ||
<pre><code class="language-evy">s := "banana" | ||
</code></pre> | ||
</details> | ||
<p> | ||
⭐ <strong>Challenge:</strong> Can you add a different response if the answer is "no"? | ||
Use <code>else if</code> to create an alternative message. | ||
</p> | ||
<details> | ||
<summary>Code hint 🧚</summary> | ||
<pre><code class="language-evy">if answer == "yes" | ||
print "🍪 Sweet!" | ||
else if answer == ❓ | ||
❓❓ | ||
else | ||
print "I'm confused" | ||
end | ||
</code></pre> | ||
</details> | ||
<p>⭐ <strong>Your turn:</strong> Can you create your own chat bot?</p> | ||
<details> | ||
<summary>Some ideas</summary> | ||
<ul> | ||
<li>🍦 Ask about their favorite ice cream flavor instead of cookies.</li> | ||
<li> | ||
🎁 Ask if they want to open a surprise. | ||
<ul> | ||
<li> | ||
If they say <code>"yes"</code>, reveal the surprise (let your imagination run | ||
wild 🐉). | ||
</li> | ||
<li> | ||
If they say <code>"no"</code>, respond with something like "And so it | ||
remains my secret 🔒". | ||
</li> | ||
<li>If they say anything else, respond with "I don't understand."</li> | ||
</ul> | ||
</li> | ||
</ul> | ||
<p> | ||
You could also ask about their favorite color, band, or football team and respond accordingly! | ||
</p> | ||
</details> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
# 💬 Let's Chat | ||
|
||
⭐ **Before you run the code:** Can you predict what will happen? | ||
|
||
Now, hit **Run** and see if you were right! | ||
|
||
⭐ **Think about it:** What's the purpose of the `:=` operator? | ||
|
||
## [>] `:=` Declaration with type inference 📖 | ||
|
||
In Evy, you can declare a variable and assign it a value in one step using `:=`. | ||
|
||
Instead of | ||
|
||
```evy | ||
s:string | ||
s = "banana" | ||
``` | ||
|
||
you can use the shortcut | ||
|
||
```evy | ||
s := "banana" | ||
``` | ||
|
||
--- | ||
|
||
⭐ **Challenge:** Can you add a different response if the answer is "no"? Use | ||
`else if` to create an alternative message. | ||
|
||
### [>] Code hint 🧚 | ||
|
||
```evy | ||
if answer == "yes" | ||
print "🍪 Sweet!" | ||
else if answer == ❓ | ||
❓❓ | ||
else | ||
print "I'm confused" | ||
end | ||
``` | ||
|
||
--- | ||
|
||
⭐ **Your turn:** Can you create your own chat bot? | ||
|
||
### [>] Some ideas | ||
|
||
- 🍦 Ask about their favorite ice cream flavor instead of cookies. | ||
- 🎁 Ask if they want to open a surprise. | ||
- If they say `"yes"`, reveal the surprise (let your imagination run wild 🐉). | ||
- If they say `"no"`, respond with something like "And so it remains my secret | ||
🔒". | ||
- If they say anything else, respond with "I don't understand." | ||
|
||
You could also ask about their favorite color, band, or football team and | ||
respond accordingly! |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
width 1 | ||
clear "black" | ||
fill "none" | ||
stroke "blue" | ||
move 50 50 | ||
circle 1 |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
width 1 | ||
clear "black" | ||
fill "none" | ||
stroke "blue" | ||
move 50 50 | ||
|
||
r := 1 | ||
while r < 45 | ||
circle r | ||
r = r + 2 | ||
end |
Oops, something went wrong.