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

# Basics 101

<p align="center">
<img src="https://git.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://git.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(400, 400);
}

function draw() {
  background(220);
  print("Hello World");          // see the console below ↓
}
```

## Sketch: 1.0 Key Events

```javascript
// Key Events!

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  // Only when keyIsPressed? 
  print("Hello World");
}

// Reference: https://p5js.org/reference/
```
## Sketch: 1.1 Mouse Events

```javascript
// Mouse Events!

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  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/
```