review
This commit is contained in:
parent
17ab94aed0
commit
3c41d2cbc0
18
1.Basics.md
18
1.Basics.md
@ -58,7 +58,7 @@ function draw() {
|
|||||||
|
|
||||||
### 📚 Exercise
|
### 📚 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
|
## Sketch: 1.1 Mouse Events
|
||||||
|
|
||||||
@ -85,9 +85,9 @@ function mouseMoved() {
|
|||||||
```
|
```
|
||||||
### 📚 Exercises
|
### 📚 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)?
|
## 🤔 What are (x,y) coordinates (in p5js)?
|
||||||
|
|
||||||
@ -130,9 +130,9 @@ function mouseMoved() {
|
|||||||
|
|
||||||
### 📚 Exercises
|
### 📚 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
|
### Sketch: 1.3 Distance and Text
|
||||||
|
|
||||||
@ -175,12 +175,14 @@ function draw() {
|
|||||||
### 📚 Exercise
|
### 📚 Exercise
|
||||||
|
|
||||||
1. Modify sketch 1.3 so that:
|
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 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
|
* 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
|
* Otherwise display "😵💫" as text at the current mouse location and "WOOOOO" at the previous
|
||||||
|
|
||||||
## 🤔 What are conditional statements (i.e. if-statements)?
|
## 🤔 What are conditional statements (i.e. if-statements)?
|
||||||
|
|
||||||
|
Here is the way to express if-statements:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
if(conditionX) {
|
if(conditionX) {
|
||||||
// if conditionX is true then
|
// 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">
|
<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%"/>
|
<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%"/>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user