Bouncing atoms

2013-04-24

===

Visualization of atoms trapped in a harmonic potential getting knocked out by other atoms.

???
<div id="holder">
<div id="cell">
</div>
<div id="toolbar">
    <div id="plus1" class="btn">+ <div class="atom1"></div></div>
    <div id="minus1" class="btn">- <div class="atom1"></div></div>
    <div id="plus2" class="btn">+ <div class="atom2"></div></div>
    <div id="minus2" class="btn">- <div class="atom2"></div></div>
    <div id="plusr" class="btn">+ radius</div>
    <div id="minusr" class="btn">- radius</div>
    <div id="pluss" class="btn">+ speed</div>
    <div id="minuss" class="btn">- speed</div>
    <div id="info1" class="info"><span></span> <div class="atom1"></div></div>
    <div id="info2" class="info"><span></span> <div class="atom2"></div></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="interferometer.js" type="text/javascript"></script>
<style>
#holder {
    width: 0px;
    margin: 0 auto;
    font-size: 0.7em;
}
#cell {
    position: relative;
    overflow: hidden;
    width: 600px;
    height: 600px;
    margin: 0 -300px;
    background-color: #333;
}
.atom1 {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    margin: -5px;
    border-radius: 5px;
    background-color: #7af;
}

.atom2 {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    margin: -5px;
    border-radius: 5px;
    background-color: #f00;
}

.btn {
    color: #fff;
    font-weight: 600;
    display: block;
    float: left;
    background-color: #555;
    height: 2em;
    line-height: 2em;
    padding: 0 0.5em;
    cursor: pointer;
    margin-right: 1em;
}

.btn:hover {
    background-color: #666;
}

.info {
    display: block;
    float: right;
    height: 20px;
    line-height: 20px;
    padding: 5px;
    cursor: pointer;
    margin-right: 5px;
}

.btn>.atom1, .btn>.atom2, .info>.atom1, .info>.atom2 {
    position: relative;
    display: inline-block;
    margin: 0px 2px 0px 5px;
}
#toolbar {
    width: 600px;
    margin: 0 -300px;
    margin-top: 1em;
    height: 2em;
}
</style>
???