ColloidalStatMech/swapping_IS.html at master · jeswcollins/ColloidalStatMech · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1/EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<html>
<head>
    <title>Permutable and Non-Permutable Particles</title>
    <!--<title>SVG Particle Swapping Supplement</title>-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <!-- Remove this comment only if you have issues rendering this page on an intranet site. -->
    <meta property="og:title" content="What's the difference between &quot;indistinguishable&quot; and &quot;identical&quot; particles?"/>
    <meta property="og:type" content="website"/><!--article-->
    <meta property="og:description" content="Which take more time to self-assemble into a unique ground state, picky particles, or not-so-picky particles? Click on interactive images and explore some open questions in statistical mechanics!"/>
    <meta property="og:site_name" content="What's the difference between &quot;indistinguishable&quot; and &quot;identical&quot; particles?"/>
    <meta property="og:url" content="https://dl.dropboxusercontent.com/u/3530419/pg/swapping_IS.html"/>
    <meta property="og:image" content="https://dl.dropboxusercontent.com/u/3530419/pg/swapping_IS.png"/>
    <meta property="fb:admins" content="jeswcollins">
    <!--<style>
    </style>-->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="topic" xmlns="http://www.w3.org/1999/xhtml">
  <h1 class="title">Defining particles in statistical mechanics</h1>
</div class="intro"><p>
<p>
This page describes and interactively illustrates basic concepts in the statistical mechanics of colloidal particles, based on work by Guangnan Meng, Jesse Collins, Becca Perry, W. Ben Rogers, Natalie Arkus, Zorana Zeravcic, Vinothan N. Manoharan, and Michael Brenner at Harvard University.
</p>
<h2><a id="Intro"></a><a id="Intro"></a>Distinguishable Particles</h2>
<p>
In the field of statistical mechanics, particles can be "identical" or "non-identical" and "distinguishable" or "indistinguishable." Objects that are large enough to see, even if doing so requires a microscope, are "distinguishable" in another, possibly related sense in physics. From the perspective of statistical mechanics, however, how do we decide if any two such distinguishable particles are "identical" or not, even if one appears exactly the same as the other?
</p>
<h2><a id="Permutable Heading"></a><a id="Permutable Heading"></a>Identical a.k.a. "Permutable" Particles</h2>
<p>In statistical physics, the important factor is not necessarily how the particles appear, but how they interact with other particles. If two particles interact with any third particle the same way, i.e. with the same strength of attraction or repulsion, we might call them "identical." How could a third particle reveal a difference between the first two? The first particle might stick to the third, but the second might not, for example. Particles can be identical in the sense that they would interact with any other particle in the same way. </p>
<p>In the interactive image below, the numbers allow us to keep track of the particles, and the color represents the type of the particle. Each gray particle can bond with, i.e. "stick to," any other gray particle. Bonds are represented by black lines. Do you think swapping any two gray particles will change the number of bonds? Try clicking on a particle below, then on another particle, to swap them and find out!
</p>
<div>
    <div>
        <svg id="svgElement" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="400" viewBox="0 0 600 400">
            <g id="lowLayer" ></g>
            <g id="coordinateFrame" onmousemove="coordDisplay()"></g>
        </svg>
<div class="caption"><p>
<h2><a id="Picky Heading"></a><a id="Picky Heading"></a>Non-identical, Highly Specific a.k.a. "Picky" Particles</h2>
<p>
If two particles interact differently with a third particle, then we call the first two "non-identical." At an opposite extreme from the example above, a set of particles might consist of particles that are not only non-identical, but that are also highly specific. Only one configuration of particles might maximize the number of bonds, i.e. minimize the potential energy. Let's imagine that each particle interacts favorably with each of its nearest neighbors in the lowest energy configuration, but would interact only repulsively with any particle besides those nearest neighbors. In this case, starting from the optimum configuration, how would swapping any two particles' positions affect the number of bonds and thus the connectivity of the structure? To get a feel for this case, try swapping some particles below.
</p>
</div>
    </div>
    <div>
        <svg id="svgElement" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="400" viewBox="0 0 600 400">
            <g id="lowLayer" ></g>
            <g id="coordinateFrame2" onmousemove="coordDisplay()"></g>
        </svg>
<div class="caption"><p>
<h2><a id="Non-particularly Heading"></a><a id="Non-particularly Heading"></a>Non-Identical, Not Particularly Picky Particles</h2>
<p>
Can we imagine any case in between the first two extremes of identical particles and highly specific particles? Consider some not-so-specific particles, which, nonetheless, can take only one arrangement that globally minimizes the energy. However, in this case, each particle can interact favorably with any other particle, even those it doesn't neighbor in the lowest energy configuration, albeit with a weaker strength of attraction. In the interactive illustration that follows, a red line indicates a weaker but non-negligible attraction between two particles compared to a black bond. Again, the particles start in the most energetically favorable configuration.
</p>
</div>
    </div>
   <div>
        <svg id="svgElement" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="400" viewBox="0 0 600 400">
            <g id="lowLayer" ></g>
            <g id="coordinateFrame3" onmousemove="coordDisplay()"></g>
        </svg>
<div class="caption"><p>
<h2><a id="Time Heading"></a><a id="Time Heading"></a>Particle Specificity and Self-Assembly Time</h2>
<p>
Imagine if, in the last two cases, each particle were brownian, meaning it moves around randomly. The bonds would break and reform at a rate depending on the temperature of the system. Let's assume that the temperature is low enough that, starting from a random initial configuration, the number of bonds tends to increase. <ul><li>In which of the last two cases would you expect the particles to self-assemble into the optimum configuration in less total time?</li><br><li>Which would be less likely to get "stuck" in a configuration lacking one or more of the strongest bonds?</li></ul>
</p>
</div>
    </div>
    <br>
    <div>
        <svg id="svgControllers"xmlns="http://www.w3.org/2000/svg" version="1.1" width="800px" height="80px" viewBox="0 0 800 800">
        </svg>
    </div>
    <script src="helpers.js" type="text/javascript"></script>
    <script src="swapping_IS.js" type="text/javascript"></script>
    <script>
        "use strict";
        function initWindow() {
            if (!svgSupported()) {
                alert("Inline SVG in HTML5 is not supported. This document requires a browser that supports HTML5 and inline SVG.");
                return;
            }

	    var permutable = new SwapSet("permutable","coordinateFrame");
            permutable.initialize();
            console.log("permutable initialized. permutable.ballcount:"+permutable.ballcount);

	    var picky = new SwapSet("picky","coordinateFrame2");
            picky.initialize();
            console.log("picky initialized. picky.ballcount:"+picky.ballcount);

            var not_particularly = new SwapSet("not_particularly","coordinateFrame3");
	    //not_particularly.labels=false;
            not_particularly.initialize();
            console.log("not_particularly initialized. not_particularly.ballcount:"+not_particularly.ballcount);
        }

        window.addEventListener('load', initWindow, false); // Execute the initWindow function just after the page loads.
        window.onmousemove = handleMouseMove;
        function handleMouseMove(event) {
            event = event || window.event;
        }
    </script>
</body>
</html>