# Basics 101
## 👋 P5js Editor
## 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/
```