gauthiier/Revisiting-Concepts-Notations-Software-Art
gauthiier/Revisiting-Concepts-Notations-Software-Art
1
0
Fork 0
Code Packages Projects Releases Activity

review

Browse Source
This commit is contained in:
gauthiier 2023-12-18 07:24:04 +01:00
parent 17ab94aed0
commit 3c41d2cbc0
1 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
1.Basics.md
View File

@ -58,7 +58,7 @@ function draw() {
### 📚 Exercise
1. Modify the sketch 1.0 so that "Hello World" is printed only when a key is pressed. To do so have a look at [p5js reference](Reference: https://p5js.org/reference/).
1. Modify the sketch 1.0 so that "Hello World" is printed only when a key is pressed. To do so have a look at the [p5js reference](https://p5js.org/reference/)
## Sketch: 1.1 Mouse Events
@ -85,9 +85,9 @@ function mouseMoved() {
```
### 📚 Exercises
1. Modify sketch 1.1 so that a circle is draw on the screen at the location where the mouse is each time it moves. To do so have a look at [p5js reference](Reference: https://p5js.org/reference/).
1. Modify sketch 1.1 so that a circle is drawn on the canvas at the location where the mouse is located each time it moves. To do so have a look at [p5js reference](Reference: https://p5js.org/reference/).
2. What can you observe with the circle being drawn on the screen? Can you modify the sketch so that a trace of the movement on the mouse stay on the screen and erase this trace when the mouse is pressed?
2. What can you observe with the circle being drawn on the canvas? Can you modify the sketch so that a trace of the movement of the mouse stay on the canvas and erase itself when the mouse is pressed?
## 🤔 What are (x,y) coordinates (in p5js)?
@ -130,9 +130,9 @@ function mouseMoved() {
### 📚 Exercises
1. Modify sketch 1.2 so that a line is drawn between the location of current mouse press and the previous location. To do so have a look at [p5js reference](Reference: https://p5js.org/reference/).
1. Modify sketch 1.2 so that a line is drawn between the location of the current mouse press and the previous location. To do so have a look at [p5js reference](Reference: https://p5js.org/reference/).
2. Modify the sketch further and try erasing what is drawn each time a key is pressed.
2. Modify the sketch further and try erasing what is drawn on the canvas each time a key is pressed.
### Sketch: 1.3 Distance and Text
@ -175,12 +175,14 @@ function draw() {
### 📚 Exercise
1. Modify sketch 1.3 so that:
* if the calculated distance between the previous and current mouse pressed locations is less than 300 then display "🍕" as text at the current mouse location and "PIZZA" at the previous
* if the calculated distance between the previous and current mouse pressed locations is less than 600 then display "🍍" as text at the current mouse location and "ANANAS" at the previous
* if the calculated distance between the previous and current mouse pressed locations is less than 300 then display "🍕" as text at the current mouse location and "PIZZA" at the previous location
* if the calculated distance between the previous and current mouse pressed locations is less than 600 then display "🍍" as text at the current mouse location and "ANANAS" at the previous location
* Otherwise display "😵‍💫" as text at the current mouse location and "WOOOOO" at the previous
## 🤔 What are conditional statements (i.e. if-statements)?
Here is the way to express if-statements:
```javascript
if(conditionX) {
// if conditionX is true then
@ -203,7 +205,7 @@ if(conditionX) {
}
```
Ok ok, but what are "conditions" then?
Ok, but what are "conditions" (i.e. conditionX, conditionY, conditionZ, etc.) then?
<p align="center">
<img src="https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/comp-operators.png" width="100%"/>