|
var copyPosition = function() {
|
|
copyToClipboard(r0.toString());
|
|
}
|
|
|
|
var copyToClipboard = function(text) {
|
|
window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
|
|
} ;
|
|
|
|
var fscale = 3 ;
|
|
|
|
var fscaleSlider = d3.select("#fscaleSlider")
|
|
.attr('value', fscale)
|
|
.on("input", function() {
|
|
fscale = +this.value;
|
|
set_zscale() ;
|
|
z_range() ;
|
|
redraw() ;
|
|
}) ;
|
|
|
|
/// *******************
|
|
///
|
|
/// initialize position:
|
|
///
|
|
/// *******************
|
|
|
|
var rmin = Math.pow(2, 1/6) ; // the minimizer of the lennard-jones potential
|
|
var r0 = [0, 0, 0, rmin, 0, 0, 0, rmin, 0, 0, 0, rmin] ; // , rmin, rmin, rmin
|
|
var N = r0.length / 3 ; // number of L-J particles
|
|
var xI = 0 ;
|
|
var yI = 1 ;
|
|
var Ndim = r0.length ; // number of free dimensions / degrees of freedom
|
|
|
|
var canvas = d3.select('#canvas_1') ;
|
|
var size = 127 ;
|
|
|
|
canvas
|
|
.attr('width', size)
|
|
.attr('height', size)
|
|
|
|
|
|
var element = document.getElementById("canvas_1") ;
|
|
var c = element.getContext("2d") ;
|
|
|
|
// read the width and height of the canvas
|
|
var width = element.width ;
|
|
var height = element.height ;
|
|
|
|
var body = d3.select(document.body) ;
|
|
var td = d3.select('#svg_td') ;
|
|
|
|
var copyButton = td.append('input')
|
|
.attr('type', 'button')
|
|
.attr('value', 'current position')
|
|
.attr('onClick', 'copyPosition() ; return false ;') ;
|
|
|
|
td.append('br')
|
|
|
|
var dimSelect = [] ;
|
|
var Ndsel = 2 ;
|
|
|
|
dimSelect1 = td.append('input')
|
|
.attr('id', 'dimSelect1')
|
|
.attr('type', 'range')
|
|
.attr('value', 1)
|
|
.attr('min', 1)
|
|
.attr('max', Ndim - 1)
|
|
.attr('step', 1)
|
|
.on('input', function() {
|
|
if(Number(this.value) >= Number(dimSelect2.node().value)) {
|
|
dimSelect2.node().value = Number(this.value) + 1 ;
|
|
}
|
|
xI = Number(dimSelect1.node().value) - 1 ;
|
|
yI = Number(dimSelect2.node().value) - 1 ;
|
|
dselOut1.html('i = ' + (xI + 1)) ;
|
|
dselOut2.html('j = ' + (yI + 1)) ;
|
|
update_figure(true) ;
|
|
}) ;
|
|
|
|
var dselOut1 = td.append('output')
|
|
.attr('id', 'dimSelect1out')
|
|
.attr('for', 'dimSelect1')
|
|
.html('i = ' + (xI + 1)) ;
|
|
|
|
td.append('br') ;
|
|
|
|
dimSelect2 = td.append('input')
|
|
.attr('id', 'dimSelect2')
|
|
.attr('type', 'range')
|
|
.attr('value', 2)
|
|
.attr('min', 2)
|
|
.attr('max', Ndim)
|
|
.attr('step', 1)
|
|
.on('input', function() {
|
|
if(Number(this.value) <= Number(dimSelect1.node().value)) {
|
|
dimSelect1.node().value = Number(this.value) - 1 ;
|
|
}
|
|
xI = Number(dimSelect1.node().value) - 1 ;
|
|
yI = Number(dimSelect2.node().value) - 1 ;
|
|
dselOut1.html('i = ' + (xI + 1)) ;
|
|
dselOut2.html('j = ' + (yI + 1)) ;
|
|
update_figure(true) ;
|
|
}) ;
|
|
|
|
var dselOut2 = td.append('output')
|
|
.attr('id', 'dimSelect2out')
|
|
.attr('for', 'dimSelect2')
|
|
.html('j = ' + (yI + 1)) ;
|
|
|
|
function setPixel(imageData, x, y, r, g, b, a) {
|
|
var index = (x + y * imageData.width) * 4 ;
|
|
imageData.data[index + 0] = r ;
|
|
imageData.data[index + 1] = g ;
|
|
imageData.data[index + 2] = b ;
|
|
imageData.data[index + 3] = a ;
|
|
}
|
|
|
|
// create a new pixel array
|
|
var imageData = c.createImageData(width, height) ;
|
|
|
|
var xRange = [-2.5, 2.5] ;
|
|
var yRange = [-2.5, 2.5] ;
|
|
|
|
var xscale ;
|
|
var yscale ;
|
|
|
|
var set_scale = function() {
|
|
xscale = d3.scale.linear()
|
|
.domain([0, width])
|
|
.range(xRange) ;
|
|
|
|
yscale = d3.scale.linear()
|
|
.domain([0, height])
|
|
.range(yRange) ;
|
|
} ;
|
|
|
|
set_scale() ;
|
|
|
|
var zscale = d3.scale.linear() ;
|
|
var zdomain ;
|
|
var zrange = ["rgb(0, 88, 11)", "rgb(0, 255, 33)", "rgb(0, 3, 33)", "rgb(0, 11, 55)", "rgb(0, 88, 155)", "rgb(0, 88, 155)", "rgb(111, 0, 33)", "rgb(122, 0, 33)", "rgb(155, 0, 88)"] ;
|
|
|
|
var f = [] ;
|
|
var fvec = [] ;
|
|
var fmin = Infinity, fmax = -Infinity ;
|
|
|
|
var lennard_jones = function(d) { // Lennard-Jones term
|
|
var V = Math.pow(d, -6) ;
|
|
V = V * V - V ;
|
|
return V ;
|
|
}
|
|
|
|
var objective_function = function(r) {
|
|
var V = 0 ;
|
|
for(var i = 0 ; i < N - 1 ; i++) {
|
|
for(var j = i + 1 ; j < N ; j++) {
|
|
var d2 = 0 ;
|
|
for(k = 0 ; k < 3 ; k++) {
|
|
var drk = r[i * 3 + k] - r[j * 3 + k] ; // 3 dimensions per particle: (x, y, z)
|
|
d2 += drk * drk ;
|
|
}
|
|
var d = Math.sqrt(d2) ; // the distance between the spheres
|
|
V += lennard_jones(d) ;
|
|
}
|
|
}
|
|
V *= 4 ; // so each perfect contact scores a -1 energy
|
|
return V ;
|
|
}
|
|
|
|
var stepSize = 0.00001 ; // for numerical gradient (secant)
|
|
|
|
var gradient_function = function(r) {
|
|
var g = [] ;
|
|
for(var i = 0 ; i < r.length ; i++) {
|
|
var r1 = r.slice(0) ;
|
|
r1[i] += stepSize ;
|
|
fp = objective_function(r1) ;
|
|
r1[i] -= 2 * stepSize ;
|
|
fm = objective_function(r1) ;
|
|
g[i] = (fp - fm) / (2 * stepSize) ;
|
|
}
|
|
// console.log('grad', g, r.length)
|
|
return g ;
|
|
} ;
|
|
|
|
var xval = [] ;
|
|
var yval = [] ;
|
|
|
|
function update_image() {
|
|
var count = 0 ;
|
|
|
|
for (var i = 0 ; i < height ; i++) {
|
|
f[i] = [] ;
|
|
xval[i] = [] ;
|
|
yval[i] = [] ;
|
|
for(var j = 0 ; j < width ; j++) {
|
|
var x = xRange[0] + (i / width) * (xRange[1] - xRange[0]) ;
|
|
var y = yRange[0] + (j / width) * (yRange[1] - yRange[0]) ;
|
|
var r = r0.slice(0) ;
|
|
for (k = 0 ; k < r0.length ; k++) {
|
|
if(k == xI) r[xI] = x + r0[xI] ;
|
|
if(k == yI) r[yI] = y + r0[yI] ;
|
|
}
|
|
f[i][j] = objective_function(r) ;
|
|
xval[i][j] = x ;
|
|
yval[i][j] = y ;
|
|
// console.log('x', x, 'y', y, 'r', r, 'f', f[i][j])
|
|
if(f[i][j] < fmin) {
|
|
fmin = f[i][j] ;
|
|
ropt = r.slice(0) ;
|
|
}
|
|
if(f[i][j] > fmax) fmax = f[i][j] ;
|
|
fvec[count] = f[i][j] ;
|
|
count++ ;
|
|
}
|
|
}
|
|
|
|
var fmid = 0.5 * (fmin + fmax) ;
|
|
var fsort = fvec.slice(0).sort(d3.ascending)
|
|
var fmed = d3.quantile(fsort, 0.5) ;
|
|
var fran = fmed - fmin ;
|
|
|
|
|
|
// zdomain = [fmin, d3.quantile(fsort, 1/3), d3.quantile(fsort, 2/3), Infinity] ;
|
|
set_zscale() ;
|
|
//.domain([fmin, d3.quantile(fvec, 0.1), d3.quantile(fvec, 0.45), d3.quantile(fvec, 0.5), d3.quantile(fvec, 0.75), d3.quantile(fvec, 0.95), fmax])
|
|
//.range(["rgb(0, 0, 44)", "rgb(11, 33, 121)", "rgb(22, 88, 121)", "rgb(111, 111, 111)", "rgb(121, 88, 22)", "rgb(111, 11, 0)", "rgb(44, 0, 0)"]);
|
|
} ; // end update_image
|
|
|
|
var set_zscale = function() {
|
|
zdomain = [fmin, fmin + .01 * fscale, fmin + .1 * fscale, fmin + 0.2 * fscale, fmin + 0.4 * fscale, fmin + .8 * fscale, fmin + 1.6 * fscale, fmax * 0.1 * fscale, Infinity] ;
|
|
zdomain.sort(d3.ascending) ;
|
|
}
|
|
|
|
var redraw = function() {
|
|
for (var i = 0 ; i < height ; i++) {
|
|
for(var j = 0 ; j < width ; j++) {
|
|
var r = d3.rgb(zscale(f[i][j])).r ;
|
|
var g = d3.rgb(zscale(f[i][j])).g ;
|
|
var b = d3.rgb(zscale(f[i][j])).b ;
|
|
if(i == Math.ceil(height / 2) && j == Math.ceil(width / 2)) {
|
|
r = 255 ;
|
|
g = 255 ;
|
|
b = 0 ;
|
|
|
|
}
|
|
setPixel(imageData, i, j, r, g, b, 255) ; // 255 opaque
|
|
}
|
|
}
|
|
// copy the image data back onto the canvas
|
|
c.putImageData(imageData, 0, 0) ; // at coords 0,0
|
|
}
|
|
|
|
var update_figure = function (scaleSwitch) {
|
|
update_image() ;
|
|
if(scaleSwitch) {
|
|
set_scale() ;
|
|
z_range() ;
|
|
}
|
|
redraw() ;
|
|
update_text() ;
|
|
}
|
|
|
|
var updating = false ;
|
|
|
|
var update_position = function(dx, dy, i, j) {
|
|
if(updating) return ;
|
|
updating = true ;
|
|
var Nstep = 4 ;
|
|
var kstep = 0 ;
|
|
|
|
// console.log('upos', 'r0', r0, dx, dy)
|
|
|
|
var step = function() {
|
|
if(kstep < Nstep) {
|
|
r0[i] += dx / Nstep ;
|
|
r0[j] += dy / Nstep ;
|
|
update_figure() ;
|
|
kstep++ ;
|
|
var delay = 16 ;
|
|
setTimeout(step, delay) ;
|
|
// console.log('stepping', kstep)
|
|
} else {
|
|
// console.log('done stepping', kstep, 'r0', r0)
|
|
z_range() ;
|
|
redraw() ;
|
|
update_text() ;
|
|
updating = false ;
|
|
}
|
|
}
|
|
step() ;
|
|
}
|
|
|
|
var update_text = function() {
|
|
update_xtext() ;
|
|
update_ytext() ;
|
|
update_ttext() ;
|
|
}
|
|
|
|
var update_ttext = function() {
|
|
d3.select('#temperatureText').text('f(x) = ' + objective_function(r0).toPrecision(6)) ;
|
|
}
|
|
|
|
var update_xtext = function() {
|
|
d3.select('#xlabel').html('x<sub>' + (xI + 1) + '</sub> = ' + r0[xI].toPrecision(8)) ;
|
|
}
|
|
|
|
var update_ytext = function() {
|
|
d3.select('#ylabel').html('x<sub>' + (yI + 1) + '</sub> = ' + r0[yI].toPrecision(8)) ;
|
|
}
|
|
|
|
var z_range = function() {
|
|
zscale
|
|
.domain(zdomain)
|
|
.range(zrange) ;
|
|
}
|
|
|
|
update_position(0, 0, xI, yI) ;
|
|
|
|
canvas.on('click', function() {
|
|
var xy = d3.mouse(canvas.node()) ;
|
|
xy[0] /= canvas.node().clientWidth ;
|
|
xy[1] /= canvas.node().clientHeight ;
|
|
xy[0] *= width ;
|
|
xy[1] *= height ;
|
|
xy[0] = Math.floor(xy[0]) ;
|
|
xy[1] = Math.floor(xy[1]) ;
|
|
console.log(xy)
|
|
Npix = 3 ; // for local search to "snap" to the minimum pixel close to where the user clicked
|
|
var minf = f[xy[1]][xy[0]] ;
|
|
var mini = xy[1] ;
|
|
var minj = xy[0] ;
|
|
var iStart = Math.max(0, xy[0] - Npix) ;
|
|
var iEnd = Math.min(width - 1, xy[0] + Npix) ;
|
|
var jStart = Math.max(0, xy[1] - Npix) ;
|
|
var jEnd = Math.min(height - 1, xy[1] + Npix) ;
|
|
for (var i = iStart ; i <= iEnd ; i++) {
|
|
for (var j = jStart ; j <= jEnd ; j++) {
|
|
if(f[i][j] < minf) {
|
|
minf = f[i][j] ;
|
|
mini = i ;
|
|
minj = j ;
|
|
}
|
|
}
|
|
}
|
|
update_position(xval[mini][minj], yval[mini][minj], xI, yI) ;
|
|
}
|
|
) ;
|
|
|
|
var scrolling = false ;
|
|
|
|
var scroll = function() {
|
|
if(scrolling) return ;
|
|
scrolling = true ;
|
|
console.log(d3.event)
|
|
if(d3.event.wheelDelta !== undefined) {
|
|
var delta = d3.event.wheelDelta / Math.abs(d3.event.wheelDelta) ;
|
|
}
|
|
if(d3.event.detail !== undefined) {
|
|
var delta = -d3.event.detail / Math.abs(d3.event.detail) ;
|
|
}
|
|
var step = .2 ;
|
|
if(delta < 0) {
|
|
step = 1 + step ;
|
|
} else {
|
|
step = 1 - step ;
|
|
}
|
|
xRange[0] = step * xRange[0] ;
|
|
xRange[1] = step * xRange[1] ;
|
|
yRange[0] = step * yRange[0] ;
|
|
yRange[1] = step * yRange[1] ;
|
|
set_scale()
|
|
update_image() ;
|
|
z_range() ;
|
|
redraw() ;
|
|
scrolling = false ;
|
|
} ;
|
|
|
|
canvas
|
|
.on("mousewheel.zoom", null)
|
|
.on("DOMMouseScroll.zoom", null) // disables older versions of Firefox
|
|
.on("wheel.zoom", null) // disables newer versions of Firefox
|
|
|
|
canvas.on("mousewheel", scroll) // default scroll wheel listener
|
|
canvas.on("DOMMouseScroll.zoom", scroll) ; |
