Boucle générant un style

Par Benjamin Derepas, il y a 13 ans

PHP

Bonjour !
Petit projet que j'ai voulu monter, je souhaite générer toutes les couleurs du web existantes ...
J'utilise donc le code rgb pour sa.
J'aimerais afficher pour chaque couleur existante , de rgb(0,0,0) à rgb(255,255,255), un carré avec ce style.
Mais impossible pour le moment =D

Voilà mon code :

$ch_1 = array(0, 1 ,2 ,3 ,4 ,5 ,6 ,7 ,8 ,9 ,10 ,11 ,12 ,13 ,14 ,15 ,16 ,17 ,18 ,19 ,20 ,21 ,22 ,23 ,24 ,25 ,26 ,27 ,28 ,29 ,30 ,31 ,32 ,33 ,34 ,35 ,36 ,37 ,38 ,39 ,40 ,41 ,42 ,43 ,44 ,45 ,46 ,47 ,48 ,49 ,50 ,51 ,52 ,53 ,54 ,55 ,56 ,57 ,58 ,59 ,60 ,61 ,62 ,63 ,64 ,65 ,66 ,67 ,68 ,69 ,70 ,71 ,72 ,73 ,74 ,75 ,76 ,77 ,78 ,79 ,80 ,81 ,82 ,83 ,84 ,85 ,86 ,87 ,88 ,89 ,90 ,91 ,92 ,93 ,94 ,95 ,96 ,97 ,98 ,99 ,100 ,101 ,102 ,103 ,104 ,105 ,106 ,107 ,108 ,109 ,110 ,111 ,112 ,113 ,114 ,115 ,116 ,117 ,118 ,119 ,120 ,121 ,122 ,123 ,124 ,125 ,126 ,127 ,128 ,129 ,130 ,131 ,132 ,133 ,134 ,135 ,136 ,137 ,138 ,139 ,140 ,141 ,142 ,143 ,144 ,145 ,146 ,147 ,148 ,149 ,150 ,151 ,152 ,153 ,154 ,155 ,156 ,157 ,158 ,159 ,160 ,161 ,162 ,163 ,164 ,165 ,166 ,167 ,168 ,169 ,170 ,171 ,172 ,173 ,174 ,175 ,176 ,177 ,178 ,179 ,180 ,181 ,182 ,183 ,184 ,185 ,186 ,187 ,188 ,189 ,190 ,191 ,192 ,193 ,194 ,195 ,196 ,197 ,198 ,199 ,200 ,201 ,202 ,203 ,204 ,205 ,206 ,207 ,208 ,209 ,210 ,211 ,212 ,213 ,214 ,215 ,216 ,217 ,218 ,219 ,220 ,221 ,222 ,223 ,224 ,225 ,226 ,227 ,228 ,229 ,230 ,231 ,232 ,233 ,234 ,235 ,236 ,237 ,238 ,239 ,240 ,241 ,242 ,243 ,244 ,245 ,246 ,247 ,248 ,249 ,250 ,251 ,252 ,253 ,254 ,255);
$ch_2 = array(0, 1 ,2 ,3 ,4 ,5 ,6 ,7 ,8 ,9 ,10 ,11 ,12 ,13 ,14 ,15 ,16 ,17 ,18 ,19 ,20 ,21 ,22 ,23 ,24 ,25 ,26 ,27 ,28 ,29 ,30 ,31 ,32 ,33 ,34 ,35 ,36 ,37 ,38 ,39 ,40 ,41 ,42 ,43 ,44 ,45 ,46 ,47 ,48 ,49 ,50 ,51 ,52 ,53 ,54 ,55 ,56 ,57 ,58 ,59 ,60 ,61 ,62 ,63 ,64 ,65 ,66 ,67 ,68 ,69 ,70 ,71 ,72 ,73 ,74 ,75 ,76 ,77 ,78 ,79 ,80 ,81 ,82 ,83 ,84 ,85 ,86 ,87 ,88 ,89 ,90 ,91 ,92 ,93 ,94 ,95 ,96 ,97 ,98 ,99 ,100 ,101 ,102 ,103 ,104 ,105 ,106 ,107 ,108 ,109 ,110 ,111 ,112 ,113 ,114 ,115 ,116 ,117 ,118 ,119 ,120 ,121 ,122 ,123 ,124 ,125 ,126 ,127 ,128 ,129 ,130 ,131 ,132 ,133 ,134 ,135 ,136 ,137 ,138 ,139 ,140 ,141 ,142 ,143 ,144 ,145 ,146 ,147 ,148 ,149 ,150 ,151 ,152 ,153 ,154 ,155 ,156 ,157 ,158 ,159 ,160 ,161 ,162 ,163 ,164 ,165 ,166 ,167 ,168 ,169 ,170 ,171 ,172 ,173 ,174 ,175 ,176 ,177 ,178 ,179 ,180 ,181 ,182 ,183 ,184 ,185 ,186 ,187 ,188 ,189 ,190 ,191 ,192 ,193 ,194 ,195 ,196 ,197 ,198 ,199 ,200 ,201 ,202 ,203 ,204 ,205 ,206 ,207 ,208 ,209 ,210 ,211 ,212 ,213 ,214 ,215 ,216 ,217 ,218 ,219 ,220 ,221 ,222 ,223 ,224 ,225 ,226 ,227 ,228 ,229 ,230 ,231 ,232 ,233 ,234 ,235 ,236 ,237 ,238 ,239 ,240 ,241 ,242 ,243 ,244 ,245 ,246 ,247 ,248 ,249 ,250 ,251 ,252 ,253 ,254 ,255);
$ch_3 = array(0, 1 ,2 ,3 ,4 ,5 ,6 ,7 ,8 ,9 ,10 ,11 ,12 ,13 ,14 ,15 ,16 ,17 ,18 ,19 ,20 ,21 ,22 ,23 ,24 ,25 ,26 ,27 ,28 ,29 ,30 ,31 ,32 ,33 ,34 ,35 ,36 ,37 ,38 ,39 ,40 ,41 ,42 ,43 ,44 ,45 ,46 ,47 ,48 ,49 ,50 ,51 ,52 ,53 ,54 ,55 ,56 ,57 ,58 ,59 ,60 ,61 ,62 ,63 ,64 ,65 ,66 ,67 ,68 ,69 ,70 ,71 ,72 ,73 ,74 ,75 ,76 ,77 ,78 ,79 ,80 ,81 ,82 ,83 ,84 ,85 ,86 ,87 ,88 ,89 ,90 ,91 ,92 ,93 ,94 ,95 ,96 ,97 ,98 ,99 ,100 ,101 ,102 ,103 ,104 ,105 ,106 ,107 ,108 ,109 ,110 ,111 ,112 ,113 ,114 ,115 ,116 ,117 ,118 ,119 ,120 ,121 ,122 ,123 ,124 ,125 ,126 ,127 ,128 ,129 ,130 ,131 ,132 ,133 ,134 ,135 ,136 ,137 ,138 ,139 ,140 ,141 ,142 ,143 ,144 ,145 ,146 ,147 ,148 ,149 ,150 ,151 ,152 ,153 ,154 ,155 ,156 ,157 ,158 ,159 ,160 ,161 ,162 ,163 ,164 ,165 ,166 ,167 ,168 ,169 ,170 ,171 ,172 ,173 ,174 ,175 ,176 ,177 ,178 ,179 ,180 ,181 ,182 ,183 ,184 ,185 ,186 ,187 ,188 ,189 ,190 ,191 ,192 ,193 ,194 ,195 ,196 ,197 ,198 ,199 ,200 ,201 ,202 ,203 ,204 ,205 ,206 ,207 ,208 ,209 ,210 ,211 ,212 ,213 ,214 ,215 ,216 ,217 ,218 ,219 ,220 ,221 ,222 ,223 ,224 ,225 ,226 ,227 ,228 ,229 ,230 ,231 ,232 ,233 ,234 ,235 ,236 ,237 ,238 ,239 ,240 ,241 ,242 ,243 ,244 ,245 ,246 ,247 ,248 ,249 ,250 ,251 ,252 ,253 ,254 ,255);
    foreach ($ch_1 as $color_1)
     {
        foreach ($ch_2 as $color_2)
        {
            foreach ($ch_3 as $color_3)
            {
                echo '<span style="background:#'.$color_3.''.$color_2.''.$color_1.'"> </span>';
            }
        }
    }
?>

Déjà, est il utile de définir 3 variables ?
Est ce que cela peut fonctionner : 

$ch_1 = $ch_2 = $ch_3 = array(...);

Y'a t-il un problème dans ma boucle ? (mon serveur crash au bout de 30 sec ...)

6 réponses

Wapaca, il y a 13 ans

Salut,

Ne t'étonnes pas trop que ton serveur crash tu fais trois boucles imbriqués qui vont faire 256 itérations chacune ce qui fait un total de 256 * 256 * 256 soit 16 777 216 itérations nécessaires pour sortir des trois boucles.

Après pour ce qui est d'une solution pour faire ce que tu demandes je ne vois que la solution de faire le calcul en local en éxecutant ton code php dans une console comme un script (il y a des tutos sur internet pour ça) afin de générer un code HTML qui sera assez lourd mais qui au final répondra à tes attentes.

Maenhyr, il y a 13 ans

Salut,
Alors ceci devrait effectivement réaliser ce que tu souhaites.

$ch_1 = $ch_2 = $ch_3 = array(...);

Par contre tu vas avoir un petit soucis pour les couleurs, tu souhaites avoir un background-color en hexa mais tu fais de 0 à 255. Donc sois tu mets tes données en hexa dans ton array, soit tu mets 

echo '<span style="background:rgba('.$color_3.','.$color_2.','.$color_1.',1);"> </span>';

Pour ton soucis de calcul, je pense que tu devrais utiliser de l'ajax et faire des petits calculs qui vont s'afficher. Tu lances un premier calcul affichant une 100aine de couleurs, et en JS tu lances un autre calcul qui va afficher un deuxième bloc, ... . Un peu le même principe que la pagination par exemple.

Benjamin Derepas, il y a 13 ans

@prbaron : effectivement, erreur de frappe lors du test, c'est bien du rgb() que j'ai utilisé lors des tests.
@Wapace : je vais tester via un script, je ferais part de mon resultat sur le forum ! merci

Wapaca, il y a 13 ans

Salut,

Voici un très petit script fait rapidement en C++ (je me faisais chier et je n'ai pas les droits root sur l'ordi de l'IUT pour installer php en console) :

#include <iostream>
#include <fstream>
#include <iomanip>
using namespace std;
int main(void) {
    ofstream Fichier;
    Fichier.open ("Background.html");   
    for(unsigned i = 0; i<256;++i)
        for(unsigned k = 0; k<256;++k)
            for(unsigned l = 0; l<256;++l) {
                Fichier << "<div style=\"width=100%;height:5px;background:rgba("<< i << ',' << k << ',' << l <<");\"></div>" << endl;
                cout << i << " - " << k << " - " << l << endl;          
            }
    return 0;
}

Tu peux le compiler avec g++ si tu es sous linux.

Le code HTML généré doit sûrement être modifié et finalement la génération prendra moins de 20 minutes donc ça va mais par contre tu auras un fichier html assez lourd derrière :s

Benjamin Derepas, il y a 13 ans

@Wapaca : j'ai créer sensiblement le même code en C, compilé avec sublimeText2 ...
Voilà 30min qu'il compile, mon fichier index fait déjà 2 Go !

Maenhyr, il y a 13 ans

Je réitère ma proposition, si tu fais un système un peu comme ça la vidéo : http://css-tricks.com/slide-in-as-you-scroll-down-boxes/.

Concrètement, tu charges par blocs de 100 jusqu'à ce que tout soit chargé. Pour une bonne optimisation, il faudra faire une mise en cache.