J'essaie, ce qui est idiot je sais... , de faire un site web générant toute les couleurs rgb() soit 16 777 216 couleurs, oui ça fait beaucoup. ET j'ai un problème avec mon javascript car j'ai mis une boucle for dans une et elle même est dans une boucle for afin de générer mais 256 couleurs... je vous envoie mon code car mon js génère rgb(1, 1, 9016) plus ou moins ce qui est un problème car ce n'est pas une couleur...
var r = 0;
var g = 0;
var bl = 0;
for (var a = 0; a < 255; a++)
{
r++;
console.log(a);
var div = document.createElement("div");
var h2 = document.createElement("h2");
var h2Node = "rgb("+ r +", "+ g +", "+ bl + ")";
h2.textContent = h2Node;
document.getElementsByClassName("body")[0].appendChild(div);
div.appendChild(h2);
div.classList.add("block");
divClass = document.getElementsByClassName("block");
divClass[a].style.backgroundColor = "rgb("+ r +","+ g +","+ bl +")";
for (var b = 0; b < 255; b++)
{
g++;
console.log(bl);
var div = document.createElement("div");
var h2 = document.createElement("h2");
var h2Node = "rgb("+ r +", "+ g +", "+ bl + ")";
h2.textContent = h2Node;
document.getElementsByClassName("body")[0].appendChild(div);
div.appendChild(h2);
div.classList.add("block2");
divClass = document.getElementsByClassName("block2");
divClass[b].style.backgroundColor = "rgb("+ r +","+ g +","+ bl +")";
for (var c = 0; c < 255; c++)
{
bl++;
console.log(c);
var div = document.createElement("div");
var h2 = document.createElement("h2");
var h2Node = "rgb("+ r +", "+ g +", "+ bl + ")";
h2.textContent = h2Node;
document.getElementsByClassName("body")[0].appendChild(div);
div.appendChild(h2);
div.classList.add("block3");
divClass = document.getElementsByClassName("block3");
divClass[c].style.backgroundColor = "rgb("+ r +","+ g +","+ bl +")";
}
}
}
Merci d'avance,
Tout conseil est bon à prendre,
Maxence ABRILE
PS : utilisé codepen.io sinon à moins d'avoir le PC de la Nasa ce qui serait top ça chargera en boucle...
- Edité par Maxence ABRILE 12 janvier 2021 à 21:10:30
Tu dois utiliser les variables qui te servent d'iterations pour tes boucles, et non des variables que tu crées pour les iterer toi-meme sans les remettre à 0. Le problème ici est qu'à chaque fois que la boucle va reprendre sa fonction, ta variable aura la valeur d'avant. Et non un 0.
J'ai essayé de faire ce que tu essayais de faire, mais moi ça bloque à un moment donné.. Normalement, si suis bien éveillé à cette heure-ci, la boucle va s'arrêter à la 325 125 ème iterations. Normalement il ne devrait pas s'arrêter là mais à 16 581 375 comme tu l'as dit...
Peut-être que c'est à cause de codepen.. je ne sais pas...
Ah et ça peut prendre environ 1 minute à charger... Ou plus. (si seulement on avait tous des ordinateurs quantiques...)
Bonne nuit.
Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.
On sait que les couleurs rgb/rgba sont exprimable en un unique nombre hexadécimale (autrement dit, une seule incrémentation) également utilisable dans ton css.
Tu pourrais par exemple faire une boucle de ce genre :
let c = 0x000000;
while(c <= 0xffffff) {
const element = document.createElement('div');
element.style.backgroundColor = '#' + ('000000' + (c++).toString(16)).slice(-6);
/** Le reste de ton code **/
}
Tu dois utiliser les variables qui te servent d'iterations pour tes boucles, et non des variables que tu crées pour les iterer toi-meme sans les remettre à 0. Le problème ici est qu'à chaque fois que la boucle va reprendre sa fonction, ta variable aura la valeur d'avant. Et non un 0.
Salut, j'ai essayé ton code mais même après une heure il ne se lance pas je crois qu'il y a un léger bug dedans. De plus, dis mois si je me trompe mais il ne manquerais pas des point virgules aux lignes 4 et 8 ?
Et pour les deux codes que vous m'avez envoyé je crois que les deux génères des dégradés de gris en faisant 1,1,1 puis 2,2,2 ...
Bien que je n'ai pas pu les tester (les codes), c'est ce que j'y ai compris en faisant des recherches et en les décryptant... Et sinon pourquoi passer en hexa j'y ai pensé mais je ne vois pas (si je peux me permettre) l’intérêt ?
Merci encore pour votre aide,
Maxence ABRILE
PS : j'y travail encore.
PS * :
NadfriJS a écrit:
Salut, je suis pas sur qu'un navigateur puisse générer 16 millions de div....
Il faudrait penser le code différemment afin qu'il soit exploitable.
Je ne pense pas non plus mais il faudrait que mon code puisse les générer que si j'appuie sur suivant mais un problème à la fois. Après on peux toujours génerer des couleurs allant de 0,0,0 à 255,255,0 comme ça on en génère 256 fois moins soit : 65 536.
RE PS : (promis après j'arrête le PS) le code (en tout cas le premier) marche nickel merci beaucoup.
- Edité par Maxence ABRILE 13 janvier 2021 à 15:01:47
Mon code marche, et celui de brainError aussi, le seul problème est le fait que le navigateur crash.
Maxence ABRILE a écrit:
Je ne pense pas non plus mais il faudrait que mon code puisse les générer que si j'appuie sur suivant mais un problème à la fois. Après on peux toujours génerer des couleurs allant de 0,0,0 à 255,255,0 comme ça on en génère 256 fois moins soit : 65 536.
Comme tu as pu le constater, on a pas encore des ordinateurs quantiques, donc générer 16M de div au calme comme ça, comme l'a dit aussi nadfri, je ne crois pas aussi que ce soit pas possible.
Donc le mieux serait de directement faire une page avec des " suivants "...
Et là encore problème, tu veux générer 16M de divs.
Donc disons qu'il y a 5 divs par ligne, alors il y aura 3 316 275 divs dans une colonne.
Considérons que les divs ont un height de 100px, alors ça veut dire que ta page entière aura un scrollHeight de 331 627 500px. Sachant que les ordinateurs portable ayant en moyenne un height d'environ 800px, alors ça voudrait dire 414 524 pages.
Disons que pour diminuer un peu ce nombre de page, on fasse 800px * 3 (donc un scrollHeight dans une seule page) = 2400px, alors maintenant on aura environ 138 178 pages.
Tu connais une personne motivé pour parcourir 138 178 pages ?
Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.
Mais je pensais y mettre une barre de recherche mais c'est idiot tant qu'a faire utilisé un color picker... Sauf si, attention, les divs font 1px ce qui réduirait le nombre de pages à plus ou moins 1381 donc, c'est déja mieux. Et ce calcul en prenant en compte qu'il y ai 5 div par page. Sinon, 100 div par pages ce serait aussi mieux mais je dis rip au pc...
Pour en revenir au sujet, si tu cherches vraiment à représenter toutes les couleurs rgb possible (hors alpha), tu n'as pas d'autre choix que d'utiliser un canvas pour le faire.
C'est une question de performance. Générer 0x1000000 (=16777216 : le nombre de couleurs possibles) div implique que le navigateur va ensuite avoir besoin de traiter 0x1000000 règles css différentes (tes background-color) pour enfin commencer à procéder au rendu de ces 0x1000000 bloques (et attention, une div n'est pas juste un pixel, ça peut porter des événements par exemple) : effectivement, à vu de nez, ça parait simplement impossible.
Par contre, avec un canvas, il est tout à fait possible de travailler pixel par pixel de façon performante. Si en plus de ça tu utilise le GPU de ton client pour générer toutes ces couleurs, c'est encore plus facile pour le navigateur du client.
Par ailleurs, avec JS, tu peux parfaitement rendre un canvas manipulable par le client (par exemple, savoir sur quelle couleur se trouve le curseur du client.)
Un point négatif avec les canvas, c'est qu'il ne peuvent excéder 0x2000 (soit 8192) pixels de largeur et de hauteur.
Boucles for l'une dans l'autre annule la condition
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.
La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]
Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.
La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]
La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]
Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.