81 lines
1.8 KiB
Markdown
81 lines
1.8 KiB
Markdown
# Basics 101
|
|
|
|
## 👋 P5js Editor
|
|
|
|
<p align="center">
|
|
<img src="https://git.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://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 ↓
|
|
}
|
|
```
|
|
|
|
## 🤔 What kind of "Errors"?
|
|
|
|
<p align="center">
|
|
<img src="https://git.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(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/
|
|
```
|