Revisiting-Concepts-Notations-Software-Art/1.Basics.md

# 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 the [p5js 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 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 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)?

<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 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 on the canvas 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 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
	// 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, 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%"/>	
</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>