Revisiting-Concepts-Notations-Software-Art/1.Basics.md

Basics 101

👋 P5js Editor

🤔 How does code work/act?

Sketch: 0. Hello World

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

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

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

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