Are there any math geniuses out there that are aware of or able to devise an algorithm that will translate relative coordinates into absolute coordinates?
I created an SVG (codepen) with loads and loads and loads of paths (roughly 600) and other SVG elements, a great number of which (roughly 100) have CSS transformations applied to them. Unfortunately, I created it using Chrome and never bothered to check Firefox or other browsers.
On Firefox, none of them work correctly because the transforms are happening in relation to either the viewport or the SVG viewbox; I'm not entirely sure which one since I set the same values for the viewBox and the width and height. Microsoft Edge is another beast. It seems as if Edge doesn't even support CSS transforms applied to SVGs at the moment.
I've come across other questions (and responses) which state an adequate cross browser solution is to use "absolute" coordinates (or coordinates relative to the viewBox).
So again, is there an easy way to translate such coordinates accordingly?
I ended up writing a script that provides me with the necessary adjustments, which can be seen below!
for (i = 0; i < groundDoorIds.length; i++) {
var a = groundDoorIds[i].replace('g-o-', '');
console.log(a);
var b = document.getElementById(groundDoorIds[i]);
var c = b.getAttribute('d');
var d = c.substr(2, 11);
var e;
if (d.indexOf('h') < 0) {
if (d.indexOf('H') < 0) {
if (d.indexOf('v') < 0) {
e = d.indexOf('V');
} else {
e = d.indexOf('v');
}
} else {
e = d.indexOf('H');
}
} else {
e = d.indexOf('h');
}
var f = d.slice(0, e);
var g = f.indexOf(',');
var h = f.slice(0, g);
var j = f.slice(g + 1);
var k;
var l;
if (a.indexOf('door-right-top') > 0 || a.indexOf('door-right-bottom') > 0) {
k = Number(h) + 0.5;
l = Number(j);
} else if (a.indexOf('door-left-top') > 0 || a.indexOf('door-left-bottom') > 0) {
k = Number(h) - 0.5;
l = Number(j);
} else if (a.indexOf('door-bottom-left') > 0 || a.indexOf('door-bottom-right') > 0) {
k = Number(h);
l = Number(j) + 0.5;
} else if (a.indexOf('door-top-left') > 0 || a.indexOf('door-top-right') > 0) {
k = Number(h);
l = Number(j) - 0.5;
}
console.log('style="transform-origin:' + k + 'px ' + l + 'px;"')
console.log(`
`)
}
// which logs to the console the following information for each door
//
// construction-shop-stairwell-c-door-right-top [part of id of ele]
// style="transform-origin:92.5px 11px;" [new "absolute" coords]
For those who were confused by my question, below is basically what I was asking for.
for (i = 0; i < groundDoorIds.length; i++) {
var a = groundDoorIds[i].replace('g-o-', '');
console.log(a);
var b = document.getElementById(groundDoorIds[i]);
var c = b.getAttribute('d');
var d = c.substr(2, 11);
var e;
if (d.indexOf('h') < 0) {
if (d.indexOf('H') < 0) {
if (d.indexOf('v') < 0) {
e = d.indexOf('V');
} else {
e = d.indexOf('v');
}
} else {
e = d.indexOf('H');
}
} else {
e = d.indexOf('h');
}
var f = d.slice(0, e);
var g = f.indexOf(',');
var h = f.slice(0, g);
var j = f.slice(g + 1);
var k;
var l;
if (a.indexOf('door-right-top') > 0 || a.indexOf('door-right-bottom') > 0) {
k = Number(h) + 0.5;
l = Number(j);
} else if (a.indexOf('door-left-top') > 0 || a.indexOf('door-left-bottom') > 0) {
k = Number(h) - 0.5;
l = Number(j);
} else if (a.indexOf('door-bottom-left') > 0 || a.indexOf('door-bottom-right') > 0) {
k = Number(h);
l = Number(j) + 0.5;
} else if (a.indexOf('door-top-left') > 0 || a.indexOf('door-top-right') > 0) {
k = Number(h);
l = Number(j) - 0.5;
}
console.log('style="transform-origin:' + k + 'px ' + l + 'px;"')
console.log(`
`)
}
...which logs to console the following information for each door.
construction-shop-stairwell-c-door-right-top // part of id of ele
style="transform-origin:92.5px 11px;" // new "absolute" coords
Related
Hello thanks to moluapple, I got this script from the adobe support community, I'm a beginner in javascript but I have a task to make, I have to paint numbers in each color of the image, actually, I see that in this solution brings me numbers in each layer, but doesn't work for the colors, can someone has a similar solution?
Let me add the expected result which is for each color on the picture the script adds a number to the color 1 for green 2 for yellow etc, let me show you.enter image description here
here is the original link
https://community.adobe.com/t5/illustrator-discussions/script-insert-text-number-in-the-middle-of-visible-bounds-of-the-each-object/td-p/8088914/page/3
(function() {
var doc = app.activeDocument,
lays = doc.layers,
WORK_LAY = lays.add(),
NUM_LAY = lays.add(),
i = lays.length - 1,
lay;
// main working loop
for (; i > 1; i--) {
//process each layer
lay = lays[i];
lay.name = lay.name + " Num:" + (i - 1); // i-1 as 2 layers beed added.
process(lay.pathItems, false);
process(lay.compoundPathItems, true); // if any
}
//clean up
NUM_LAY.name = "Numbers";
WORK_LAY.remove();
function process(items, isCompound) {
var j = 0,
b, xy, s, p, op;
for (; j < items.length; j++) {
// process each pathItem
op = items[j];
// add stroke
if (isCompound) {
strokeComPath(op);
} else {
!op.closed && op.closed = true;
op.filled = false;
op.stroked = true;
};
b = getCenterBounds(op);
xy = [b[0] + (b[2] - b[0]) / 2, b[1] + (b[3] - b[1]) / 2];
s = (
Math.min(op.height, op.width) < 20 ||
(op.area && Math.abs(op.area) < 150)
) ? 4 : 6; // adjust font size for small area paths.
add_nums(i - 1, xy, s);
}
}
function getMinVisibleSize(b) {
var s = Math.min(b[2] - b[0], b[1] - b[3]);
return Math.abs(s);
}
function getGeometricCenter(p) {
var b = p.geometricBounds;
return [(b[0] + b[2]) / 2, (b[1] + b[3]) / 2];
}
// returns square of distance between p1 and p2
function getDist2(p1, p2) {
return Math.pow(p1[0] + p2[0], 2) + Math.pow(p1[1] + p2[1], 2);
}
// returns visibleBounds of a path in a compoundPath p
// which is closest to center of the original path op
function findBestBounds(op, p) {
var opc = getGeometricCenter(op);
var idx = 0,
d;
var minD = getDist2(opc, getGeometricCenter(p.pathItems[0]));
for (var i = 0, iEnd = p.pathItems.length; i < iEnd; i++) {
d = getDist2(opc, getGeometricCenter(p.pathItems[i]));
if (d < minD) {
minD = d;
idx = i;
}
}
return p.pathItems[idx].visibleBounds;
}
function applyOffset(op, checkBounds) {
var p = op.duplicate(WORK_LAY, ElementPlacement.PLACEATBEGINNING),
// offset value the small the better, but meantime more slow.
offset = function() {
var minsize = Math.min(p.width, p.height);
if (minsize >= 50) {
return '-1'
} else if (20 < minsize && minsize < 50) {
return '-0.5'
} else {
return '-0.2' // 0.2 * 2 (both side ) * 50 (Times) = 20
}
},
xmlstring = '<LiveEffect name="Adobe Offset Path"><Dict data="I jntp 2 R mlim 4 R ofst #offset"/></LiveEffect>'
.replace('#offset', offset()),
TIMES = 100; // if shapes are too large, should increase the value.
if (checkBounds) {
// check its size only if it needs, because it's too slow
while (TIMES-- && getMinVisibleSize(p.visibleBounds) > 3) p.applyEffect(xmlstring);
} else {
while (TIMES--) p.applyEffect(xmlstring);
}
return p;
}
function getCenterBounds(op) {
var originalMinSize = getMinVisibleSize(op.visibleBounds);
var p = applyOffset(op, false);
if (getMinVisibleSize(p.visibleBounds) > originalMinSize) {
// in some cases, path p becomes larger for some unknown reason
p.remove();
p = applyOffset(op, true);
}
var b = p.visibleBounds;
if (getMinVisibleSize(b) > 10) {
activeDocument.selection = [p];
executeMenuCommand("expandStyle");
p = activeDocument.selection[0];
if (p.typename == "CompoundPathItem") {
b = findBestBounds(op, p);
}
}
p.remove();
return b;
}
function add_nums(n, xy, s) {
var txt = NUM_LAY.textFrames.add();
txt.contents = n;
txt.textRange.justification = Justification.CENTER;
txt.textRange.characterAttributes.size = s;
txt.position = [xy[0] - txt.width / 2, xy[1] + txt.height / 2];
}
function strokeComPath(compoundPath) {
var p = compoundPath.pathItems,
l = p.length,
i = 0;
for (; i < l; i++) {
!p[i].closed && p[i].closed = true;
p[i].stroked = true;
p[i].filled = false;
};
}
})();
I don't understand what exactly you're trying to gain. So here is a guess:
If you change the function process() this way:
function process(items, isCompound) {
var j = 0,
b, xy, s, p, op;
for (; j < items.length; j++) {
// process each pathItem
op = items[j];
c = op.fillColor; // <--- here
color = 'CMYK ' + // <--- here
[ Math.round(c.cyan), // <--- here
Math.round(c.magenta), // <--- here
Math.round(c.yellow), // <--- here
Math.round(c.black) // <--- here
].join(','); // <--- here
// add stroke
if (isCompound) {
strokeComPath(op);
} else {
!op.closed && op.closed = true;
// op.filled = false; // <--- here
// op.stroked = true; // <--- here
};
b = getCenterBounds(op);
xy = [b[0] + (b[2] - b[0]) / 2, b[1] + (b[3] - b[1]) / 2];
s = (
Math.min(op.height, op.width) < 20 ||
(op.area && Math.abs(op.area) < 150)
) ? 4 : 6; // adjust font size for small area paths.
// add_nums(i - 1 + color, xy, s);
add_nums(color, xy, s); // <--- here
}
}
It will put CMYK percents inside the shapes instead of numbers.
Here is the another modification of the main function process(). It's turned out that it can be done if you add & modify just two lines:
function process(items, isCompound) {
var j = 0,
b, xy, s, p, op;
for (; j < items.length; j++) {
// process each pathItem
op = items[j];
try { color = op.fillColor.spot.name } catch(e) { continue } // <-- HERE
// add stroke
if (isCompound) {
strokeComPath(op);
} else {
!op.closed && op.closed = true;
op.filled = false;
op.stroked = true;
};
b = getCenterBounds(op);
xy = [b[0] + (b[2] - b[0]) / 2, b[1] + (b[3] - b[1]) / 2];
s = (
Math.min(op.height, op.width) < 20 ||
(op.area && Math.abs(op.area) < 150)
) ? 4 : 6; // adjust font size for small area paths.
add_nums(color, xy, s); // <--- HERE
}
}
And the colors should be Spot Global colors. The script put in the middle of every shape a name of the swatch color.
Input:
Output:
I want to code a hidden message in image using js, but don`t know how this works. I have been searching for some algorithm but dont found one. Can some one explain how to encode message in image using js?
Use this library https://www.peter-eigenschink.at/projects/steganographyjs/
It will allow you to hide text into images
EDIT - Adding the encoding code from the link
Cover.prototype.encode = function(message, image, options) {
// Handle image url
if(image.length) {
image = util.loadImg(image);
} else if(image.src) {
image = util.loadImg(image.src);
} else if(!(image instanceof HTMLImageElement)) {
throw new Error('IllegalInput: The input image is neither an URL string nor an image.');
}
options = options || {};
var config = this.config;
var t = options.t || config.t,
threshold = options.threshold || config.threshold,
codeUnitSize = options.codeUnitSize || config.codeUnitSize,
prime = util.findNextPrime(Math.pow(2,t)),
args = options.args || config.args,
messageDelimiter = options.messageDelimiter || config.messageDelimiter;
if(!t || t < 1 || t > 7) throw new Error('IllegalOptions: Parameter t = " + t + " is not valid: 0 < t < 8');
var shadowCanvas = document.createElement('canvas'),
shadowCtx = shadowCanvas.getContext('2d');
shadowCanvas.style.display = 'none';
shadowCanvas.width = options.width || image.width;
shadowCanvas.height = options.height || image.height;
if(options.height && options.width) {
shadowCtx.drawImage(image, 0, 0, options.width, options.height );
} else {
shadowCtx.drawImage(image, 0, 0);
}
var imageData = shadowCtx.getImageData(0, 0, shadowCanvas.width, shadowCanvas.height),
data = imageData.data;
// bundlesPerChar ... Count of full t-bit-sized bundles per Character
// overlapping ... Count of bits of the currently handled character which are not handled during each run
// dec ... UTF-16 Unicode of the i-th character of the message
// curOverlapping ... The count of the bits of the previous character not handled in the previous run
// mask ... The raw initial bitmask, will be changed every run and if bits are overlapping
var bundlesPerChar = codeUnitSize/t >> 0,
overlapping = codeUnitSize%t,
modMessage = [],
decM, oldDec, oldMask, left, right,
dec, curOverlapping, mask;
var i, j;
for(i=0; i<=message.length; i+=1) {
dec = message.charCodeAt(i) || 0;
curOverlapping = (overlapping*i)%t;
if(curOverlapping > 0 && oldDec) {
// Mask for the new character, shifted with the count of overlapping bits
mask = Math.pow(2,t-curOverlapping) - 1;
// Mask for the old character, i.e. the t-curOverlapping bits on the right
// of that character
oldMask = Math.pow(2, codeUnitSize) * (1 - Math.pow(2, -curOverlapping));
left = (dec & mask) << curOverlapping;
right = (oldDec & oldMask) >> (codeUnitSize - curOverlapping);
modMessage.push(left+right);
if(i<message.length) {
mask = Math.pow(2,2*t-curOverlapping) * (1 - Math.pow(2, -t));
for(j=1; j<bundlesPerChar; j+=1) {
decM = dec & mask;
modMessage.push(decM >> (((j-1)*t)+(t-curOverlapping)));
mask <<= t;
}
if((overlapping*(i+1))%t === 0) {
mask = Math.pow(2, codeUnitSize) * (1 - Math.pow(2,-t));
decM = dec & mask;
modMessage.push(decM >> (codeUnitSize-t));
}
else if(((((overlapping*(i+1))%t) + (t-curOverlapping)) <= t)) {
decM = dec & mask;
modMessage.push(decM >> (((bundlesPerChar-1)*t)+(t-curOverlapping)));
}
}
}
else if(i<message.length) {
mask = Math.pow(2,t) - 1;
for(j=0; j<bundlesPerChar; j+=1) {
decM = dec & mask;
modMessage.push(decM >> (j*t));
mask <<= t;
}
}
oldDec = dec;
}
// Write Data
var offset, index, subOffset, delimiter = messageDelimiter(modMessage,threshold),
q, qS;
for(offset = 0; (offset+threshold)*4 <= data.length && (offset+threshold) <= modMessage.length; offset += threshold) {
qS=[];
for(i=0; i<threshold && i+offset < modMessage.length; i+=1) {
q = 0;
for(j=offset; j<threshold+offset && j<modMessage.length; j+=1)
q+=modMessage[j]*Math.pow(args(i),j-offset);
qS[i] = (255-prime+1)+(q%prime);
}
for(i=offset*4; i<(offset+qS.length)*4 && i<data.length; i+=4)
data[i+3] = qS[(i/4)%threshold];
subOffset = qS.length;
}
// Write message-delimiter
for(index = (offset+subOffset); index-(offset+subOffset)<delimiter.length && (offset+delimiter.length)*4<data.length; index+=1)
data[(index*4)+3]=delimiter[index-(offset+subOffset)];
// Clear remaining data
for(i=((index+1)*4)+3; i<data.length; i+=4) data[i] = 255;
imageData.data = data;
shadowCtx.putImageData(imageData, 0, 0);
return shadowCanvas.toDataURL();
};
I'm trying to implement color complement image processing , since opencv doesnt have rgb to hsi color conversion , i have to do that myself , unfortunately i found a problem.
here's a piece of code where i try to convert rgb to hsi
for( i = 0 ; i < src.rows ; i++){
for( j = 0 ; j < src.cols ; j++){
var pixel = src.ucharPtr(i,j);
r = pixel[0];
g = pixel[1];
b = pixel[2];
intensity = (b+g+r)/3;
var min_val = Math.min(r,g,b);
s = 1 - 3*(min_val/(b + g + r));
if(s < 0.00001)
{
s = 0;
}else if(s > 0.99999){
s = 1;
}
if(s != 0)
{
h = 0.5 * ((r - g) + (r - b)) / Math.sqrt(((r - g)*(r - g)) + ((r - b)*(g - b)));
h = Math.acos(h);
if(b <= g)
{
h = h;
} else{
h = 360 - h;
}
}
pixel[0] = h;
pixel[1] = s;
pixel[2] = intensity;
and here's the code where i try to convert it back to rgb
for(i = 0 ; i < src.rows ; i++){
for(j = 0 ; j < src.cols ; j++){
var pixel = src.ucharPtr(i,j);
h = pixel[0];
s = pixel[1];
intensity = pixel[2];
if(h < 120){
b = intensity*(1-s);
r=intensity*((1.0+((s*Math.cos(h))/(Math.cos(60-h)))));
g=1-(r+b);
}
else if(h < 240){
h -= 120;
r=intensity*(1-s);
g=intensity*((1.0+((s*Math.cos(h))/(Math.cos(60-h)))));
b=1-(r+g);
}
else{
h=h-240;
g=intensity*(1-s);
b=intensity*((1.0+((s*Math.cos(h))/(Math.cos(60-h)))));
r=1-(g+b);
}
pixel[0] = r;
pixel[1] = g;
pixel[2] = b;
}
}
Original Image
HSI Image
Reverse Image
I just followed the RBGtoHSI algorithm and vice versa. am i doing that the right way or there are something i missed ?
Thanks !
Below I have two examples of code. They are the same except I change the value of w at the beginning. In either example, m has a value. All I'm trying to do is set x = m. Why can I do this in the first but not the second? I'm testing this in the console in Chrome (68.0.3440.84)
This works (m = 100| x = 100)
var c = [],
w="word",
x = 0;
for (l=0; l<w.length; l++){
c.push(w.charCodeAt(l));
}
for (i in c) {
if (c.length > 0) {
var m = c[1];
if (m > Math.min(m, c[i])) {
m = Math.min(m, c[i]);
x = m;
console.log(x);
}
}
}
This does not work (m = 97| x = 0):
var c = [],
w="cancel",
x = 0;
for (l=0; l<w.length; l++){
c.push(w.charCodeAt(l));
}
for (i in c) {
if (c.length > 0) {
var m = c[1];
if (m > Math.min(m, c[i])) {
m = Math.min(m, c[i]);
x = m; //why cant I set this?
console.log(x);
}
}
}
There is more I want to do but in my process of figuring out this learning problem I have I have been unable to set this variable x reliably and I'm trying to figure out why.
It is because if (m > Math.min(m, c[i])) condition is never met. In your example both m and Math.min(m, c[i]) have the same value. Replacing > with >= seems to be fixing your issue. Or moving console.log outside if statement - depending on what you're actually trying to achieve.
var c = [],
w = "cancel",
x = 0;
for (l = 0; l < w.length; l++) {
c.push(w.charCodeAt(l));
}
for (i in c) {
if (c.length > 0) {
var m = c[1];
if (m >= Math.min(m, c[i])) { // because m > Math.min(m, c[i]) would return false
m = Math.min(m, c[i]);
x = m
console.log(x);
}
}
}
So I have a random javascript array of names...
[#larry,#nicholas,#notch] etc.
They all start with the # symbol. I'd like to sort them by the Levenshtein Distance so that the the ones at the top of the list are closest to the search term. At the moment, I have some javascript that uses jQuery's .grep() on it using javascript .match() method around the entered search term on key press:
(code edited since first publish)
limitArr = $.grep(imTheCallback, function(n){
return n.match(searchy.toLowerCase())
});
modArr = limitArr.sort(levenshtein(searchy.toLowerCase(), 50))
if (modArr[0].substr(0, 1) == '#') {
if (atRes.childred('div').length < 6) {
modArr.forEach(function(i){
atRes.append('<div class="oneResult">' + i + '</div>');
});
}
} else if (modArr[0].substr(0, 1) == '#') {
if (tagRes.children('div').length < 6) {
modArr.forEach(function(i){
tagRes.append('<div class="oneResult">' + i + '</div>');
});
}
}
$('.oneResult:first-child').addClass('active');
$('.oneResult').click(function(){
window.location.href = 'http://hashtag.ly/' + $(this).html();
});
It also has some if statements detecting if the array contains hashtags (#) or mentions (#). Ignore that. The imTheCallback is the array of names, either hashtags or mentions, then modArr is the array sorted. Then the .atResults and .tagResults elements are the elements that it appends each time in the array to, this forms a list of names based on the entered search terms.
I also have the Levenshtein Distance algorithm:
var levenshtein = function(min, split) {
// Levenshtein Algorithm Revisited - WebReflection
try {
split = !("0")[0]
} catch(i) {
split = true
};
return function(a, b) {
if (a == b)
return 0;
if (!a.length || !b.length)
return b.length || a.length;
if (split) {
a = a.split("");
b = b.split("")
};
var len1 = a.length + 1,
len2 = b.length + 1,
I = 0,
i = 0,
d = [[0]],
c, j, J;
while (++i < len2)
d[0][i] = i;
i = 0;
while (++i < len1) {
J = j = 0;
c = a[I];
d[i] = [i];
while(++j < len2) {
d[i][j] = min(d[I][j] + 1, d[i][J] + 1, d[I][J] + (c != b[J]));
++J;
};
++I;
};
return d[len1 - 1][len2 - 1];
}
}(Math.min, false);
How can I work with algorithm (or a similar one) into my current code to sort it without bad performance?
UPDATE:
So I'm now using James Westgate's Lev Dist function. Works WAYYYY fast. So performance is solved, the issue now is using it with source...
modArr = limitArr.sort(function(a, b){
levDist(a, searchy)
levDist(b, searchy)
});
My problem now is general understanding on using the .sort() method. Help is appreciated, thanks.
Thanks!
I wrote an inline spell checker a few years ago and implemented a Levenshtein algorithm - since it was inline and for IE8 I did quite a lot of performance optimisation.
var levDist = function(s, t) {
var d = []; //2d matrix
// Step 1
var n = s.length;
var m = t.length;
if (n == 0) return m;
if (m == 0) return n;
//Create an array of arrays in javascript (a descending loop is quicker)
for (var i = n; i >= 0; i--) d[i] = [];
// Step 2
for (var i = n; i >= 0; i--) d[i][0] = i;
for (var j = m; j >= 0; j--) d[0][j] = j;
// Step 3
for (var i = 1; i <= n; i++) {
var s_i = s.charAt(i - 1);
// Step 4
for (var j = 1; j <= m; j++) {
//Check the jagged ld total so far
if (i == j && d[i][j] > 4) return n;
var t_j = t.charAt(j - 1);
var cost = (s_i == t_j) ? 0 : 1; // Step 5
//Calculate the minimum
var mi = d[i - 1][j] + 1;
var b = d[i][j - 1] + 1;
var c = d[i - 1][j - 1] + cost;
if (b < mi) mi = b;
if (c < mi) mi = c;
d[i][j] = mi; // Step 6
//Damerau transposition
if (i > 1 && j > 1 && s_i == t.charAt(j - 2) && s.charAt(i - 2) == t_j) {
d[i][j] = Math.min(d[i][j], d[i - 2][j - 2] + cost);
}
}
}
// Step 7
return d[n][m];
}
I came to this solution:
var levenshtein = (function() {
var row2 = [];
return function(s1, s2) {
if (s1 === s2) {
return 0;
} else {
var s1_len = s1.length, s2_len = s2.length;
if (s1_len && s2_len) {
var i1 = 0, i2 = 0, a, b, c, c2, row = row2;
while (i1 < s1_len)
row[i1] = ++i1;
while (i2 < s2_len) {
c2 = s2.charCodeAt(i2);
a = i2;
++i2;
b = i2;
for (i1 = 0; i1 < s1_len; ++i1) {
c = a + (s1.charCodeAt(i1) === c2 ? 0 : 1);
a = row[i1];
b = b < a ? (b < c ? b + 1 : c) : (a < c ? a + 1 : c);
row[i1] = b;
}
}
return b;
} else {
return s1_len + s2_len;
}
}
};
})();
See also http://jsperf.com/levenshtein-distance/12
Most speed was gained by eliminating some array usages.
Updated: http://jsperf.com/levenshtein-distance/5
The new Revision annihilates all other benchmarks. I was specifically chasing Chromium/Firefox performance as I don't have an IE8/9/10 test environment, but the optimisations made should apply in general to most browsers.
Levenshtein Distance
The matrix to perform Levenshtein Distance can be reused again and again. This was an obvious target for optimisation (but be careful, this now imposes a limit on string length (unless you were to resize the matrix dynamically)).
The only option for optimisation not pursued in jsPerf Revision 5 is memoisation. Depending on your use of Levenshtein Distance, this could help drastically but was omitted due to its implementation specific nature.
// Cache the matrix. Note this implementation is limited to
// strings of 64 char or less. This could be altered to update
// dynamically, or a larger value could be used.
var matrix = [];
for (var i = 0; i < 64; i++) {
matrix[i] = [i];
matrix[i].length = 64;
}
for (var i = 0; i < 64; i++) {
matrix[0][i] = i;
}
// Functional implementation of Levenshtein Distance.
String.levenshteinDistance = function(__this, that, limit) {
var thisLength = __this.length, thatLength = that.length;
if (Math.abs(thisLength - thatLength) > (limit || 32)) return limit || 32;
if (thisLength === 0) return thatLength;
if (thatLength === 0) return thisLength;
// Calculate matrix.
var this_i, that_j, cost, min, t;
for (i = 1; i <= thisLength; ++i) {
this_i = __this[i-1];
for (j = 1; j <= thatLength; ++j) {
// Check the jagged ld total so far
if (i === j && matrix[i][j] > 4) return thisLength;
that_j = that[j-1];
cost = (this_i === that_j) ? 0 : 1; // Chars already match, no ++op to count.
// Calculate the minimum (much faster than Math.min(...)).
min = matrix[i - 1][j ] + 1; // Deletion.
if ((t = matrix[i ][j - 1] + 1 ) < min) min = t; // Insertion.
if ((t = matrix[i - 1][j - 1] + cost) < min) min = t; // Substitution.
matrix[i][j] = min; // Update matrix.
}
}
return matrix[thisLength][thatLength];
};
Damerau-Levenshtein Distance
jsperf.com/damerau-levenshtein-distance
Damerau-Levenshtein Distance is a small modification to Levenshtein Distance to include transpositions. There is very little to optimise.
// Damerau transposition.
if (i > 1 && j > 1 && this_i === that[j-2] && this[i-2] === that_j
&& (t = matrix[i-2][j-2]+cost) < matrix[i][j]) matrix[i][j] = t;
Sorting Algorithm
The second part of this answer is to choose an appropriate sort function. I will upload optimised sort functions to http://jsperf.com/sort soon.
I implemented a very performant implementation of levenshtein distance calculation if you still need this.
function levenshtein(s, t) {
if (s === t) {
return 0;
}
var n = s.length, m = t.length;
if (n === 0 || m === 0) {
return n + m;
}
var x = 0, y, a, b, c, d, g, h, k;
var p = new Array(n);
for (y = 0; y < n;) {
p[y] = ++y;
}
for (; (x + 3) < m; x += 4) {
var e1 = t.charCodeAt(x);
var e2 = t.charCodeAt(x + 1);
var e3 = t.charCodeAt(x + 2);
var e4 = t.charCodeAt(x + 3);
c = x;
b = x + 1;
d = x + 2;
g = x + 3;
h = x + 4;
for (y = 0; y < n; y++) {
k = s.charCodeAt(y);
a = p[y];
if (a < c || b < c) {
c = (a > b ? b + 1 : a + 1);
}
else {
if (e1 !== k) {
c++;
}
}
if (c < b || d < b) {
b = (c > d ? d + 1 : c + 1);
}
else {
if (e2 !== k) {
b++;
}
}
if (b < d || g < d) {
d = (b > g ? g + 1 : b + 1);
}
else {
if (e3 !== k) {
d++;
}
}
if (d < g || h < g) {
g = (d > h ? h + 1 : d + 1);
}
else {
if (e4 !== k) {
g++;
}
}
p[y] = h = g;
g = d;
d = b;
b = c;
c = a;
}
}
for (; x < m;) {
var e = t.charCodeAt(x);
c = x;
d = ++x;
for (y = 0; y < n; y++) {
a = p[y];
if (a < c || d < c) {
d = (a > d ? d + 1 : a + 1);
}
else {
if (e !== s.charCodeAt(y)) {
d = c + 1;
}
else {
d = c;
}
}
p[y] = d;
c = a;
}
h = d;
}
return h;
}
It was my answer to a similar SO question
Fastest general purpose Levenshtein Javascript implementation
Update
A improved version of the above is now on github/npm see
https://github.com/gustf/js-levenshtein
The obvious way of doing this is to map each string to a (distance, string) pair, then sort this list, then drop the distances again. This way you ensure the levenstein distance only has to be computed once. Maybe merge duplicates first, too.
I would definitely suggest using a better Levenshtein method like the one in #James Westgate's answer.
That said, DOM manipulations are often a great expense. You can certainly improve your jQuery usage.
Your loops are rather small in the example above, but concatenating the generated html for each oneResult into a single string and doing one append at the end of the loop will be much more efficient.
Your selectors are slow. $('.oneResult') will search all elements in the DOM and test their className in older IE browsers. You may want to consider something like atRes.find('.oneResult') to scope the search.
In the case of adding the click handlers, we may want to do one better avoid setting handlers on every keyup. You could leverage event delegation by setting a single handler on atRest for all results in the same block you are setting the keyup handler:
atRest.on('click', '.oneResult', function(){
window.location.href = 'http://hashtag.ly/' + $(this).html();
});
See http://api.jquery.com/on/ for more info.
I just wrote an new revision: http://jsperf.com/levenshtein-algorithms/16
function levenshtein(a, b) {
if (a === b) return 0;
var aLen = a.length;
var bLen = b.length;
if (0 === aLen) return bLen;
if (0 === bLen) return aLen;
var len = aLen + 1;
var v0 = new Array(len);
var v1 = new Array(len);
var i = 0;
var j = 0;
var c2, min, tmp;
while (i < len) v0[i] = i++;
while (j < bLen) {
c2 = b.charAt(j++);
v1[0] = j;
i = 0;
while (i < aLen) {
min = v0[i] - (a.charAt(i) === c2 ? 1 : 0);
if (v1[i] < min) min = v1[i];
if (v0[++i] < min) min = v0[i];
v1[i] = min + 1;
}
tmp = v0;
v0 = v1;
v1 = tmp;
}
return v0[aLen];
}
This revision is faster than the other ones. Works even on IE =)