113 lines
2.6 KiB
Markdown
113 lines
2.6 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/
|
|
```
|
|
|
|
## 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/```
|