update video embeds

content/courses/computational-art-and-design/showcase/2022/index.md

@@ -15,7 +15,7 @@ url: "courses/computational-art-and-design/showcase/2022-autumn"
 
 I have combined storytelling, Folk Art and AI in this project using p5.js as a medium. I narrate the story in Gujarati language and according to the flow of the story, it plays an animation of the scenes. I have trained the machine learning model using Teachable Machine and sound classification library.
 
-{{<video src="files/poonam/video.mp4">}}
+{{<video src="files/poonam/video">}}
 
 ## An Dang – EPI Data Visualization
 
@@ -26,15 +26,15 @@ represents countries in the world and their rankings on environmental practices.
 small interactive elements supporting the display of information and the code was done
 in Visual Studio Code with p5js library.
 
-{{<video src="files/an/video.mp4">}}
+{{<video src="files/an/video">}}
 
 ## Oonagh Graham – Visual Theremin
 
 [![Final Project, Oonagh](./files/oonagh/image.jpg)](./files/oonagh/image.jpg)
 
 I came to refer to my project as a ‘Visual Theremin’ as the theremin instrument was both genesis and the continuing idea for my creation. The premise was to create an ‘instrument’ with which one would control digital visuals without touching anything. The physical component was fairly simple. It was comprised of two SparkFun distance sensors attached to a plywood base. The sensors were located on different sides of the plywood so that one sensor faced the ceiling and the other faced the left side of the space. To change the readings of the sensors the audience would use a hand over each sensor, varying the distance between the hand and the sensor. These distance readings would be used to control separate elements of the visual component. To indicate and guide the audiences’ movements, I laser cut semi-circular grooves into the plywood. I hoped to create a similar movement from my audience as that of a musician playing a theremin.
 
-{{<video src="files/oonagh/video.mp4">}}
+{{<video src="files/oonagh/video">}}
 
 ## Julia Konttila – Collecting Game
 
@@ -49,7 +49,7 @@ balls before the time runs out they have won the game. The game can be altered t
 different difficulty levels by changing the time in the timer and/or by changing the
 amount of the collectible balls (num, numm, nummm & nummm).
 
-{{<video src="files/julia/video.mp4">}}
+{{<video src="files/julia/video">}}
 
 ## Tianjun Li – NHCo 1.0, an Interactive Sound Visualization Set for Live Music Performance
 
@@ -63,7 +63,7 @@ This work consists of three parts: A Goat in Blue - interactive background visua
 Jellyfish - holographic projection installation and AI generated, naturally sampled and
 human vocalized music.
 
-{{<video src="files/tianjun/video.mp4">}}
+{{<video src="files/tianjun/video">}}
 
 ## Ilona Pakarinen – Vine Builder
 
@@ -75,7 +75,7 @@ buttons create a short line, at the beginning of which is a flower corresponding
 button. The vines will continue to grow from the last point that has been drawn. When space is
 pressed, the vines will begin to grow from the bottom of the screen again.
 
-{{<video src="files/ilona/video.mp4">}}
+{{<video src="files/ilona/video">}}
 
 ## Vera Rantamaa – Lowdown
 
@@ -107,7 +107,7 @@ change when certain keys were pressed, in this case 1 to 4. The interaction caus
 visuals to tile by four next to each other from one screen to 64. Though the graphics are
 visualised using this specific song, it works well with others too.
 
-{{<video src="files/vera/video.mp4">}}
+{{<video src="files/vera/video">}}
 
 ## Burak Türköz – How I Learned to Stop Worrying and Love the Docs
 
@@ -117,7 +117,7 @@ visualised using this specific song, it works well with others too.
 
 You can try out the game [here](/projects/burak).
 
-{{<video src="files/burak/video.mp4">}}
+{{<video src="files/burak/video">}}
 
 ## Yan Zhang – Villanelle---silent sound
 
@@ -127,4 +127,4 @@ Body language is silent but full of emotion. We are used to dancing to music, bu
 
 This is an interaction installation that can be experienced in real time. After the pedal is triggered, the screen starts to show the moving skeleton (nose, wrists, knees) that controlled by people in the form of notes. These notes will stay on the screen at a frequency of once every two seconds recorded to form a piece of score. After ten seconds, the printer automatically prints out the music score for people to keep.
 
-{{<video src="files/yan/video.mp4">}}
+{{<video src="files/yan/video">}}

content/courses/computational-art-and-design/week-02/lesson-01.md

@@ -23,16 +23,16 @@ Sooner or later, you will get stuck, annoyed, frustrated, confused, or some othe
 
 There are two new system variables built into p5js that we are going to need to use this week:
 
-- mouseIsPressed
-- keyIsPressed
+- [mouseIsPressed](https://p5js.org/reference/#/p5/mouseIsPressed)
+- [keyIsPressed](https://p5js.org/reference/#/p5/keyIsPressed)
 
 ## Conditional Statements
 
 A very large part of your code will depend on being able to set rules on when certain pieces of your code will run. That is where conditionals come into play.
 
 ## Comparison Operators
 
-When setting up your conditions for ```if``` statements, you need to compare values in different ways. These are the different comparison operators that we are going to need:
+When setting up your conditions for [`if`](https://p5js.org/reference/#/p5/if-else) statements, you need to compare values in different ways. These are the different comparison operators that we are going to need:
 
 - [Equal: ==](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality) (note the **two** equal signs, don’t mix with assigning values!)
 - [Equal (strict equality): ===](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality) (note the **three** equal signs, this is a JavaScript specialty that checks if the values AND the data types are equal.)
@@ -53,7 +53,7 @@ Do not mix these with the [arrow function =>](https://www.w3schools.com/js/js_ar
 
 [![if statement flowchart](/images/conditional_statements_if.jpg)](/images/conditional_statements_if.jpg)
 
-A very common structure in programming is the “if this then that” structure. You ask the code ```if``` some expression is ```true```, if it is, then we execute a specific block of code.
+A very common structure in programming is the “if this then that” structure. You ask the code `if` some expression is `true`, if it is, then we execute a specific block of code.
 
 ```
 if (condition) {
@@ -63,11 +63,11 @@ if (condition) {
 
 The code inside the curly brackets is the block of code that runs if the condition evaluates to true. Or in JavaScript, I should say when the condition is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
 
-For example, you could ask ```if``` the x position of the mouse is less or greater than a certain value, or you could check if a specific key on the keyboard is pressed, or you could connect a light sensor to your code and trigger a sound file to play when the light level goes below a certain level.
+For example, you could ask `if` the x position of the mouse is less or greater than a certain value, or you could check if a specific key on the keyboard is pressed, or you could connect a light sensor to your code and trigger a sound file to play when the light level goes below a certain level.
 
-A simple way to test how if statements work is to use the mouse. Just like ```mouseX``` and ```mouseY```, ```mouseIsPressed``` is a system variable in p5js. It stores the information if the mouse button is pressed or not. The value is a boolean value, so it is either ```true``` or ```false```.
+A simple way to test how if statements work is to use the mouse. Just like `mouseX` and `mouseY`, `mouseIsPressed` is a system variable in p5js. It stores the information if the mouse button is pressed or not. The value is a boolean value, so it is either `true` or `false`.
 
-The code below will simply print out a message in the console if the mouse button is pressed. If you you put this code inside your ```draw()``` function, the message will be printed as long as you hold down the button.
+The code below will simply print out a message in the console if the mouse button is pressed. If you you put this code inside your `draw()` function, the message will be printed as long as you hold down the button.
 
 ```
 if (mouseIsPressed == true) {
@@ -102,7 +102,7 @@ function draw() {
 
 [![if and else statement flowchart](/images/conditional_statements_if-else.jpg)](/images/conditional_statements_if-else.jpg)
 
-In many cases, just using ```if``` is enough, but you will soon run into situations where it is also necessary to have two different states in your program. That is where ```else``` comes in very handy. Use ```else``` to specify a block of code to be executed if the condition in the previous ```if``` is false.
+In many cases, just using `if` is enough, but you will soon run into situations where it is also necessary to have two different states in your program. That is where `else` comes in very handy. Use `else` to specify a block of code to be executed if the condition in the previous `if` is false.
 
 For example, do two different things depending on if the mouse button is pressed or not.
 
@@ -145,7 +145,7 @@ function draw() {
 This example continues on the previous one with the following additions:
 
 - The size of the brush changes depending on which side of the canvas we draw on
-- We use ```keyIsPressed``` to clear the drawing. You can press any key.
+- We use `keyIsPressed` to clear the drawing. You can press any key.
 - We add some randomness to the color of the brush to make it a bit more interesting.
 
 ```
@@ -185,7 +185,7 @@ function draw() {
 
 ## if/else if/else
 
-If you need to have three or more options, you can use the ```else if```.
+If you need to have three or more options, you can use the `else if`.
 
 [![if, else if, and else statement flowchart](/images/conditional_statements_if-else_if-else.jpg)](/images/conditional_statements_if-else_if-else.jpg)
 
@@ -199,7 +199,7 @@ if (mouseX < width/4) {
 }
 ```
 
-This structure can get a litlle bit confusing. Especially, when you are just starting to work with code. I would recommend using separate if statements for now instead of the ```else if```. 
+This structure can get a litlle bit confusing. Especially, when you are just starting to work with code. I would recommend using separate if statements for now instead of the `else if`. 
 
 ### Example
 
@@ -208,7 +208,7 @@ Coming soon....
 
 ## map()
 
-Another very useful function that we are going to need all the time is the [```map()```](https://p5js.org/reference/#/p5/map) function. It allows you to convert values from one range to another. For example, if you would like to have the mouseX control a color value and you would want to use the full width of your canvas to have an effect on the value.
+Another very useful function that we are going to need all the time is the [`map()`](https://p5js.org/reference/#/p5/map) function. It allows you to convert values from one range to another. For example, if you would like to have the mouseX control a color value and you would want to use the full width of your canvas to have an effect on the value.
 
 
 {{< p5js width="400" height="400">}}

content/courses/computational-art-and-design/week-02/lesson-02.md

@@ -103,9 +103,9 @@ This is how it works:
 ### Example
 
 This example checks what key is pressed and does different things based on the input.
-- Keys ```1``` to ```5``` change the color
-- Keys ```u``` and ```d``` change the size of the brush
-- Pressing ```space``` will clear the drawing
+- Keys `1` to `5` change the color
+- Keys `u` and `d` change the size of the brush
+- Pressing `space` will clear the drawing
 
 <iframe src="https://openprocessing.org/sketch/1382646/embed/?plusEmbedHash=YmEyOWVlNjVjMzQ0NWM2MjgzMzgzMjQ5NzVjMjI0YmZjODY3OGJkYTA3NWQxNzZmNWZhMjhiOWYwMzM5YzA2ZjY3Y2RmZjU4ZGFjZDMwYTY3NDc2NjEyNDVmYzc0ZTNiY2I2NDk5ODAwMTllNzg5YWQzYTdjMjcwNzE3NWJmMmZlRGFJUkJROEs4N3lYWVVpdTlSTFFNVVZhV3U3NmdCaDB6ajdGOWN1bnI4R0VWeDZnQTJGaE85YUVnZVRDRkxYbVhnSWxyN2lEMVVpa0hPYkZpalFmUT09&plusEmbedTitle=true" width="100%" height="400"></iframe>
 
@@ -124,6 +124,14 @@ Using mouseIsPressed and keyIsPressed inside the draw() means that the program l
 
 ## Homework
 
+### Recap
+
+- [map()](https://p5js.org/reference/#/p5/map)
+- [mouseIsPressed](https://p5js.org/reference/#/p5/mouseIsPressed)
+- [keyIsPressed](https://p5js.org/reference/#/p5/keyIsPressed)
+
+### Assignments
+
 Add your version of the bouncing ball sketch to our [Open Processing class](https://openprocessing.org/class/86575). It can just be pretty much the same we did in class, but maybe try adding some of your own flavor to it.
 
 For extra challenge, try the following:

content/courses/computational-art-and-design/week-06/lesson-02.md → content/courses/computational-art-and-design/week-06/lesson-02/index.md

@@ -323,7 +323,7 @@ class Raindrop{
 
 Then we should try to come up with a visual representation of a raindrop that we can draw in p5.js. I will go for a sort of comic book look for the rain: a stretched out rectangle. I used Midjourney to try to create an example of this look.
 
-![Comic book rain](../img/rain.png)
+![Comic book rain](img/rain.png)
 
 We need a ```draw()``` method for our class. The code inside the constructor randomizes the size and the position for the raindrop when it is created.