Υποενότητα 8.3: Χρώματα

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

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

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

• Δείτε More info about supported colors in p5.js

Για να ορίσουμε το χρώμα του περιγράμματος των στοιχείων 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

Κανόνες χρωματισμού

Για να ορίσουμε το χρώμα των διαφόρων στοιχείων p5.js, είναι σημαντικό να κατανοήσουμε τους κανόνες χρώματος.

Όταν θέλουμε να χρωματίσουμε ένα στοιχείο, πρέπει να εφαρμόσουμε τις κατάλληλες συναρτήσεις πριν από την σχεδίαση του στοιχείου.

Παράδειγμα:

function setup() {
  // create canvas
  createCanvas(800,500);
  // set background color
  background('orange');
}
function draw () {
  fill('red');
  stroke('#f12e78');
  ellipse(width/2,height/2, 50);
  fill('#DC143C');
  stroke('#FFA500');
  ellipse(500,height/2, 50);
}

Result of the above code:

Εάν δεν ορίσουμε κανένα διαφορετικό χρώμα όλα τα στοιχεία που θα σχεδιαστούν μετά από αυτό, θα έχουν τα ίδια χρώματα.

Παράδειγμα:

function setup() {
  // create canvas
  createCanvas(800,500);
  // set background color
  background('orange');
}
function draw () {
  fill('red');
  stroke('#f12e78');
  ellipse(width/2,height/2, 50);
  ellipse(width/2,height/3, 50);
  rect(width/2,height/6, 50,50);
  ellipse(width/4,height/2, 50);
}

Result of the above code:

Αν θέλουμε κάθε συνάρτηση χρώματος να εφαρμοστεί μόνο σε συγκεκριμένα στοιχεία, μπορούμε να τοποθετήσουμε τα στοιχεία μας ανάμεσα στις push() και pop() functions.

Για παράδειγμα, τα παραπάνω μπορούν να τροποποιηθούν ως εξής:

function setup() {
  // create canvas
  createCanvas(800,500);
  // set background color
  background('orange');
}
function draw () {
  push();
  fill('red');
  stroke('#f12e78');
  ellipse(width/2,height/2, 50);
  pop();
  ellipse(width/2,height/3, 50);
  rect(width/2,height/6, 50,50);
  ellipse(width/4,height/2, 50);
}

Result of the above code:

Exercise

1. Open your Visual Studio editor and the p5yourName folder.
2. Open the file ex812.js in your editor and save it as ex832.js
3. Open the file ex812.html in your editor and save it as ex832.html
4. In the ex832.html file, update the link to ex832.js  from exersice812.js
5. Go to the index.html file and create, under Module 8, a link to the ex832.html  file with the title "Color rules".

Modify the ex832.jsfile to apply colors to the face. You can see here an example.

Answer:

function setup() {
  createCanvas(800, 600);
  // set background color
  background('#D66761');
}
function draw() {
  // state the fill color of the shape
  fill('#FBEFCC');
  // state the border color of the shape
  stroke('#FBEFCC');
  // state the border weight of the shape
  strokeWeight(2);
  // create the face ellipse
  ellipse(width/2,height/2,200,300)
  // state the border color of the outer eye circle
  stroke('#A2836E');
  // for the left eye
  // draw the base ellipse, the sclera/“white of the eye”
  ellipse(350,275,50,25);
  // state the border of the iris
  stroke('black');
  // draw the Iris for the eye
  ellipse(350,275,25);
  // fill the center of the eye
  fill('#034F84');
  // color the border
  stroke('#034F84');
  // draw the center of the eye
  ellipse(350,275,12.5);
  // state the border color of the outer eye circle
  stroke('#A2836E');
  // for the right eye
  // draw the base ellipse for the eye, the sclera/“white of the eye”
  noFill();
  ellipse(450,275,50,25);
  // state the border of the iris
  stroke('black');
  // draw the Iris for the eye
  ellipse(450,275,25);
  // fill the center of the eye
  fill('#034F84');
  // color the border
  stroke('#034F84');
  // draw the center of the eye
  ellipse(450,275,12.5);
}

Κάντε μια  Git commit με το μήνυμα "Color rules".

• Δείτε περισσότερα για την push() function
• Δείτε περισσότερα για την pop() function

Διαφάνεια - Alpha value - Transparency

Όταν θέλουμε να καθορίσουμε την τιμή alpha ενός στοιχείου p5.js, ορίζουμε μια τέταρτη τιμή για το χρώμα.

Όσο μικρότερη είναι η τιμή alpha, τόσο πιο διαφανές είναι το στοιχείο.

Παράδειγμα
Ακολουθεί ένα παράδειγμα κώδικα δύο ελλείψεων με διαφορετικές τιμές άλφα:

function setup() {
  // create canvas
  createCanvas(800,500);
  // set background color
  background('#B2B2B2');
}
function draw () {
  //this ellipse will have a low transparency value
  fill (175,68,39,50);
  ellipse(width/2,height/2,100);
  // this ellipse will have a high transparency value
  fill (124,156,39,5);
  ellipse(450,height/2,100);
}

Result of the above code:

Exercise

1. Open your Visual Studio editor and the p5yourName folder.
2. Open the file ex812.js in your editor and save it as ex833.js
3. Open the file ex812.html in your editor and save it as ex833.html
4. In the ex833.html file, update the link to ex833.js  from exersice812.js
5. Go to the index.html file and create, under Module 8, a link to the ex833.html  file with the title "Alpha value".

Modify the ex833.jsfile to create an ellipse which will move horizontally from the left to the right end of the canvas and will change its color and alpha value according to the direction it has. You can see here an example.

Answer:

// create a variable tp control the direction of the ellipse
let control = false;
// make ellipse starting from the left end of the canvas
let i=30;
function setup() {
  // create canvas
  createCanvas(800,500);
  // set background color
  background('#31bc33');
}
function draw () {
  // when ellipse is in the left edge, control would be/become false
  if (i==30) {
    control = false;
  }
  // if ellipse is inside the canvas width (we substract 30 which is the radius
  // of our ellipse) and control is false
  if (i<(width-30) && control==false){
    // state fill and alpha of the ellipse
    fill(146,87,67,40);
    //state stroke color and transparency
    stroke(234,65,88,5);
    i++
    // increase its x position (ellipse moves in the right direction)
    ellipse(i,height/2,60);
  }
  else {
    // else control will change to true
    control = true;
    //change the color and fill of the ellipse
    // state fill and alpha of the ellipse
    fill(56,57,67,100);
    //state stroke color and transparency
    stroke(5,165,188,50);
    // decrease its x position (ellipse moves in the left direction)
    i--;
    ellipse(i,height/2,60);
  }
}

• Κάντε μια  Git commit με το μήνυμα "Alpha values".

  • Δείτε περισσότερα για την alpha() function