Επόμενο

Συναρτήσεις χρωματισμού - Color functions

Για να εφαρμόσουμε χρώμα στα στοιχεία p5.js χρησιμοποιούμε τη fill () function.

Μπορούμε να γράψουμε χρώματα σε οποιοδήποτε RGB, RGBA, Hex και υποστηριζόμενες συμβολοσειρές χρώματος.

Για να ορίσουμε το χρώμα του περιγράμματος των στοιχείων p5.js χρησιμοποιούμε τη  stroke() function. 

Μπορούμε να αυξήσουμε ή να μειώσουμε το βάρος των περιγραμμάτων χρησιμοποιώντας τη  strokeWeight() function. 

Εάν δεν θέλουμε να γεμιστούν τα στοιχεία μας, χρησιμοποιούμε noFill()function, ενώ αν δεν θέλουμε να έχουν περιγράμματα χρησιμοποιούμε  noStroke()

Παράδειγμα
Ακολουθεί ένα παράδειγμα όπου χρησιμοποιούνται όλες οι παραπάνω λειτουργίες:

function setup() {
  // create canvas
  createCanvas(800,500);
  }
function draw () {
  // set background color
  background('#B1CBBB');
  //use the fill function to color the triangle
  fill('#EEA29A');
  // use the noStroke function to remove border
  noStroke();
  triangle(width/2,height/2,500,400,300,400);
  // use the noFill function to remove the fill of our element
  noFill();
  // use the stroke to change the color of the border
  stroke('#D64161');
  // use the strokeWeight to change the border weight
  strokeWeight(5);
  triangle(width/2,height/2,500,100,300,100);
}

Result of the above code:

  • Δείτε περισσότερα για τη fill() function
  • Δείτε περισσότερα για τη noFill() function
  • Δείτε περισσότερα για τη stroke() function
  • Δείτε περισσότερα για τη noStroke() function
  • Δείτε περισσότερα για τη strokeWeight() function
Επόμενο