218 lines
6.6 KiB
Markdown
218 lines
6.6 KiB
Markdown
# Basics 101
|
|
|
|
## 👋 p5js Editor
|
|
|
|
<p align="center">
|
|
<img src="https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/editor.p5js.png" alt="autopilot creativity" height="650"/>
|
|
</p>
|
|
|
|
## 🤔 How does code work/act?
|
|
|
|
<p align="center">
|
|
<img src="https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/raw/branch/main/img/compiler.svg" alt="autopilot creativity" height="150"/>
|
|
</p>
|
|
|
|
<p align="center">
|
|
<img src="https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/raw/branch/main/img/interpreter.svg" height="150"/>
|
|
</p>
|
|
|
|
## Sketch: 0. Hello World
|
|
|
|
```javascript
|
|
// Hello world!
|
|
// This is a comment
|
|
|
|
function setup() {
|
|
createCanvas(800, 800);
|
|
}
|
|
|
|
function draw() {
|
|
background("yellow");
|
|
print("Hello World"); // see the console below ↓
|
|
}
|
|
```
|
|
|
|
## 🤔 What kind of "Errors"?
|
|
|
|
<p align="center">
|
|
<img src="https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/error.png" height="200"/>
|
|
</p>
|
|
|
|
## Sketch: 1.0 Key Events
|
|
|
|
```javascript
|
|
// Key Events!
|
|
|
|
function setup() {
|
|
createCanvas(800, 800);
|
|
}
|
|
|
|
function draw() {
|
|
background("yellow");
|
|
// Only when keyIsPressed?
|
|
print("Hello World");
|
|
}
|
|
|
|
// Reference: https://p5js.org/reference/
|
|
```
|
|
|
|
### 📚 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/).
|
|
|
|
## Sketch: 1.1 Mouse Events
|
|
|
|
```javascript
|
|
// Mouse Events!
|
|
|
|
function setup() {
|
|
createCanvas(800, 800);
|
|
}
|
|
|
|
function draw() {
|
|
background("yellow");
|
|
if(mouseIsPressed) {
|
|
print("Pressed: " + mouseX + " - " + mouseY) ; // see the console below ↓
|
|
}
|
|
}
|
|
|
|
// this is a special p5 function
|
|
function mouseMoved() {
|
|
print("Moved: " + mouseX + " - " + mouseY) ; // see the console below ↓
|
|
}
|
|
|
|
// Reference: https://p5js.org/reference/
|
|
```
|
|
### 📚 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/).
|
|
|
|
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?
|
|
|
|
## 🤔 What are (x,y) coordinates (in p5js)?
|
|
|
|
<p align="center">
|
|
<img src="https://gitlab.com/aesthetic-programming/book/-/raw/master/source/1-GettingStarted/ch1_11.png" height="450"/>
|
|
</p>
|
|
|
|
## Sketch: 1.2 Variables
|
|
|
|
```javascript
|
|
// Variables!
|
|
|
|
var previous_mouseX_pressed = 0; // global "var" variable
|
|
var previous_mouseY_pressed = 0; // global "var" variable
|
|
|
|
function setup() {
|
|
createCanvas(800, 800);
|
|
}
|
|
|
|
function draw() {
|
|
// background("yellow");
|
|
if(mouseIsPressed) {
|
|
let current_mouseX_pressed = mouseX; // local "let" variable valid within "{" brackets "}"
|
|
let current_mouseY_pressed = mouseY; // local "let" variable valid within "{" brackets "}"
|
|
|
|
print("Pressed: " + current_mouseX_pressed + " - " + current_mouseY_pressed) ;
|
|
|
|
previous_mouseX_pressed = current_mouseX_pressed;
|
|
previous_mouseY_pressed = current_mouseY_pressed;
|
|
}
|
|
}
|
|
|
|
// this is a special p5 function
|
|
function mouseMoved() {
|
|
print("Moved: " + mouseX + " - " + mouseY) ; // see the console below ↓
|
|
}
|
|
|
|
// Reference: https://p5js.org/reference/
|
|
```
|
|
|
|
### 📚 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/).
|
|
|
|
2. Modify the sketch further and try erasing what is drawn each time a key is pressed.
|
|
|
|
### Sketch: 1.3 Distance and Text
|
|
|
|
```javascript
|
|
// Distance and Text!
|
|
|
|
var previous_mouseX_pressed = 0;
|
|
var previous_mouseY_pressed = 0;
|
|
var distance_previous_current = 0;
|
|
|
|
function setup() {
|
|
createCanvas(800, 800);
|
|
}
|
|
|
|
function draw() {
|
|
background("yellow");
|
|
|
|
distance_previous_current = dist(previous_mouseX_pressed, previous_mouseY_pressed, mouseX, mouseY); // calculate distance
|
|
|
|
circle(previous_mouseX_pressed, previous_mouseY_pressed, 5); // draw circle at the previous location
|
|
line(previous_mouseX_pressed, previous_mouseY_pressed, mouseX, mouseY); // draw line between previous and current
|
|
circle(mouseX, mouseY, 5); // draw circle at the current location
|
|
|
|
text(distance_previous_current, mouseX, mouseY); // write distance as text at the current location
|
|
|
|
if(mouseIsPressed) {
|
|
let current_mouseX_pressed = mouseX;
|
|
let current_mouseY_pressed = mouseY;
|
|
|
|
print("Pressed: " + current_mouseX_pressed + " - " + current_mouseY_pressed) ;
|
|
|
|
previous_mouseX_pressed = current_mouseX_pressed;
|
|
previous_mouseY_pressed = current_mouseY_pressed;
|
|
}
|
|
}
|
|
|
|
// Reference: https://p5js.org/reference/
|
|
```
|
|
|
|
### 📚 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
|
|
* Otherwise display "😵💫" as text at the current mouse location and "WOOOOO" at the previous
|
|
|
|
## 🤔 What are conditional statements (i.e. if-statements)?
|
|
|
|
```javascript
|
|
if(conditionX) {
|
|
// if conditionX is true then
|
|
// execute this piece of code {} block
|
|
// then exit the if/else statement
|
|
} else if(conditionY) {
|
|
// if conditionX is false then
|
|
// if conditionY is true then
|
|
// execute this piece of code {} block
|
|
// then exit the if/else statement
|
|
} else if(conditionZ) {
|
|
// if conditionX and conditionY are false then
|
|
// if conditionZ is true then
|
|
// execute this piece of code {} block
|
|
// then exit the if/else statement
|
|
} else {
|
|
// if all of the above conditions are false then
|
|
// execute this piece of code {} block
|
|
// then exit the if/else statement
|
|
}
|
|
```
|
|
|
|
Ok ok, but what are "conditions" 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%"/>
|
|
</p>
|
|
|
|
<p align="center">
|
|
<img src="https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/logic-operators.png" width="100%"/>
|
|
</p>
|
|
|
|
|
|
|