# Basics 101
## 👋 p5js Editor
## 🤔 How does code work/act?
## 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 ↓
}
```
## 🤔 What kind of "Errors"?
## 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/
```
## 🤔 What are (x,y) coordinates (in p5js)?
## 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(400, 400);
}
function draw() {
// background(220);
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/
```
### Sketch: 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(400, 400);
}
function draw() {
background(220);
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/
```