Nick's JSmol Tutorials

Μάθημα 2.3
Χάρτες, Ισοεπιφάνειες και Χαρτογραφημένες Ισοεπιφάνειες
Ηλεκτροστατικό Δυναμικό

Στόχος

Το JSmol μπορεί να οπτικοποιεί ισοεπιφάνειες διάφορων μοριακών ιδιοτήτων, όπως ο "μοριακός όγκος", το ηλεκτροστατικό δυναμικό, ατομικά και μοριακά τροχιακά, καθώς και αρχεία ογκομετρικών δεδομένων .cube

Σε αυτό το μάθημα θα δημιουργήσουμε χάρτες του ηλεκτροστατικού δυναμικού του νερού και τη χαρτογραφημένη ισοεπιφάνεια του "μοριακού όγκου" με το ηλεκτροστατικό δυναμικό.

Το τελικό αποτέλεσμα φαίνεται στο παρακάτω πλαίσιο:

Ανανέωση

Βήμα 1.
Δημιουργία αρχικής ιστοσελίδας με μόριο νερού

Το JSmol μπορεί να υπολογίζει και να οπτικοποιεί το ηλεκτροστατικό δυναμικό από τη γεωμετρία του μορίου, χωρίς να απαιτούνται δεδομένα κβαντοχημικού υπολογισμού.

Για το μάθημα αυτό θα χρησιμοποιήσουμε ένα απλό αρχείο γεωμετρίας του νερού.

Δημιουργήστε μια ιστοσελίδα με ένα αντικείμενο JSmol και ονομάστε την jsmol-2-3.html

Ο κώδικας της ιστοσελίδας φαίνεται παρακάτω:

jsmol-2-3.html


<!DOCTYPE html>
<html lang="el" >

  <head>
    <meta charset="utf-8">
    <title></title>

    <script type="text/javascript" src="JSmol.min.js"> </script>

    <script>
      var jmolApplet0;
      var use = "HTML5"
      var s = document.location.search;
      Jmol.debugCode = (s.indexOf("debugcode") >= 0);
      jmol_isReady = function(applet) {
      }
        var JSmol_Applet = {
        width:"100%",
        height:"100%",
        debug: false,
        color: "#FFFFFF",
        use: "HTML5",
        j2sPath: "j2s",
        readyFunction: jmol_isReady,
        script: "",
        disableJ2SLoadMonitor: true,
        disableInitialConsole: true,
        allowJavaScript: true
      }
    </script>
  </head>

  <body>
    <div style="width:450px; height:400px; border:1px solid #333;" >
      <script>
        jmolApplet0 = Jmol.getApplet("jmolApplet0", JSmol_Applet);

      </script>
    </div>
  </body>
</html>

Δημιουργήστε το μόριο του νερού (π.χ. στο Avogadro ή στο GaussView) και σώστε το αρχείο στον φάκελο molecules με το όνομα water.mol

Φορτώστε το αρχείο water.mol στο JSmol εισάγοντας τον παρακάτω κώδικα:

jsmol-2-3.html


  <script>
    jmolApplet0 = Jmol.getApplet("jmolApplet0", JSmol_Applet);
    Jmol.script(jmolApplet0, "set antialiasDisplay on; load molecules/water.mol");
  </script>

Προσανατολίστε το μόριο πάνω στο επίπεδο της οθόνης εισάγοντας τις εντολές rotate y 90; rotate z 90; zoom 70; μετά την εντολή load

jsmol-2-3.html


  <script>
    jmolApplet0 = Jmol.getApplet("jmolApplet0", JSmol_Applet);
    Jmol.script(jmolApplet0, "set antialiasDisplay on; load molecules/water.mol; rotate y 90; rotate z 90; zoom 70;");
  </script>

Παρατηρείστε το αποτέλεσμα στο παρακάτω πλαίσιο.

Ανανέωση

Βήμα 2.
Δημιουργία Ισοεπιφάνειας Ηλεκτροστατικού Δυναμικού

H δημιουργία ισοεπιφάνειας γίνεται με την εντολή isosurface. Η εντολή isosurface μπορεί να πάρει μια πληθώρα παραμέτρων και να γίνει εξαιρετικά πολύπλοκη. Η γενική σύνταξη είναι η παρακάτω:

isosurface ID [object id] [construction/mapping parameters] [surface object] [additional mapping-only parameters] MAP [color mapping dataset] [display options]

Ωστόσο, σχεδόν όλες οι παραπάνω παράμετροι είναι προαιρετικές και η δόμηση μιας ισοεπιφάνειας μπορεί να γίνει πολύ απλά.

Για την οπτικοποίηση της ισοεπιφάνειας του ηλεκτροστατικού δυναμικού (Molecular Electrostatic Potential, MEP) γίνεται με την εντολή isosurface mep

Για την καλύτερη διαχείριση του κώδικα δημιουργείστε ένα αρχείο κειμένου στον φάκελο scripts και ονομάστε το mep.spt
Εισάγετε την εντολή script scripts/mep.spt; στο τέλος της function Jmol.script()

jsmol-2-3.html


  <script>
    jmolApplet0 = Jmol.getApplet("jmolApplet0", JSmol_Applet);
    Jmol.script(jmolApplet0, "set antialiasDisplay on; load molecules/water.mol; rotate y 90; rotate z 90; zoom 70; script scripts/mep.spt;");
  </script>

Εισάγετε την εντολή isosurface mep; στο αρχείο mep.spt

mep.spt


  isosurface mep;

Παρατηρείστε το αποτέλεσμα στο παρακάτω πλαίσιο.

Ανανέωση
Για να βελτιώσετε την ανάλυση της ισοεπιφάνειας εισάγετε την παράμετρο Resolution 8 πριν την παράμετρο mep στο αρχείο mep.spt

mep.spt


  isosurface Resolution 8 mep;

Παρατηρείστε το αποτέλεσμα στο παρακάτω πλαίσιο.

Ανανέωση
Η τιμή της ισοεπιφάνειας καθορίζεται με την παράμετρο Cutoff x.x

Πειραματίσου με την τιμή της ισοεπιφάνειας του ηλεκτροστατικού δυναμικού στο παρακάτω παράδειγμα:

Ανανέωση

Βήμα 3.
Δημιουργία Χάρτη Ηλεκτροστατικού Δυναμικού

Η ισοεπιφάνεια του ηλεκτροστατικού δυναμικού δεν είναι πολύ χρήσιμη για τους χημικούς. Συνήθως το ηλεκτροστατικό δυναμικό αποτυπώνεται ως έγχρωμος χάρτης πάνω στην ισοεπιφάνεια της ηλεκτρονιακής πυκνότητας.

Επίσης χρήσιμη είναι η απεικόνιση ενός επιπέδου με τον χάρτη του ηλεκτροστατικού δυναμικού.

Μπορούμε να οπτικοποιήσουμε ένα επίπεδο ή "φέτα" (cut plane) μιας ισοεπιφάνειας χρησιμοποιώντας την παράμετρο Plane "thePlane" , όπου η τιμή "thePlane" μπορεί να είναι τα καρτεσιανά επίπεδα "xy", "xz" και "yz".

Εισάγετε την παράμετρο Plane "yz" πριν την παράμετρο mep
mep.spt
```
  isosurface Resolution 8 Plane "yz" mep;
              
```
Παρατηρείστε το αποτέλεσμα στο παρακάτω πλαίσιο.

Ανανέωση
Μπορούμε να καθορίσουμε το εύρος τιμών που αποτυπώνονται στο χρωματικό χάρτη με την παράμετρο Color Range min max , όπου min max είναι οι τιμές (πραγματικοί αριθμοί) που καθορίζουν το ελάχιστη (κόκκινο) και το μέγιστη (μπλε) τιμή που απεικονίζεται.

Εισάγετε την παράμετρο Color Range -0.3 0.3 πριν την παράμετρο mep
mep.spt
```
  isosurface Resolution 8 Plane "yz"  Color Range -0.3 0.3 mep;
              
```
Παρατηρείστε το αποτέλεσμα στο παρακάτω πλαίσιο.

Ανανέωση

Βήμα 4.
Χάρτες Ισόπυκνων Καμπυλών Ηλεκτροστατικού Δυναμικού

Οι χάρτες που δημιουργήσαμε απεικονίζουν με μια συνεχή χρωματική απόδοση τη μοριακή ιδιότητα του ηλεκτροστατικού δυναμικού.

Με το JSmol μπορούμε να δημιουργήσουμε χάρτες ισόπυκνων καμπυλών (Contour Maps) όπου χρωματίζονται με διακριτά χρώματα και γραμμές οι περιοχές στο χώρο που περιέχουν συγκεκριμένες περιοχές τιμών

Η δημιουργία χαρτών ισόπυκνων καμπυλών είναι υπολογιστικά απαιτητική διεργασία.

Για αυτό δεν προτείνεται η χρήση τους σε εφαρμογές web αν δεν είναι απαραίτητο για επιστημονικούς λόγους.

Για την εκπαίδευση και την επικοινωνία επιστημονικών αποτελεσμάτων η απλή χρωματική απεικόνιση είναι επαρκής.

Η απεικόνιση χαρτών ισόπυκνων καμπυλών γίνεται με τη παράμετρο Contour x , όπου x είναι ο αριθμός των καμπυλών

Η απεικόνιση των χαρτών ισόπυκνων καμπυλών μπορεί να γίνει:

Μόνο με την εμφάνιση των καμπυλών με τις εντολές nofill mesh
Μόνο με την εμφάνιση των χαρτών με τις εντολές fill nomesh
Με την εμφάνιση των χαρτών και των καμπυλών με τις εντολές fill mesh

Πειραματίσου με την οπτικοποίηση χαρτών ισόπυκνων καμπυλών στο παρακάτω παράδειγμα αλλάζοντας τον αριθμό των καμπυλών και πατώντας run.

Ανανέωση

Βήμα 5.
Εμφάνιση/Απόκρυψη Πολλαπλών Χαρτών Ηλεκτροστατικού Δυναμικού

Μπορούμε να οπτικοποιήσουμε ταυτόχρονα πολλαπλές ισοεπιφάνειες ή/και επίπεδα χαρτών. Προκειμένου να μπορέσουμε να διαχειριστούμε κάθε επίπεδο ή ισοεπιφάνεια ξεχωριστά θα πρέπει να του δώσουμε μια ταυτότητα ID.

Συγκεκριμένα θα δώσουμε στο επίπεδο "yz" την ταυτότητα plyz

Εισάγετε την παράμετρο plyz μετά την εντολή isosurface

mep.spt
```
  isosurface  plyz  Resolution 8 Plane "yz" Color Range -0.3 0.3 mep;
                
```
Για να δημιουργήσετε τους χάρτες των επιπέδων xz και xz, αντιγράψτε και επικολήστε 2 φορές όλη την εντολή isosurface ... και αλλάξτε τον ορισμό και την ταυτότητα του επιπέδου.
mep.spt
```
  isosurface  plyz  Resolution 8 Plane "yz" Color Range -0.3 0.3 mep;
  isosurface  plxz  Resolution 8 Plane "xz" Color Range -0.3 0.3 mep;
  isosurface  plxy  Resolution 8 Plane "xy" Color Range -0.3 0.3 mep;              
                  
```
Παρατηρείστε το αποτέλεσμα στο παρακάτω πλαίσιο.

Ανανέωση
Τώρα μπορούμε να διαχειριστούμε το κάθε επίπεδο χρησιμοποιώντας την ταυτότητά του. Μπορούμε να εμφανίζουμε/αποκρύπτουμε ένα επίπεδο με την εντολή isosurface ID on/off

Προσθέστε τρία κουμπιά επιλογής (checkbox) με τίτλους xy, xz και yz εισάγοντας τον παρακάτω κώδικα στο αρχείο jsmol-2-3.html

jsmol-2-3.html
```
  <script>
    jmolApplet0 = Jmol.getApplet("jmolApplet0", JSmol_Applet);
    Jmol.script(jmolApplet0, "set antialiasDisplay on; load molecules/water.mol; rotate y 90; rotate z 90; zoom 70; script scripts/mep.spt;");
    Jmol.jmolCheckbox(jmolApplet0, "isosurface plxy  on", "isosurface plxy off ", "xy", true);
    Jmol.jmolCheckbox(jmolApplet0, "isosurface plxz  on", "isosurface plxz off ", "xz", true);
    Jmol.jmolCheckbox(jmolApplet0, "isosurface plyz  on", "isosurface plyz off ", "yz", true);
  </script>
                    
```
Παρατηρείστε το αποτέλεσμα στο παρακάτω πλαίσιο.

Ανανέωση

Βήμα 6.
Οπτικοποίηση Ισοεπιφάνειας Μοριακού Όγκου Χαρτογραφημένης με το Ηλεκτροστατικό Δυναμικό

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

Εναλλακτικά στο JSmol μπορούμε να οπτικοποιήσουμε τη χαρτογαφημένη ισοεπιφάνεια του μοριακού όγκου.

Ο μοριακός όγκος ορίζεται ώς ο όγκος που δημιουργείται αν "τρέξουμε" μια σφαίρα γύρω από τη μοριακή δομή σε απόσταση ίση με την ακτίνα van der Waals των ατόμων.

Η οπτικοποίηση του μοριακού όγκου γίνεται με την εντολή Isosurface Molecular;

Η οπτικοποίηση του μοριακού όγκου γίνεται για τα άτομα που είναι επιλεγμένα. Για αυτό πρέπει πρώτα να επιλέξουμε όλα τα άτομα του μορίου με την εντολή Select all;

Δημιουργήστε την ισοεπιφάνεια του μοριακού όγκου με ταυτότητα ID iso εισάγοντας τον παρακάτω κώδικα στο αρχείo mep.spt

mep.spt
```
  isosurface  plyz  Resolution 8 Plane "yz" Color Range -0.3 0.3 mep;
  isosurface  plxz  Resolution 8 Plane "xz" Color Range -0.3 0.3 mep;
  isosurface  plxy  Resolution 8 Plane "xy" Color Range -0.3 0.3 mep;
  select all;
  isosurface  iso  Resolution 8 Molecular;   
                    
```
Παρατηρείστε το αποτέλεσμα στο παρακάτω πλαίσιο. Αποκρύψτε τα επίπεδα για να δείτε καθαρά την ισοεπιφάνεια.

Ανανέωση
Μπορούμε να ορίσουμε τη διαφάνεια της ισοεπιφάνειας με την εντολή Translucent x.x , όπου η παράμετρος x.x παίρνει τιμές από 0.0 (αδιαφανής) έως 0.9 (μέγιστη διαφάνεια)

Εισάγετε την εντολή Translucent 0.5 μετά την εντολή Molecular
mep.spt
```
  isosurface  plyz  Resolution 8 Plane "yz" Color Range -0.3 0.3 mep;
  isosurface  plxz  Resolution 8 Plane "xz" Color Range -0.3 0.3 mep;
  isosurface  plxy  Resolution 8 Plane "xy" Color Range -0.3 0.3 mep;
  select all;
  isosurface  iso  Resolution 8 Molecular Translucent 0.5;
                    
```
Παρατηρείστε το αποτέλεσμα στο παρακάτω πλαίσιο. Αποκρύψτε τα επίπεδα για να δείτε καθαρά την ισοεπιφάνεια.

Ανανέωση
Η χαρτογράφηση μιας ισοεπιφάνειας με την τιμή μιας άλλης μοριακής ιδιότητας γίνεται με την εντολή Map prop , όπου prop είναι η ιδιότητα και στην περίπτωσή μας είναι το ηλεκτροστατικό δυναμικό mep
Εισάγετε την εντολή Map mep μετά την εντολή Molecular
mep.spt
```
  isosurface  plyz  Resolution 8 Plane "yz" Color Range -0.3 0.3 mep;
  isosurface  plxz  Resolution 8 Plane "xz" Color Range -0.3 0.3 mep;
  isosurface  plxy  Resolution 8 Plane "xy" Color Range -0.3 0.3 mep;
  select all;
  isosurface  iso  Resolution 8 Molecular  Map mep Translucent 0.5;
                    
```
Παρατηρείστε το αποτέλεσμα στο παρακάτω πλαίσιο. Αποκρύψτε τα επίπεδα για να δείτε καθαρά την ισοεπιφάνεια.

Ανανέωση

Βήμα 7.
Εμφάνιση/Απόκρυψη Ισοεπιφάνειας και Οπτικοποίηση Πλέγματος

Προσθέστε ένα κουμπί επιλογής (checkbox) με τίτλο "Ισοεπιφάνεια" για την εμφάνιση/απόκρυψη της ισοεπιφάνειας, εισάγοντας τον παρακάτω κώδικα στο αρχείο jsmol-2-3.html

jsmol-2-3.html


  <script>
    jmolApplet0 = Jmol.getApplet("jmolApplet0", JSmol_Applet);
    Jmol.script(jmolApplet0, "set antialiasDisplay on; load molecules/water.mol; rotate y 90; rotate z 90; zoom 70; script scripts/mep.spt;");
      Jmol.jmolCheckbox(jmolApplet0, "isosurface iso on", "isosurface iso off ", "Ισοεπιφάνεια", true);
    Jmol.jmolBr();             
    Jmol.jmolCheckbox(jmolApplet0, "isosurface plxy  on", "isosurface plxy off ", "xy", true);
    Jmol.jmolCheckbox(jmolApplet0, "isosurface plxz  on", "isosurface plxz off ", "xz", true);
    Jmol.jmolCheckbox(jmolApplet0, "isosurface plyz  on", "isosurface plyz off ", "yz", true);
  </script>

Παρατηρείστε το αποτέλεσμα στο παρακάτω πλαίσιο.

Ανανέωση

Προσθέστε ένα κουμπί επιλογής (checkbox) με τίτλο "Πλέγμα" απεικόνιση της ισοεπιφάνειας με μορφή πλέγματος με την εντολή set meshScale 0.2; mesh nofill , εισάγοντας τον παρακάτω κώδικα στο αρχείο jsmol-2-3.html

jsmol-2-3.html


  <script>
    jmolApplet0 = Jmol.getApplet("jmolApplet0", JSmol_Applet);
    Jmol.script(jmolApplet0, "set antialiasDisplay on; load molecules/water.mol; rotate y 90; rotate z 90; zoom 70; script scripts/mep.spt;");
    Jmol.jmolCheckbox(jmolApplet0, "isosurface iso on", "isosurface iso off ", "Ισοεπιφάνεια", true);
    Jmol.jmolCheckbox(jmolApplet0, "set meshScale 0.2; isosurface iso  mesh nofill", "isosurface iso nomesh fill", "Πλέγμα", false);
    Jmol.jmolBr();
    Jmol.jmolCheckbox(jmolApplet0, "isosurface plxy  on", "isosurface plxy off ", "xy", true);
    Jmol.jmolCheckbox(jmolApplet0, "isosurface plxz  on", "isosurface plxz off ", "xz", true);
    Jmol.jmolCheckbox(jmolApplet0, "isosurface plyz  on", "isosurface plyz off ", "yz", true);
  </script>

Παρατηρείστε το αποτέλεσμα στο παρακάτω πλαίσιο.

Ανανέωση

Λήψεις
Downloads

Αρχείο γεωμετρίας του νερού: water.mol
Φάκελος ιστοχώρου με κενή ιστοσελίδα JSmol: Jsmol-starter-site.zip
Φάκελος ιστοχώρου τελικού αποτελέσματος του μαθήματος: lesson23-full-site.zip

Μάθημα 2.3Χάρτες, Ισοεπιφάνειες και Χαρτογραφημένες ΙσοεπιφάνειεςΗλεκτροστατικό Δυναμικό

Στόχος

Βήμα 1. Δημιουργία αρχικής ιστοσελίδας με μόριο νερού

Βήμα 2. Δημιουργία Ισοεπιφάνειας Ηλεκτροστατικού Δυναμικού

Βήμα 3. Δημιουργία Χάρτη Ηλεκτροστατικού Δυναμικού

Βήμα 4. Χάρτες Ισόπυκνων Καμπυλών Ηλεκτροστατικού Δυναμικού

Βήμα 5. Εμφάνιση/Απόκρυψη Πολλαπλών Χαρτών Ηλεκτροστατικού Δυναμικού

Βήμα 6. Οπτικοποίηση Ισοεπιφάνειας Μοριακού Όγκου Χαρτογραφημένης με το Ηλεκτροστατικό Δυναμικό

Βήμα 7. Εμφάνιση/Απόκρυψη Ισοεπιφάνειας και Οπτικοποίηση Πλέγματος

Λήψεις Downloads

Μάθημα 2.3
Χάρτες, Ισοεπιφάνειες και Χαρτογραφημένες Ισοεπιφάνειες
Ηλεκτροστατικό Δυναμικό

Βήμα 1.
Δημιουργία αρχικής ιστοσελίδας με μόριο νερού

Βήμα 2.
Δημιουργία Ισοεπιφάνειας Ηλεκτροστατικού Δυναμικού

Βήμα 3.
Δημιουργία Χάρτη Ηλεκτροστατικού Δυναμικού

Βήμα 4.
Χάρτες Ισόπυκνων Καμπυλών Ηλεκτροστατικού Δυναμικού

Βήμα 5.
Εμφάνιση/Απόκρυψη Πολλαπλών Χαρτών Ηλεκτροστατικού Δυναμικού

Βήμα 6.
Οπτικοποίηση Ισοεπιφάνειας Μοριακού Όγκου Χαρτογραφημένης με το Ηλεκτροστατικό Δυναμικό

Βήμα 7.
Εμφάνιση/Απόκρυψη Ισοεπιφάνειας και Οπτικοποίηση Πλέγματος

Λήψεις
Downloads