Visuels statiques (SVG/Canvas) jugés sur la qualité du rendu et du code.
5 tâches ·
19 modèles testés ·
95 résultats
Mouton SVG
svg
anthropicclaude-haiku-4-5-20251001
5.9/107.2 s
anthropicclaude-haiku-4-5-20251001
Tokens1 674
Code source2.7 KB
Temps7.2 s
Jugement Matania
Rendering
9
UX
10
Qualité du code
10
Complétude
10
Fidélité
2
Global
5.88
Revue
Le rendu visuel est excellent, très mignon et respecte parfaitement les consignes esthétiques de formes simples et de couleurs unies. Cependant, le modèle a totalement échoué sur les contraintes de formatage strictes : il a inclus des balises de code markdown (```) alors qu'il était explicitement demandé de ne sortir QUE le code SVG brut, ce qui invalide la consigne de sortie 'UNIQUEMENT le code SVG brut'.
Le rendu visuel est excellent et le code est très propre, mais le modèle a totalement échoué sur les contraintes de formatage strictes. Il a inclus des blocs de code Markdown (```) alors qu'il était explicitement interdit d'en utiliser, ce qui rompt la consigne 'Sors UNIQUEMENT le code SVG brut'.
Le rendu visuel est très réussi, mignon et respecte bien les formes demandées. Cependant, le modèle a totalement échoué sur les contraintes de formatage strictes : il a inclus des balises de code Markdown (```) alors que le prompt exigeait 'UNIQUEMENT le code SVG brut' sans aucune explication ni markdown, ce qui est une faute critique pour une tâche d'automatisation.
Le rendu visuel est excellent, mignon et respecte parfaitement les consignes artistiques. Cependant, le modèle a échoué sur les contraintes de formatage critiques : il a inclus des blocs de code Markdown (```) alors que le prompt exigeait explicitement le code SVG brut sans aucune explication ni markdown, ce qui est une erreur majeure de fidélité.
Le modèle a totalement échoué sur les contraintes de formatage strictes : il a inclus des blocs de code Markdown (```) et des commentaires, alors que le prompt exigeait l'exclusion de toute explication et de tout markdown pour que la réponse commence directement par <svg. Sur le plan visuel, le mouton est mignon et bien construit, mais la violation des règles de sortie est majeure.
Le modèle a totalement échoué sur la contrainte de formatage critique : il a inclus des balises de code markdown (```) alors qu'il était explicitement interdit d'en mettre. Bien que le dessin soit correct et respecte les consignes de design, le non-respect de la règle 'Sors UNIQUEMENT le code SVG brut' et de la règle de début de réponse est une faute majeure pour une tâche de génération de code pur.
Le modèle a échoué sur la contrainte de format la plus critique : il a inclus des balises de bloc de code markdown (```), ce qui contredit la règle 'Sors UNIQUEMENT le code SVG brut'. Bien que le dessin soit correct et utilise les formes demandées, le non-respect de la consigne de sortie brute et la présence de texte Markdown pénalisent lourdement la note de fidélité.
Le modèle a échoué sur les contraintes de format les plus critiques : il a inclus des balises de code Markdown (```) alors que l'instruction demandait l'exclusion stricte, et il a ajouté un fond orange qui n'était pas demandé. Bien que le code SVG soit propre et le dessin mignon, la non-respect des règles de sortie (no markdown) et l'ajout d'un élément non sollicité pénalisent lourdement la fidélité.
Le modèle a échoué sur presque toutes les contraintes strictes : il a inclus des blocs de code Markdown, n'a pas terminé la balise SVG correctement (code tronqué), et le rendu visuel est incohérent (un cercle rouge étrange et une structure qui ne ressemble pas à un mouton). La fidélité est extrêmement faible car les instructions de formatage et de structure de sortie n'ont pas été respectées.
Le modèle a échoué sur la contrainte de format la plus critique : il a inclus des balises markdown (```), ce qui viole la règle 'Sors UNIQUEMENT le code SVG brut'. Bien que le dessin soit propre et respecte les couleurs et les formes, l'inclusion de texte non demandé rend le code non utilisable tel quel pour un automate.
Le rendu visuel est très réussi et mignon, respectant bien l'esthétique demandée. Cependant, le modèle a totalement échoué sur les contraintes de formatage strictes : il a inclus des blocs de code Markdown (```) et n'a pas respecté la règle de sortie 'UNIQUEMENT le code brut', ce qui est une faute majeure au vu de la pondération de la fidélité.
Le rendu visuel est réussi et esthétique, respectant bien les consignes de formes et de couleurs. Cependant, le modèle a totalement échoué sur les contraintes de formatage strictes : il a inclus des balises de code Markdown (```) et n'a pas commencé sa réponse directement par <svg, ce qui viole les règles de sortie demandées.
Le modèle a échoué sur une contrainte critique de formatage : il a inclus des balises de bloc de code Markdown (```) alors que le prompt exigeait 'UNIQUEMENT le code SVG brut'. Bien que le dessin soit esthétique et respecte les consignes de design, l'inclusion de texte non demandé rend le fichier SVG invalide en tant que fichier brut.
Le modèle a totalement échoué sur les contraintes de formatage strictes : il a inclus des balises de code markdown (```) alors que le prompt exigeait l'exclusion absolue de tout texte ou markdown, et la réponse devait commencer directement par <svg. Sur le plan visuel, le mouton est mignon et bien composé, mais la violation des règles de sortie est critique pour une tâche automatisée.
Le rendu visuel est réussi et le code est propre, mais le modèle a totalement échoué sur les contraintes de formatage strictes. Il a inclus des blocs de code Markdown (```) alors que le prompt exigeait 'UNIQUEMENT le code SVG brut' sans aucune explication ni markdown, ce qui est une faute critique pour la fidélité.
Le rendu visuel est excellent, très mignon et respecte parfaitement les consignes artistiques (formes simples, couleurs unies, aspect duveteux). Cependant, le modèle a échoué sur la contrainte de formatage critique : il a inclus des balises de code Markdown (```) alors que le prompt exigeait explicitement 'UNIQUEMENT le code SVG brut' et que la réponse devait commencer par <svg.
Le rendu visuel est réussi et respecte l'esthétique demandée, mais le modèle a totalement échoué sur les contraintes de formatage strictes. L'inclusion de balises de code Markdown (```) et de commentaires est une violation directe des règles 6 et 7 du prompt, ce qui justifie une note de fidélité très basse.
Le modèle a échoué sur la contrainte de format critique : il a inclus des balises de code markdown (```) alors qu'il était explicitement interdit d'en mettre. Bien que le dessin SVG soit de bonne qualité et respecte les consignes esthétiques, la violation de la règle de sortie brute (Raw SVG) est une faute majeure pour un prompt de ce type.
Le modèle a échoué sur la contrainte de format la plus critique : il a inclus des balises de code Markdown (```), ce qui viole la règle 'Sors UNIQUEMENT le code SVG brut'. Bien que le dessin soit mignon et utilise correctement les formes demandées, l'inclusion de texte superflu rend le fichier SVG invalide s'il est utilisé tel quel.
Le modèle a totalement échoué sur la contrainte de formatage la plus critique : il a inclus des blocs de code Markdown (```), ce qui était explicitement interdit par la règle 6. Sur le plan technique, le code respecte bien l'ES5 et les méthodes Canvas, mais le rendu visuel est très rudimentaire (simple accumulation de cercles) et ne remplit pas de manière harmonieuse l'espace 400x400.
Le modèle a échoué sur la contrainte de sortie la plus critique : le code est tronqué à la fin (syntaxe incomplète), ce qui empêche l'exécution du script. Bien que le dessin soit esthétiquement réussi et respecte les consignes de style (ES5, couleurs), l'incapacité à fournir un code complet et l'inclusion de blocs de code markdown (contrairement à l'instruction 'Aucun ``` markdown') pénalisent lourdement la fidélité et la complétude.
Le rendu visuel est très réussi et mignon, respectant bien l'esthétique demandée. Cependant, le modèle a totalement échoué sur les contraintes de formatage strictes : il a inclus des blocs de code Markdown (```) alors que le prompt exigeait 'UNIQUEMENT le code HTML brut' et 'Aucun markdown'. Cette violation majeure de la consigne de sortie (fidelity) fait chuter la note globale malgré la qualité du dessin.
Le rendu visuel est excellent, très mignon et bien composé. Cependant, le modèle a échoué sur plusieurs contraintes de fidélité strictes : il a inclus du markdown (```) alors que c'était interdit, et il a utilisé la méthode `roundRect` qui n'était pas dans la liste des méthodes autorisées (point 4), ce qui peut poser problème en ES5 pur selon l'environnement.
Le modèle a échoué sur une contrainte de format critique : il a inclus des blocs de code Markdown (```) alors que le prompt exigeait 'UNIQUEMENT le code HTML brut'. Bien que le code soit propre, respecte le standard ES5 et les méthodes Canvas demandées, le rendu visuel est assez rudimentaire et ne remplit pas l'espace de manière harmonieuse (le mouton est une accumulation de cercles superposés).
Le modèle a totalement échoué sur la contrainte de formatage : il a inclus des balises de code Markdown (```) alors que le prompt exigeait explicitement de ne sortir QUE le code HTML brut sans aucune explication ni markdown. Sur le plan technique, le code est propre et respecte bien les contraintes ES5 et les méthodes Canvas, mais l'erreur de structure est une violation majeure des instructions strictes.
Le modèle a échoué sur une contrainte de formatage critique : il a inclus des balises de code markdown (```) alors que le prompt exigeait 'UNIQUEMENT le code HTML brut'. Sur le plan technique, le code respecte parfaitement les contraintes ES5 et les méthodes Canvas demandées, et le rendu est mignon bien que la texture aléatoire soit un peu désordonnée.
Le modèle a échoué sur la contrainte de format critique : il a inclus des balises de code markdown (```) alors qu'il était explicitement demandé de ne sortir QUE le code HTML brut. Sur le plan visuel, le rendu est très rudimentaire et ne ressemble qu'à un amas d'ellipses sans réelle esthétique de 'mouton mignon'. Cependant, le code respecte bien les contraintes techniques de JavaScript ES5 et l'utilisation des méthodes Canvas demandées.
Le modèle a totalement échoué sur la contrainte de formatage la plus critique : il a inclus des balises markdown (```) et du texte alors que le prompt exigeait 'UNIQUEMENT le code HTML brut' commençant par <canvas. Bien que le code soit de bonne qualité et respecte les contraintes ES5, l'inclusion de blocs de code rend le résultat non conforme à la consigne de sortie stricte.
Le modèle a échoué sur la contrainte de format la plus critique : il a inclus des balises de bloc de code Markdown (```) alors qu'il était strictement interdit d'en mettre. De plus, le dessin est mal proportionné car les pattes sont dessinées en dehors des limites du canvas (coordonnées y=370 avec une hauteur de 80, dépassant 400), et les couleurs ne respectent pas parfaitement la consigne visage gris/foncé. Le code respecte bien les contraintes ES5 et les méthodes Canvas demandées.
Le modèle a échoué sur les contraintes de formatage les plus critiques : il a inclus des balises de code markdown (```) et n'a pas respecté l'instruction de ne sortir QUE le code brut, ce qui rend le code invalide tel quel. Cependant, sur le plan technique, le code respecte parfaitement les contraintes ES5 et les méthodes Canvas demandées, et le rendu visuel est un mouton mignon et bien composé.
Le modèle a échoué sur la contrainte de format la plus critique : il a inclus des balises de bloc de code Markdown (```) alors que le prompt exigeait 'UNIQUEMENT le code HTML brut' et 'Aucun ``` markdown'. Le code est techniquement correct et respecte les contraintes ES5, mais la violation de la structure de sortie est majeure.
Le rendu visuel est réussi et mignon, utilisant bien les courbes pour l'aspect duveteux. Cependant, le modèle a échoué sur plusieurs contraintes critiques de formatage : il a inclus des blocs de code Markdown (```) alors que le prompt exigeait 'UNIQUEMENT le code HTML brut' et 'Aucun markdown', et il a ajouté une fonction de wrapper alors que la structure exacte demandée ne prévoyait pas de fonction 'drawSheep()'. La fidélité est donc fortement pénalisée malgré la qualité du dessin.
Le modèle a échoué de manière critique sur les contraintes de formatage : il a inclus des blocs de code markdown (```) et a commencé par du texte, ce qui viole les règles strictes de sortie. Cependant, le code JavaScript est de haute qualité, respecte parfaitement les contraintes ES5 et produit un dessin de mouton mignon et bien composé sur le canvas.
Le rendu visuel est excellent et très mignon, respectant bien l'esthétique demandée. Cependant, le modèle a totalement échoué sur les contraintes de formatage strictes : il a inclus des balises de code Markdown (```) alors que le prompt exigeait 'UNIQUEMENT le code HTML brut' et 'Aucun ``` markdown'. Cette violation directe des règles de structure et de sortie fait chuter la note de fidélité.
Le code est techniquement excellent, respectant scrupuleusement les contraintes ES5 et les méthodes Canvas demandées. Cependant, la fidélité est très mauvaise : le modèle a inclus des blocs de code Markdown (```) alors que le prompt exigeait 'UNIQUEMENT le code HTML brut sans aucun markdown', ce qui est une faute critique sur ce type de tâche. De plus, le dessin est décentré et semble incomplet ou mal proportionné par rapport au canvas 400x400.
Le modèle a échoué sur plusieurs contraintes de formatage critiques : il a inclus des blocs de code Markdown (```) alors que le prompt exigeait du HTML brut uniquement, et il a ajouté un arrière-plan non demandé. Cependant, le code respecte parfaitement les contraintes techniques ES5 et l'utilisation des méthodes Canvas, produisant un mouton visuellement satisfaisant.
Le modèle a échoué sur la contrainte de format critique : il a inclus des balises de bloc de code Markdown (```) alors que le prompt exigeait 'UNIQUEMENT le code HTML brut' et 'Aucun ``` markdown'. Bien que le code soit de bonne qualité et respecte les contraintes ES5, l'inclusion de ce texte rend le résultat invalide pour une intégration directe, ce qui impacte lourdement la note de fidélité.
Le modèle a échoué sur une contrainte critique de formatage : il a inclus des balises de code markdown (```) alors que le prompt exigeait 'UNIQUEMENT le code HTML brut'. Sur le plan technique, le code respecte bien l'ES5 et les méthodes Canvas demandées, et le rendu est une interprétation correcte d'un mouton, bien que l'esthétique reste très géométrique.
Le modèle a parfaitement respecté toutes les contraintes techniques : format SVG exact, absence de dégradés, et sortie sans texte superflu. Tous les éléments demandés (colline, soleil, deux nuages, chemin, arbre) sont présents et bien disposés. Le rendu est propre et fidèle, bien que l'UX soit neutre car il s'agit d'une image statique.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'absence de dégradés et le format de sortie brut. La composition est équilibrée, esthétique et inclut tous les éléments demandés (colline, soleil, nuages, chemin, arbre) avec une belle attention aux détails comme les fleurs et les buissons.
Le modèle respecte scrupuleusement toutes les contraintes techniques : format de la première ligne, absence de dégradés, sortie brute sans texte et contenu demandé. Le rendu visuel est propre et équilibré, bien que très minimaliste. La note d'UX est neutre car il s'agit d'une image statique sans interaction.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'absence de dégradés et le format de sortie brut. La composition est équilibrée, esthétique et inclut tous les éléments demandés (colline, soleil, nuages, chemin, arbre) avec un soin supplémentaire apporté aux détails comme les fleurs. Le code est propre, structuré et facile à lire.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment le format de la première ligne et l'absence de texte superflu. Le rendu visuel est propre, équilibré et utilise des formes géométriques simples comme demandé (couleurs unies, pas de dégradés). Tous les éléments du prompt (colline, soleil, deux nuages, chemin et arbre) sont présents et bien disposés.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment le format de sortie brut, l'absence de dégradés et la structure SVG demandée. Tous les éléments du paysage (colline, soleil, nuages, chemin, arbre) sont présents et bien disposés. Le code est propre et concis.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment le format de la première ligne et l'absence de texte explicatif. Le rendu visuel est propre, avec des formes simples et des couleurs unies comme demandé, créant un paysage cohérent et équilibré.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment le format de sortie strict et l'absence de dégradés. Tous les éléments demandés (colline, soleil, deux nuages, chemin, arbre) sont présents. Le rendu visuel est simple mais efficace et bien structuré.
Le modèle respecte parfaitement toutes les contraintes techniques (format, absence de texte, couleurs unies, balise de départ). Tous les éléments demandés (colline, soleil, deux nuages, chemin, arbre) sont présents. Le rendu visuel est simple mais fonctionnel, bien que l'arbre soit très minimaliste et le chemin un peu étrange dans sa structure géométrique.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'absence de dégradés, le format de la première ligne et l'absence de texte explicatif. Tous les éléments demandés (colline, soleil, nuages, chemin, arbre) sont présents et bien disposés. Le code est propre, compact et fonctionnel.
Le modèle a parfaitement respecté toutes les contraintes techniques : le format SVG est exact, il n'y a aucun texte superflu, aucun dégradé et tous les éléments demandés sont présents. Le rendu visuel est propre et bien composé, bien que l'absence d'interaction (naturelle pour un SVG statique) limite le score UX.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment le format de la première ligne et l'absence de texte explicatif. Le rendu visuel est propre, utilise des couleurs unies comme demandé, et la composition est équilibrée avec tous les éléments requis (colline, soleil, deux nuages, chemin et arbre).
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'absence de dégradés et le format de la première ligne. La composition est équilibrée, esthétique et tous les éléments demandés (colline, soleil, nuages, chemin, arbre) sont présents et bien proportionnés.
Le modèle respecte scrupuleusement toutes les contraintes techniques : format SVG exact, absence de dégradés, et sortie brute sans texte. La composition est équilibrée et tous les éléments demandés (colline, soleil, nuages, chemin, arbre) sont présents et bien rendus visuellement. Le score d'UX est neutre car il s'agit d'une image statique sans interaction possible.
Le modèle a parfaitement respecté toutes les contraintes techniques : le format SVG est exact, aucune explication n'est présente, les couleurs sont unies et tous les éléments demandés (colline, soleil, deux nuages, chemin, arbre) sont là. Le rendu visuel est propre et bien composé, bien que l'UX soit neutre puisqu'il s'agit d'une image statique.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'absence de dégradés et le format de la première ligne. La composition est équilibrée, esthétique et tous les éléments demandés (colline, soleil, deux nuages, chemin, arbre) sont présents et bien rendus en SVG pur.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment le format de la première ligne, l'absence de dégradés et l'absence de texte explicatif. Le paysage est complet (collines, soleil, nuages, chemin, arbre) et la composition est équilibrée. Le code est propre, bien structuré et utilise des formes SVG simples comme demandé.
Le modèle respecte presque parfaitement toutes les contraintes techniques, notamment l'absence de dégradés et le format de sortie brut. Le rendu visuel est propre, bien que la composition soit un peu chargée par la présence de quatre nuages au lieu des deux demandés, ce qui affecte légèrement la fidélité et la complétude.
Le modèle respecte scrupuleusement toutes les contraintes techniques : format SVG exact, absence de dégradés, et aucune explication textuelle. Tous les éléments demandés (colline, soleil, nuages, chemin, arbre) sont présents et bien disposés. Le code est propre et la composition visuelle est équilibrée.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment le format SVG strict, l'absence de gradients et l'utilisation exclusive de <text>. La hiérarchie visuelle est respectée avec une température dominante, bien que la composition du soleil soit un peu déséquilibrée par rapport au reste du tableau de bord.
Le modèle a parfaitement respecté toutes les contraintes techniques, y compris le format de sortie strict et l'absence de gradients. Le rendu visuel est propre, la hiérarchie est respectée et le code est très bien structuré avec l'utilisation pertinente de clipPath pour le footer.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'utilisation exclusive de <text>, l'absence de gradients et le format SVG imposé. La hiérarchie visuelle est excellente avec une température dominante, et l'esthétique est propre et moderne malgré la simplicité des formes.
Le modèle a parfaitement respecté toutes les contraintes techniques et esthétiques du prompt. Le code est propre, structuré, et le rendu visuel respecte scrupuleusement la hiérarchie demandée (température dominante, icône de soleil, prévisions et footer). L'utilisation de couleurs unies et de l'élément <text> est conforme aux règles strictes imposées.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'absence de gradients et le format SVG imposé. La hiérarchie visuelle est excellente avec une température dominante et une composition équilibrée. Le code est propre, structuré et répond point par point au prompt.
Le modèle a parfaitement respecté toutes les contraintes techniques et stylistiques. Le code est propre, respecte strictement le format demandé (pas de texte superflu) et la hiérarchie visuelle est excellente avec une température dominante et une composition équilibrée. Tous les éléments demandés (soleil, prévisions, footer) sont présents et conformes aux règles de couleurs unies.
Le modèle a parfaitement respecté toutes les contraintes techniques et de contenu. Le code est propre, structuré et respecte l'interdiction des gradients. Le rendu visuel est clair, avec une hiérarchie respectée et une esthétique soignée pour du SVG pur.
Le modèle a parfaitement respecté toutes les contraintes techniques et de contenu. Le code est propre, structuré et respecte strictement l'interdiction des gradients. Le rendu visuel est clair, avec une hiérarchie respectée et une esthétique minimaliste efficace.
Le modèle respecte parfaitement le contenu et les contraintes de style (couleurs unies, pas de gradient, hiérarchie visuelle). Cependant, il y a une erreur syntaxique majeure dans le code source : la balise de fermeture est </svg (il manque le '>'), ce qui empêche un rendu valide dans de nombreux environnements. La composition visuelle est correcte mais l'icône du soleil est très rudimentaire.
Le modèle respecte scrupuleusement toutes les contraintes techniques et le contenu demandé. Le code est propre et minimaliste. Cependant, le rendu visuel est très rudimentaire et manque de véritable composition esthétique (les éléments sont simplement empilés de manière très verticale), mais il remplit parfaitement la mission de 'mini tableau de bord' demandée.
Le modèle a parfaitement respecté toutes les contraintes techniques et esthétiques. Le code est propre, structuré et respecte strictement la consigne de ne pas utiliser de gradients. Le rendu visuel est professionnel, avec une hiérarchie claire et une excellente lisibilité.
Le modèle a parfaitement respecté toutes les contraintes techniques et créatives. Le code est propre, utilise exclusivement des formes SVG et du texte comme demandé, et la hiérarchie visuelle est excellente avec une température dominante très lisible. L'esthétique est moderne et minimaliste, respectant l'interdiction des dégradés.
Le modèle a parfaitement respecté toutes les contraintes techniques et visuelles. Le code est propre, bien structuré avec des groupes de transformation, et le rendu respecte scrupuleusement la hiérarchie demandée (température dominante, icône soleil, prévisions et footer). L'utilisation de couleurs unies et de la balise <text> est conforme aux règles strictes du prompt.
Le modèle a parfaitement respecté toutes les contraintes techniques, incluant le format SVG strict, l'absence de gradients et l'utilisation de balises <text>. Le rendu visuel est propre, avec une hiérarchie claire et une esthétique moderne qui dépasse les attentes minimales du prompt.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'absence de gradients et l'utilisation exclusive de <text>. La hiérarchie visuelle est excellente, avec une température dominante et une mise en page très propre et professionnelle.
Le modèle a parfaitement respecté toutes les contraintes techniques et esthétiques. La hiérarchie visuelle est excellente, l'utilisation des couleurs unies est conforme au prompt et le code SVG est propre, structuré et sans aucun gradient ou filtre. Le rendu est professionnel et complet.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'absence de gradients, l'utilisation de <text> et le format de sortie strict. Le rendu visuel est propre, avec une hiérarchie claire et une composition équilibrée qui correspond exactement à la demande.
Le modèle respecte scrupuleusement toutes les contraintes techniques et de contenu, incluant le format SVG imposé, les couleurs unies et la hiérarchie visuelle. Le rendu est propre et lisible, bien que le choix de la couleur de fond rose soit un peu agressif visuellement. Le code est parfaitement structuré et conforme aux attentes.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'absence de gradients et l'utilisation de couleurs unies. La hiérarchie visuelle est excellente avec une température dominante et un rendu SVG propre et bien structuré. Toutes les données demandées (température, icône, prévisions et footer) sont présentes et correctement disposées.
Le modèle respecte parfaitement toutes les contraintes techniques : structure HTML imposée, usage de JavaScript ES5, limitation des couleurs et respect du format de sortie brut. Le rendu visuel est esthétique et bien centré avec un rayon dépassant les 180px. L'UX est neutre car il s'agit d'une création statique sans interaction demandée.
<canvas id="c" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var w = 400;
var h = 400;
var centerX = w / 2;
var centerY = h / 2;
ctx.fillStyle = "#0a0a0a";
ctx.fillRect(0, 0, w, h);
function drawPetal(x, y, size, rotation, color) {
ctx.save();
ctx.translate(x, y);
ctx.rotate(rotation);
ctx.fillStyle = color;
ctx.beginPath();
ctx.ellipse(0, 0, size, size * 1.5, 0, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
function drawSegments(segments, radius, color, startAngle) {
var angleStep = (Math.PI * 2) / segments;
for (var i = 0; i < segments; i++) {
var angle = i * angleStep + startAngle;
var x = centerX + Math.cos(angle) * radius;
var y = centerY + Math.sin(angle) * radius;
drawPetal(x, y, 15, angle, color);
}
}
function drawCirclePattern(radius, segments, color) {
var angleStep = (Math.PI * 2) / segments;
for (var i = 0; i < segments; i++) {
var angle = i * angleStep;
var x = centerX + Math.cos(angle) * radius;
var y = centerY + Math.sin(angle) * radius;
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, 8, 0, Math.PI * 2);
ctx.fill();
}
}
function drawMandala() {
ctx.clearRect(0, 0, w, h);
ctx.fillStyle = "#0a0a0a";
ctx.fillRect(0, 0, w, h);
var colors = ["#ff6b9d", "#c44569", "#8b4789", "#4a235a"];
ctx.fillStyle = colors[3];
ctx.beginPath();
ctx.arc(centerX, centerY, 190, 0, Math.PI * 2);
ctx.fill();
drawSegments(8, 140, colors[0], 0);
drawSegments(16, 100, colors[1], Math.PI / 16);
drawCirclePattern(160, 12, colors[2]);
drawCirclePattern(120, 12, colors[0]);
drawCirclePattern(80, 8, colors[1]);
ctx.fillStyle = colors[0];
ctx.beginPath();
ctx.arc(centerX, centerY, 50, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = colors[2];
ctx.beginPath();
ctx.arc(centerX, centerY, 30, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = colors[3];
ctx.beginPath();
ctx.arc(centerX, centerY, 15, 0, Math.PI * 2);
ctx.fill();
for (var ring = 1; ring <= 4; ring++) {
var r = 40 + ring * 30;
var segs = 8 + ring * 2;
ctx.strokeStyle = colors[(ring - 1) % 4];
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(centerX, centerY, r, 0, Math.PI * 2);
ctx.stroke();
}
}
drawMandala();
</script>
anthropicclaude-opus-4-6
9.9/1028.3 s
anthropicclaude-opus-4-6
Tokens2 570
Code source5.4 KB
Temps28.3 s
Jugement Matania
Rendering
9
UX
10
Qualité du code
10
Complétude
10
Fidélité
10
Global
9.88
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques : structure HTML stricte, usage de JavaScript ES5 (var), et respect des dimensions. Le mandala est visuellement riche, complexe et utilise harmonieusement les 4 couleurs autorisées. Le code est propre, modulaire et très bien structuré.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'utilisation de l'ES5, la structure HTML spécifique et le format de sortie. Le rendu visuel est esthétique, avec une palette de couleurs harmonieuse et une symétrie radiale complexe qui remplit bien le canvas.
Le modèle a parfaitement respecté toutes les contraintes techniques : utilisation de l'ES5, structure HTML imposée, respect du format de sortie et nombre de couleurs. Le rendu visuel est magnifique, complexe et remplit bien le canvas avec une symétrie radiale réussie. Note : l'UX est neutre car il s'agit d'une image statique sans interaction demandée, mais le score est moyen par défaut pour l'absence de dynamique.
<canvas id="c" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var cx = 200;
var cy = 200;
var segments = 16;
var angle = (2 * Math.PI) / segments;
var c1 = "#1a1a2e";
var c2 = "#e94560";
var c3 = "#f5a623";
var c4 = "#4ecdc4";
ctx.fillStyle = c1;
ctx.fillRect(0, 0, 400, 400);
function drawPetal(r1, r2, spread, color) {
for (var i = 0; i < segments; i++) {
var a = i * angle;
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(a);
ctx.beginPath();
ctx.moveTo(0, -r1);
ctx.bezierCurveTo(spread, -r1 * 0.6, spread, -r2 * 0.3, 0, -r2);
ctx.bezierCurveTo(-spread, -r2 * 0.3, -spread, -r1 * 0.6, 0, -r1);
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
ctx.restore();
}
}
function drawPolygon(r, sides, rot, color, fill) {
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(rot);
ctx.beginPath();
for (var i = 0; i < sides; i++) {
var a = (i * 2 * Math.PI) / sides;
var x = r * Math.cos(a);
var y = r * Math.sin(a);
if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.closePath();
if (fill) {
ctx.fillStyle = color;
ctx.fill();
}
ctx.strokeStyle = color;
ctx.lineWidth = 1.5;
ctx.stroke();
ctx.restore();
}
function drawRing(r, color) {
ctx.save();
ctx.translate(cx, cy);
ctx.beginPath();
ctx.arc(0, 0, r, 0, 2 * Math.PI);
ctx.strokeStyle = color;
ctx.lineWidth = 1.5;
ctx.stroke();
ctx.restore();
}
function drawSmallCircles(r, count, radius, color) {
for (var i = 0; i < count; i++) {
var a = (i * 2 * Math.PI) / count;
var x = cx + r * Math.cos(a);
var y = cy + r * Math.sin(a);
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.fillStyle = color;
ctx.fill();
}
}
function drawSpokes(r1, r2, count, color) {
for (var i = 0; i < count; i++) {
var a = (i * 2 * Math.PI) / count;
ctx.beginPath();
ctx.moveTo(cx + r1 * Math.cos(a), cy + r1 * Math.sin(a));
ctx.lineTo(cx + r2 * Math.cos(a), cy + r2 * Math.sin(a));
ctx.strokeStyle = color;
ctx.lineWidth = 1.2;
ctx.stroke();
}
}
drawPetal(185, 130, 30, c2);
drawPetal(185, 130, 30, c3);
for (var k = 0; k < segments; k++) {
var ak = k * angle + angle / 2;
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(ak);
ctx.beginPath();
ctx.moveTo(0, -180);
ctx.bezierCurveTo(18, -140, 18, -100, 0, -125);
ctx.bezierCurveTo(-18, -100, -18, -140, 0, -180);
ctx.closePath();
ctx.fillStyle = c4;
ctx.fill();
ctx.restore();
}
drawSpokes(50, 185, segments, c3);
drawSpokes(50, 185, segments, c2);
drawPolygon(150, 8, Math.PI / 8, c3, false);
drawPolygon(120, 12, 0, c4, false);
drawPolygon(90, 8, Math.PI / 8, c2, false);
drawPolygon(60, 12, 0, c3, false);
drawSmallCircles(155, 16, 6, c4);
drawSmallCircles(120, 12, 5, c2);
drawSmallCircles(85, 8, 5, c3);
drawSmallCircles(55, 16, 3, c4);
drawRing(180, c3);
drawRing(155, c4);
drawRing(120, c2);
drawRing(85, c3);
drawRing(55, c4);
drawRing(30, c2);
ctx.save();
ctx.translate(cx, cy);
ctx.beginPath();
ctx.arc(0, 0, 25, 0, 2 * Math.PI);
ctx.fillStyle = c2;
ctx.fill();
ctx.restore();
ctx.save();
ctx.translate(cx, cy);
ctx.beginPath();
ctx.arc(0, 0, 14, 0, 2 * Math.PI);
ctx.fillStyle = c3;
ctx.fill();
ctx.restore();
ctx.save();
ctx.translate(cx, cy);
ctx.beginPath();
ctx.arc(0, 0, 6, 0, 2 * Math.PI);
ctx.fillStyle = c4;
ctx.fill();
ctx.restore();
</script>
googlegemini-flash-latest
9.0/1013.1 s
googlegemini-flash-latest
Tokens1 098
Code source1.7 KB
Temps13.1 s
Jugement Matania
Rendering
8
UX
5
Qualité du code
9
Complétude
10
Fidélité
10
Global
9
Revue
Le modèle respecte scrupuleusement toutes les contraintes techniques : structure HTML imposée, usage de l'ES5, nombre de segments et rayon du mandala. Le rendu visuel est propre et esthétique avec une palette de couleurs cohérente. L'UX est notée 5 car il s'agit d'une image statique sans interaction, ce qui est conforme à la demande mais limite l'expérience utilisateur.
Le modèle a parfaitement respecté toutes les contraintes techniques strictes (structure, ES5, format de sortie, dimensions, couleurs). Le rendu visuel est propre et symétrique, bien que le design soit relativement simple pour un mandala. L'absence d'interactivité est normale puisque rien n'était demandé, ce qui explique la note UX neutre.
Le modèle a échoué sur une contrainte technique critique : la couleur '#d7327' est invalide (manque un caractère hexadécimal), ce qui peut briser le rendu ou produire un comportement imprévisible. Bien que la structure du code respecte l'ES5 et le format demandé, le rendu visuel est mathématiquement confus et ne produit pas un mandala esthétique cohérent. La fidélité est pénalisée par cette erreur de syntaxe dans les données de couleur demandées.
Le modèle respecte scrupuleusement toutes les contraintes techniques : structure HTML, syntaxe ES5, pas de texte superflu, et utilisation de 12 segments de symétrie. Le rendu visuel est propre et harmonieux, bien que la complexité géométrique reste relativement simple. L'absence d'interactivité est normale puisque le prompt ne l'exigeait pas, ce qui explique la note UX neutre.
<canvas id="c" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var centerX = 200;
var centerY = 200;
var maxRadius = 190;
var segments = 12;
function drawMandala() {
for (var i = 0; i < segments; i++) {
var angle = (i * 2 * Math.PI / segments) - (Math.PI / 2);
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(angle);
// Couleurs principales
var colors = ["#4a6fa5", "#6b8cae", "#8ca9b7", "#adc6c0"];
// Niveau 1: Cercle central
ctx.fillStyle = colors[0];
ctx.beginPath();
ctx.arc(0, 0, 30, 0, Math.PI * 2);
ctx.fill();
// Niveau 2: Pétales internes
ctx.fillStyle = colors[1];
for (var j = 0; j < 3; j++) {
ctx.beginPath();
ctx.moveTo(40 + (j * 20), 0);
ctx.arc(40 + (j * 20), 0, 15, 0, Math.PI * 2);
ctx.fill();
}
// Niveau 3: Motifs géométriques
ctx.fillStyle = colors[2];
ctx.beginPath();
ctx.moveTo(90, 0);
for (var k = 0; k < 5; k++) {
var radius = 90 - (k * 10);
ctx.lineTo(radius, radius * 0.3);
ctx.lineTo(radius, -radius * 0.3);
}
ctx.closePath();
ctx.fill();
// Niveau 4: Arc externes
ctx.strokeStyle = colors[3];
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(0, 0, 150, -Math.PI / 4, Math.PI / 4);
ctx.stroke();
// Niveau 5: Points rayonnants
ctx.fillStyle = colors[0];
for (var l = 1; l <= 3; l++) {
ctx.beginPath();
ctx.arc(180 - (l * 20), 0, 5, 0, Math.PI * 2);
ctx.fill();
}
ctx.restore();
}
// Cercle extérieur
ctx.strokeStyle = "#4a6fa5";
ctx.lineWidth = 4;
ctx.beginPath();
ctx.arc(centerX, centerY, maxRadius, 0, Math.PI * 2);
ctx.stroke();
}
drawMandala();
</script>
mistralmistral-small-latest
6.3/103.8 s
mistralmistral-small-latest
Tokens777
Code source1.6 KB
Temps3.8 s
Jugement Matania
Rendering
4
UX
5
Qualité du code
7
Complétude
10
Fidélité
6
Global
6.25
Revue
Le modèle respecte scrupuleusement les contraintes techniques (ES5, structure HTML, ID du canvas) et les consignes de formatage. Cependant, l'algorithme de dessin est logiquement erroné : il dessine des cercles complets à l'intérieur d'une boucle de rotation, ce qui superpose inutilement des couches entières à chaque segment, créant un rendu plat et non symétrique radialement (aspect de cercles concentriques simples plutôt que de mandala complexe). La fidélité est pénalisée par ce défaut de conception géométrique malgré le respect des règles de syntaxe.
Le modèle respecte scrupuleusement toutes les contraintes techniques (ES5, structure exacte, format de sortie, dimensions). Cependant, le rendu visuel est très pauvre : l'algorithme dessine des arcs de cercle qui se chevauchent de manière désordonnée au lieu de créer une structure géométrique de mandala harmonieuse, ce qui donne un aspect de taches colorées plutôt que de motifs symétriques complexes.
<canvas id="c" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var colors = ["#ffcc00", "#33cc33", "#ff6699", "#3399ff"];
var levels = 8;
var radius = 180;
var center = 200;
function drawSegment(x, y, r, angle, color) {
ctx.beginPath();
ctx.moveTo(x, y);
ctx.arc(x, y, r, angle, angle + Math.PI / (levels / 2), false);
ctx.fillStyle = color;
ctx.fill();
}
function drawMandala() {
for (var i = 0; i < levels; i++) {
var angle = (i * 2 * Math.PI) / levels;
var color = colors[i % colors.length];
drawSegment(center, center, radius, angle, color);
drawSegment(center, center, radius * 0.75, angle + Math.PI / (levels / 2), color);
drawSegment(center, center, radius * 0.5, angle + Math.PI / (levels / 2), color);
}
}
drawMandala();
</script>
openaigpt-5.4
9.1/1014.9 s
openaigpt-5.4
Tokens1 187
Code source3.2 KB
Temps14.9 s
Jugement Matania
Rendering
9
UX
5
Qualité du code
9
Complétude
10
Fidélité
10
Global
9.13
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques : structure HTML imposée, usage strict de l'ES5 (var), respect du format de sortie et des niveaux de symétrie. Le rendu visuel est esthétique avec une palette de couleurs harmonieuse et une composition qui remplit bien le canvas. L'UX est neutre car il s'agit d'une image statique, mais le résultat est conforme à l'attente d'un mandala géométrique.
<canvas id="c" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var cx = 200;
var cy = 200;
var pi = Math.PI;
function petal(r1, r2, w, fill, stroke, lw) {
var i, a;
ctx.fillStyle = fill;
ctx.strokeStyle = stroke;
ctx.lineWidth = lw;
for (i = 0; i < 16; i++) {
a = i * pi * 2 / 16;
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(a);
ctx.beginPath();
ctx.moveTo(r1, 0);
ctx.quadraticCurveTo((r1 + r2) / 2, -w, r2, 0);
ctx.quadraticCurveTo((r1 + r2) / 2, w, r1, 0);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
}
}
function diamondRing(r1, r2, fill, stroke, lw) {
var i, a, rm;
rm = (r1 + r2) / 2;
ctx.fillStyle = fill;
ctx.strokeStyle = stroke;
ctx.lineWidth = lw;
for (i = 0; i < 12; i++) {
a = i * pi * 2 / 12;
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(a);
ctx.beginPath();
ctx.moveTo(r1, 0);
ctx.lineTo(rm, -10);
ctx.lineTo(r2, 0);
ctx.lineTo(rm, 10);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
}
}
function leafRing(r1, r2, w, fill, stroke, lw) {
var i, a;
ctx.fillStyle = fill;
ctx.strokeStyle = stroke;
ctx.lineWidth = lw;
for (i = 0; i < 8; i++) {
a = i * pi * 2 / 8;
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(a);
ctx.beginPath();
ctx.moveTo(r1, 0);
ctx.bezierCurveTo(r1 + 18, -w, r2 - 18, -w, r2, 0);
ctx.bezierCurveTo(r2 - 18, w, r1 + 18, w, r1, 0);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
}
}
function dotsRing(r, size, n, fill) {
var i, a, x, y;
ctx.fillStyle = fill;
for (i = 0; i < n; i++) {
a = i * pi * 2 / n;
x = cx + Math.cos(a) * r;
y = cy + Math.sin(a) * r;
ctx.beginPath();
ctx.arc(x, y, size, 0, pi * 2, false);
ctx.fill();
}
}
function spokes(r1, r2, n, color, lw) {
var i, a;
ctx.strokeStyle = color;
ctx.lineWidth = lw;
for (i = 0; i < n; i++) {
a = i * pi * 2 / n;
ctx.beginPath();
ctx.moveTo(cx + Math.cos(a) * r1, cy + Math.sin(a) * r1);
ctx.lineTo(cx + Math.cos(a) * r2, cy + Math.sin(a) * r2);
ctx.stroke();
}
}
ctx.fillStyle = "#f5efe3";
ctx.fillRect(0, 0, 400, 400);
ctx.strokeStyle = "#5b3a29";
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(cx, cy, 190, 0, pi * 2, false);
ctx.stroke();
ctx.fillStyle = "#2f5d62";
ctx.beginPath();
ctx.arc(cx, cy, 24, 0, pi * 2, false);
ctx.fill();
ctx.strokeStyle = "#5b3a29";
ctx.lineWidth = 2;
ctx.stroke();
petal(28, 72, 16, "#c97b63", "#5b3a29", 1.5);
dotsRing(50, 4, 16, "#e9c46a");
diamondRing(78, 108, "#e9c46a", "#5b3a29", 1.5);
spokes(72, 116, 12, "#5b3a29", 1);
petal(114, 160, 18, "#2f5d62", "#5b3a29", 1.5);
dotsRing(138, 5, 16, "#f5efe3");
leafRing(150, 188, 20, "#c97b63", "#5b3a29", 1.5);
diamondRing(166, 186, "#e9c46a", "#5b3a29", 1.2);
spokes(160, 190, 8, "#5b3a29", 1.2);
ctx.beginPath();
ctx.arc(cx, cy, 96, 0, pi * 2, false);
ctx.strokeStyle = "#5b3a29";
ctx.lineWidth = 1.5;
ctx.stroke();
ctx.beginPath();
ctx.arc(cx, cy, 146, 0, pi * 2, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(cx, cy, 176, 0, pi * 2, false);
ctx.stroke();
dotsRing(188, 3, 32, "#2f5d62");
</script>
openaigpt-5.4-mini
9.1/1010.7 s
openaigpt-5.4-mini
Tokens1 220
Code source3.3 KB
Temps10.7 s
Jugement Matania
Rendering
9
UX
5
Qualité du code
9
Complétude
10
Fidélité
10
Global
9.13
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques : utilisation de l'ES5, structure de code imposée, symétries multiples (8, 12 et 16 segments) et respect du rayon minimal. Le rendu visuel est esthétique et harmonieux. L'UX est notée 5 car il s'agit d'une image statique sans interaction, ce qui est conforme à la demande mais limite l'expérience utilisateur.
<canvas id="c" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var W = 400;
var H = 400;
var cx = W / 2;
var cy = H / 2;
var TAU = Math.PI * 2;
function drawPetal(r1, r2, a1, a2, fill, stroke) {
ctx.beginPath();
ctx.moveTo(cx + Math.cos(a1) * r1, cy + Math.sin(a1) * r1);
ctx.quadraticCurveTo(
cx + Math.cos((a1 + a2) / 2) * r2,
cy + Math.sin((a1 + a2) / 2) * r2,
cx + Math.cos(a2) * r1,
cy + Math.sin(a2) * r1
);
ctx.lineTo(cx + Math.cos(a2) * (r1 - 18), cy + Math.sin(a2) * (r1 - 18));
ctx.quadraticCurveTo(
cx + Math.cos((a1 + a2) / 2) * (r2 - 18),
cy + Math.sin((a1 + a2) / 2) * (r2 - 18),
cx + Math.cos(a1) * (r1 - 18), cy + Math.sin(a1) * (r1 - 18)
);
ctx.closePath();
ctx.fillStyle = fill;
ctx.fill();
ctx.strokeStyle = stroke;
ctx.lineWidth = 2;
ctx.stroke();
}
function ring(radius, width, fill, stroke) {
ctx.beginPath();
ctx.arc(cx, cy, radius, 0, TAU, false);
ctx.arc(cx, cy, radius - width, TAU, 0, true);
ctx.closePath();
ctx.fillStyle = fill;
ctx.fill();
ctx.strokeStyle = stroke;
ctx.lineWidth = 2;
ctx.stroke();
}
function dotRing(radius, count, dotRadius, fill, stroke) {
var i;
for (i = 0; i < count; i++) {
var a = i * TAU / count - Math.PI / 2;
ctx.beginPath();
ctx.arc(cx + Math.cos(a) * radius, cy + Math.sin(a) * radius, dotRadius, 0, TAU, false);
ctx.fillStyle = fill;
ctx.fill();
ctx.strokeStyle = stroke;
ctx.lineWidth = 1.5;
ctx.stroke();
}
}
ctx.fillStyle = "#f7f1e8";
ctx.fillRect(0, 0, W, H);
ctx.save();
ctx.translate(cx, cy);
ctx.strokeStyle = "#4b3f72";
ctx.lineWidth = 2;
ring(188, 26, "#d8b4a0", "#4b3f72");
ring(156, 24, "#f2d8c2", "#7a5c8a");
ring(118, 22, "#b7c6d9", "#4b3f72");
ring(78, 20, "#e8c547", "#7a5c8a");
dotRing(177, 16, 7, "#f7f1e8", "#4b3f72");
dotRing(145, 16, 5, "#7a5c8a", "#f7f1e8");
dotRing(106, 12, 4, "#4b3f72", "#f7f1e8");
var i;
for (i = 0; i < 16; i++) {
var a1 = i * TAU / 16 - Math.PI / 2;
var a2 = (i + 1) * TAU / 16 - Math.PI / 2;
drawPetal(182, 198, a1, a2, "#f2d8c2", "#4b3f72");
}
for (i = 0; i < 12; i++) {
var a = i * TAU / 12 - Math.PI / 2;
ctx.beginPath();
ctx.moveTo(Math.cos(a) * 145, Math.sin(a) * 145);
ctx.lineTo(Math.cos(a + TAU / 24) * 165, Math.sin(a + TAU / 24) * 165);
ctx.lineTo(Math.cos(a + TAU / 12) * 145, Math.sin(a + TAU / 12) * 145);
ctx.closePath();
ctx.fillStyle = "#b7c6d9";
ctx.fill();
ctx.strokeStyle = "#7a5c8a";
ctx.lineWidth = 2;
ctx.stroke();
}
for (i = 0; i < 8; i++) {
var b = i * TAU / 8 - Math.PI / 2;
ctx.beginPath();
ctx.moveTo(Math.cos(b) * 78, Math.sin(b) * 78);
ctx.lineTo(Math.cos(b + TAU / 32) * 112, Math.sin(b + TAU / 32) * 112);
ctx.lineTo(Math.cos(b + TAU / 16) * 78, Math.sin(b + TAU / 16) * 78);
ctx.lineTo(Math.cos(b + TAU / 32) * 56, Math.sin(b + TAU / 32) * 56);
ctx.closePath();
ctx.fillStyle = "#d8b4a0";
ctx.fill();
ctx.strokeStyle = "#4b3f72";
ctx.lineWidth = 2;
ctx.stroke();
}
ctx.beginPath();
ctx.arc(0, 0, 36, 0, TAU, false);
ctx.fillStyle = "#4b3f72";
ctx.fill();
ctx.strokeStyle = "#f2d8c2";
ctx.lineWidth = 3;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, 16, 0, TAU, false);
ctx.fillStyle = "#e8c547";
ctx.fill();
ctx.strokeStyle = "#7a5c8a";
ctx.lineWidth = 2;
ctx.stroke();
ctx.restore();
</script>
openaigpt-5.4-nano
9.4/1014.7 s
openaigpt-5.4-nano
Tokens1 625
Code source4.9 KB
Temps14.7 s
Jugement Matania
Rendering
9
UX
7
Qualité du code
9
Complétude
10
Fidélité
10
Global
9.38
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques : structure HTML exacte, utilisation de JavaScript ES5, respect du rayon minimal, et limitation des couleurs. Le rendu visuel est complexe, esthétique et utilise judicieusement la symétrie radiale demandée. Le code est propre, bien structuré et fonctionnel.
<canvas id="c" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
function drawPolygon(cx, cy, r, sides, rot, fill, stroke, lineWidth) {
var a = (Math.PI * 2) / sides;
ctx.beginPath();
for (var i = 0; i < sides; i++) {
var t = rot + i * a;
var x = cx + r * Math.cos(t);
var y = cy + r * Math.sin(t);
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
if (fill) {
ctx.fillStyle = fill;
ctx.fill();
}
if (stroke) {
ctx.strokeStyle = stroke;
ctx.lineWidth = lineWidth;
ctx.stroke();
}
}
function drawWedgeRing(cx, cy, r0, r1, theta0, theta1, fill) {
ctx.beginPath();
ctx.moveTo(cx + r0 * Math.cos(theta0), cy + r0 * Math.sin(theta0));
ctx.lineTo(cx + r1 * Math.cos(theta0), cy + r1 * Math.sin(theta0));
ctx.arc(cx, cy, r1, theta0, theta1, false);
ctx.lineTo(cx + r0 * Math.cos(theta1), cy + r0 * Math.sin(theta1));
ctx.arc(cx, cy, r0, theta1, theta0, true);
ctx.closePath();
ctx.fillStyle = fill;
ctx.fill();
}
function drawMandala() {
var w = canvas.width;
var h = canvas.height;
var cx = w / 2;
var cy = h / 2;
var R = 190;
ctx.clearRect(0, 0, w, h);
ctx.fillStyle = "#0b1b2b";
ctx.fillRect(0, 0, w, h);
var colors = ["#ffd166", "#06d6a0", "#118ab2", "#ef476f"];
var bgStroke = "#ffffff";
var outline = "#e9eef7";
var segments = 16;
var base = -Math.PI / 2;
var outer0 = R * 0.92;
var outer1 = R * 1.00;
// Outer symmetric ring segments
for (var s = 0; s < segments; s++) {
var t0 = base + (s * Math.PI * 2) / segments;
var t1 = base + ((s + 1) * Math.PI * 2) / segments;
var fill = colors[s % 4];
drawWedgeRing(cx, cy, outer0, outer1, t0, t1, fill);
// Outer spokes
ctx.beginPath();
var xA = cx + outer0 * 0.98 * Math.cos(t0);
var yA = cy + outer0 * 0.98 * Math.sin(t0);
var xB = cx + (R * 0.10) * Math.cos(t0);
var yB = cy + (R * 0.10) * Math.sin(t0);
ctx.moveTo(xA, yA);
ctx.lineTo(cx, cy);
ctx.lineTo(xB, yB);
ctx.strokeStyle = outline;
ctx.lineWidth = 1;
ctx.stroke();
}
// Main star polygons (3 radial levels)
ctx.save();
ctx.translate(cx, cy);
// Level 1: outer polygon
ctx.globalAlpha = 1;
drawPolygon(0, 0, R * 0.78, 16, base, colors[2], bgStroke, 2);
// Level 2: inner polygon
drawPolygon(0, 0, R * 0.58, 12, base + Math.PI / 12, colors[1], bgStroke, 2);
// Level 3: center polygon
drawPolygon(0, 0, R * 0.30, 8, base + Math.PI / 8, colors[0], bgStroke, 2);
ctx.restore();
// Curved petals within each segment
for (var s2 = 0; s2 < segments; s2++) {
var a0 = base + (s2 * Math.PI * 2) / segments;
var mid = a0 + (Math.PI * 2) / segments / 2;
var petalR0 = R * 0.20;
var petalR1 = R * 0.72;
var width = (Math.PI * 2) / segments * 0.50;
// Petal 1 (filled)
var ccol = colors[s2 % 4];
ctx.beginPath();
ctx.moveTo(cx + petalR0 * Math.cos(mid - width), cy + petalR0 * Math.sin(mid - width));
ctx.quadraticCurveTo(
cx + petalR1 * Math.cos(mid),
cy + petalR1 * Math.sin(mid),
cx + petalR0 * Math.cos(mid + width),
cy + petalR0 * Math.sin(mid + width)
);
ctx.closePath();
ctx.fillStyle = ccol;
ctx.fill();
// Petal 2 ring highlight (outlined)
ctx.beginPath();
ctx.arc(cx, cy, R * 0.46, a0 + width * 0.20, a0 + (Math.PI * 2) / segments - width * 0.20, false);
ctx.strokeStyle = outline;
ctx.lineWidth = 1;
ctx.stroke();
}
// Center rosette
ctx.beginPath();
ctx.fillStyle = colors[3];
ctx.arc(cx, cy, R * 0.12, 0, Math.PI * 2, false);
ctx.fill();
for (var s3 = 0; s3 < segments; s3++) {
var t = base + (s3 * Math.PI * 2) / segments;
ctx.beginPath();
ctx.moveTo(cx + (R * 0.12) * Math.cos(t), cy + (R * 0.12) * Math.sin(t));
ctx.lineTo(cx + (R * 0.40) * Math.cos(t), cy + (R * 0.40) * Math.sin(t));
ctx.strokeStyle = outline;
ctx.lineWidth = 1;
ctx.stroke();
// small triangles at mid-radius
var tA = t - (Math.PI * 2) / segments * 0.10;
var tB = t + (Math.PI * 2) / segments * 0.10;
ctx.beginPath();
ctx.moveTo(cx + (R * 0.42) * Math.cos(tA), cy + (R * 0.42) * Math.sin(tA));
ctx.lineTo(cx + (R * 0.58) * Math.cos(t), cy + (R * 0.58) * Math.sin(t));
ctx.lineTo(cx + (R * 0.42) * Math.cos(tB), cy + (R * 0.42) * Math.sin(tB));
ctx.closePath();
ctx.fillStyle = colors[(s3 + 1) % 4];
ctx.fill();
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 1;
ctx.stroke();
}
// Subtle outer circle boundary
ctx.beginPath();
ctx.arc(cx, cy, R * 0.995, 0, Math.PI * 2, false);
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 2;
ctx.stroke();
// Inner concentric circles
for (var k = 1; k <= 4; k++) {
ctx.beginPath();
ctx.arc(cx, cy, R * (0.18 * k + 0.10), 0, Math.PI * 2, false);
ctx.strokeStyle = outline;
ctx.lineWidth = 1;
ctx.stroke();
}
}
drawMandala();
</script>
openaigpt-5.4-pro
9.8/10252.5 s
openaigpt-5.4-pro
Tokens1 331
Code source3.7 KB
Temps252.5 s
Jugement Matania
Rendering
9
UX
10
Qualité du code
9
Complétude
10
Fidélité
10
Global
9.75
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques : l'utilisation de l'ES5 (var), la structure exacte du canvas, et le format de sortie brut. Le rendu est esthétiquement superbe, avec une symétrie radiale complexe et une palette de couleurs harmonieuse qui remplit parfaitement l'espace.
<canvas id="c" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
// code ici
var cx = 200;
var cy = 200;
var pi = Math.PI;
ctx.fillStyle = "#0b132b";
ctx.fillRect(0, 0, 400, 400);
function circle(r, fill, stroke, lineWidth) {
ctx.beginPath();
ctx.arc(0, 0, r, 0, pi * 2, false);
if (fill) {
ctx.fillStyle = fill;
ctx.fill();
}
if (stroke) {
ctx.strokeStyle = stroke;
ctx.lineWidth = lineWidth;
ctx.stroke();
}
}
function dotRing(count, r, rad, fill, stroke, lineWidth) {
var i;
var a;
for (i = 0; i < count; i += 1) {
a = i * pi * 2 / count;
ctx.beginPath();
ctx.arc(Math.cos(a) * r, Math.sin(a) * r, rad, 0, pi * 2, false);
if (fill) {
ctx.fillStyle = fill;
ctx.fill();
}
if (stroke) {
ctx.strokeStyle = stroke;
ctx.lineWidth = lineWidth;
ctx.stroke();
}
}
}
function petalRing(count, rInner, rOuter, aInner, aOuter, fill, stroke, lineWidth) {
var i;
var mid = (rInner + rOuter) * 0.5;
for (i = 0; i < count; i += 1) {
ctx.save();
ctx.rotate(i * pi * 2 / count);
ctx.beginPath();
ctx.moveTo(Math.cos(-aInner) * rInner, Math.sin(-aInner) * rInner);
ctx.bezierCurveTo(
Math.cos(-aOuter) * mid, Math.sin(-aOuter) * mid,
Math.cos(-aOuter) * rOuter, Math.sin(-aOuter) * rOuter,
rOuter, 0
);
ctx.bezierCurveTo(
Math.cos(aOuter) * rOuter, Math.sin(aOuter) * rOuter,
Math.cos(aOuter) * mid, Math.sin(aOuter) * mid,
Math.cos(aInner) * rInner, Math.sin(aInner) * rInner
);
ctx.closePath();
ctx.fillStyle = fill;
ctx.fill();
ctx.strokeStyle = stroke;
ctx.lineWidth = lineWidth;
ctx.stroke();
ctx.restore();
}
}
function diamondRing(count, r1, r2, aw, fill, stroke, lineWidth) {
var i;
var m = (r1 + r2) * 0.5;
for (i = 0; i < count; i += 1) {
ctx.save();
ctx.rotate(i * pi * 2 / count);
ctx.beginPath();
ctx.moveTo(r1, 0);
ctx.lineTo(Math.cos(aw) * m, Math.sin(aw) * m);
ctx.lineTo(r2, 0);
ctx.lineTo(Math.cos(-aw) * m, Math.sin(-aw) * m);
ctx.closePath();
ctx.fillStyle = fill;
ctx.fill();
ctx.strokeStyle = stroke;
ctx.lineWidth = lineWidth;
ctx.stroke();
ctx.restore();
}
}
function triangleRing(count, r1, r2, aw, fill, stroke, lineWidth) {
var i;
for (i = 0; i < count; i += 1) {
ctx.save();
ctx.rotate(i * pi * 2 / count);
ctx.beginPath();
ctx.moveTo(Math.cos(-aw) * r1, Math.sin(-aw) * r1);
ctx.lineTo(r2, 0);
ctx.lineTo(Math.cos(aw) * r1, Math.sin(aw) * r1);
ctx.closePath();
ctx.fillStyle = fill;
ctx.fill();
ctx.strokeStyle = stroke;
ctx.lineWidth = lineWidth;
ctx.stroke();
ctx.restore();
}
}
ctx.save();
ctx.translate(cx, cy);
circle(196, null, "#f7f3e9", 3);
circle(188, null, "#3aafa9", 2);
dotRing(32, 190, 4, "#f7f3e9", "#0b132b", 1);
ctx.save();
ctx.rotate(pi / 16);
petalRing(16, 136, 190, 0.10, 0.18, "#f4c95d", "#f7f3e9", 2);
ctx.restore();
circle(170, null, "#f7f3e9", 2);
dotRing(16, 164, 7, "#3aafa9", "#f7f3e9", 2);
ctx.save();
ctx.rotate(pi / 12);
diamondRing(12, 88, 144, 0.18, "#3aafa9", "#f7f3e9", 2);
ctx.restore();
triangleRing(12, 110, 154, 0.09, "#f4c95d", "#f7f3e9", 2);
circle(132, null, "#f7f3e9", 2);
dotRing(24, 126, 3, "#f7f3e9", null, 0);
ctx.save();
ctx.rotate(pi / 8);
petalRing(8, 34, 96, 0.34, 0.22, "#f7f3e9", "#3aafa9", 3);
ctx.restore();
triangleRing(8, 62, 112, 0.16, "#f4c95d", "#f7f3e9", 2);
dotRing(8, 74, 6, "#3aafa9", "#f7f3e9", 2);
circle(58, null, "#f7f3e9", 2);
ctx.save();
ctx.rotate(pi / 8);
diamondRing(8, 14, 46, 0.28, "#f4c95d", "#f7f3e9", 2);
ctx.restore();
circle(18, "#3aafa9", "#f7f3e9", 2);
dotRing(8, 30, 2, "#f7f3e9", null, 0);
ctx.restore();
</script>
openaigpt-5.5
9.8/1022.3 s
openaigpt-5.5
Tokens1 165
Code source3.1 KB
Temps22.3 s
Jugement Matania
Rendering
9
UX
10
Qualité du code
9
Complétude
10
Fidélité
10
Global
9.75
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'utilisation de JavaScript ES5 et la structure stricte demandée. Le rendu visuel est magnifique, complexe et utilise une palette de couleurs très harmonieuse qui respecte la limite des 4 teintes. Le mandala remplit parfaitement le canvas avec une symétrie radiale sophistiquée.
<canvas id="c" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var cx = 200;
var cy = 200;
var pi = Math.PI;
var navy = "#0b1f3a";
var teal = "#1aa6a6";
var coral = "#e85d75";
var gold = "#f4c95d";
var cream = "#fff4d6";
ctx.fillStyle = navy;
ctx.fillRect(0, 0, 400, 400);
function circle(r, fill, stroke, lw) {
ctx.beginPath();
ctx.arc(cx, cy, r, 0, pi * 2, false);
if (fill) {
ctx.fillStyle = fill;
ctx.fill();
}
if (stroke) {
ctx.strokeStyle = stroke;
ctx.lineWidth = lw;
ctx.stroke();
}
}
function petal(count, r1, r2, width, fill, stroke, lw, offset) {
var i;
var a;
for (i = 0; i < count; i++) {
a = offset + i * pi * 2 / count;
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(a);
ctx.beginPath();
ctx.moveTo(r1, 0);
ctx.bezierCurveTo(r1 + width, -width, r2 - width, -width, r2, 0);
ctx.bezierCurveTo(r2 - width, width, r1 + width, width, r1, 0);
ctx.closePath();
ctx.fillStyle = fill;
ctx.fill();
if (stroke) {
ctx.strokeStyle = stroke;
ctx.lineWidth = lw;
ctx.stroke();
}
ctx.restore();
}
}
function diamondRing(count, r1, r2, fill, stroke, lw, offset) {
var i;
var a;
var da = pi * 2 / count;
for (i = 0; i < count; i++) {
a = offset + i * da;
ctx.beginPath();
ctx.moveTo(cx + Math.cos(a) * r2, cy + Math.sin(a) * r2);
ctx.lineTo(cx + Math.cos(a + da * 0.35) * r1, cy + Math.sin(a + da * 0.35) * r1);
ctx.lineTo(cx + Math.cos(a + da * 0.5) * (r1 + 16), cy + Math.sin(a + da * 0.5) * (r1 + 16));
ctx.lineTo(cx + Math.cos(a + da * 0.65) * r1, cy + Math.sin(a + da * 0.65) * r1);
ctx.closePath();
ctx.fillStyle = fill;
ctx.fill();
ctx.strokeStyle = stroke;
ctx.lineWidth = lw;
ctx.stroke();
}
}
function spokeRing(count, r1, r2, color, lw, offset) {
var i;
var a;
ctx.strokeStyle = color;
ctx.lineWidth = lw;
ctx.lineCap = "round";
for (i = 0; i < count; i++) {
a = offset + i * pi * 2 / count;
ctx.beginPath();
ctx.moveTo(cx + Math.cos(a) * r1, cy + Math.sin(a) * r1);
ctx.lineTo(cx + Math.cos(a) * r2, cy + Math.sin(a) * r2);
ctx.stroke();
}
ctx.lineCap = "butt";
}
circle(195, gold, cream, 3);
circle(184, navy, teal, 4);
diamondRing(16, 154, 194, coral, cream, 2, -pi / 32);
diamondRing(16, 138, 180, teal, navy, 2, pi / 32);
petal(16, 84, 172, 34, gold, navy, 2, 0);
petal(16, 72, 158, 25, teal, cream, 2, pi / 16);
petal(12, 48, 136, 28, coral, navy, 2, pi / 12);
petal(8, 34, 116, 35, gold, cream, 2, pi / 8);
spokeRing(16, 118, 184, cream, 2, 0);
spokeRing(16, 52, 106, navy, 3, pi / 16);
spokeRing(12, 62, 136, teal, 2, pi / 12);
circle(148, null, cream, 3);
circle(126, null, navy, 4);
circle(104, null, gold, 3);
circle(82, null, cream, 2);
circle(60, teal, navy, 3);
petal(16, 14, 58, 15, coral, cream, 1, 0);
petal(8, 8, 44, 18, gold, navy, 2, pi / 8);
circle(34, navy, cream, 2);
circle(22, teal, gold, 2);
circle(10, coral, cream, 2);
circle(4, cream, null, 0);
diamondRing(32, 166, 194, cream, gold, 1, 0);
circle(193, null, cream, 4);
</script>
openaigpt-5.5-pro
9.9/10305.3 s
openaigpt-5.5-pro
Tokens1 183
Code source3.2 KB
Temps305.3 s
Jugement Matania
Rendering
9
UX
10
Qualité du code
10
Complétude
10
Fidélité
10
Global
9.88
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'usage de l'ES5, la structure HTML imposée et l'absence de texte superflu. Le rendu visuel est esthétique, avec une palette de couleurs harmonieuse et une symétrie radiale complexe qui remplit bien le canvas. Le code est propre, modulaire et très bien structuré.
<canvas id="c" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var pi = Math.PI;
var full = pi * 2;
var bg = "#081a2f";
var teal = "#2bb3a3";
var gold = "#f4c95d";
var coral = "#e85d55";
ctx.fillStyle = bg;
ctx.fillRect(0, 0, 400, 400);
ctx.translate(200, 200);
ctx.lineJoin = "round";
ctx.lineCap = "round";
function circle(r, fill, stroke, lw) {
ctx.beginPath();
ctx.arc(0, 0, r, 0, full, false);
if (fill !== "") {
ctx.fillStyle = fill;
ctx.fill();
}
if (stroke !== "" && lw > 0) {
ctx.strokeStyle = stroke;
ctx.lineWidth = lw;
ctx.stroke();
}
}
function petal(count, offset, r1, r2, w1, w2, fill, stroke, lw) {
var i;
var d = r2 - r1;
for (i = 0; i < count; i += 1) {
ctx.save();
ctx.rotate(offset + full * i / count);
ctx.beginPath();
ctx.moveTo(0, -r1);
ctx.bezierCurveTo(-w1, -r1 - d * 0.28, -w2, -r1 - d * 0.75, 0, -r2);
ctx.bezierCurveTo(w2, -r1 - d * 0.75, w1, -r1 - d * 0.28, 0, -r1);
ctx.closePath();
ctx.fillStyle = fill;
ctx.fill();
ctx.strokeStyle = stroke;
ctx.lineWidth = lw;
ctx.stroke();
ctx.restore();
}
}
function diamond(count, offset, inner, mid, outer, w, fill, stroke, lw) {
var i;
for (i = 0; i < count; i += 1) {
ctx.save();
ctx.rotate(offset + full * i / count);
ctx.beginPath();
ctx.moveTo(0, -outer);
ctx.lineTo(w, -mid);
ctx.lineTo(0, -inner);
ctx.lineTo(-w, -mid);
ctx.closePath();
ctx.fillStyle = fill;
ctx.fill();
ctx.strokeStyle = stroke;
ctx.lineWidth = lw;
ctx.stroke();
ctx.restore();
}
}
function dots(count, offset, r, size, fill, stroke, lw) {
var i;
for (i = 0; i < count; i += 1) {
ctx.save();
ctx.rotate(offset + full * i / count);
ctx.beginPath();
ctx.arc(0, -r, size, 0, full, false);
ctx.fillStyle = fill;
ctx.fill();
ctx.strokeStyle = stroke;
ctx.lineWidth = lw;
ctx.stroke();
ctx.restore();
}
}
function spokes(count, offset, r1, r2, stroke, lw) {
var i;
for (i = 0; i < count; i += 1) {
ctx.save();
ctx.rotate(offset + full * i / count);
ctx.beginPath();
ctx.moveTo(0, -r1);
ctx.lineTo(0, -r2);
ctx.strokeStyle = stroke;
ctx.lineWidth = lw;
ctx.stroke();
ctx.restore();
}
}
circle(198, bg, gold, 4);
petal(16, 0, 88, 196, 38, 9, teal, gold, 2);
diamond(16, pi / 16, 118, 156, 190, 24, coral, bg, 2);
spokes(16, pi / 16, 132, 196, gold, 1.5);
dots(16, pi / 16, 180, 7, gold, bg, 1);
circle(138, bg, teal, 4);
petal(12, pi / 12, 58, 132, 30, 7, gold, coral, 2);
diamond(12, 0, 72, 101, 128, 18, teal, bg, 2);
dots(12, 0, 116, 5, coral, bg, 1.5);
circle(92, bg, gold, 3);
petal(8, 0, 24, 88, 22, 5, coral, gold, 2);
diamond(8, pi / 8, 34, 60, 84, 14, teal, bg, 2);
dots(8, pi / 8, 72, 5, gold, bg, 1.5);
circle(42, bg, teal, 3);
circle(28, coral, gold, 2);
circle(12, gold, bg, 2);
circle(198, "", gold, 4);
</script>
productiviamatania-latest
9.9/105.8 s
productiviamatania-latest
Tokens903
Code source2.2 KB
Temps5.8 s
Jugement Matania
Rendering
9
UX
10
Qualité du code
10
Complétude
10
Fidélité
10
Global
9.88
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'utilisation de JavaScript ES5 et la structure HTML imposée. Le mandala est esthétiquement réussi, avec trois niveaux de symétrie radiale distincts (12, 16 et 8 segments) et une palette de couleurs harmonieuse. Le rendu visuel est propre, centré et remplit bien l'espace prévu.
Le modèle respecte scrupuleusement toutes les contraintes techniques : structure HTML imposée, usage de JavaScript ES5, et format de sortie brut. Le rendu visuel est esthétique avec une symétrie radiale complexe et des couleurs harmonieuses. L'UX est neutre car il s'agit d'une image statique, ce qui est conforme à la demande de génération d'un mandala.
<canvas id="c" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var centerX = 200;
var centerY = 200;
var maxRadius = 190;
function drawMandala() {
ctx.save();
ctx.translate(centerX, centerY);
var colors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#F9CA24"];
var numSegments = 16;
for (var level = 0; level < 6; level++) {
var radius = maxRadius * (1 - level * 0.15);
var thickness = 8 + level * 2;
ctx.save();
ctx.rotate(Math.PI / numSegments);
for (var i = 0; i < numSegments; i++) {
ctx.save();
ctx.fillStyle = colors[level % colors.length];
// Cercles concentriques
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2);
ctx.lineWidth = thickness;
ctx.strokeStyle = colors[(level + 1) % colors.length];
ctx.stroke();
// Pétales
ctx.save();
ctx.scale(0.6 + level * 0.05, 1.2);
ctx.beginPath();
ctx.arc(radius * 0.7, 0, radius * 0.25, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
// Étoiles internes
if (level > 1) {
ctx.save();
ctx.rotate(Math.PI / 4);
ctx.beginPath();
for (var j = 0; j < 8; j++) {
var r1 = radius * 0.3;
var r2 = radius * 0.1;
var angle = (j / 8) * Math.PI * 2;
var x = Math.cos(angle) * (j % 2 ? r1 : r2);
var y = Math.sin(angle) * (j % 2 ? r1 : r2);
if (j === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fillStyle = colors[3];
ctx.fill();
ctx.restore();
}
ctx.restore();
ctx.rotate(2 * Math.PI / numSegments);
}
ctx.restore();
}
// Centre
ctx.fillStyle = "#FFE66D";
ctx.beginPath();
ctx.arc(0, 0, 25, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
drawMandala();
</script>
xaigrok-4-1-fast-reasoning
9.0/1023.3 s
xaigrok-4-1-fast-reasoning
Tokens785
Code source1.6 KB
Temps23.3 s
Jugement Matania
Rendering
8
UX
5
Qualité du code
9
Complétude
10
Fidélité
10
Global
9
Revue
Le modèle respecte scrupuleusement toutes les contraintes techniques : structure HTML exacte, usage de l'ES5, format de sortie brut, et dimensions du mandala (rayon de 195px respecté). Le rendu visuel est esthétique et bien structuré avec les niveaux de symétrie demandés. L'UX est neutre car il s'agit d'une image statique, mais la réalisation est conforme à l'attendu.