Merci beaucoup pour vos messages et à ceux qui prendrons le temps le répondre à celui-ci
Mon problème est que il faut évidement que dans les algorithmes je marques des "pauses" pour que le changement visuelle soit observable, l'utilisateur étant dans la possibilité de choisir le nombre de barres, la vitesse (c'est à dire la durée de la pause à chaque affectation) et l'algorithme à utiliser.
Comment mon code fonctionne pour le moment est que la pose est effectuée à chaque affectation (ce que j'entend par affectation est changement de la height de la div) ce qui fait que les algorithmes qui reposent sur un très grand nombres de comparaisons comme le tri à bulles sont représenté à une vitesse bien supérieur comparée aux autres qui reposent sur un nombre plus faible d'opérations mais ont une complexité similaire.
Pour rétablir un équilibre et que la durée de la représentation visuelle soit plus proportionnée à la complexité réel de l'algorithme pour le nombre de barre en question il faudrait que je marque la pose sur les comparaison en plus des affectations ce qui représenterais un nombre de pauses très importantes au final.
Mon dilemme et donc de soit conserver une durée acceptable de visualisation sans prendre en compte le nombre de comparaisons, soit de marquer une pause à chaque comparaisons pour rétablir un équilibre sur l'efficacité de certains algorithme mais d'avoir une durée de visualisation beaucoup plus longue (d'après mes tests). Ou bien, c'est pour ça que j'ai posé cette question, trouver un moyen de marquer des pauses très rapides pour me permettre d'en marquer aux comparaisons et opérations sans rendre la visualisation trop longue.
Je ne suis pas sur de mettre fait vraiment comprendre, merci beaucoup de vos messages!
Le code est pas nécessaire pour mon explications mais si celle-ci n'est pas très claire ce sera peut-être mieux avec.... (pour ceux qui liront si vous avez des critiques par la même occasion je suis preneur)
Je génère les barres :
class Bars {
constructor(container, nb) {
this.container = container;
this.nb = nb;
}
element(height, bnb) {
let div = document.createElement('div');
div.style.height = (height * 100) / bnb + '%';
this.container.appendChild(div);
}
set(nb = null) {
let h = [],
bnb = nb === null ? this.nb : nb;
for (let i = 0; i < bnb; i++) {
let n;
do {
n = Math.floor(Math.random() * bnb) + 1;
} while (h.includes(n));
h.push(n);
this.element(n, bnb);
}
return this.container.children;
}
clear() {
while (this.container.firstChild) {
this.container.firstChild.remove();
}
}
reload(nb = null) {
this.clear();
this.set(nb);
}
}
// range.value représente le nombre de barres.
const B = new Bars(container, range.value),
bars = B.set();
Je trie :
class Algo {
static async selectionSort() {
let m;
for (let i = 0; i < bars.length; i++) {
m = i;
for (let j = i + 1; j < bars.length; j++) {
if (Sorting.compare(bars[m], bars[j], true)) {
m = j;
}
}
await Sorting.replace(bars[i], bars[m], true);
}
}
}
Les fonctions que j'utilise pour ne pas trop me répéter parmi les différents algorithmes:
class Sorting {
static color(bars, color) {
for (let b of bars) {
if (b.style) {
b.style.background = color;
}
}
}
static calcSpeed() {
return Math.abs(speed.value - speed.max);
}
static sleep(ms = null) {
if (ms === null) {
ms = this.calcSpeed();
}
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
static async replace(a, b, both) {
this.color([a, b], 'red');
if (both) {
[a.style.height, b.style.height] = [b.style.height, a.style.height];
} else {
if (b.style) {
a.style.height = b.style.height;
} else {
a.style.height = b;
}
}
await this.sleep();
this.color([a, b], 'grey');
}
static async compare(a, b, strict) {
if (a.style) a = a.style.height;
if (b.style) b = b.style.height;
if (strict) {
return parseFloat(a) > parseFloat(b);
} else {
return parseFloat(a) >= parseFloat(b);
}
}
}
