# 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/
```
## 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/```