Εισαγωγή (2/2): Γνωριμία με την p5.js

Η p5.js είναι μια βιβλιοθήκη που αποτελεί την μεταφορά της γλώσσας Processing στην javascript.

Η p5.js μας βοηθάει να σχεδιάζουμε , να εκτυπώνουμε κείμενα , να δημιουργήσουμε ήχους, να αλληλεπιδρούμε με περιφερειακά του υπολογιστή και άλλα πολλά με τη χρήση της javascript.

Για την συγγραφή του κώδικα δεν θα χρησιμοποιήσουμε ούτε text editor , ουτε κάποιο IDE αλλά θα γράψουμε το πρόγραμμα μας απευθείας επάνω στον web code editor που μας δίνει η p5.js

editor.p5js.org

Είναι πολύ εύκολο να πλοηγηθείτε σε αυτόν τον code editor.

Επάνω θα βρείτε τα δύο βασικά κουμπιά του editor το Play και το Stop που χρησιμεύουν για την εκκίνηση και τον τερματισμό του script μας.

Αριστερά εχουμε την περιοχή που θα γράψουμε τον κώδικά μας και ακριβώς από κάτω βρίσκεται η κονσόλα για να κανουμε debug.

Ακριβώς από κάτω από την περιοχή του κώδικα μας υπάρχει ένα παραθυράκι το οποίο είναι η κονσόλα (console), στην οποία μπορούμε να κάνουμε log

Δεξιά βρίσκεται η προεπισκόπηση του κώδικά μας και λειτουργεί ως ένα canvas πάνω στο οποίο μπορούμε ,εκτός των άλλων, να σχεδιάσουμε με την Processing.

Τέλος υπάρχει ένα πολύ μικρό και διακριτικό βελάκι που δείχνει προς τα δεξιά και βρίσκεται επάνω δεξιά , ακριβώς κάτω από το κουμπί Play. Αυτό το βελάκι αν το πατήσεις εμφανίζεται ο file explorer του project μας που τρέχουμε στον editor.

Μόλις ανοίξουμε τον code editor της p5.js θα δούμε ότι δημιουργείται ένα νέο έγγραφο με τον εξής κώδικα:

function setup() {
  createCanvas(400, 400);
  background(220);
}
function draw() {
}

Οι μέθοδοι setup() και draw() είναι δύο απαραίτητες μέθοδοι που χρησιμοποιεί η Processing για να λειτουργήσει.

Η setup() εκτελείται μία φορά μόνο, κατα την αρχή της εκτέλεσης ενώ η draw() καλείται σε κάθε κύκλο του main loop της Processing, δηλαδή αρκετές φορές το δευτερόλεπτο.

Δείτε περισσότερα για την setup() εδώ | Δείτε περισσότερα για την draw() εδώ

Οι εντολές που υπάρχουν στο νεο script είναι απλές εντολές της Processing/p5js. Η πρώτη , createCanvas(400,400) δημιουργεί ένα canvas πάνω στο dom στα πλαίσια του οποίου μπορούμε να δημιουργήσουμε με την p5. Οι παράμετροι (400 ,400) είναι οι διαστάσεις σε pixels του canvas. 

Η δεύτερη εντολή είναι η background(255) η οποία λέει στην p5 να χρωματίσει το background του canvas σε rgb(255,255,255).

Παρακάτω θα δούμε ένα παράδειγμα του πως ζωγραφίζουμε στην p5. Ο κώδικας είναι πολύ απλός

function setup() {
  createCanvas(400, 200);
  background(220);

  //circle
  stroke(0);
  noFill();
  ellipse(100, 100, 24);
  //disc
  stroke(5);
  fill(255);
  ellipse(150, 100, 24);

  //text
  fill(0);
  noStroke();
  textAlign(CENTER, CENTER);
  text("Hello World";, 200, 100);
}
function draw() {
}

Και το αποτέλεσμα είναι το εξής:

Δείτε στο p5 editor

Ένα άλλο παράδειγμα είναι το πως μπορούμε να αναπαράγουμε ήχο

function setup() {
  let wave;
  wave = new p5.Oscillator();
  wave.setType('sine');
  wave.freq(440);
  wave.amp(1);
  wave.start();
}

Για να αναπαράξουμε μια συχνότητα στην p5 αρκει να δημιουργήσουμε ένα αντικείμενο τύπου ταλαντωτή (oscillator), να ορίσουμε το είδος της ταλάντωσης (sine), την συχνότητα (440) και την ένταση (1).

Μόλις εκτελεστεί η εντολή start() ξεκινάει και η αναπαραγωγή του ήχου.

Δείτε στο p5 editor

Ακόμα πιο ενδιαφέροντα γίνονται τα πράγματα όταν προσθέσουμε ένα ADSR envelope. Όσοι γνωρίζουν από μουσικά synthesizers είναι εξοικειωμένοι με αυτόν τον όρο, οι υπόλοιποι ας ανατρέξουν λίγο στο reference της p5.

function setup() {
  let env, wave;
  env = new p5.Envelope();
  env.setADSR(0.05, 0.1, 0.5, 1);
  env.setRange(1.2, 0);

  wave = new p5.Oscillator();
  wave.setType('sine');
  wave.freq(440);
  wave.amp(env);
  wave.start();
  env.play()
}

Εδώ θέτουμε την ένταση του κύματος να είναι ίση με το ADSR envelope μας ( wave.amp(env) ). Κάθε φορά που θέλουμε να αναπαράγουμε το adsr μας καλούμε την εντολή env.play()

Δείτε στο p5 editor