ΠΛΗΡΟΦΟΡΙΚΗ Β4

Θέλουμε να φτιάξουμε μια εφαρμογή PAINT, η οποία θα έχει τουλάχιστον τις εξής λειτουργίες:
1. Αύξηση κ μείωση πάχους γραμμής
2. Αλλαγή χρώματος γραμμής (τουλάχιστον 2 χρώματα)
3. Σβήσιμο ολόκληρης της ζωγραφιάς
4. Σβήσιμο σταδιακά (σαν γόμα)

Η ζωγραφική θα γίνεται όσο μετακινούμε το ποντίκι με πατημένο το αριστερό πλήκτρο.
Για τις λειτουργίες του PAINT θα υλοποιήσουμε ισάριθμα κουμπιά, σαν αντικείμενα.

ΒΗΜΑ 1ο - Ζωγραφική ...χωρίς τέλος

Ο τρόπος να δημιουργηθεί μία γραμμή είναι να ενώνουμε συνεχώς την τρέχουσα θέση του ποντικιού (mouseX, mouseY) με την ακριβώς προηγούμενη θέση του ποντικιού (pmouseX, pmouseY).

void setup()
{
  size(800, 600);
  background(0);
}


void draw()
{
    line(mouseX, mouseY, pmouseX, pmouseY);
}



ΒΗΜΑ 2ο - Η ζωγραφική να σταματάει ...

Θα ορίσουμε την μεταβλητή shouldWrite, η οποία όταν θέλουμε να ζωγραφίζουμε θα γίνεται true, κι όταν πρέπει να σταματήσει η ζωγραφική θα γίνεται false. Αρχικά θα είναι false.

boolean shouldWrite = false;

Mέσα στην draw(), η εντολή line() θα εκτελείται ή όχι ανάλογα με την τιμή της shouldWrite.

 if (shouldWrite == true)
    line(mouseX, mouseY, pmouseX, pmouseY);

Πότε και που θα αλλάζει τιμή η shouldWrite?

Όταν πατάμε κ ξεπατάμε το ποντίκι. Άρα προσθέτουμε κώδικα στα events mousePressed() και mouseReleased().

void mousePressed()
{
  shouldWrite = true;
}

void mouseReleased()
{
  shouldWrite = false;
}
 
BHMA 3o - Δημιουργούμε τo class Button: Χαρακτηριστικά και κατασκευαστής

Τα κουμπιά θα έχουν τετράγωνο σχήμα. Άρα, τα χαρακτηριστικά ενός κουμπιού είναι η θέση (x, y) της πάνω αριστερής γωνίας, το μήκος της πλευράς (size) και το χρώμα (xroma).

class Button
{
  int x, y, size;    // Οι ιδιότητες του button
  color xroma;
 
  // Ο κατασκευαστής
  Button(int px, int py, int psize, color pxroma)
  {
    x = px;
    y = py;
    size = psize;
    xroma = pxroma;
  }
 
} // εδώ κλείνει το class


ΒΗΜΑ 4ο - Προσθέτουμε την πρώτη ικανότητα στο Button: να εμφανίζεται

void display()
{
    fill(xroma);
    noStroke();
    rect(x, y, size, size);
}

Αυτός ο κώδικας θα μπει μέσα στο class, μετά τον κατασκευαστή.

ΒΗΜΑ 5ο - Προσθέτουμε μία ακόμα ικανότητα στο Button: να μας απαντάει αν το ποντίκι είναι από πάνω του

Ο τρόπος να απαντάει το Button είναι να κάνει μια μικρή δουλειά (δηλ. κάποιον έλεγχο) και μετά να επιστρέφει την τιμή true ή την τιμή false, να "μιλάει" κατά κάποιο τρόπο κ να λέει "true" ή "false".

Ο τρόπος που έχει ένας κώδικας να "μιλάει" είναι η εντολή return(). Και όπως παρατηρείτε, μπροστά από το overlap() δεν υπάρχει πλέον η λέξη void, αλλά η λέξη boolean.

Αυτό δείχνει ότι όταν γίνει ο κώδικας της overlap(), αυτή θα μας απαντήσει με μια λογική τιμή (true ή false).

boolean overlap()
{
    if (mouseX >= x && mouseX <= x+size && mouseY >= y && mouseY <= y+size)
      return(true);
    else
      return(false);
}



ΒΗΜΑ 6ο - Δημιουργία και εμφάνιση πραγματικών κουμπιών μέσα στην εφαρμογή

Αρχικά (πάνω πάνω) δηλώνουμε τα ονόματα των αντικειμένων

Button b1, b2, b3, b4;

Μέσα στην setup() δημιουργούμε τα κουμπιά, σύμφωνα με τον κατασκευαστή του class. Η πρώτη τιμή είναι το x, η δεύτερη είναι το y, η τρίτη το μέγεθος και η τέταρτη το χρώμα.

 b1 = new Button(10, 30, 30, #16F247);
 b2 = new Button(10, 70, 30, #FF2815);
 b3 = new Button(10, 110, 30, #DB7AD0);
 b4 = new Button(10, 150, 30, #63B2F5);

Τα κουμπιά δεν εμφανίζονται αυτόματα. Για να εμφανιστούν πρέπει να εκτελέσουν την ικανότητα display(). Άρα στην draw() προσθέτουμε:
  b1.display();
  b2.display();
  b3.display();
  b4.display();
 
ΒΗΜΑ 7ο - Προσθέτουμε τις λειτουργίες της εφαρμογής: Αλλαγή χρώματος

Θέλουμε όταν πατηθεί το 1ο κουμπί να αλλαζει το χρώμα της γραμμής. Άρα μέσα στο event mouseReleased() θα ζητήσουμε από το b1 να μας πει αν εκείνη τη στιγμή το ποντίκι είναι από πάνω του:

  if (b1.overlap() == true)

Κι αν είναι, τότε να αλλάξει το χρώμα της γραμμής:

  if (b1.overlap() == true)
    lineColor = #16F247;


Η μεταβλητή lineColor πρέπει να δηλωθεί πάνω πάνω ως χρώμα και με αρχική τιμή μαύρο:

color lineColor = 0;

και για να έχει επίδραση στην γραμμή που ζωγραφίζουμε, θα προσθέσουμε μέσα στην draw() την εντολή:

stroke(lineColor);

Κάνετε το ίδιο για το 2ο κουμπί, ώστε να αλλάζει σε άλλο χρώμα.

ΒΗΜΑ 8ο - Προσθέτουμε τις υπόλοιπες λειτουργίες της εφαρμογής

καλή δουλειά!