Animations dynamiques (Canvas/CSS) jugées sur la fluidité et le code.
5 tâches ·
19 modèles testés ·
95 résultats
Particules colorées
html
anthropicclaude-haiku-4-5-20251001
9.3/109.4 s
anthropicclaude-haiku-4-5-20251001
Tokens1 991
Code source4.6 KB
Temps9.4 s
Jugement Matania
Animation
8
Rendering
9
Qualité du code
9
Créativité
8
Fidélité
10
Global
9.25
Revue
L'animation est fluide et respecte parfaitement les contraintes du prompt, notamment l'absence d'interaction avec la souris et l'absence de texte. Le rendu visuel est esthétique avec un bel usage des couleurs néon sur fond sombre et une composition équilibrée. Le code est propre, utilisant exclusivement du CSS pour les animations SVG, ce qui est très efficace.
L'animation est magnifique et parfaitement conforme aux instructions : elle est purement visuelle, sans texte, et ignore totalement la souris. La diversité des patterns (spirales, orbites, explosions) et la gestion des couleurs HSL créent un spectacle visuel riche et fluide. Le code est bien structuré, bien que tronqué dans l'extrait fourni, il présente une logique de simulation de particules robuste.
<style>
* { margin: 0; padding: 0; }
body { background: #000; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var W, H;
var time = 0;
var particles = [];
var rings = [];
function resize() {
W = canvas.width = window.innerWidth;
H = canvas.height = window.innerHeight;
}
resize();
window.addEventListener("resize", resize);
function Particle(x, y, vx, vy, color, life, size) {
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.color = color;
this.life = life;
this.maxLife = life;
this.size = size;
}
function Ring(x, y, radius, color, speed, width) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.speed = speed;
this.width = width;
this.alpha = 1;
}
function hslToString(h, s, l, a) {
return "hsla(" + h + "," + s + "%," + l + "%," + a + ")";
}
function spawnBurst(cx, cy, hue, count) {
for (var i = 0; i < count; i++) {
var angle = (Math.PI * 2 / count) * i + Math.random() * 0.3;
var speed = 1.5 + Math.random() * 3;
var vx = Math.cos(angle) * speed;
var vy = Math.sin(angle) * speed;
var life = 80 + Math.random() * 120;
var size = 1.5 + Math.random() * 3;
var color = (hue + Math.random() * 40 - 20 + 360) % 360;
particles.push(new Particle(cx, cy, vx, vy, color, life, size));
}
rings.push(new Ring(cx, cy, 5, hue, 3, 3));
}
function spawnSpiral(cx, cy, hue, arms, pointsPerArm) {
for (var a = 0; a < arms; a++) {
var baseAngle = (Math.PI * 2 / arms) * a;
for (var i = 0; i < pointsPerArm; i++) {
var t = i / pointsPerArm;
var angle = baseAngle + t * Math.PI * 3;
var dist = t * 5;
var vx = Math.cos(angle) * dist;
var vy = Math.sin(angle) * dist;
var life = 100 + Math.random() * 80;
var size = 1 + (1 - t) * 3;
var color = (hue + t * 60) % 360;
particles.push(new Particle(cx, cy, vx, vy, color, life, size));
}
}
}
function spawnOrbit(cx, cy, hue, count, radius) {
for (var i = 0; i < count; i++) {
var angle = (Math.PI * 2 / count) * i;
var x = cx + Math.cos(angle) * radius;
var y = cy + Math.sin(angle) * radius;
var perpAngle = angle + Math.PI * 0.5;
var speed = 2 + Math.random();
var vx = Math.cos(perpAngle) * speed + (Math.random() - 0.5) * 0.5;
var vy = Math.sin(perpAngle) * speed + (Math.random() - 0.5) * 0.5;
var life = 120 + Math.random() * 60;
var size = 1.5 + Math.random() * 2;
var color = (hue + i * 2) % 360;
particles.push(new Particle(x, y, vx, vy, color, life, size));
}
}
var nextEvent = 0;
var eventInterval = 60;
var eventType = 0;
function update() {
time++;
if (time >= nextEvent) {
var cx, cy, hue;
switch (eventType % 5) {
case 0:
cx = W * 0.3 + Math.random() * W * 0.4;
cy = H * 0.3 + Math.random() * H * 0.4;
hue = (time * 0.5) % 360;
spawnBurst(cx, cy, hue, 80);
break;
case 1:
cx = W * 0.2 + Math.random() * W * 0.6;
cy = H * 0.2 + Math.random() * H * 0.6;
hue = (time * 0.7 + 120) % 360;
spawnSpiral(cx, cy, hue, 5, 30);
break;
case 2:
cx = W * 0.5 + Math.sin(time * 0.01) * W * 0.2;
cy = H * 0.5 + Math.cos(time * 0.01) * H * 0.2;
hue = (time * 0.3 + 240) % 360;
spawnOrbit(cx, cy, hue, 100, 50 + Math.random() * 80);
break;
case 3:
for (var b = 0; b < 3; b++) {
cx = W * 0.2 + (b / 2) * W * 0.6;
cy = H * 0.3 + Math.random() * H * 0.4;
hue = (time + b * 120) % 360;
spawnBurst(cx, cy, hue, 50);
}
break;
case 4:
cx = W * 0.5;
cy = H * 0.5;
hue = (time * 0.4) % 360;
spawnSpiral(cx, cy, hue, 8, 25);
spawnOrbit(cx, cy, (hue + 180) % 360, 60, 120);
break;
}
eventType++;
nextEvent = time + eventInterval + Math.random() * 40;
}
// Continuous ambient particles
if (time % 3 === 0) {
var ambientAngle = time * 0.02;
var ambientX = W * 0.5 + Math.cos(ambientAngle) * W * 0.35;
var ambientY = H * 0.5 + Math.sin(ambientAngle * 0.7) * H * 0.35;
var ambientHue = (time * 0.8) % 360;
for (var j = 0; j < 3; j++) {
var va = Math.random() * Math.PI * 2;
var vs = 0.5 + Math.random() * 1.5;
particles.push(new Particle(
ambientX, ambientY,
Math.cos(va) * vs, Math.sin(va) * vs,
ambientHue + Math.random() * 30,
60 + Math.random() * 60,
1 + Math.random() * 2
));
}
}
// Flowing wave particles
if (time % 2 === 0) {
var waveX = (time * 2) % (W + 200) - 100;
var waveY = H * 0.5 + Math.sin(time * 0.03 + waveX * 0.01) * H * 0.3;
var waveHue = (waveX / W * 180 + time * 0.5) % 360;
particles.push(new Particle(
waveX, waveY,
0.2, -0.5 + Math.random() * 0.3,
waveHue,
80 + Math.random() * 40,
1.5 + Math.random() * 1.5
));
}
// Update particles
for (var i = particles.length - 1; i >= 0; i--) {
var p = particles[i];
p.x += p.vx;
p.y += p.vy;
p.vx *= 0.985;
p.vy *= 0.985;
p.vy += 0.008;
p.life--;
if (p.life <= 0) {
particles.splice(i, 1);
}
}
// Update rings
for (var r = rings.length - 1; r >= 0; r--) {
var ring = rings[r];
ring.radius += ring.speed;
ring.alpha -= 0.012;
ring.width *= 0.98;
if (ring.alpha <= 0) {
rings.splice(r, 1);
}
}
// Limit particles
if (particles.length > 5000) {
particles.splice(0, particles.length - 5000);
}
}
function draw() {
ctx.fillStyle = "rgba(0,0,0,0.08)";
ctx.fillRect(0, 0, W, H);
// Draw rings
for (var r = 0; r < rings.length; r++) {
var ring = rings[r];
ctx.beginPath();
ctx.arc(ring.x, ring.y, ring.radius, 0, Math.PI * 2);
ctx.strokeStyle = hslToString(ring.color, 80, 60, ring.alpha * 0.5);
ctx.lineWidth = ring.width;
ctx.stroke();
}
// Draw particles with glow
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
var alpha = Math.min(1, p.life / p.maxLife * 2);
alpha = Math.min(alpha, p.life / 20);
var lightness = 50 + (1 - p.life / p.maxLife) * 30;
// Glow
ctx.beginPath();
ctx.arc(p.x, p.y, p.size * 3, 0, Math.PI * 2);
ctx.fillStyle = hslToString(Math.floor(p.color), 90, Math.floor(lightness), alpha * 0.15);
ctx.fill();
// Core
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fillStyle = hslToString(Math.floor(p.color), 85, Math.floor(lightness), alpha * 0.9);
ctx.fill();
// Bright center
ctx.beginPath();
ctx.arc(p.x, p.y, p.size * 0.4, 0, Math.PI * 2);
ctx.fillStyle = hslToString(Math.floor(p.color), 50, 90, alpha * 0.8);
ctx.fill();
}
// Central aurora effect
var auroraHue = (time * 0.3) % 360;
var centerX = W * 0.5 + Math.sin(time * 0.007) * 100;
var centerY = H * 0.5 + Math.cos(time * 0.009) * 60;
var grad = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, 300);
grad.addColorStop(0, hslToString(Math.floor(auroraHue), 80, 50, 0.02));
grad.addColorStop(0.5, hslToString(Math.floor((auroraHue + 60) % 360), 70, 40, 0.01));
grad.addColorStop(1, "rgba(0,0,0,0)");
ctx.fillStyle = grad;
ctx.fillRect(0, 0, W, H);
}
function loop() {
update();
draw();
requestAnimationFrame(loop);
}
// Initial burst
spawnBurst(W * 0.5, H * 0.5, 200, 120);
spawnOrbit(W * 0.5, H * 0.5, 320, 80, 100);
loop();
</script>
</body>
</html>
anthropicclaude-opus-4-7
9.4/1015.7 s
anthropicclaude-opus-4-7
Tokens1 880
Code source2.4 KB
Temps15.7 s
Jugement Matania
Animation
9
Rendering
9
Qualité du code
9
Créativité
8
Fidélité
10
Global
9.38
Revue
Le modèle respecte parfaitement toutes les contraintes, notamment l'absence totale d'interaction avec la souris. L'animation est fluide, complexe et esthétiquement très réussie avec un bel équilibre entre le noyau central, les bras spiraux et les particules. Le code est propre, optimisé et utilise efficacement les gradients et les effets de lueur pour un rendu professionnel.
<style>
body{margin:0;overflow:hidden;background:#000;}
canvas{display:block;}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
var canvas=document.getElementById('c');
var ctx=canvas.getContext('2d');
var W,H,cx,cy;
function resize(){W=canvas.width=window.innerWidth;H=canvas.height=window.innerHeight;cx=W/2;cy=H/2;}
resize();
window.addEventListener('resize',resize);
var particles=[];
var N=180;
for(var i=0;i<N;i++){
particles.push({
a:Math.random()*Math.PI*2,
r:50+Math.random()*300,
s:0.002+Math.random()*0.01,
sz:1+Math.random()*2.5,
h:Math.random()*360,
o:Math.random()*Math.PI*2
});
}
var t=0;
function draw(){
t+=0.01;
ctx.fillStyle='rgba(0,0,0,0.08)';
ctx.fillRect(0,0,W,H);
// central pulsing core
var pulse=80+Math.sin(t*2)*20;
var grad=ctx.createRadialGradient(cx,cy,0,cx,cy,pulse*2);
grad.addColorStop(0,'rgba(255,200,255,0.4)');
grad.addColorStop(0.4,'rgba(150,100,255,0.2)');
grad.addColorStop(1,'rgba(0,0,0,0)');
ctx.fillStyle=grad;
ctx.beginPath();
ctx.arc(cx,cy,pulse*2,0,Math.PI*2);
ctx.fill();
// rotating spiral arms
for(var k=0;k<5;k++){
ctx.beginPath();
for(var j=0;j<120;j++){
var ang=t*0.5+k*Math.PI*2/5+j*0.1;
var rad=j*3;
var x=cx+Math.cos(ang)*rad;
var y=cy+Math.sin(ang)*rad;
if(j===0)ctx.moveTo(x,y);else ctx.lineTo(x,y);
}
ctx.strokeStyle='hsla('+((t*30+k*72)%360)+',80%,60%,0.3)';
ctx.lineWidth=1.5;
ctx.stroke();
}
// particles
for(var i=0;i<N;i++){
var p=particles[i];
p.a+=p.s;
var wob=Math.sin(t*2+p.o)*30;
var rr=p.r+wob;
var x=cx+Math.cos(p.a)*rr;
var y=cy+Math.sin(p.a)*rr*0.7;
var hue=(p.h+t*20)%360;
ctx.beginPath();
ctx.arc(x,y,p.sz,0,Math.PI*2);
ctx.fillStyle='hsl('+hue+',90%,65%)';
ctx.shadowColor='hsl('+hue+',90%,65%)';
ctx.shadowBlur=15;
ctx.fill();
}
ctx.shadowBlur=0;
// orbiting rings
for(var r=0;r<3;r++){
ctx.beginPath();
var rot=t*(0.3+r*0.2);
for(var a=0;a<Math.PI*2;a+=0.05){
var rr2=150+r*60+Math.sin(a*6+t*2)*15;
var x=cx+Math.cos(a+rot)*rr2;
var y=cy+Math.sin(a+rot)*rr2*0.7;
if(a===0)ctx.moveTo(x,y);else ctx.lineTo(x,y);
}
ctx.closePath();
ctx.strokeStyle='hsla('+((t*40+r*120)%360)+',70%,60%,0.5)';
ctx.lineWidth=1;
ctx.stroke();
}
requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>
anthropicclaude-sonnet-4-6
9.6/1039.4 s
anthropicclaude-sonnet-4-6
Tokens3 639
Code source7.3 KB
Temps39.4 s
Jugement Matania
Animation
9
Rendering
10
Qualité du code
9
Créativité
9
Fidélité
10
Global
9.63
Revue
L'animation est absolument magnifique, dépassant les attentes simples pour un sujet de 'particules colorées'. Le modèle a parfaitement respecté la contrainte d'ignorer la souris et de ne pas inclure de texte. Le rendu visuel est riche, avec une gestion exemplaire des gradients, des lueurs (glow) et de la profondeur, créant un effet cosmique hypnotique et fluide.
<style>
body { margin: 0; background: #000; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;
var t = 0;
var particles = [];
var NUM = 180;
function hsl(h, s, l) {
return 'hsl(' + h + ',' + s + '%,' + l + '%)';
}
function Particle(i) {
this.index = i;
this.reset();
}
Particle.prototype.reset = function() {
this.angle = Math.random() * Math.PI * 2;
this.radius = Math.random() * 220 + 30;
this.speed = (Math.random() * 0.008 + 0.003) * (Math.random() < 0.5 ? 1 : -1);
this.size = Math.random() * 3 + 1;
this.hue = Math.random() * 360;
this.life = 0;
this.maxLife = Math.random() * 300 + 150;
this.orbitX = (Math.random() - 0.5) * 60;
this.orbitY = (Math.random() - 0.5) * 60;
this.pulseSpeed = Math.random() * 0.05 + 0.01;
this.pulseOffset = Math.random() * Math.PI * 2;
};
Particle.prototype.update = function() {
this.angle += this.speed;
this.life++;
this.hue += 0.5;
if (this.life > this.maxLife) this.reset();
};
Particle.prototype.getX = function(cx) {
return cx + this.orbitX + Math.cos(this.angle) * this.radius;
};
Particle.prototype.getY = function(cy) {
return cy + this.orbitY + Math.sin(this.angle) * this.radius;
};
for (var i = 0; i < NUM; i++) {
particles.push(new Particle(i));
}
var rings = [];
for (var r = 0; r < 6; r++) {
rings.push({
radius: 60 + r * 55,
angle: Math.random() * Math.PI * 2,
speed: (0.004 + r * 0.001) * (r % 2 === 0 ? 1 : -1),
hue: r * 60,
width: 1.5 + r * 0.3
});
}
var stars = [];
for (var s = 0; s < 200; s++) {
stars.push({
x: Math.random() * W,
y: Math.random() * H,
size: Math.random() * 1.5 + 0.2,
twinkle: Math.random() * Math.PI * 2,
speed: Math.random() * 0.03 + 0.005
});
}
function drawBackground() {
var bg = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, Math.max(W, H) * 0.8);
bg.addColorStop(0, '#0a0015');
bg.addColorStop(0.5, '#050010');
bg.addColorStop(1, '#000005');
ctx.fillStyle = bg;
ctx.fillRect(0, 0, W, H);
}
function drawStars() {
for (var i = 0; i < stars.length; i++) {
var st = stars[i];
st.twinkle += st.speed;
var alpha = 0.3 + 0.7 * (0.5 + 0.5 * Math.sin(st.twinkle));
ctx.beginPath();
ctx.arc(st.x, st.y, st.size, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255,255,255,' + alpha + ')';
ctx.fill();
}
}
function drawCore(cx, cy) {
var pulse = 0.5 + 0.5 * Math.sin(t * 0.04);
var coreR = 18 + pulse * 12;
var g = ctx.createRadialGradient(cx, cy, 0, cx, cy, coreR * 2.5);
g.addColorStop(0, 'rgba(255,255,255,1)');
g.addColorStop(0.15, 'rgba(200,180,255,1)');
g.addColorStop(0.4, 'rgba(120,60,255,0.8)');
g.addColorStop(0.7, 'rgba(60,0,180,0.3)');
g.addColorStop(1, 'rgba(0,0,0,0)');
ctx.beginPath();
ctx.arc(cx, cy, coreR * 2.5, 0, Math.PI * 2);
ctx.fillStyle = g;
ctx.fill();
ctx.beginPath();
ctx.arc(cx, cy, coreR, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255,255,255,0.95)';
ctx.shadowBlur = 40;
ctx.shadowColor = '#aa88ff';
ctx.fill();
ctx.shadowBlur = 0;
}
function drawRings(cx, cy) {
for (var r = 0; r < rings.length; r++) {
var ring = rings[r];
ring.angle += ring.speed;
ring.hue += 0.3;
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(ring.angle);
var segments = 60 + r * 20;
for (var seg = 0; seg < segments; seg++) {
var a = (seg / segments) * Math.PI * 2;
var na = ((seg + 1) / segments) * Math.PI * 2;
var alpha = 0.3 + 0.7 * Math.abs(Math.sin(a + t * 0.02 + r));
ctx.beginPath();
ctx.arc(0, 0, ring.radius, a, na);
ctx.strokeStyle = 'hsla(' + (ring.hue + seg * 2) + ',90%,70%,' + alpha + ')';
ctx.lineWidth = ring.width;
ctx.stroke();
}
var dotCount = 3 + r;
for (var d = 0; d < dotCount; d++) {
var da = (d / dotCount) * Math.PI * 2 + ring.angle * 2;
var dx = Math.cos(da) * ring.radius;
var dy = Math.sin(da) * ring.radius;
ctx.beginPath();
ctx.arc(dx, dy, 3 + r * 0.5, 0, Math.PI * 2);
ctx.fillStyle = 'hsla(' + (ring.hue + d * 40) + ',100%,85%,0.9)';
ctx.shadowBlur = 15;
ctx.shadowColor = 'hsla(' + ring.hue + ',100%,70%,1)';
ctx.fill();
ctx.shadowBlur = 0;
}
ctx.restore();
}
}
function drawParticles(cx, cy) {
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
p.update();
var px = p.getX(cx);
var py = p.getY(cy);
var lifeRatio = p.life / p.maxLife;
var alpha = lifeRatio < 0.1 ? lifeRatio * 10 : lifeRatio > 0.85 ? (1 - lifeRatio) * 6.67 : 1;
alpha = Math.max(0, Math.min(1, alpha)) * 0.85;
ctx.beginPath();
ctx.arc(px, py, p.size, 0, Math.PI * 2);
ctx.fillStyle = 'hsla(' + p.hue + ',100%,75%,' + alpha + ')';
ctx.shadowBlur = 10;
ctx.shadowColor = 'hsla(' + p.hue + ',100%,65%,0.5)';
ctx.fill();
ctx.shadowBlur = 0;
if (i > 0) {
var prev = particles[i - 1];
var ppx = prev.getX(cx);
var ppy = prev.getY(cy);
var dist = Math.sqrt((px - ppx) * (px - ppx) + (py - ppy) * (py - ppy));
if (dist < 80) {
var la = (1 - dist / 80) * 0.15 * alpha;
ctx.beginPath();
ctx.moveTo(px, py);
ctx.lineTo(ppx, ppy);
ctx.strokeStyle = 'hsla(' + ((p.hue + prev.hue) / 2) + ',100%,70%,' + la + ')';
ctx.lineWidth = 0.5;
ctx.stroke();
}
}
}
}
function drawFlares(cx, cy) {
var numFlares = 8;
for (var f = 0; f < numFlares; f++) {
var fa = (f / numFlares) * Math.PI * 2 + t * 0.01;
var fLen = 80 + 40 * Math.sin(t * 0.03 + f * 0.7);
var fHue = (t * 2 + f * 45) % 360;
var g = ctx.createLinearGradient(cx, cy, cx + Math.cos(fa) * fLen, cy + Math.sin(fa) * fLen);
g.addColorStop(0, 'hsla(' + fHue + ',100%,80%,0.6)');
g.addColorStop(1, 'hsla(' + fHue + ',100%,60%,0)');
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(cx + Math.cos(fa) * fLen, cy + Math.sin(fa) * fLen);
ctx.strokeStyle = g;
ctx.lineWidth = 2;
ctx.stroke();
}
}
function drawWaves(cx, cy) {
for (var w = 0; w < 4; w++) {
var wRadius = 120 + w * 80 + 30 * Math.sin(t * 0.02 + w * 1.2);
var wAlpha = 0.12 - w * 0.02;
var wHue = (t * 1.5 + w * 90) % 360;
ctx.beginPath();
ctx.arc(cx, cy, wRadius, 0, Math.PI * 2);
ctx.strokeStyle = 'hsla(' + wHue + ',80%,65%,' + wAlpha + ')';
ctx.lineWidth = 8 - w;
ctx.stroke();
}
}
function animate() {
requestAnimationFrame(animate);
t++;
var cx = W / 2 + Math.sin(t * 0.007) * 40;
var cy = H / 2 + Math.cos(t * 0.009) * 30;
ctx.fillStyle = 'rgba(0,0,5,0.18)';
ctx.fillRect(0, 0, W, H);
if (t % 120 === 0) {
drawBackground();
}
drawStars();
drawWaves(cx, cy);
drawRings(cx, cy);
drawFlares(cx, cy);
drawParticles(cx, cy);
drawCore(cx, cy);
}
drawBackground();
animate();
window.addEventListener('resize', function() {
W = canvas.width = window.innerWidth;
H = canvas.height = window.innerHeight;
stars = [];
for (var s = 0; s < 200; s++) {
stars.push({
x: Math.random() * W,
y: Math.random() * H,
size: Math.random() * 1.5 + 0.2,
twinkle: Math.random() * Math.PI * 2,
speed: Math.random() * 0.03 + 0.005
});
}
drawBackground();
});
</script>
</body>
</html>
googlegemini-flash-latest
9.4/1016.8 s
googlegemini-flash-latest
Tokens1 091
Code source3.9 KB
Temps16.8 s
Jugement Matania
Animation
9
Rendering
9
Qualité du code
9
Créativité
8
Fidélité
10
Global
9.38
Revue
L'animation est magnifique et respecte scrupuleusement toutes les contraintes du prompt, notamment l'absence de texte et l'indépendance vis-à-vis de la souris. Le rendu visuel est de haute qualité grâce à l'utilisation de filtres SVG (glow, grain) qui créent une profondeur organique et élégante. Le code est propre, utilisant des courbes de Bézier pour générer des mouvements fluides et mathématiquement harmonieux.
Le modèle respecte parfaitement les contraintes techniques : l'animation est autonome (sans interaction souris) et ne contient aucun texte. Le code est très propre et léger (SVG pur), bien que l'effet visuel reste assez minimaliste et géométrique pour une demande de 'magnifique animation', manquant un peu de la complexité attendue pour des 'particules'.
Le modèle respecte parfaitement les contraintes négatives (pas de texte, pas d'interaction souris). Cependant, la qualité du code est très médiocre : recréer et supprimer l'intégralité du groupe de particules à chaque frame (DOM manipulation intensive) est une aberration technique qui risque de provoquer des saccades et des fuites de mémoire. Le rendu visuel est basique, manquant de la 'magnificence' demandée.
Le modèle respecte parfaitement les contraintes du prompt, notamment l'absence de texte et l'indépendance vis-à-vis de la souris. L'effet visuel est esthétique avec un bel usage des dégradés et du flou. Cependant, la qualité du code est médiocre car la fonction render vide et reconstruit tout le DOM SVG à chaque frame (svg.innerHTML = ''), ce qui est une très mauvaise pratique provoquant des problèmes de performance majeurs et des fuites de mémoire potentielles.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="500" height="500">
<defs>
<filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="8" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<radialGradient id="pulseGradient" cx="0.5" cy="0.5" r="0.5">
<stop offset="0%" stop-color="#ff00ff" stop-opacity="0.8" />
<stop offset="100%" stop-color="#00ffff" stop-opacity="0.1" />
</radialGradient>
<linearGradient id="particleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ff00ff" />
<stop offset="50%" stop-color="#00ffff" />
<stop offset="100%" stop-color="#ffff00" />
</linearGradient>
</defs>
<script type="application/ecmascript">
<![CDATA[
var width = 500;
var height = 500;
var centerX = width / 2;
var centerY = height / 2;
var particles = [];
var particleCount = 150;
var maxRadius = 200;
var angle = 0;
var pulseScale = 0.5;
var pulseDirection = 0.01;
function init() {
for (var i = 0; i < particleCount; i++) {
var radius = Math.random() * maxRadius;
var particleAngle = Math.random() * Math.PI * 2;
var speed = 0.001 + Math.random() * 0.005;
var size = 1 + Math.random() * 4;
var delay = Math.random() * 100;
particles.push({
radius: radius,
angle: particleAngle,
speed: speed,
size: size,
delay: delay,
baseAngle: particleAngle,
orbitSpeed: 0.002 + Math.random() * 0.008,
colorOffset: Math.random() * 100
});
}
}
function update() {
angle += 0.01;
pulseScale += pulseDirection;
if (pulseScale > 0.8) pulseDirection = -0.01;
if (pulseScale < 0.3) pulseDirection = 0.01;
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
p.angle += p.speed;
p.radius = maxRadius * 0.5 + maxRadius * 0.5 * Math.sin(angle * p.orbitSpeed + p.delay * 0.01);
}
}
function render() {
var svg = document.getElementsByTagName('svg')[0];
svg.innerHTML = '';
var bgCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
bgCircle.setAttribute('cx', centerX);
bgCircle.setAttribute('cy', centerY);
bgCircle.setAttribute('r', maxRadius * 1.2);
bgCircle.setAttribute('fill', '#0a0a20');
svg.appendChild(bgCircle);
var pulse = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
pulse.setAttribute('cx', centerX);
pulse.setAttribute('cy', centerY);
pulse.setAttribute('r', maxRadius * pulseScale);
pulse.setAttribute('fill', 'url(#pulseGradient)');
pulse.setAttribute('opacity', '0.6');
svg.appendChild(pulse);
var core = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
core.setAttribute('cx', centerX);
core.setAttribute('cy', centerY);
core.setAttribute('r', 20);
core.setAttribute('fill', '#fff');
core.setAttribute('filter', 'url(#glow)');
svg.appendChild(core);
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
var x = centerX + Math.cos(p.angle) * p.radius;
var y = centerY + Math.sin(p.angle) * p.radius;
var particle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
particle.setAttribute('cx', x);
particle.setAttribute('cy', y);
particle.setAttribute('r', p.size);
particle.setAttribute('fill', 'url(#particleGradient)');
particle.setAttribute('transform', 'rotate(' + (p.angle * 180 / Math.PI) + ' ' + x + ' ' + y + ')');
var hue = (angle * 50 + p.colorOffset) % 360;
particle.setAttribute('filter', 'url(#glow)');
particle.setAttribute('opacity', '0.8');
svg.appendChild(particle);
var trail = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
trail.setAttribute('cx', x);
trail.setAttribute('cy', y);
trail.setAttribute('r', p.size * 0.5);
trail.setAttribute('fill', '#fff');
trail.setAttribute('opacity', '0.3');
svg.appendChild(trail);
}
var outerRing = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
outerRing.setAttribute('cx', centerX);
outerRing.setAttribute('cy', centerY);
outerRing.setAttribute('r', maxRadius * 1.1);
outerRing.setAttribute('fill', 'none');
outerRing.setAttribute('stroke', '#00ffff');
outerRing.setAttribute('stroke-width', '0.5');
outerRing.setAttribute('stroke-opacity', '0.3');
outerRing.setAttribute('stroke-dasharray', '5,5');
svg.appendChild(outerRing);
}
function animate() {
update();
render();
requestAnimationFrame(animate);
}
init();
animate();
]]>
</script>
</svg>
mistralmistral-small-latest
2.4/103.2 s
mistralmistral-small-latest
Tokens605
Code source1.3 KB
Temps3.2 s
Jugement Matania
Animation
4
Rendering
3
Qualité du code
6
Créativité
2
Fidélité
1
Global
2.38
Revue
Le modèle a totalement échoué sur le sujet principal : il n'a généré aucune particule, mais seulement quelques formes géométriques simples (cercles et rectangle) avec des dégradés basiques. Bien que la contrainte de ne pas tenir compte de la souris soit respectée, le résultat ne correspond absolument pas à la demande de 'Particules colorées'.
Le modèle a totalement échoué à respecter le sujet demandé ('Particules colorées'), produisant à la place des formes géométriques basiques (cercle, rectangle, triangle) qui n'ont rien à voir avec un système de particules. Bien que la contrainte technique de ne pas utiliser la souris soit respectée, la qualité esthétique est très faible et l'animation est rudimentaire. La fidélité au prompt est extrêmement mauvaise car l'essence même de la demande (des particules) est absente.
Le modèle a parfaitement respecté les contraintes négatives (pas de texte, pas d'interaction souris). L'utilisation de l'SVG avec des filtres de flou et des gradients crée un rendu visuel très esthétique et apaisant, typique d'un fond d'écran animé de haute qualité. Le code est propre et utilise des animations natives SVG efficaces.
L'animation est visuellement magnifique et respecte parfaitement toutes les contraintes du prompt, notamment l'absence de texte et l'indépendance vis-à-vis de la souris. Le rendu est fluide avec une belle gestion des dégradés et des flous (glow effect). Le code est de bonne qualité bien qu'incomplet à la fin du snippet fourni (tronqué), mais l'implémentation SVG est propre et efficace.
L'animation est magnifique et respecte scrupuleusement toutes les contraintes, notamment l'absence d'interaction avec la souris et l'absence de texte. Le rendu visuel est de haute qualité avec une gestion sophistiquée des dégradés et des flous pour créer une atmosphère éthérée. Bien que le code soit tronqué à la fin, la structure logique et l'implémentation des filtres SVG sont excellentes.
<style>
html, body { margin:0; height:100%; background:#05060a; overflow:hidden; }
svg { width:100vw; height:100vh; display:block; }
</style>
</head>
<body>
<svg id="s" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gGlow" cx="50%" cy="50%" r="62%">
<stop offset="0%" stop-color="#66f7ff" stop-opacity="0.22"/>
<stop offset="32%" stop-color="#7c6bff" stop-opacity="0.15"/>
<stop offset="68%" stop-color="#ffffff" stop-opacity="0.035"/>
<stop offset="100%" stop-color="#05060a" stop-opacity="0"/>
</radialGradient>
<filter id="blur12" x="-55%" y="-55%" width="210%" height="210%">
<feGaussianBlur stdDeviation="10"/>
</filter>
<filter id="blur22" x="-65%" y="-65%" width="230%" height="230%">
<feGaussianBlur stdDeviation="18"/>
</filter>
<filter id="blur6" x="-65%" y="-65%" width="230%" height="230%">
<feGaussianBlur stdDeviation="6"/>
</filter>
<filter id="softGlow" x="-70%" y="-70%" width="240%" height="240%">
<feGaussianBlur stdDeviation="5" result="b"/>
<feMerge>
<feMergeNode in="b"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<linearGradient id="beam" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#6cf7ff" stop-opacity="0.82"/>
<stop offset="30%" stop-color="#7b6bff" stop-opacity="0.28"/>
<stop offset="65%" stop-color="#ffffff" stop-opacity="0.10"/>
<stop offset="100%" stop-color="#05060a" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip">
<rect x="-40" y="-40" width="1280" height="880" rx="28" ry="28"></rect>
</clipPath>
<filter id="vignette" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="18" result="blur"/>
<feColorMatrix type="matrix" values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 0.9 0"/>
</filter>
<!-- Grille plus discrète (blur plus léger) -->
<filter id="gridBlur" x="-60%" y="-60%" width="220%" height="220%">
<feGaussianBlur stdDeviation="2.6"/>
</filter>
</defs>
<rect x="0" y="0" width="1200" height="800" fill="#05060a"/>
<g clip-path="url(#clip)" opacity="1">
<rect x="-60" y="-60" width="1320" height="920" fill="url(#gGlow)" filter="url(#blur22)" opacity="0.92"></rect>
<g id="stars"></g>
<g id="rings" filter="url(#softGlow)"></g>
<g id="beams" filter="url(#softGlow)" opacity="0.9"></g>
<g id="orbs"></g>
<g id="grid" opacity="0.22" filter="url(#gridBlur)"></g>
<!-- Cadre plus éloigné du bord utile -->
<rect x="20" y="20" width="1160" height="760" fill="none" stroke="#0d1020" stroke-opacity="0.32"/>
</g>
</svg>
<script>
(function () {
var svg = document.getElementById('s');
var NS = "http://www.w3.org/2000/svg";
var starsG = document.getElementById('stars');
var ringsG = document.getElementById('rings');
var beamsG = document.getElementById('beams');
var orbsG = document.getElementById('orbs');
var gridG = document.getElementById('grid');
var W = 1200;
var H = 800;
function rand(a, b) { return a + Math.random() * (b - a); }
function randi(a, b) { return Math.floor(rand(a, b + 1)); }
function makeCircle(cx, cy, r, fill, opacity) {
var c = document.createElementNS(NS, 'circle');
c.setAttribute('cx', cx);
c.setAttribute('cy', cy);
c.setAttribute('r', r);
c.setAttribute('fill', fill);
c.setAttribute('opacity', opacity);
return c;
}
function makeLine(x1, y1, x2, y2, stroke, sw, opacity) {
var l = document.createElementNS(NS, 'line');
l.setAttribute('x1', x1);
l.setAttribute('y1', y1);
l.setAttribute('x2', x2);
l.setAttribute('y2', y2);
l.setAttribute('stroke', stroke);
l.setAttribute('stroke-width', sw);
l.setAttribute('opacity', opacity);
l.setAttribute('stroke-linecap', 'round');
return l;
}
function makeRing(cx, cy, rr, w, colA, colB, opacity) {
var g = document.createElementNS(NS, 'g');
g.setAttribute('opacity', opacity);
var c1 = document.createElementNS(NS, 'circle');
c1.setAttribute('cx', cx);
c1.setAttribute('cy', cy);
c1.setAttribute('r', rr);
c1.setAttribute('fill', 'none');
c1.setAttribute('stroke', colA);
c1.setAttribute('stroke-width', w);
c1.setAttribute('stroke-opacity', '0.85');
var c2 = document.createElementNS(NS, 'circle');
c2.setAttribute('cx', cx);
c2.setAttribute('cy', cy);
c2.setAttribute('r', rr * 0.92);
c2.setAttribute('fill', 'none');
c2.setAttribute('stroke', colB);
c2.setAttribute('stroke-width', Math.max(1, w * 0.50));
c2.setAttribute('stroke-opacity', '0.62');
var glow = document.createElementNS(NS, 'circle');
glow.setAttribute('cx', cx);
glow.setAttribute('cy', cy);
glow.setAttribute('r', rr * 1.03);
glow.setAttribute('fill', 'none');
glow.setAttribute('stroke', '#66f7ff');
glow.setAttribute('stroke-width', Math.max(1, w * 0.20));
glow.setAttribute('stroke-opacity', '0.10');
g.appendChild(glow);
g.appendChild(c1);
g.appendChild(c2);
return g;
}
function makeBeam(cx, cy, len, angle, sw) {
var p = document.createElementNS(NS, 'path');
var dx = Math.cos(angle);
var dy = Math.sin(angle);
var x1 = cx - dx * len;
var y1 = cy - dy * len;
var x2 = cx + dx * len;
var y2 = cy + dy * len;
var nx = -dy;
var ny = dx;
var w = sw;
var x1a = x1 + nx * w;
var y1a = y1 + ny * w;
var x1b = x1 - nx * w;
var y1b = y1 - ny * w;
var x2a = x2 + nx * w * 0.16;
var y2a = y2 + ny * w * 0.16;
var x2b = x2 - nx * w * 0.16;
var y2b = y2 - ny * w * 0.16;
var d = "M " + x1a + " " + y1a + " L " + x2a + " " + y2a + " L " + x2b + " " + y2b + " L " + x1b + " " + y1b + " Z";
p.setAttribute('d', d);
p.setAttribute('fill', 'url(#beam)');
p.setAttribute('opacity', '0.78');
p.setAttribute('filter', 'url(#blur12)');
return p;
}
function makeOrb(cx, cy, r, color, opacity) {
var g = document.createElementNS(NS, 'g');
g.setAttribute('transform', 'translate(' + cx + ' ' + cy + ')');
var core = document.createElementNS(NS, 'circle');
core.setAttribute('cx', 0);
core.setAttribute('cy', 0);
core.setAttribute('r', r);
core.setAttribute('fill', color);
core.setAttribute('opacity', opacity);
var halo = document.createElementNS(NS, 'circle');
halo.setAttribute('cx', 0);
halo.setAttribute('cy', 0);
halo.setAttribute('r', r * 2.1);
halo.setAttribute('fill', '#66f7ff');
halo.setAttribute('opacity', opacity * 0.10);
halo.setAttribute('filter', 'url(#blur22)');
var ring = document.createElementNS(NS, 'circle');
ring.setAttribute('cx', 0);
ring.setAttribute('cy', 0);
ring.setAttribute('r', r * 1.25);
ring.setAttribute('fill', 'none');
ring.setAttribute('stroke', '#7b6bff');
ring.setAttribute('stroke-width', Math.max(1, r * 0.10));
ring.setAttribute('opacity', opacity * 0.30);
ring.setAttribute('filter', 'url(#blur6)');
g.appendChild(halo);
g.appendChild(ring);
g.appendChild(core);
return g;
}
// Stars
var stars = [];
var starCount = 140;
for (var i = 0; i < starCount; i++) {
var x = rand(0, W);
var y = rand(0, H);
var z = rand(0.22, 1.0);
var r = rand(0.55, 1.7) * z;
var o = rand(0.12, 0.75) * z;
var s = makeCircle(x, y, r, '#ffffff', o);
starsG.appendChild(s);
stars.push({
el: s,
x: x,
y: y,
baseR: r,
z: z,
tw: rand(0.8, 2.2),
ph: rand(0, Math.PI * 2)
});
}
// Rings
var ringObjs = [];
var ringCount = 7;
for (var k = 0; k < ringCount; k++) {
var rr = 138 + k * 50 + rand(-10, 10);
var w = 2.0 + k * 0.30;
var opa = 0.62 - k * 0.055;
var cx = W * 0.5;
var cy = H * 0.52;
var colA = (k % 2 === 0) ? '#66f7ff' : '#7b6bff';
var colB = (k % 2 === 0) ? '#7b6bff' : '#66f7ff';
var ring = makeRing(cx, cy, rr, w, colA, colB, opa);
ringsG.appendChild(ring);
ringObjs.push({
el: ring,
rr0: rr,
k: k,
ang: rand(0, Math.PI * 2),
speed: rand(0.0011, 0.0024) * (k % 2 === 0 ? 1 : -1),
pulse: rand(0.008, 0.016),
ph: rand(0, Math.PI * 2)
});
}
// Beams
var beamObjs = [];
var beamCount = 10;
for (var b = 0; b < beamCount; b++) {
var ang = rand(0, Math.PI * 2);
var len = rand(310, 510);
var sw = rand(10, 24);
var beam = makeBeam(W * 0.5, H * 0.52, len, ang, sw);
beamsG.appendChild(beam);
beamObjs.push({
el: beam,
ang0: ang,
speed: rand(0.0007, 0.0020) * (b % 2 === 0 ? 1 : -1),
wob: rand(0.9, 1.6),
ph: rand(0, Math.PI * 2),
len: len
});
}
// Orbs
var orbObjs = [];
var orbCount = 5;
for (var o = 0; o < orbCount; o++) {
var r = rand(16, 28);
var col = (o % 2 === 0) ? '#66f7ff' : '#7b6bff';
var opa = rand(0.50, 0.90);
var orb = makeOrb(W * 0.5, H * 0.52, r, col, opa);
orbsG.appendChild(orb);
orbObjs.push({
el: orb,
r: r,
a0: rand(0, Math.PI * 2),
dist: rand(118, 250),
sp: rand(0.00065, 0.00125) * (o % 2 === 0 ? 1 : -1),
wob: rand(18, 44),
ph: rand(0, Math.PI * 2),
hueShift: (o % 2 === 0) ? 0 : 1
});
}
// Grid (plus discret)
var step = 54;
var baseOpacity = 0.085;
var sw = 0.85;
for (var xg = -step; xg <= W + step; xg += step) {
var a = makeLine(xg, -step, xg + step * 0.22, H + step, '#66f7ff', sw, baseOpacity);
gridG.appendChild(a);
}
for (var yg = -step; yg <= H + step; yg += step) {
var b2 = makeLine(-step, yg, W + step, yg + step * 0.22, '#7b6bff', sw, baseOpacity * 0.92);
gridG.appendChild(b2);
}
var t0 = Date.now();
function tick() {
var now = Date.now();
var t = (now - t0);
var cx = W * 0.5;
var cy = H * 0.52;
// Stars twinkle & slight drift
for (var i = 0; i < stars.length; i++) {
var st = stars[i];
var s = Math.sin(t * 0.001 * st.tw + st.ph);
var c = Math.cos(t * 0.0006 * st.tw + st.ph * 0.7);
var dx = c * (0.14 + st.z * 0.20);
var dy = s * (0.095 + st.z * 0.16);
st.el.setAttribute('cx', (st.x + dx).toFixed(2));
st.el.setAttribute('cy', (st.y + dy).toFixed(2));
var r = st.baseR * (0.86 + (s + 1) * 0.20);
st.el.setAttribute('r', r.toFixed(2));
var o2 = (0.10 + (s + 1) * 0.24) * st.z;
st.el.setAttribute('opacity', Math.min(0.95, o2).toFixed(3));
}
// Rings
for (var k = 0; k < ringObjs.length; k++) {
var ro = ringObjs[k];
var ang = ro.ang + t * ro.speed;
var pulse = 1 + 0.050 * Math.sin(t * ro.pulse + ro.ph);
ro.el.setAttribute(
'transform',
'translate(0 0) rotate(' + (ang * 180 / Math.PI).toFixed(3) + ' ' + cx + ' ' + cy + ') scale(' + pulse.toFixed(3) + ')'
);
var localOpacity = 0.46 + 0.15 * Math.sin(t * (0.001 + 0.00023 * ro.k) + ro.ph);
ro.el.setAttribute('opacity', Math.max(0.16, Math.min(0.72, localOpacity)).toFixed(3));
}
// Beams
for (var b = 0; b < beamObjs.length; b++) {
var bo = beamObjs[b];
var ang2 = bo.ang0 + t * bo.speed;
var wob = Math.sin(t * 0.0011 * bo.wob + bo.ph);
var op = 0.44 + 0.48 * Math.pow((wob + 1) * 0.5, 1.55);
bo.el.setAttribute('opacity', (0.18 + op * 0.70).toFixed(3));
var sx = 1 + 0.045 * wob;
var sy = 1 - 0.028 * wob;
bo.el.setAttribute('transform', 'rotate(' + (ang2 * 180 / Math.PI).toFixed(3) + ' ' + cx + ' ' + cy + ') scale(' + sx.toFixed(3) + ' ' + sy.toFixed(3) + ')');
}
// Orbs
for (var o2 = 0; o2 < orbObjs.length; o2++) {
var ob = orbObjs[o2];
var a = ob.a0 + t * ob.sp;
var rr = ob.dist + 12 * Math.sin(t * 0.001 * (0.6 + o2 * 0.12) + ob.ph);
var wob2 = ob.wob * Math.sin(t * 0.0011 + ob.ph * 0.9);
var x = cx + Math.cos(a) * rr + wob2 * Math.cos(a * 0.7 + 1.1);
var y = cy + Math.sin(a) * rr * 0.72 + wob2 * Math.sin(a * 0.9 + 0.35);
var s = 1 + 0.07 * Math.sin(t * 0.0015 + ob.ph);
ob.el.setAttribute('transform', 'translate(' + x.toFixed(2) + ' ' + y.toFixed(2) + ') scale(' + s.toFixed(3) + ')');
ob.el.setAttribute('opacity', (0.60 + 0.16 * Math.sin(t * 0.001 + ob.ph + o2 * 0.7)).toFixed(3));
}
// Grid: slow skew / parallax (moins marqué)
var gx = 7 * Math.sin(t * 0.00030);
var gy = 5 * Math.cos(t * 0.00027);
var skew = 5.5 * Math.sin(t * 0.00025);
gridG.setAttribute('transform', 'translate(' + gx.toFixed(2) + ' ' + gy.toFixed(2) + ') skewX(' + skew.toFixed(3) + ')');
requestAnimationFrame(tick);
}
tick();
})();
</script>
</body>
</html>
openaigpt-5.4-pro
9.5/10148.8 s
openaigpt-5.4-pro
Tokens1 681
Code source5.4 KB
Temps148.8 s
Jugement Matania
Animation
9
Rendering
9
Qualité du code
9
Créativité
9
Fidélité
10
Global
9.5
Revue
L'exécution est parfaite par rapport au prompt : aucune interaction souris, aucun texte, et une esthétique purement visuelle. Le code est d'une grande maturité technique, utilisant des champs de vecteurs (flow fields) et des compositions de gradients pour un rendu organique et fluide. L'effet de profondeur avec les étoiles et les orbes colorés est magnifique.
<style>
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#03040a;}
canvas{display:block;width:100%;height:100%;}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
(function(){
var canvas=document.getElementById('c');
var ctx=canvas.getContext('2d');
var w=0,h=0,dpr=1;
var particles=[],stars=[],orbs=[];
function rand(a,b){return a+Math.random()*(b-a);}
function irand(a,b){return Math.floor(rand(a,b));}
function resetParticle(p,hard){
if(hard||Math.random()<0.5){
p.x=rand(0,w);
p.y=rand(0,h);
}else{
var edge=irand(0,4);
if(edge===0){p.x=rand(0,w);p.y=-10;}
if(edge===1){p.x=w+10;p.y=rand(0,h);}
if(edge===2){p.x=rand(0,w);p.y=h+10;}
if(edge===3){p.x=-10;p.y=rand(0,h);}
}
p.px=p.x;
p.py=p.y;
p.seed=Math.random()*Math.PI*2;
p.life=rand(90,260);
p.age=0;
p.speed=rand(0.4,1.8);
p.width=rand(0.6,1.6);
}
function buildStars(){
stars=[];
var count=Math.max(80,Math.round((w*h)/12000));
var i;
for(i=0;i<count;i++){
stars.push({
x:rand(0,w),
y:rand(0,h),
r:rand(0.4,1.9),
a:rand(0.2,0.9),
tw:rand(0.4,2.0),
ph:rand(0,Math.PI*2)
});
}
}
function buildOrbs(){
orbs=[];
var cols=[[70,120,255],[140,80,255],[40,220,210],[255,90,180],[255,170,70]];
var i;
for(i=0;i<cols.length;i++){
orbs.push({
c:cols[i],
a1:rand(0.18,0.42),
a2:rand(0.12,0.32),
s1:rand(0.10,0.28),
s2:rand(0.08,0.22),
ph1:rand(0,Math.PI*2),
ph2:rand(0,Math.PI*2),
size:rand(0.16,0.28),
alpha:rand(0.018,0.05)
});
}
}
function resize(){
dpr=Math.max(1,Math.min(2,window.devicePixelRatio||1));
w=window.innerWidth;
h=window.innerHeight;
canvas.width=Math.round(w*dpr);
canvas.height=Math.round(h*dpr);
canvas.style.width=w+'px';
canvas.style.height=h+'px';
ctx.setTransform(dpr,0,0,dpr,0,0);
ctx.lineCap='round';
ctx.lineJoin='round';
particles=[];
var count=Math.max(900,Math.min(2400,Math.round(w*h/900)));
var i,p;
for(i=0;i<count;i++){
p={};
resetParticle(p,true);
particles.push(p);
}
buildStars();
buildOrbs();
ctx.fillStyle='#03040a';
ctx.fillRect(0,0,w,h);
}
function drawStars(t){
ctx.globalCompositeOperation='source-over';
var i,s,tw;
for(i=0;i<stars.length;i++){
s=stars[i];
tw=s.a*(0.45+0.55*(0.5+0.5*Math.sin(t*s.tw+s.ph)));
ctx.fillStyle='rgba(255,255,255,'+tw.toFixed(3)+')';
ctx.beginPath();
ctx.arc(s.x+Math.sin(t*0.03+s.ph)*3.0,s.y+Math.cos(t*0.04+s.ph)*2.0,s.r,0,Math.PI*2,false);
ctx.fill();
}
}
function drawOrbs(t){
ctx.globalCompositeOperation='lighter';
var cx=w*0.5,cy=h*0.5,m=Math.min(w,h),i,o,x,y,r,c,g;
for(i=0;i<orbs.length;i++){
o=orbs[i];
c=o.c;
x=cx+Math.sin(t*o.s1+o.ph1)*w*o.a1+Math.cos(t*(o.s2*0.7)+o.ph2)*w*0.08;
y=cy+Math.cos(t*o.s2+o.ph2)*h*o.a2+Math.sin(t*(o.s1*0.8)+o.ph1)*h*0.06;
r=m*o.size*(1.0+0.15*Math.sin(t*0.4+i));
g=ctx.createRadialGradient(x,y,0,x,y,r);
g.addColorStop(0,'rgba('+c[0]+','+c[1]+','+c[2]+','+(o.alpha*1.8).toFixed(3)+')');
g.addColorStop(0.35,'rgba('+c[0]+','+c[1]+','+c[2]+','+o.alpha.toFixed(3)+')');
g.addColorStop(1,'rgba('+c[0]+','+c[1]+','+c[2]+',0)');
ctx.fillStyle=g;
ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2,false);
ctx.fill();
}
}
function drawVeils(t){
ctx.globalCompositeOperation='lighter';
var i,steps=7,yy,amp,phase,x,y,s;
for(i=0;i<steps;i++){
yy=h*(i+0.5)/steps;
amp=h*(0.03+0.02*Math.sin(t*0.3+i));
phase=t*(0.18+0.02*i)+i*0.8;
ctx.strokeStyle='hsla('+(190+i*18)+',100%,60%,0.030)';
ctx.lineWidth=h*0.08;
ctx.beginPath();
for(s=0;s<=36;s++){
x=w*s/36;
y=yy+Math.sin((s/36)*Math.PI*4.0+phase)*amp+Math.cos((s/36)*Math.PI*6.0-phase*1.2)*amp*0.35;
if(s===0){ctx.moveTo(x,y);}else{ctx.lineTo(x,y);}
}
ctx.stroke();
}
}
function field(x,y,t,seed){
var nx=(x-w*0.5)/Math.min(w,h);
var ny=(y-h*0.5)/Math.min(w,h);
var r=Math.sqrt(nx*nx+ny*ny);
var a=Math.atan2(ny,nx);
var v=
Math.sin(nx*5.0+t*0.7+seed*3.1)*0.9+
Math.cos(ny*4.0-t*0.6+seed*2.1)*0.8+
Math.sin((nx+ny)*6.0-t*0.45+seed)*0.55+
Math.cos(r*18.0-t*1.05)*0.45+
Math.sin(a*5.0+t*0.35)*0.35;
return v+a*0.55;
}
function drawParticles(t){
ctx.globalCompositeOperation='lighter';
var i,p,ang,spd,x0,y0,x1,y1,nx,ny,r,hue,alpha;
for(i=0;i<particles.length;i++){
p=particles[i];
x0=p.x;
y0=p.y;
ang=field(x0,y0,t,p.seed);
nx=(x0-w*0.5)/Math.min(w,h);
ny=(y0-h*0.5)/Math.min(w,h);
r=Math.sqrt(nx*nx+ny*ny);
spd=p.speed*(0.7+0.8*(1.0-Math.min(1,r)));
x1=x0+Math.cos(ang)*spd;
y1=y0+Math.sin(ang)*spd;
hue=210+70*Math.sin(t*0.25+p.seed*2.0)+55*Math.sin(r*10.0-t*0.9+p.seed*4.0);
alpha=0.045+0.060*(1.0-Math.min(1,r));
ctx.strokeStyle='hsla('+Math.round((hue%360+360)%360)+',100%,65%,'+alpha.toFixed(3)+')';
ctx.lineWidth=p.width;
ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.lineTo(x1,y1);
ctx.stroke();
p.px=x0;
p.py=y0;
p.x=x1;
p.y=y1;
p.age+=1;
if(p.age>p.life||x1<-40||x1>w+40||y1<-40||y1>h+40){
resetParticle(p,false);
}
}
}
function frame(ms){
var t=ms*0.001;
ctx.globalCompositeOperation='source-over';
ctx.fillStyle='rgba(3,4,10,0.075)';
ctx.fillRect(0,0,w,h);
drawStars(t);
drawOrbs(t);
drawVeils(t);
drawParticles(t);
requestAnimationFrame(frame);
}
window.addEventListener('resize',resize);
resize();
requestAnimationFrame(frame);
})();
</script>
</body>
</html>
openaigpt-5.5
9.8/1044.4 s
openaigpt-5.5
Tokens1 703
Code source5.5 KB
Temps44.4 s
Jugement Matania
Animation
10
Rendering
10
Qualité du code
9
Créativité
9
Fidélité
10
Global
9.75
Revue
L'animation est absolument sublime, avec une gestion magistrale des calques, des effets de bloom et des couleurs qui créent une profondeur hypnotique. Le code est extrêmement propre, utilisant des fonctions mathématiques complexes (sinusoïdes, courbes de Bézier) pour générer un mouvement organique et fluide. Toutes les contraintes du prompt ont été respectées : l'animation est autonome, sans texte, et ne réagit pas à la souris.
L'animation est d'une beauté exceptionnelle, avec une gestion complexe des couches (étoiles, rubans, bloom, particules) qui crée une profondeur visuelle immersive. Le respect des contraintes est parfait : aucune interaction avec la souris n'est présente et l'esthétique est purement visuelle. Le code est bien structuré malgré une troncature à la fin du snippet fourni.
<style>
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050714}
canvas{display:block;width:100vw;height:100vh}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
(function(){
"use strict";
var canvas=document.getElementById("c");
var ctx=canvas.getContext("2d");
var w=0;
var h=0;
var dpr=1;
var particles=[];
var stars=[];
var ribbons=[];
var TAU=Math.PI*2;
function rand(a,b){return a+Math.random()*(b-a);}
function resize(){
dpr=Math.max(1,Math.min(2,window.devicePixelRatio||1));
w=Math.max(1,window.innerWidth);
h=Math.max(1,window.innerHeight);
canvas.width=Math.floor(w*dpr);
canvas.height=Math.floor(h*dpr);
canvas.style.width=w+"px";
canvas.style.height=h+"px";
ctx.setTransform(dpr,0,0,dpr,0,0);
}
function init(){
var i;
particles=[];
stars=[];
ribbons=[];
for(i=0;i<170;i++){
particles.push({
a:rand(0,TAU),
r:rand(30,Math.max(w,h)*0.65),
s:rand(0.06,0.34)*(Math.random()<0.5?-1:1),
z:rand(0.3,1.4),
p:rand(0,TAU),
size:rand(1,3.8),
hue:rand(180,330)
});
}
for(i=0;i<260;i++){
stars.push({
x:Math.random(),
y:Math.random(),
r:rand(0.4,1.9),
p:rand(0,TAU),
s:rand(0.4,1.8),
hue:rand(185,290)
});
}
for(i=0;i<7;i++){
ribbons.push({
y:rand(0.18,0.82),
amp:rand(28,120),
speed:rand(0.07,0.22)*(i%2===0?1:-1),
phase:rand(0,TAU),
thick:rand(42,105),
hue:rand(185,315)
});
}
}
function fillBackground(t){
var i;
var bands=36;
for(i=0;i<bands;i++){
var y=i*h/bands;
var hue=226+Math.sin(t*0.09+i*0.18)*18;
var light=5+i*0.22+Math.sin(t*0.07+i*0.31)*1.7;
ctx.fillStyle="hsl("+hue+",55%,"+light+"%)";
ctx.fillRect(0,y,w,h/bands+1);
}
ctx.globalAlpha=0.16;
ctx.fillStyle="#25105a";
ctx.beginPath();
ctx.arc(w*0.2+Math.sin(t*0.17)*w*0.08,h*0.22+Math.cos(t*0.13)*h*0.08,Math.max(w,h)*0.36,0,TAU);
ctx.fill();
ctx.fillStyle="#0a736f";
ctx.beginPath();
ctx.arc(w*0.83+Math.cos(t*0.12)*w*0.06,h*0.33+Math.sin(t*0.19)*h*0.08,Math.max(w,h)*0.31,0,TAU);
ctx.fill();
ctx.fillStyle="#822183";
ctx.beginPath();
ctx.arc(w*0.52+Math.sin(t*0.09)*w*0.08,h*0.78+Math.cos(t*0.11)*h*0.07,Math.max(w,h)*0.38,0,TAU);
ctx.fill();
ctx.globalAlpha=1;
}
function drawStars(t){
var i;
ctx.save();
ctx.globalCompositeOperation="lighter";
for(i=0;i<stars.length;i++){
var st=stars[i];
var x=st.x*w+Math.sin(t*0.06*st.s+st.p)*16;
var y=st.y*h+Math.cos(t*0.05*st.s+st.p)*12;
var a=0.15+0.65*(0.5+0.5*Math.sin(t*st.s+st.p));
ctx.globalAlpha=a;
ctx.fillStyle="hsl("+st.hue+",85%,78%)";
ctx.beginPath();
ctx.arc(x,y,st.r,0,TAU);
ctx.fill();
}
ctx.restore();
ctx.globalAlpha=1;
}
function drawRibbons(t){
var i,j;
ctx.save();
ctx.globalCompositeOperation="screen";
for(i=0;i<ribbons.length;i++){
var rb=ribbons[i];
var base=rb.y*h;
var step=Math.max(24,w/36);
ctx.beginPath();
for(j=-step;j<=w+step;j+=step){
var yy=base+Math.sin(j*0.009+t*rb.speed+rb.phase)*rb.amp+Math.sin(j*0.018-t*rb.speed*1.6+rb.phase)*rb.amp*0.35;
if(j===-step){ctx.moveTo(j,yy-rb.thick*0.5);}else{ctx.lineTo(j,yy-rb.thick*0.5);}
}
for(j=w+step;j>=-step;j-=step){
var yy2=base+Math.sin(j*0.009+t*rb.speed+rb.phase)*rb.amp+Math.sin(j*0.018-t*rb.speed*1.6+rb.phase)*rb.amp*0.35;
ctx.lineTo(j,yy2+rb.thick*0.5);
}
ctx.closePath();
ctx.globalAlpha=0.07+0.025*i;
ctx.fillStyle="hsl("+((rb.hue+t*8)%360)+",90%,58%)";
ctx.fill();
}
ctx.restore();
ctx.globalAlpha=1;
}
function petalPath(cx,cy,len,wid,ang,curve){
var ca=Math.cos(ang);
var sa=Math.sin(ang);
var bx=cx+ca*len;
var by=cy+sa*len;
var lx=cx+Math.cos(ang+Math.PI*0.5)*wid;
var ly=cy+Math.sin(ang+Math.PI*0.5)*wid;
var rx=cx+Math.cos(ang-Math.PI*0.5)*wid;
var ry=cy+Math.sin(ang-Math.PI*0.5)*wid;
var c1x=cx+ca*len*0.35+Math.cos(ang+Math.PI*0.5)*wid*curve;
var c1y=cy+sa*len*0.35+Math.sin(ang+Math.PI*0.5)*wid*curve;
var c2x=cx+ca*len*0.78+Math.cos(ang+Math.PI*0.5)*wid*0.35;
var c2y=cy+sa*len*0.78+Math.sin(ang+Math.PI*0.5)*wid*0.35;
var c3x=cx+ca*len*0.78+Math.cos(ang-Math.PI*0.5)*wid*0.35;
var c3y=cy+sa*len*0.78+Math.sin(ang-Math.PI*0.5)*wid*0.35;
var c4x=cx+ca*len*0.35+Math.cos(ang-Math.PI*0.5)*wid*curve;
var c4y=cy+sa*len*0.35+Math.sin(ang-Math.PI*0.5)*wid*curve;
ctx.beginPath();
ctx.moveTo(cx,cy);
ctx.bezierCurveTo(c1x,c1y,c2x,c2y,bx,by);
ctx.bezierCurveTo(c3x,c3y,c4x,c4y,cx,cy);
ctx.closePath();
}
function drawBloom(t){
var cx=w*0.5+Math.sin(t*0.22)*w*0.035;
var cy=h*0.5+Math.cos(t*0.18)*h*0.035;
var m=Math.min(w,h);
var i,k;
ctx.save();
ctx.globalCompositeOperation="screen";
for(k=0;k<4;k++){
var count=10+k*4;
var baseLen=m*(0.14+k*0.055);
var baseWid=m*(0.022+k*0.012);
var rot=t*(0.13+k*0.045)*(k%2===0?1:-1);
for(i=0;i<count;i++){
var a=rot+i*TAU/count+Math.sin(t*0.31+k)*0.05;
var pulse=0.86+0.14*Math.sin(t*1.25+i*0.7+k);
var hue=(188+k*34+i*9+t*18)%360;
ctx.globalAlpha=0.12+0.055*k;
ctx.fillStyle="hsl("+hue+",95%,"+(56+k*5)+"%)";
petalPath(cx,cy,baseLen*pulse,baseWid*(1.1+0.25*Math.sin(t+i)),a,1.25);
ctx.fill();
}
}
ctx.globalAlpha=0.22;
for(i=0;i<28;i++){
var rr=m*(0.05+i*0.007);
ctx.strokeStyle="hsl("+((205+i*7+t*16)%360)+",90%,66%)";
ctx.lineWidth=1.2;
ctx.beginPath();
ctx.arc(cx,cy,rr,Math.sin(t*0.4+i)*0.35,TAU+Math.cos(t*0.37+i)*0.35);
ctx.stroke();
}
ctx.globalAlpha=0.95;
for(i=0;i<7;i++){
ctx.fillStyle="hsl("+((285+i*13+t*20)%360)+",90%,"+(58+i*3)+"%)";
ctx.beginPath();
ctx.arc(cx,cy,m*(0.008+i*0.006)*(1+0.08*Math.sin(t*1.4+i)),0,TAU);
ctx.fill();
}
ctx.restore();
ctx.globalAlpha=1;
}
function drawParticles(t){
var cx=w*0.5;
var cy=h*0.5;
var i;
var maxr=Math.max(w,h)*0.72;
ctx.save();
ctx.globalCompositeOperation="lighter";
for(i=0;i<particles.length;i++){
var p=particles[i];
var a=p.a+t*p.s*0.12+Math.sin(t*0.17+p.p)*0.12;
var rr=(p.r+Math.sin(t*0.35+p.p)*44*p.z)%maxr;
var x=cx+Math.cos(a)*rr*(0.95+0.1*Math.sin(t*0.2+p.p));
var y=cy+Math.sin(a)*rr*(0.58+0.08*Math.cos(t*0.16+p.p));
var tw=0.4+0.6*(0.5+0.5*Math.sin(t*1.8+p.p));
ctx.globalAlpha=0.12+tw*0.58;
ctx.fillStyle="hsl("+((p.hue+t*24)%360)+",95%,70%)";
ctx.beginPath();
ctx.arc(x,y,p.size*p.z,0,TAU);
ctx.fill();
if(i%5===0){
ctx.globalAlpha=0.06+tw*0.11;
ctx.beginPath();
ctx.arc(x,y,p.size*p.z*4.5,0,TAU);
ctx.fill();
}
}
ctx.restore();
ctx.globalAlpha=1;
}
function drawOrbits(t){
var cx=w*0.5;
var cy=h*0.5;
var m=Math.min(w,h);
var i,j;
ctx.save();
ctx.globalCompositeOperation="screen";
for(i=0;i<7;i++){
var rx=m*(0.18+i*0.06);
var ry=rx*(0.44+0.06*Math.sin(t*0.3+i));
var rot=t*(0.08+i*0.018)*(i%2===0?1:-1)+i*0.33;
ctx.save();
ctx.translate(cx,cy);
ctx.rotate(rot);
ctx.globalAlpha=0.08;
ctx.strokeStyle="hsl("+((195+i*25+t*12)%360)+",90%,65%)";
ctx.lineWidth=1.1+i*0.12;
ctx.beginPath();
ctx.ellipse(0,0,rx,ry,0,0,TAU);
ctx.stroke();
for(j=0;j<3;j++){
var aa=t*(0.55+i*0.08+j*0.04)+j*TAU/3+i;
var x=Math.cos(aa)*rx;
var y=Math.sin(aa)*ry;
ctx.globalAlpha=0.42;
ctx.fillStyle="hsl("+((240+i*20+j*25+t*18)%360)+",95%,72%)";
ctx.beginPath();
ctx.arc(x,y,2.4+j*0.8,0,TAU);
ctx.fill();
}
ctx.restore();
}
ctx.restore();
ctx.globalAlpha=1;
}
function drawWaves(t){
var i,j;
ctx.save();
ctx.globalCompositeOperation="screen";
for(i=0;i<5;i++){
var y=h*(0.78+i*0.045);
ctx.beginPath();
ctx.moveTo(0,h);
ctx.lineTo(0,y);
for(j=0;j<=w+20;j+=20){
var yy=y+Math.sin(j*0.012+t*(0.42+i*0.07)+i)*22+Math.sin(j*0.027-t*0.3+i)*9;
ctx.lineTo(j,yy);
}
ctx.lineTo(w,h);
ctx.closePath();
ctx.globalAlpha=0.08+i*0.025;
ctx.fillStyle="hsl("+((190+i*17+t*8)%360)+",90%,"+(38+i*6)+"%)";
ctx.fill();
}
ctx.restore();
ctx.globalAlpha=1;
}
function vignette(){
var i;
ctx.save();
for(i=0;i<18;i++){
ctx.globalAlpha=0.018;
ctx.strokeStyle="#000000";
ctx.lineWidth=Math.max(w,h)*0.035;
ctx.strokeRect(-i*12,-i*12,w+i*24,h+i*24);
}
ctx.restore();
ctx.globalAlpha=1;
}
function frame(ms){
var t=ms*0.001;
fillBackground(t);
drawStars(t);
drawRibbons(t);
drawOrbits(t);
drawBloom(t);
drawParticles(t);
drawWaves(t);
vignette();
requestAnimationFrame(frame);
}
window.addEventListener("resize",function(){
resize();
init();
},false);
resize();
init();
requestAnimationFrame(frame);
}());
</script>
</body>
</html>
productiviamatania-latest
8.3/109.0 s
productiviamatania-latest
Tokens1 260
Code source4.2 KB
Temps9.0 s
Jugement Matania
Animation
7
Rendering
5
Qualité du code
8
Créativité
6
Fidélité
10
Global
8.25
Revue
Le code est techniquement très propre, utilisant intelligemment le mélange de SMIL et de JavaScript pour générer des éléments SVG dynamiques sans fuite de mémoire. La fidélité au prompt est parfaite, respectant l'absence de texte et la contrainte de non-interaction avec la souris. Cependant, en l'absence de capture d'écran, la note de rendu est limitée par défaut, bien que le code suggère une esthétique spatiale cohérente et élégante.
L'animation est visuellement très réussie, fluide et respecte parfaitement la contrainte de ne pas utiliser la souris. Cependant, le code source est tronqué à la fin (code incomplet), ce qui empêche un rendu technique parfait et affecte la note de qualité du code.
Le modèle a parfaitement respecté les contraintes négatives (pas de texte, pas d'interaction souris). L'animation est esthétique et apaisante, bien que le code soit incomplet (tronqué à la fin), ce qui empêche une évaluation totale de la structure. Le rendu visuel via SVG est propre et les effets de lueur (glow) sont bien gérés.
Le modèle respecte scrupuleusement toutes les contraintes techniques, notamment l'usage de l'ES5, la structure exacte du code et l'animation fluide des secondes grâce à l'intégration des millisecondes. Le rendu visuel est propre et futuriste avec des couleurs néon efficaces, bien que l'esthétique reste assez classique pour du Canvas. La fidélité au prompt est parfaite.
<canvas id="c" width="400" height="400"></canvas><script>
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 180;
function drawClock() {
var now = new Date();
var seconds = now.getSeconds();
var milliseconds = now.getMilliseconds();
var smoothSeconds = seconds + milliseconds / 1000;
var minutes = now.getMinutes() + smoothSeconds / 60;
var hours = now.getHours() % 12 + minutes / 60;
ctx.fillStyle = '#0a0e27';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = '#00d4ff';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.stroke();
ctx.strokeStyle = '#00d4ff';
ctx.lineWidth = 1;
for (var i = 0; i < 60; i++) {
var angle = (i * 6) * Math.PI / 180;
var x1 = centerX + Math.cos(angle) * (radius - 10);
var y1 = centerY + Math.sin(angle) * (radius - 10);
var x2 = centerX + Math.cos(angle) * (radius - 5);
var y2 = centerY + Math.sin(angle) * (radius - 5);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
ctx.fillStyle = '#00d4ff';
ctx.font = 'bold 20px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
for (var i = 1; i <= 12; i++) {
var angle = (i * 30 - 90) * Math.PI / 180;
var x = centerX + Math.cos(angle) * (radius - 40);
var y = centerY + Math.sin(angle) * (radius - 40);
ctx.fillText(i, x, y);
}
ctx.strokeStyle = '#ff00ff';
ctx.lineWidth = 6;
var hourAngle = (hours * 30 - 90) * Math.PI / 180;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(centerX + Math.cos(hourAngle) * 80, centerY + Math.sin(hourAngle) * 80);
ctx.stroke();
ctx.strokeStyle = '#00ff88';
ctx.lineWidth = 4;
var minuteAngle = (minutes * 6 - 90) * Math.PI / 180;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(centerX + Math.cos(minuteAngle) * 120, centerY + Math.sin(minuteAngle) * 120);
ctx.stroke();
ctx.strokeStyle = '#ffff00';
ctx.lineWidth = 2;
var secondAngle = (smoothSeconds * 6 - 90) * Math.PI / 180;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(centerX + Math.cos(secondAngle) * 130, centerY + Math.sin(secondAngle) * 130);
ctx.stroke();
ctx.fillStyle = '#00d4ff';
ctx.beginPath();
ctx.arc(centerX, centerY, 8, 0, Math.PI * 2);
ctx.fill();
requestAnimationFrame(drawClock);
}
drawClock();
</script>
anthropicclaude-opus-4-6
9.9/1025.4 s
anthropicclaude-opus-4-6
Tokens2 577
Code source5.0 KB
Temps25.4 s
Jugement Matania
Animation
10
Rendering
10
Qualité du code
10
Créativité
9
Fidélité
10
Global
9.88
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'utilisation de l'ES5, le format de sortie strict et l'animation fluide de la seconde. Le rendu visuel est exceptionnel, avec une esthétique futuriste cohérente (néons, dégradés, ombres portées) et une gestion précise de la fluidité via les millisecondes.
Le modèle respecte scrupuleusement toutes les contraintes techniques, notamment l'usage de l'ES5, la structure HTML exacte et le mouvement fluide de l'aiguille des secondes grâce à l'intégration des millisecondes. Le rendu visuel est esthétique et correspond parfaitement au thème 'futuriste' avec des effets de lueur (glow) bien gérés. Le code est propre, optimisé et sans fuite de mémoire.
<canvas id="c" width="400" height="400"></canvas><script>
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var cx = 200, cy = 200, R = 180;
function draw() {
var now = new Date();
var ms = now.getMilliseconds();
var s = now.getSeconds() + ms / 1000;
var m = now.getMinutes() + s / 60;
var h = (now.getHours() % 12) + m / 60;
// Background
var bg = ctx.createRadialGradient(cx, cy, 10, cx, cy, R);
bg.addColorStop(0, "#0a1929");
bg.addColorStop(1, "#000");
ctx.fillStyle = bg;
ctx.fillRect(0, 0, 400, 400);
// Outer glow ring
ctx.beginPath();
ctx.arc(cx, cy, R - 5, 0, Math.PI * 2);
ctx.strokeStyle = "#00e5ff";
ctx.lineWidth = 2;
ctx.shadowColor = "#00e5ff";
ctx.shadowBlur = 20;
ctx.stroke();
// Inner ring
ctx.beginPath();
ctx.arc(cx, cy, R - 15, 0, Math.PI * 2);
ctx.strokeStyle = "#0288d1";
ctx.lineWidth = 1;
ctx.shadowBlur = 10;
ctx.stroke();
ctx.shadowBlur = 0;
// Tick marks
for (var i = 0; i < 60; i++) {
var ang = (i / 60) * Math.PI * 2 - Math.PI / 2;
var isHour = i % 5 === 0;
var r1 = isHour ? R - 35 : R - 25;
var r2 = R - 20;
ctx.beginPath();
ctx.moveTo(cx + Math.cos(ang) * r1, cy + Math.sin(ang) * r1);
ctx.lineTo(cx + Math.cos(ang) * r2, cy + Math.sin(ang) * r2);
ctx.strokeStyle = isHour ? "#00e5ff" : "#1976d2";
ctx.lineWidth = isHour ? 2 : 1;
ctx.shadowColor = "#00e5ff";
ctx.shadowBlur = isHour ? 8 : 0;
ctx.stroke();
}
ctx.shadowBlur = 0;
// Roman numerals
var romans = ["XII","I","II","III","IV","V","VI","VII","VIII","IX","X","XI"];
ctx.fillStyle = "#e0f7fa";
ctx.font = "bold 20px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.shadowColor = "#00e5ff";
ctx.shadowBlur = 10;
for (var j = 0; j < 12; j++) {
var a = (j / 12) * Math.PI * 2 - Math.PI / 2;
var rx = cx + Math.cos(a) * (R - 55);
var ry = cy + Math.sin(a) * (R - 55);
ctx.fillText(romans[j], rx, ry);
}
ctx.shadowBlur = 0;
// Inner decorative circle
ctx.beginPath();
ctx.arc(cx, cy, 60, 0, Math.PI * 2);
ctx.strokeStyle = "rgba(0,229,255,0.3)";
ctx.lineWidth = 1;
ctx.stroke();
// Hour hand
drawHand((h / 12) * Math.PI * 2, 60, 6, "#00e5ff", 15);
// Minute hand
drawHand((m / 60) * Math.PI * 2, 95, 4, "#80d8ff", 12);
// Second hand
drawHand((s / 60) * Math.PI * 2, 110, 2, "#ff1744", 15);
// Center cap
ctx.beginPath();
ctx.arc(cx, cy, 8, 0, Math.PI * 2);
ctx.fillStyle = "#00e5ff";
ctx.shadowColor = "#00e5ff";
ctx.shadowBlur = 15;
ctx.fill();
ctx.beginPath();
ctx.arc(cx, cy, 3, 0, Math.PI * 2);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.shadowBlur = 0;
requestAnimationFrame(draw);
}
function drawHand(angle, length, width, color, glow) {
var a = angle - Math.PI / 2;
ctx.beginPath();
ctx.moveTo(cx - Math.cos(a) * 15, cy - Math.sin(a) * 15);
ctx.lineTo(cx + Math.cos(a) * length, cy + Math.sin(a) * length);
ctx.strokeStyle = color;
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.shadowColor = color;
ctx.shadowBlur = glow;
ctx.stroke();
ctx.shadowBlur = 0;
}
draw();
</script>
anthropicclaude-sonnet-4-6
9.9/1020.9 s
anthropicclaude-sonnet-4-6
Tokens2 700
Code source5.1 KB
Temps20.9 s
Jugement Matania
Animation
10
Rendering
10
Qualité du code
10
Créativité
9
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 du canvas et l'animation fluide de la seconde grâce à l'intégration des millisecondes. Le rendu visuel est exceptionnel avec un style néon/futuriste très cohérent et une excellente gestion des dégradés et des lueurs (glow effects).
Le modèle respecte scrupuleusement toutes les contraintes techniques, notamment l'utilisation de l'ES5 et le format de sortie strict. L'animation de l'aiguille des secondes est parfaitement fluide grâce à l'intégration des millisecondes dans le calcul de l'angle. Le rendu visuel est esthétique, avec un effet néon/futuriste réussi qui correspond bien à la demande.
<canvas id="c" width="400" height="400"></canvas><script>
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
function render() {
var now = new Date();
var ms = now.getMilliseconds();
var s = now.getSeconds() + ms / 1000.0;
var m = now.getMinutes() + s / 60.0;
var h = (now.getHours() % 12) + m / 60.0;
ctx.fillStyle = "#05050a";
ctx.fillRect(0, 0, 400, 400);
ctx.save();
ctx.translate(200, 200);
ctx.strokeStyle = "#00d2ff";
ctx.lineWidth = 5.0;
ctx.shadowBlur = 15;
ctx.shadowColor = "#00d2ff";
ctx.beginPath();
ctx.arc(0, 0, 190, 0, Math.PI * 2.0);
ctx.stroke();
ctx.shadowBlur = 0;
for (var i = 0; i < 60; i++) {
ctx.save();
ctx.rotate(i * Math.PI / 30.0);
ctx.beginPath();
if (i % 5 === 0) {
ctx.strokeStyle = "#00d2ff";
ctx.lineWidth = 3.0;
ctx.moveTo(0, -190);
ctx.lineTo(0, -170);
} else {
ctx.strokeStyle = "#003344";
ctx.lineWidth = 1.0;
ctx.moveTo(0, -190);
ctx.lineTo(0, -182);
}
ctx.stroke();
ctx.restore();
}
ctx.fillStyle = "#00d2ff";
ctx.font = "bold 22px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
for (var n = 1; n <= 12; n++) {
var theta = n * Math.PI / 6.0;
ctx.fillText(n.toString(), 145.0 * Math.sin(theta), -145.0 * Math.cos(theta));
}
function drawHand(angle, len, wide, color, glow) {
ctx.save();
ctx.rotate(angle);
ctx.strokeStyle = color;
ctx.lineWidth = wide;
ctx.lineCap = "round";
ctx.shadowBlur = 10;
ctx.shadowColor = glow;
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.lineTo(0, -len);
ctx.stroke();
ctx.restore();
}
drawHand(h * Math.PI / 6.0, 100, 8, "#ffffff", "#00d2ff");
drawHand(m * Math.PI / 30.0, 150, 4, "#00d2ff", "#00d2ff");
drawHand(s * Math.PI / 30.0, 170, 2, "#ff0088", "#ff0088");
ctx.fillStyle = "#ffffff";
ctx.beginPath();
ctx.arc(0, 0, 7, 0, Math.PI * 2.0);
ctx.fill();
ctx.restore();
requestAnimationFrame(render);
}
render();
</script>
googlegemini-flash-lite-latest
9.1/103.1 s
googlegemini-flash-lite-latest
Tokens893
Code source1.2 KB
Temps3.1 s
Jugement Matania
Animation
10
Rendering
8
Qualité du code
9
Créativité
6
Fidélité
10
Global
9.13
Revue
Le modèle respecte scrupuleusement toutes les contraintes techniques, notamment l'utilisation de JavaScript ES5, le format de sortie strict et l'animation fluide de la trotteuse grâce à l'intégration des millisecondes. Le rendu visuel est propre et futuriste avec son contraste cyan/noir, bien que l'absence de chiffres ou de texte sur le cadran limite légèrement la créativité demandée.
<canvas id="c" width="400" height="400"></canvas><script>var c = document.getElementById("c"); var ctx = c.getContext("2d"); function draw() { var now = new Date(); var ms = now.getMilliseconds(); var s = now.getSeconds() + ms / 1000; var m = now.getMinutes() + s / 60; var h = now.getHours() + m / 60; ctx.clearRect(0, 0, 400, 400); ctx.fillStyle = "#000"; ctx.fillRect(0, 0, 400, 400); ctx.translate(200, 200); ctx.beginPath(); ctx.arc(0, 0, 190, 0, Math.PI * 2); ctx.strokeStyle = "#0ff"; ctx.lineWidth = 4; ctx.stroke(); for (var i = 0; i < 60; i++) { var angle = i * Math.PI / 30; var r = i % 5 === 0 ? 170 : 180; ctx.beginPath(); ctx.moveTo(Math.cos(angle) * 190, Math.sin(angle) * 190); ctx.lineTo(Math.cos(angle) * r, Math.sin(angle) * r); ctx.strokeStyle = i % 5 === 0 ? "#fff" : "#555"; ctx.stroke(); } function hand(angle, len, width, color) { ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(Math.cos(angle - Math.PI / 2) * len, Math.sin(angle - Math.PI / 2) * len); ctx.strokeStyle = color; ctx.lineWidth = width; ctx.stroke(); } hand(h * Math.PI / 6, 80, 8, "#fff"); hand(m * Math.PI / 30, 130, 4, "#aaa"); hand(s * Math.PI / 30, 160, 2, "#f00"); ctx.setTransform(1, 0, 0, 1, 0, 0); requestAnimationFrame(draw); } draw();</script>
mistralmistral-large-latest
9.4/1012.2 s
mistralmistral-large-latest
Tokens1 071
Code source2.8 KB
Temps12.2 s
Jugement Matania
Animation
10
Rendering
8
Qualité du code
10
Créativité
7
Fidélité
10
Global
9.38
Revue
Le modèle respecte scrupuleusement toutes les contraintes techniques, notamment l'usage de l'ES5, la structure de sortie brute et l'animation fluide de l'aiguille des secondes grâce à l'intégration des millisecondes. Le rendu visuel est propre et l'esthétique futuriste est bien rendue par le contraste des couleurs néon sur fond sombre, bien que la composition reste assez classique.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'utilisation de JavaScript ES5, la structure HTML exacte et l'animation fluide de l'aiguille des secondes grâce à l'intégration des millisecondes. Le rendu visuel est très réussi, avec une esthétique néon/futuriste cohérente et une excellente lisibilité. Le code est propre, bien structuré et utilise efficacement les fonctions de rotation du Canvas.
<canvas id="c" width="400" height="400"></canvas>
<script>
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var radius = c.width / 2;
ctx.translate(radius, radius);
radius = radius * 0.90;
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fillStyle = '#0a0a1a';
ctx.fill();
grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
grad.addColorStop(0, '#1a1a3a');
grad.addColorStop(0.5, '#0a0a1a');
grad.addColorStop(1, '#1a1a3a');
ctx.strokeStyle = grad;
ctx.lineWidth = radius * 0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
ctx.fillStyle = '#444';
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius * 0.15 + "px arial";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.fillStyle = "#00f7ff";
for (num = 1; num < 13; num++) {
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius * 0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius * 0.85);
ctx.rotate(-ang);
}
for (var i = 0; i < 60; i++) {
ang = i * Math.PI / 30;
ctx.rotate(ang);
ctx.beginPath();
ctx.moveTo(0, -radius * 0.9);
ctx.lineTo(0, -radius * (i % 5 === 0 ? 0.85 : 0.92));
ctx.strokeStyle = i % 5 === 0 ? "#00f7ff" : "#333";
ctx.lineWidth = i % 5 === 0 ? 2 : 1;
ctx.stroke();
ctx.rotate(-ang);
}
}
function drawTime(ctx, radius) {
var now = new Date();
var hour = now.getHours() % 12;
var minute = now.getMinutes();
var second = now.getSeconds() + now.getMilliseconds() / 1000;
hour = hour * Math.PI / 6 + minute * Math.PI / (6 * 60) + second * Math.PI / (360 * 60);
drawHand(ctx, hour, radius * 0.5, radius * 0.07, "#00f7ff");
minute = minute * Math.PI / 30 + second * Math.PI / (30 * 60);
drawHand(ctx, minute, radius * 0.7, radius * 0.05, "#ff00e6");
second = second * Math.PI / 30;
drawHand(ctx, second, radius * 0.85, radius * 0.02, "#fff");
}
function drawHand(ctx, pos, length, width, color) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0, 0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.strokeStyle = color;
ctx.stroke();
ctx.rotate(-pos);
}
setInterval(drawClock, 40);
</script>
mistralmistral-small-latest
9.3/105.1 s
mistralmistral-small-latest
Tokens1 000
Code source2.5 KB
Temps5.1 s
Jugement Matania
Animation
10
Rendering
8
Qualité du code
9
Créativité
7
Fidélité
10
Global
9.25
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'utilisation de l'ES5, la structure HTML exacte et l'animation fluide des secondes grâce à l'intégration des millisecondes. Le rendu est propre et esthétique, bien que le style 'futuriste' reste assez sobre et classique. La qualité du code est excellente avec une boucle d'animation efficace.
<canvas id="c" width="400" height="400"></canvas><script>
var c = document.getElementById('c');
var ctx = c.getContext('2d');
var centerX = 200;
var centerY = 200;
var radius = 180;
function drawClock() {
var now = new Date();
var hours = now.getHours() % 12;
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var milliseconds = now.getMilliseconds();
ctx.clearRect(0, 0, 400, 400);
ctx.save();
ctx.translate(centerX, centerY);
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2);
ctx.fillStyle = '#0a0e23';
ctx.fill();
ctx.strokeStyle = '#1a1f3a';
ctx.lineWidth = 2;
ctx.stroke();
for (var i = 0; i < 60; i++) {
var angle = (i * 6) * Math.PI / 180;
var innerRadius = radius - 10;
var outerRadius = radius;
if (i % 5 === 0) {
innerRadius = radius - 20;
ctx.beginPath();
ctx.moveTo(Math.cos(angle) * innerRadius, Math.sin(angle) * innerRadius);
ctx.lineTo(Math.cos(angle) * outerRadius, Math.sin(angle) * outerRadius);
ctx.lineWidth = 3;
ctx.strokeStyle = '#4a5568';
ctx.stroke();
var num = i / 5;
if (num === 0) num = 12;
ctx.font = 'bold 18px Arial';
ctx.fillStyle = '#4a5568';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(num, Math.cos(angle) * (radius - 40), Math.sin(angle) * (radius - 40));
} else {
ctx.beginPath();
ctx.moveTo(Math.cos(angle) * (radius - 5), Math.sin(angle) * (radius - 5));
ctx.lineTo(Math.cos(angle) * outerRadius, Math.sin(angle) * outerRadius);
ctx.lineWidth = 1;
ctx.strokeStyle = '#2d3748';
ctx.stroke();
}
}
var hourAngle = (hours * 30 + minutes * 0.5) * Math.PI / 180;
var minuteAngle = (minutes * 6) * Math.PI / 180;
var secondAngle = (seconds * 6 + milliseconds * 0.006) * Math.PI / 180;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(Math.cos(hourAngle) * 60, Math.sin(hourAngle) * 60);
ctx.lineWidth = 8;
ctx.strokeStyle = '#4fd1c7';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(Math.cos(minuteAngle) * 90, Math.sin(minuteAngle) * 90);
ctx.lineWidth = 5;
ctx.strokeStyle = '#63b3ed';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(Math.cos(secondAngle) * 110, Math.sin(secondAngle) * 110);
ctx.lineWidth = 2;
ctx.strokeStyle = '#f56565';
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, 6, 0, Math.PI * 2);
ctx.fillStyle = '#f6e05e';
ctx.fill();
ctx.restore();
}
setInterval(drawClock, 10);
drawClock();
</script>
openaigpt-4o-mini
3.1/109.9 s
openaigpt-4o-mini
Tokens687
Code source1.3 KB
Temps9.9 s
Jugement Matania
Animation
2
Rendering
4
Qualité du code
5
Créativité
2
Fidélité
3
Global
3.13
Revue
Le modèle a échoué sur la contrainte majeure de l'animation fluide (point 4) : l'utilisation de setInterval(..., 1000) produit une seconde saccadée et non continue. Le style est extrêmement basique et ne respecte pas l'aspect 'futuriste' demandé. Enfin, bien que le code soit en ES5, il ne respecte pas l'aspect visuel attendu pour un projet de ce type.
Le modèle a échoué sur la fidélité de manière critique : le code est incomplet, s'arrêtant brutalement au milieu de la fonction drawHUD sans jamais appeler requestAnimationFrame ou fermer les balises, ce qui rend l'horloge totalement inopérante. Bien que le design visuel (rendering) et la créativité soient excellents, l'absence de boucle d'animation et de logique de mise à jour temporelle rend le résultat nul par rapport aux contraintes techniques.
<canvas id="c" width="400" height="400"></canvas><script>
(function () {
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
var cx = w / 2;
var cy = h / 2;
var r = 190;
var nums = ["12", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
function drawGlowCircle(x, y, radius, color, alpha) {
ctx.save();
ctx.globalAlpha = alpha;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.fillStyle = color;
ctx.shadowBlur = 20;
ctx.shadowColor = color;
ctx.fill();
ctx.restore();
}
function drawRing(radius, lineWidth, color, alpha) {
ctx.save();
ctx.beginPath();
ctx.arc(cx, cy, radius, 0, Math.PI * 2, false);
ctx.strokeStyle = color;
ctx.globalAlpha = alpha;
ctx.lineWidth = lineWidth;
ctx.shadowBlur = 14;
ctx.shadowColor = color;
ctx.stroke();
ctx.restore();
}
function drawBackground() {
var g = ctx.createRadialGradient(cx, cy, 20, cx, cy, 220);
g.addColorStop(0.00, "#0f1f33");
g.addColorStop(0.45, "#07111f");
g.addColorStop(1.00, "#02060c");
ctx.fillStyle = g;
ctx.fillRect(0, 0, w, h);
var i;
for (i = 0; i < 24; i++) {
var ang = (Math.PI * 2 * i / 24) - Math.PI / 2;
var rr = 150 + (i % 2) * 8;
var x = cx + Math.cos(ang) * rr;
var y = cy + Math.sin(ang) * rr;
drawGlowCircle(x, y, 1.5 + (i % 3), "#1ee7ff", 0.12);
}
drawGlowCircle(cx, cy, 180, "#0ff0ff", 0.03);
drawRing(184, 2, "#1ee7ff", 0.35);
drawRing(170, 1, "#5b8cff", 0.20);
drawRing(140, 1, "#1ee7ff", 0.10);
drawRing(24, 2, "#1ee7ff", 0.50);
}
function drawTicks() {
var i, ang, inner, outer, lw, color;
for (i = 0; i < 60; i++) {
ang = (Math.PI * 2 * i / 60) - Math.PI / 2;
if (i % 5 === 0) {
inner = 145;
outer = 176;
lw = 4;
color = "#8af6ff";
} else {
inner = 158;
outer = 176;
lw = 2;
color = "#2fd9ff";
}
ctx.save();
ctx.beginPath();
ctx.moveTo(cx + Math.cos(ang) * inner, cy + Math.sin(ang) * inner);
ctx.lineTo(cx + Math.cos(ang) * outer, cy + Math.sin(ang) * outer);
ctx.lineWidth = lw;
ctx.strokeStyle = color;
ctx.shadowBlur = 10;
ctx.shadowColor = color;
ctx.stroke();
ctx.restore();
}
}
function drawNumbers() {
var i, ang, x, y;
ctx.save();
ctx.fillStyle = "#dffcff";
ctx.font = "24px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.shadowBlur = 12;
ctx.shadowColor = "#35ecff";
for (i = 0; i < 12; i++) {
ang = (Math.PI * 2 * i / 12) - Math.PI / 2;
x = cx + Math.cos(ang) * 120;
y = cy + Math.sin(ang) * 120;
ctx.fillText(nums[i], x, y);
}
ctx.restore();
}
function drawInnerTech() {
var i, ang, x1, y1, x2, y2;
ctx.save();
ctx.strokeStyle = "#163d66";
ctx.lineWidth = 1;
ctx.globalAlpha = 0.8;
for (i = 0; i < 12; i++) {
ang = (Math.PI * 2 * i / 12) - Math.PI / 2;
x1 = cx + Math.cos(ang) * 36;
y1 = cy + Math.sin(ang) * 36;
x2 = cx + Math.cos(ang) * 92;
y2 = cy + Math.sin(ang) * 92;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
ctx.restore();
ctx.save();
ctx.strokeStyle = "#1ee7ff";
ctx.lineWidth = 1;
ctx.globalAlpha = 0.18;
ctx.beginPath();
ctx.arc(cx, cy, 92, 0, Math.PI * 2, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(cx, cy, 64, 0, Math.PI * 2, false);
ctx.stroke();
ctx.restore();
}
function drawHand(angle, length, width, color, tail) {
var tx = cx - Math.cos(angle) * tail;
var ty = cy - Math.sin(angle) * tail;
var x = cx + Math.cos(angle) * length;
var y = cy + Math.sin(angle) * length;
ctx.save();
ctx.beginPath();
ctx.moveTo(tx, ty);
ctx.lineTo(x, y);
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.strokeStyle = color;
ctx.shadowBlur = 16;
ctx.shadowColor = color;
ctx.stroke();
ctx.restore();
}
function drawSecondHand(angle) {
var x = cx + Math.cos(angle) * 165;
var y = cy + Math.sin(angle) * 165;
var bx = cx - Math.cos(angle) * 24;
var by = cy - Math.sin(angle) * 24;
ctx.save();
ctx.beginPath();
ctx.moveTo(bx, by);
ctx.lineTo(x, y);
ctx.lineWidth = 2;
ctx.lineCap = "round";
ctx.strokeStyle = "#ff4d8d";
ctx.shadowBlur = 18;
ctx.shadowColor = "#ff4d8d";
ctx.stroke();
ctx.beginPath();
ctx.arc(cx + Math.cos(angle) * 112, cy + Math.sin(angle) * 112, 5, 0, Math.PI * 2, false);
ctx.fillStyle = "#ffffff";
ctx.shadowBlur = 12;
ctx.shadowColor = "#ff4d8d";
ctx.fill();
ctx.restore();
}
function drawCenter() {
ctx.save();
ctx.beginPath();
ctx.arc(cx, cy, 10, 0, Math.PI * 2, false);
ctx.fillStyle = "#ffffff";
ctx.shadowBlur = 18;
ctx.shadowColor = "#1ee7ff";
ctx.fill();
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.arc(cx, cy, 4, 0, Math.PI * 2, false);
ctx.fillStyle = "#0a1220";
ctx.fill();
ctx.restore();
}
function drawHUD(now) {
var hh = now.getHours();
var mm = now.getMinutes();
var ss = now.getSeconds();
var text = (hh < 10 ? "0" + hh : "" + hh) + ":" + (mm < 10 ? "0" + mm : "" + mm) + ":" + (ss < 10 ? "0" + ss : "" + ss);
ctx.save();
ctx.fillStyle = "#98fbff";
ctx.font = "16px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.shadowBlur = 10;
ctx.shadowColor = "#1ee7ff";
ctx.fillText(text, cx, cy + 58);
ctx.restore();
ctx.save();
ctx.fillStyle = "#2fd9ff";
ctx.font = "10px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.globalAlpha = 0.8;
ctx.fillText("FUTURISTIC TIME CORE", cx, cy - 56);
ctx.restore();
}
function render() {
var now = new Date();
var ms = now.getMilliseconds();
var s = now.getSeconds() + ms / 1000;
var m = now.getMinutes() + s / 60;
var hr = (now.getHours() % 12) + m / 60;
var secondAngle = (Math.PI * 2 * s / 60) - Math.PI / 2;
var minuteAngle = (Math.PI * 2 * m / 60) - Math.PI / 2;
var hourAngle = (Math.PI * 2 * hr / 12) - Math.PI / 2;
ctx.clearRect(0, 0, w, h);
drawBackground();
drawTicks();
drawNumbers();
drawInnerTech();
drawHand(hourAngle, 92, 7, "#a7f7ff", 14);
drawHand(minuteAngle, 132, 5, "#47dfff", 18);
drawSecondHand(secondAngle);
drawCenter();
drawHUD(now);
requestAnimationFrame(render);
}
render();
}());
</script>
openaigpt-5.4-mini
9.5/105.8 s
openaigpt-5.4-mini
Tokens1 043
Code source2.7 KB
Temps5.8 s
Jugement Matania
Animation
10
Rendering
9
Qualité du code
9
Créativité
8
Fidélité
10
Global
9.5
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'utilisation de l'ES5, le format de sortie strict et l'animation fluide de l'aiguille des secondes grâce à l'intégration des millisecondes. Le rendu visuel est de haute qualité avec un aspect néon/futuriste très réussi, et le code est optimisé pour le Canvas.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'utilisation de l'ES5, le format de sortie strict et l'animation fluide de l'aiguille des secondes grâce à l'intégration des millisecondes. Le rendu visuel est exceptionnel avec un style néon/futuriste très soigné et une excellente gestion des dégradés et des lueurs (glow effects).
<canvas id="c" width="400" height="400"></canvas><script>
(function () {
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
function resizeToCSS() {
var dpr = window.devicePixelRatio || 1;
var rect = canvas.getBoundingClientRect();
if (!rect || rect.width <= 0 || rect.height <= 0) return;
var w = rect.width;
var h = rect.height;
var targetW = Math.round(w * dpr);
var targetH = Math.round(h * dpr);
if (canvas.width !== targetW || canvas.height !== targetH) {
canvas.width = targetW;
canvas.height = targetH;
}
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
function clearAndBackground() {
var w = canvas.clientWidth || 400;
var h = canvas.clientHeight || 400;
ctx.clearRect(0, 0, w, h);
ctx.save();
ctx.fillStyle = "#050812";
ctx.fillRect(0, 0, w, h);
var cx = w / 2, cy = h / 2;
ctx.globalAlpha = 1;
ctx.beginPath();
ctx.arc(cx, cy, Math.min(w, h) * 0.5, 0, Math.PI * 2, false);
ctx.fillStyle = "#070a14";
ctx.fill();
// glow rings
ctx.globalAlpha = 0.9;
ctx.lineWidth = 3;
ctx.strokeStyle = "#1a2a55";
ctx.beginPath();
ctx.arc(cx, cy, Math.min(w, h) * 0.47, 0, Math.PI * 2, false);
ctx.stroke();
ctx.globalAlpha = 0.9;
ctx.lineWidth = 2;
ctx.strokeStyle = "#2b4bff";
ctx.beginPath();
ctx.arc(cx, cy, Math.min(w, h) * 0.43, 0, Math.PI * 2, false);
ctx.stroke();
// subtle grid
ctx.globalAlpha = 0.25;
ctx.lineWidth = 1;
ctx.strokeStyle = "#0f1e3b";
var step = 40;
for (var x = 0; x <= w + 0.5; x += step) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, h);
ctx.stroke();
}
for (var y = 0; y <= h + 0.5; y += step) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(w, y);
ctx.stroke();
}
ctx.restore();
}
function drawTicks(now) {
var w = canvas.clientWidth || 400;
var h = canvas.clientHeight || 400;
var cx = w / 2, cy = h / 2;
var rOuter = Math.min(w, h) * 0.44;
var rInner = Math.min(w, h) * 0.39;
// 60 ticks, with minute and hour differentiation
for (var i = 0; i < 60; i++) {
var angle = (Math.PI * 2) * (i / 60) - Math.PI / 2;
var isHour = (i % 5 === 0);
var len = isHour ? (rOuter - rInner) * 0.95 : (rOuter - rInner) * 0.6;
var a1 = angle;
var a2 = angle;
var x1 = cx + Math.cos(a1) * (rOuter - len);
var y1 = cy + Math.sin(a1) * (rOuter - len);
var x2 = cx + Math.cos(a2) * (rOuter);
var y2 = cy + Math.sin(a2) * (rOuter);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineWidth = isHour ? 3 : 1.5;
ctx.strokeStyle = isHour ? "#86a8ff" : "#4d6cff";
ctx.globalAlpha = isHour ? 0.95 : 0.65;
ctx.stroke();
}
ctx.globalAlpha = 1;
// Roman numerals / arabic mix (roman 1..12)
var numerals = ["I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII"];
ctx.save();
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#cfe0ff";
ctx.globalAlpha = 0.95;
var rText = Math.min(w, h) * 0.31;
for (var n = 0; n < 12; n++) {
var ang = (Math.PI * 2) * (n / 12) - Math.PI / 2;
var tx = cx + Math.cos(ang) * rText;
var ty = cy + Math.sin(ang) * rText;
// subtle shadow glow
ctx.font = "600 16px system-ui, -apple-system, Segoe UI, Roboto, Arial";
ctx.shadowColor = "rgba(90,130,255,0.35)";
ctx.shadowBlur = 10;
ctx.fillText(numerals[n], tx, ty);
ctx.shadowBlur = 0;
}
ctx.restore();
}
function drawHands(now) {
var w = canvas.clientWidth || 400;
var h = canvas.clientHeight || 400;
var cx = w / 2, cy = h / 2;
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var ms = now.getMilliseconds();
var secFloat = seconds + ms / 1000;
var minuteFloat = minutes + secFloat / 60;
var hourFloat = (hours % 12) + minuteFloat / 60;
var hourAngle = (Math.PI * 2) * (hourFloat / 12) - Math.PI / 2;
var minuteAngle = (Math.PI * 2) * (minuteFloat / 60) - Math.PI / 2;
var secondAngle = (Math.PI * 2) * (secFloat / 60) - Math.PI / 2;
var r = Math.min(w, h) * 0.44;
// hour hand
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(hourAngle);
ctx.beginPath();
ctx.moveTo(-2.5, -r * 0.02);
ctx.lineTo(90, 0);
ctx.lineTo(-2.5, r * 0.02);
ctx.closePath();
ctx.fillStyle = "#cfe0ff";
ctx.globalAlpha = 0.92;
ctx.shadowColor = "rgba(140,170,255,0.35)";
ctx.shadowBlur = 12;
ctx.fill();
ctx.shadowBlur = 0;
ctx.beginPath();
ctx.moveTo(-1.6, -r * 0.012);
ctx.lineTo(110, 0);
ctx.lineTo(-1.6, r * 0.012);
ctx.closePath();
ctx.fillStyle = "#91b4ff";
ctx.globalAlpha = 0.55;
ctx.fill();
ctx.restore();
// minute hand
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(minuteAngle);
ctx.beginPath();
ctx.moveTo(-2.2, -r * 0.018);
ctx.lineTo(155, 0);
ctx.lineTo(-2.2, r * 0.018);
ctx.closePath();
ctx.fillStyle = "#a6c8ff";
ctx.globalAlpha = 0.95;
ctx.shadowColor = "rgba(70,120,255,0.35)";
ctx.shadowBlur = 14;
ctx.fill();
ctx.shadowBlur = 0;
ctx.beginPath();
ctx.moveTo(-1.2, -r * 0.01);
ctx.lineTo(175, 0);
ctx.lineTo(-1.2, r * 0.01);
ctx.closePath();
ctx.fillStyle = "#e9f2ff";
ctx.globalAlpha = 0.35;
ctx.fill();
ctx.restore();
// second hand (smooth continuous)
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(secondAngle);
var secondLen = Math.min(w, h) * 0.46;
ctx.globalAlpha = 1;
ctx.beginPath();
ctx.moveTo(-1.5, -r * 0.012);
ctx.lineTo(secondLen * 0.92, 0);
ctx.lineTo(-1.5, r * 0.012);
ctx.closePath();
ctx.fillStyle = "#5cfffb";
ctx.shadowColor = "rgba(80,255,255,0.5)";
ctx.shadowBlur = 18;
ctx.fill();
ctx.shadowBlur = 0;
// luminous tail
ctx.beginPath();
ctx.moveTo(-1.1, -r * 0.01);
ctx.lineTo(secondLen * 0.62, 0);
ctx.lineTo(-1.1, r * 0.01);
ctx.closePath();
ctx.fillStyle = "#00c8ff";
ctx.globalAlpha = 0.55;
ctx.fill();
// center hub
ctx.restore();
}
function drawCenter(now) {
var w = canvas.clientWidth || 400;
var h = canvas.clientHeight || 400;
var cx = w / 2, cy = h / 2;
ctx.save();
ctx.translate(cx, cy);
// Outer hub ring
ctx.globalAlpha = 1;
ctx.beginPath();
ctx.arc(0, 0, Math.min(w, h) * 0.065, 0, Math.PI * 2, false);
ctx.fillStyle = "#0b1226";
ctx.fill();
// Neon ring
ctx.beginPath();
ctx.arc(0, 0, Math.min(w, h) * 0.075, 0, Math.PI * 2, false);
ctx.lineWidth = 4;
ctx.strokeStyle = "#2b4bff";
ctx.shadowColor = "rgba(43,75,255,0.55)";
ctx.shadowBlur = 14;
ctx.stroke();
ctx.shadowBlur = 0;
// Inner core
ctx.beginPath();
ctx.arc(0, 0, Math.min(w, h) * 0.043, 0, Math.PI * 2, false);
ctx.fillStyle = "#cfe0ff";
ctx.globalAlpha = 0.9;
ctx.fill();
ctx.globalAlpha = 1;
// small highlight
ctx.beginPath();
ctx.arc(-Math.min(w, h) * 0.015, -Math.min(w, h) * 0.015, Math.min(w, h) * 0.014, 0, Math.PI * 2, false);
ctx.fillStyle = "#7fe2ff";
ctx.globalAlpha = 0.85;
ctx.fill();
ctx.restore();
}
function drawDigital(now) {
var w = canvas.clientWidth || 400;
var h = canvas.clientHeight || 400;
var cx = w / 2;
var hh = now.getHours();
var mm = now.getMinutes();
var ss = now.getSeconds();
var pad = function (n) { return (n < 10 ? "0" + n : "" + n); };
var text = pad(hh) + ":" + pad(mm) + ":" + pad(ss);
ctx.save();
ctx.textAlign = "center";
ctx.textBaseline = "alphabetic";
var y = h * 0.85;
ctx.globalAlpha = 0.95;
ctx.font = "700 20px system-ui, -apple-system, Segoe UI, Roboto, Arial";
ctx.shadowColor = "rgba(0,200,255,0.35)";
ctx.shadowBlur = 16;
ctx.fillStyle = "#eaf3ff";
ctx.fillText(text, cx, y);
ctx.shadowBlur = 0;
// underline glow
ctx.globalAlpha = 0.8;
ctx.fillStyle = "#00c8ff";
ctx.beginPath();
ctx.roundRect(cx - 82, y + 8, 164, 5, 2);
ctx.fill();
ctx.restore();
}
function draw(now) {
resizeToCSS();
clearAndBackground();
// ensure full-size regardless of CSS scale
var w = canvas.clientWidth || 400;
var h = canvas.clientHeight || 400;
// ring border
ctx.save();
ctx.globalAlpha = 1;
ctx.beginPath();
ctx.arc(w / 2, h / 2, Math.min(w, h) * 0.48, 0, Math.PI * 2, false);
ctx.lineWidth = 2;
ctx.strokeStyle = "#9db5ff";
ctx.stroke();
ctx.restore();
drawTicks(now);
drawHands(now);
drawCenter(now);
drawDigital(now);
}
// polyfill for roundRect if needed
if (!CanvasRenderingContext2D.prototype.roundRect) {
CanvasRenderingContext2D.prototype.roundRect = function (x, y, width, height, radius) {
radius = radius || 0;
var r = Math.min(radius, width / 2, height / 2);
this.beginPath();
this.moveTo(x + r, y);
this.arcTo(x + width, y, x + width, y + height, r);
this.arcTo(x + width, y + height, x, y + height, r);
this.arcTo(x, y + height, x, y, r);
this.arcTo(x, y, x + width, y, r);
this.closePath();
return this;
};
}
function tick() {
var now = new Date();
draw(now);
requestAnimationFrame(tick);
}
window.addEventListener('resize', function () {
resizeToCSS();
draw(new Date());
});
resizeToCSS();
requestAnimationFrame(tick);
})();
</script>
openaigpt-5.4-pro
5.9/10372.7 s
openaigpt-5.4-pro
Tokens1 872
Code source5.9 KB
Temps372.7 s
Jugement Matania
Animation
10
Rendering
10
Qualité du code
9
Créativité
10
Fidélité
2
Global
5.88
Revue
Le modèle a produit un rendu visuel absolument magnifique et une animation extrêmement fluide (aiguille des secondes continue grâce aux millisecondes). Cependant, le code est tronqué à la fin (syntax error : 'x.' sans suite), ce qui empêche l'exécution réelle et constitue un échec critique de la contrainte de complétude. La note de fidélité est sévèrement impactée par ce code incomplet.
<canvas id="c" width="400" height="400"></canvas><script>
var c=document.getElementById('c');
var x=c.getContext('2d');
var w=400;
var h=400;
var cx=200;
var cy=200;
var r=176;
var raf=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(fn){return setTimeout(fn,16);};
document.body.style.margin='0';
document.body.style.background='#01040b';
document.body.style.display='flex';
document.body.style.alignItems='center';
document.body.style.justifyContent='center';
document.body.style.minHeight='100vh';
c.style.display='block';
c.style.borderRadius='50%';
c.style.boxShadow='0 0 40px rgba(0,255,255,0.12), 0 0 80px rgba(122,92,255,0.10)';
function drawArc(radius,start,end,width,color,alpha){
x.save();
x.globalAlpha=alpha;
x.beginPath();
x.arc(cx,cy,radius,start,end,false);
x.lineWidth=width;
x.strokeStyle=color;
x.shadowBlur=18;
x.shadowColor=color;
x.stroke();
x.restore();
}
function drawTick(angle,inner,outer,width,color,alpha){
var sx=cx+Math.cos(angle)*inner;
var sy=cy+Math.sin(angle)*inner;
var ex=cx+Math.cos(angle)*outer;
var ey=cy+Math.sin(angle)*outer;
x.save();
x.globalAlpha=alpha;
x.beginPath();
x.moveTo(sx,sy);
x.lineTo(ex,ey);
x.lineWidth=width;
x.lineCap='round';
x.strokeStyle=color;
x.shadowBlur=10;
x.shadowColor=color;
x.stroke();
x.restore();
}
function drawDot(angle,dist,size,color,alpha){
var dx=cx+Math.cos(angle)*dist;
var dy=cy+Math.sin(angle)*dist;
x.save();
x.globalAlpha=alpha;
x.beginPath();
x.arc(dx,dy,size,0,Math.PI*2,false);
x.fillStyle=color;
x.shadowBlur=10;
x.shadowColor=color;
x.fill();
x.restore();
}
function drawHand(angle,length,width,color,blur){
var ex=cx+Math.cos(angle)*length;
var ey=cy+Math.sin(angle)*length;
x.save();
x.beginPath();
x.moveTo(cx,cy);
x.lineTo(ex,ey);
x.lineWidth=width;
x.lineCap='round';
x.strokeStyle=color;
x.shadowBlur=blur;
x.shadowColor=color;
x.stroke();
x.restore();
}
function render(){
raf(render);
var d=new Date();
var ms=d.getMilliseconds();
var sec=d.getSeconds()+ms/1000;
var min=d.getMinutes()+sec/60;
var hr=(d.getHours()%12)+min/60;
var aSec=sec*Math.PI*2/60-Math.PI/2;
var aMin=min*Math.PI*2/60-Math.PI/2;
var aHr=hr*Math.PI*2/12-Math.PI/2;
var now=(new Date()).getTime();
var pulse=0.5+0.5*Math.sin(now*0.003);
var rot=now*0.0002;
var bg=x.createRadialGradient(cx,cy,12,cx,cy,230);
bg.addColorStop(0,'#0a1629');
bg.addColorStop(0.55,'#030916');
bg.addColorStop(1,'#000000');
x.fillStyle=bg;
x.fillRect(0,0,w,h);
x.save();
x.strokeStyle='rgba(0,180,255,0.06)';
x.lineWidth=1;
for(var gr=30;gr<190;gr+=30){
x.beginPath();
x.arc(cx,cy,gr,0,Math.PI*2,false);
x.stroke();
}
x.restore();
drawArc(188,-Math.PI/2+rot,-Math.PI/2+rot+Math.PI*0.55,3,'#00f7ff',0.45);
drawArc(188,Math.PI/2-rot,Math.PI/2-rot+Math.PI*0.35,2,'#7a5cff',0.45);
drawArc(168,-Math.PI/2,-Math.PI/2+sec*Math.PI*2/60,4,'#00f7ff',0.85);
drawArc(154,-Math.PI/2,-Math.PI/2+min*Math.PI*2/60,2,'#7a5cff',0.65);
drawArc(138,-Math.PI/2,-Math.PI/2+hr*Math.PI*2/12,5,'#42ffb3',0.40);
x.save();
x.beginPath();
x.arc(cx,cy,172,0,Math.PI*2,false);
x.lineWidth=10;
x.strokeStyle='rgba(8,24,40,0.95)';
x.stroke();
x.beginPath();
x.arc(cx,cy,170,0,Math.PI*2,false);
x.lineWidth=2;
x.strokeStyle='rgba(0,247,255,0.45)';
x.shadowBlur=18;
x.shadowColor='#00f7ff';
x.stroke();
x.restore();
for(var i=0;i<60;i++){
var ang=i*Math.PI*2/60-Math.PI/2;
if(i%5===0){
drawTick(ang,146,166,4,'#d5fbff',0.95);
drawDot(ang,136,2.2,'#00f7ff',0.70);
}else{
drawTick(ang,154,166,1.5,'#4fc3ff',0.45);
}
}
x.save();
x.font='bold 20px Arial';
x.textAlign='center';
x.textBaseline='middle';
for(var n=1;n<=12;n++){
var na=n*Math.PI*2/12-Math.PI/2;
var tx=cx+Math.cos(na)*118;
var ty=cy+Math.sin(na)*118;
x.fillStyle='#e8fdff';
x.shadowBlur=14;
x.shadowColor='#00eaff';
x.fillText(n===12?'12':String(n),tx,ty);
}
x.restore();
x.save();
x.beginPath();
x.arc(cx,cy,92,0,Math.PI*2,false);
x.lineWidth=1;
x.strokeStyle='rgba(0,247,255,0.18)';
x.stroke();
x.beginPath();
x.arc(cx,cy,62,0,Math.PI*2,false);
x.lineWidth=1;
x.strokeStyle='rgba(122,92,255,0.22)';
x.stroke();
x.restore();
drawHand(aHr+Math.PI,28,6,'rgba(66,255,179,0.35)',10);
drawHand(aMin+Math.PI,36,4,'rgba(122,92,255,0.28)',10);
drawHand(aSec+Math.PI,24,2,'rgba(255,60,120,0.25)',12);
drawHand(aHr,86,7,'#42ffb3',18);
drawHand(aMin,122,4.5,'#7a5cff',18);
drawHand(aSec,144,2.5,'#ff4f8b',22);
x.save();
x.beginPath();
x.arc(cx+Math.cos(aSec)*154,cy+Math.sin(aSec)*154,4,0,Math.PI*2,false);
x.fillStyle='#ffffff';
x.shadowBlur=18;
x.shadowColor='#ff4f8b';
x.fill();
x.restore();
x.save();
x.beginPath();
x.arc(cx,cy,12,0,Math.PI*2,false);
x.fillStyle='#081426';
x.fill();
x.beginPath();
x.arc(cx,cy,8,0,Math.PI*2,false);
x.fillStyle='#ffffff';
x.shadowBlur=20;
x.shadowColor='#00f7ff';
x.fill();
x.beginPath();
x.arc(cx,cy,18,0,Math.PI*2,false);
x.lineWidth=2;
x.strokeStyle='rgba(0,247,255,'+(0.30+0.20*pulse)+')';
x.stroke();
x.restore();
var hh=d.getHours();
var mm=d.getMinutes();
var ss=d.getSeconds();
hh=hh<10?'0'+hh:String(hh);
mm=mm<10?'0'+mm:String(mm);
ss=ss<10?'0'+ss:String(ss);
x.save();
x.fillStyle='rgba(227,250,255,0.90)';
x.shadowBlur=10;
x.shadowColor='#00f7ff';
x.font='bold 22px Arial';
x.textAlign='center';
x.textBaseline='middle';
x.fillText(hh+':'+mm+':'+ss,cx,cy+74);
x.font='12px Arial';
x.fillStyle='rgba(140,235,255,0.75)';
x.fillText('SYNCHRONIZED',cx,cy+96);
x.restore();
var glass=x.createRadialGradient(cx-40,cy-50,10,cx,cy,220);
glass.addColorStop(0,'rgba(255,255,255,0.10)');
glass.addColorStop(0.35,'rgba(255,255,255,0.03)');
glass.addColorStop(1,'rgba(255,255,255,0.00)');
x.fillStyle=glass;
x.fillRect(0,0,w,h);
}
render();
</script>
openaigpt-5.5
9.8/1021.1 s
openaigpt-5.5
Tokens1 102
Code source2.9 KB
Temps21.1 s
Jugement Matania
Animation
10
Rendering
10
Qualité du code
9
Créativité
9
Fidélité
10
Global
9.75
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques, y compris le format de sortie strict, l'usage de l'ES5 et l'animation fluide de l'aiguille des secondes grâce aux millisecondes. Le rendu visuel est exceptionnel, avec un style néon/futuriste très réussi et une composition équilibrée. Le code est compact et efficace, utilisant judicieusement les effets de lueur (shadowBlur) pour l'esthétique demandée.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'utilisation de l'ES5, la structure HTML brute et l'animation fluide de la seconde. Le rendu visuel est exceptionnel, dépassant les attentes avec un effet de néon, des étoiles animées et une esthétique futuriste très cohérente. La gestion de l'heure actuelle et des chiffres romains est impeccable.
<canvas id="c" width="400" height="400"></canvas><script>
(function(){
var canvas=document.getElementById("c");
var ctx=canvas.getContext("2d");
var w=400;
var h=400;
var cx=200;
var cy=200;
var pi=Math.PI;
var tau=pi*2;
var romans=["XII","I","II","III","IV","V","VI","VII","VIII","IX","X","XI"];
var stars=[];
var i;
for(i=0;i<90;i++){
var a=(i*137.508*pi/180)%tau;
var rr=18+((i*67)%180);
stars.push({x:cx+Math.cos(a)*rr,y:cy+Math.sin(a)*rr,r:0.4+((i*13)%12)/10,a:0.15+((i*17)%60)/100});
}
function polar(r,a){
return {x:cx+Math.cos(a)*r,y:cy+Math.sin(a)*r};
}
function ring(r,lw,color,glow){
ctx.beginPath();
ctx.arc(cx,cy,r,0,tau,false);
ctx.lineWidth=lw;
ctx.strokeStyle=color;
ctx.shadowBlur=glow;
ctx.shadowColor=color;
ctx.stroke();
ctx.shadowBlur=0;
}
function arc(r,lw,color,start,end,glow){
ctx.beginPath();
ctx.arc(cx,cy,r,start,end,false);
ctx.lineCap="round";
ctx.lineWidth=lw;
ctx.strokeStyle=color;
ctx.shadowBlur=glow;
ctx.shadowColor=color;
ctx.stroke();
ctx.shadowBlur=0;
ctx.lineCap="butt";
}
function hand(angle,len,width,color,core,tail,glow){
ctx.save();
ctx.translate(cx,cy);
ctx.rotate(angle);
ctx.beginPath();
ctx.moveTo(-tail,-width*0.45);
ctx.lineTo(len-width*0.3,-width*0.28);
ctx.lineTo(len+10,0);
ctx.lineTo(len-width*0.3,width*0.28);
ctx.lineTo(-tail,width*0.45);
ctx.closePath();
ctx.fillStyle=color;
ctx.shadowBlur=glow;
ctx.shadowColor=color;
ctx.fill();
ctx.shadowBlur=0;
ctx.beginPath();
ctx.moveTo(-tail*0.4,0);
ctx.lineTo(len*0.82,0);
ctx.lineWidth=Math.max(1,width*0.18);
ctx.strokeStyle=core;
ctx.lineCap="round";
ctx.stroke();
ctx.restore();
}
function draw(){
var d=new Date();
var ms=d.getMilliseconds();
var s=d.getSeconds()+ms/1000;
var m=d.getMinutes()+s/60;
var hh=(d.getHours()%12)+m/60;
var pulse=0.5+0.5*Math.sin((d.getTime()%2000)/2000*tau);
ctx.setTransform(1,0,0,1,0,0);
ctx.clearRect(0,0,w,h);
var g=ctx.createRadialGradient(cx,cy,5,cx,cy,205);
g.addColorStop(0,"#10283a");
g.addColorStop(0.45,"#06111f");
g.addColorStop(1,"#010308");
ctx.fillStyle=g;
ctx.fillRect(0,0,w,h);
ctx.fillStyle="rgba(0,220,255,0.12)";
for(i=0;i<stars.length;i++){
ctx.globalAlpha=stars[i].a+0.12*Math.sin(d.getTime()/700+i);
ctx.beginPath();
ctx.arc(stars[i].x,stars[i].y,stars[i].r,0,tau,false);
ctx.fill();
}
ctx.globalAlpha=1;
ctx.save();
ctx.translate(cx,cy);
ctx.strokeStyle="rgba(80,220,255,0.10)";
ctx.lineWidth=1;
for(i=40;i<=160;i+=24){
ctx.beginPath();
ctx.arc(0,0,i,0,tau,false);
ctx.stroke();
}
for(i=0;i<24;i++){
var ga=i*tau/24;
ctx.beginPath();
ctx.moveTo(Math.cos(ga)*42,Math.sin(ga)*42);
ctx.lineTo(Math.cos(ga)*162,Math.sin(ga)*162);
ctx.stroke();
}
ctx.restore();
ring(196,4,"rgba(39,226,255,0.45)",18+10*pulse);
ring(185,1,"rgba(255,255,255,0.22)",0);
ring(151,1,"rgba(80,220,255,0.20)",0);
ring(102,1,"rgba(255,0,180,0.12)",0);
arc(193,4,"#29e6ff",-pi/2,-pi/2+tau*(s/60),22);
arc(183,3,"#ff2bd6",-pi/2,-pi/2+tau*(m/60),16);
arc(173,3,"#ffffff",-pi/2,-pi/2+tau*(hh/12),10);
for(i=0;i<60;i++){
var aa=i*tau/60-pi/2;
var major=i%5===0;
var p1=polar(major?155:166,aa);
var p2=polar(181,aa);
ctx.beginPath();
ctx.moveTo(p1.x,p1.y);
ctx.lineTo(p2.x,p2.y);
ctx.lineWidth=major?3.5:1;
ctx.strokeStyle=major?"rgba(210,252,255,0.95)":"rgba(70,215,255,0.42)";
ctx.shadowBlur=major?10:4;
ctx.shadowColor=major?"#74f4ff":"#17d9ff";
ctx.stroke();
}
ctx.shadowBlur=0;
ctx.textAlign="center";
ctx.textBaseline="middle";
ctx.font="bold 21px Georgia,serif";
for(i=0;i<12;i++){
var na=i*tau/12-pi/2;
var np=polar(130,na);
ctx.fillStyle="#eafbff";
ctx.shadowBlur=11;
ctx.shadowColor="#29e6ff";
ctx.fillText(romans[i],np.x,np.y);
}
ctx.shadowBlur=0;
for(i=0;i<12;i++){
var da=i*tau/12-pi/2;
var dp=polar(198,da);
ctx.beginPath();
ctx.arc(dp.x,dp.y,2.2,0,tau,false);
ctx.fillStyle="#ff2bd6";
ctx.shadowBlur=12;
ctx.shadowColor="#ff2bd6";
ctx.fill();
}
ctx.shadowBlur=0;
var sa=s*tau/60-pi/2;
for(i=10;i>0;i--){
arc(143+i*2,1.2,"rgba(255,43,214,"+(0.025*i)+")",sa-i*0.045,sa-i*0.045+0.018,0);
}
hand(hh*tau/12-pi/2,82,16,"rgba(255,255,255,0.92)","#71f7ff",22,18);
hand(m*tau/60-pi/2,122,10,"rgba(45,230,255,0.88)","#ffffff",28,20);
ctx.save();
ctx.translate(cx,cy);
ctx.rotate(sa);
ctx.beginPath();
ctx.moveTo(-38,0);
ctx.lineTo(145,0);
ctx.lineWidth=2.5;
ctx.strokeStyle="#ff2bd6";
ctx.shadowBlur=20;
ctx.shadowColor="#ff2bd6";
ctx.lineCap="round";
ctx.stroke();
ctx.beginPath();
ctx.arc(154,0,5,0,tau,false);
ctx.fillStyle="#ffffff";
ctx.shadowBlur=18;
ctx.shadowColor="#ff2bd6";
ctx.fill();
ctx.restore();
ctx.shadowBlur=0;
ctx.beginPath();
ctx.arc(cx,cy,18,0,tau,false);
ctx.fillStyle="#06111f";
ctx.fill();
ctx.lineWidth=3;
ctx.strokeStyle="#ffffff";
ctx.shadowBlur=16;
ctx.shadowColor="#2de6ff";
ctx.stroke();
ctx.beginPath();
ctx.arc(cx,cy,6,0,tau,false);
ctx.fillStyle="#ff2bd6";
ctx.shadowBlur=18;
ctx.shadowColor="#ff2bd6";
ctx.fill();
ctx.shadowBlur=0;
var hh2=d.getHours();
var mm2=d.getMinutes();
var ss2=d.getSeconds();
var txt=(hh2<10?"0":"")+hh2+":"+(mm2<10?"0":"")+mm2+":"+(ss2<10?"0":"")+ss2;
ctx.font="12px Arial,sans-serif";
ctx.textAlign="center";
ctx.textBaseline="middle";
ctx.fillStyle="rgba(210,252,255,0.72)";
ctx.fillText(txt,cx,238);
(window.requestAnimationFrame||function(f){window.setTimeout(f,16);})(draw);
}
draw();
}());
</script>
productiviamatania-latest
8.9/107.5 s
productiviamatania-latest
Tokens1 107
Code source2.9 KB
Temps7.5 s
Jugement Matania
Animation
10
Rendering
5
Qualité du code
9
Créativité
7
Fidélité
10
Global
8.88
Revue
Le code est excellent et respecte scrupuleusement toutes les contraintes techniques (ES5, structure exacte, animation fluide des secondes via les millisecondes). La note de 'rendering' est pénalisée car aucune capture d'écran n'est fournie pour valider l'esthétique finale, bien que le code suggère un rendu futuriste cohérent.
<canvas id="c" width="400" height="400"></canvas><script>
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var radius = canvas.width / 2;
ctx.translate(radius, radius);
radius = radius * 0.9;
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fillStyle = "#0a0a12";
ctx.fill();
ctx.strokeStyle = "#00f2ff";
ctx.lineWidth = 8;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius * 0.95, 0, 2 * Math.PI);
ctx.lineWidth = 1;
ctx.strokeStyle = "rgba(0, 242, 255, 0.3)";
ctx.stroke();
}
function drawNumbers(ctx, radius) {
ctx.font = "18px Arial";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.fillStyle = "#00f2ff";
for (var i = 1; i <= 12; i++) {
var ang = i * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius * 0.85);
ctx.rotate(-ang);
ctx.fillText(i.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius * 0.85);
ctx.rotate(-ang);
}
for (var i = 0; i < 60; i++) {
var ang = i * Math.PI / 30;
ctx.beginPath();
ctx.moveTo(Math.sin(ang) * radius * 0.92, -Math.cos(ang) * radius * 0.92);
ctx.lineTo(Math.sin(ang) * radius, -Math.cos(ang) * radius);
ctx.lineWidth = (i % 5 === 0) ? 4 : 1;
ctx.strokeStyle = (i % 5 === 0) ? "#00f2ff" : "#444";
ctx.stroke();
}
}
function drawTime(ctx, radius) {
var now = new Date();
var ms = now.getMilliseconds();
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours();
// Smooth second calculation
var smoothSec = sec + (ms / 1000);
var secAngle = (smoothSec * Math.PI / 30);
var minAngle = (min * Math.PI / 30) + (secAngle / 60);
var hourAngle = (hour % 12 * Math.PI / 6) + (minAngle / 12);
// Seconds hand
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "#ff0055";
ctx.moveTo(0, 0);
ctx.rotate(secAngle);
ctx.lineTo(0, -radius * 0.8);
ctx.stroke();
ctx.rotate(-secAngle);
// Minutes hand
ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = "#00f2ff";
ctx.moveTo(0, 0);
ctx.rotate(minAngle);
ctx.lineTo(0, -radius * 0.7);
ctx.stroke();
ctx.rotate(-minAngle);
// Hours hand
ctx.beginPath();
ctx.lineWidth = 8;
ctx.strokeStyle = "#ffffff";
ctx.moveTo(0, 0);
ctx.rotate(hourAngle);
ctx.lineTo(0, -radius * 0.5);
ctx.stroke();
ctx.rotate(-hourAngle);
// Center dot
ctx.beginPath();
ctx.arc(0, 0, 5, 0, 2 * Math.PI);
ctx.fillStyle = "#fff";
ctx.fill();
}
function update() {
ctx.clearRect(-radius, -radius, canvas.width, canvas.height);
drawClock();
requestAnimationFrame(update);
}
requestAnimationFrame(update);
</script>
xaigrok-4-1-fast-non-reasoning
9.8/1012.8 s
xaigrok-4-1-fast-non-reasoning
Tokens1 611
Code source4.9 KB
Temps12.8 s
Jugement Matania
Animation
10
Rendering
10
Qualité du code
9
Créativité
9
Fidélité
10
Global
9.75
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'utilisation de l'ES5, la structure HTML brute et l'animation fluide de l'aiguille des secondes grâce à l'intégration des millisecondes. Le rendu visuel est exceptionnel avec un style néon/futuriste très bien exécuté via les dégradés et les effets de lueur (shadowBlur) du Canvas. Le code est propre et efficace.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'usage de l'ES5, la structure exacte du code et l'animation fluide de la seconde via les millisecondes. Le rendu visuel est esthétique, respectant le thème futuriste avec des effets de lueur (glow) réussis sur Canvas. Le code est propre, optimisé avec requestAnimationFrame et sans aucune fuite de mémoire apparente.
Le code est techniquement excellent, fluide et esthétiquement très réussi avec un bel effet de lueur. Cependant, il échoue sur la contrainte principale du prompt : l'interaction au 'mouse over' n'influence pas l'onde elle-même (l'onde défile de manière autonome), la souris ne créant qu'un halo décoratif passif. De plus, le prompt demandait une animation au mouse over, ce qui implique une réaction de l'onde à la souris, ce qui n'est pas implémenté ici.
Le modèle a parfaitement respecté toutes les contraintes techniques, y compris l'usage de JavaScript ES5 et la structure HTML demandée. L'effet de 'mouse over' est très sophistiqué, créant une interaction dynamique qui amplifie les ondes et ajoute un éclat radial. Le code est propre, bien structuré et l'esthétique est de haute qualité avec un fond dégradé et des particules subtiles.
Le modèle respecte scrupuleusement toutes les contraintes techniques, notamment l'usage de l'ES5 et le format de sortie unique. L'implémentation de l'interaction au survol est excellente, avec une modulation dynamique de l'amplitude et un effet de perturbation organique qui dépasse la simple demande initiale. Le rendu visuel est très esthétique grâce à l'utilisation de l'effet de traînée (alpha sur le fond) et des lueurs (shadowBlur).
<canvas id="c" width="400" height="400"></canvas><script>
var c=document.getElementById('c'),x=c.getContext('2d');
var t=0,mx=200,my=200,hover=false;
c.addEventListener('mousemove',function(e){var r=c.getBoundingClientRect();mx=e.clientX-r.left;my=e.clientY-r.top;hover=true;});
c.addEventListener('mouseleave',function(){hover=false;});
var waves=[{c:'#ff6b9d',a:40,f:0.02,s:0.04,o:0},{c:'#4ecdc4',a:50,f:0.018,s:0.03,o:1},{c:'#ffe66d',a:35,f:0.025,s:0.05,o:2},{c:'#a78bfa',a:45,f:0.015,s:0.035,o:3}];
function loop(){
x.fillStyle='rgba(15,20,35,0.15)';x.fillRect(0,0,400,400);
for(var i=0;i<waves.length;i++){
var w=waves[i];
var amp=w.a;
if(hover){var d=Math.abs(my-200)/200;amp=w.a*(1+d*1.5);}
x.beginPath();
x.strokeStyle=w.c;x.lineWidth=2;x.shadowColor=w.c;x.shadowBlur=12;
for(var px=0;px<=400;px+=2){
var dist=hover?Math.abs(px-mx)/100:0;
var bump=hover?Math.exp(-dist*dist)*30:0;
var y=200+Math.sin(px*w.f+t*w.s+w.o)*amp+bump*Math.sin(t*0.05+i);
if(px===0)x.moveTo(px,y);else x.lineTo(px,y);
}
x.stroke();
}
x.shadowBlur=0;
if(hover){
x.beginPath();x.arc(mx,my,6,0,Math.PI*2);x.fillStyle='#fff';x.fill();
x.beginPath();x.arc(mx,my,12,0,Math.PI*2);x.strokeStyle='rgba(255,255,255,0.4)';x.lineWidth=1;x.stroke();
}
t++;requestAnimationFrame(loop);
}
x.fillStyle='#0f1423';x.fillRect(0,0,400,400);
loop();
</script>
anthropicclaude-sonnet-4-6
9.6/1016.8 s
anthropicclaude-sonnet-4-6
Tokens1 983
Code source3.6 KB
Temps16.8 s
Jugement Matania
Animation
9
Rendering
10
Qualité du code
9
Créativité
9
Fidélité
10
Global
9.63
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques, incluant l'utilisation de JavaScript ES5 et la structure de canvas demandée. L'effet d'interaction au survol de la souris est très sophistiqué, ajoutant une déformation dynamique aux ondes qui dépasse les attentes simples du prompt. Le rendu visuel est esthétiquement superbe avec des effets de lueur (glow) et un arrière-plan dégradé soigné.
<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 t = 0;
var mouseX = 200;
var mouseY = 200;
var hovering = false;
canvas.addEventListener('mousemove', function(e) {
var rect = canvas.getBoundingClientRect();
mouseX = e.clientX - rect.left;
mouseY = e.clientY - rect.top;
hovering = true;
});
canvas.addEventListener('mouseleave', function() {
hovering = false;
});
var waves = [
{ amp: 50, freq: 0.025, speed: 1.5, phase: 0, r: 0, g: 200, b: 255, alpha: 1.0, width: 2.5 },
{ amp: 35, freq: 0.035, speed: 2.2, phase: 2.1, r: 180, g: 80, b: 255, alpha: 0.85, width: 2.0 },
{ amp: 25, freq: 0.050, speed: 1.0, phase: 4.3, r: 80, g: 255, b: 180, alpha: 0.75, width: 1.5 },
{ amp: 15, freq: 0.070, speed: 3.0, phase: 1.0, r: 255, g: 160, b: 60, alpha: 0.6, width: 1.2 }
];
function getWaveY(wave, x, extraAmp) {
var a = wave.amp + extraAmp;
return H / 2 + a * Math.sin(wave.freq * x + wave.phase + t * wave.speed * 0.05);
}
function drawBackground() {
var grad = ctx.createLinearGradient(0, 0, 0, H);
grad.addColorStop(0, '#0a0a1a');
grad.addColorStop(1, '#0d1a2e');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, W, H);
ctx.strokeStyle = 'rgba(255,255,255,0.03)';
ctx.lineWidth = 1;
for (var gx = 0; gx < W; gx += 40) {
ctx.beginPath();
ctx.moveTo(gx, 0);
ctx.lineTo(gx, H);
ctx.stroke();
}
for (var gy = 0; gy < H; gy += 40) {
ctx.beginPath();
ctx.moveTo(0, gy);
ctx.lineTo(W, gy);
ctx.stroke();
}
}
function drawGlow(wave, extraAmp, color) {
ctx.save();
ctx.shadowBlur = 18;
ctx.shadowColor = color;
ctx.strokeStyle = color;
ctx.lineWidth = wave.width + 1.5;
ctx.globalAlpha = 0.35;
ctx.beginPath();
for (var x = 0; x <= W; x += 1) {
var y = getWaveY(wave, x, extraAmp);
if (x === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.stroke();
ctx.restore();
}
function drawWave(wave, extraAmp) {
var color = 'rgba(' + wave.r + ',' + wave.g + ',' + wave.b + ',' + wave.alpha + ')';
drawGlow(wave, extraAmp, color);
ctx.save();
ctx.shadowBlur = 8;
ctx.shadowColor = color;
ctx.strokeStyle = color;
ctx.lineWidth = wave.width;
ctx.globalAlpha = wave.alpha;
ctx.beginPath();
for (var x = 0; x <= W; x += 1) {
var y = getWaveY(wave, x, extraAmp);
if (x === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.stroke();
ctx.restore();
}
function drawMouseEffect() {
if (!hovering) return;
var radius = 80;
var grd = ctx.createRadialGradient(mouseX, mouseY, 0, mouseX, mouseY, radius);
grd.addColorStop(0, 'rgba(0,220,255,0.18)');
grd.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = grd;
ctx.fillRect(0, 0, W, H);
ctx.beginPath();
ctx.arc(mouseX, mouseY, 5, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(0,220,255,0.9)';
ctx.shadowBlur = 14;
ctx.shadowColor = 'rgba(0,220,255,1)';
ctx.fill();
}
function getMouseInfluence(wave, x) {
if (!hovering) return 0;
var dist = Math.abs(x - mouseX);
var waveY = getWaveY(wave, x, 0);
var distY = Math.abs(waveY - mouseY);
var proximity = Math.max(0, 1 - dist / 100) * Math.max(0, 1 - distY / 80);
return proximity * 40;
}
function render() {
drawBackground();
for (var i = 0; i < waves.length; i++) {
var wave = waves[i];
var extraAmp = 0;
if (hovering) {
extraAmp = getMouseInfluence(wave, mouseX) * (1 - i * 0.15);
}
drawWave(wave, extraAmp);
}
drawMouseEffect();
t += 1;
requestAnimationFrame(render);
}
render();
</script>
googlegemini-flash-latest
9.5/1018.6 s
googlegemini-flash-latest
Tokens899
Code source1.4 KB
Temps18.6 s
Jugement Matania
Animation
9
Rendering
9
Qualité du code
10
Créativité
8
Fidélité
10
Global
9.5
Revue
Le modèle respecte scrupuleusement toutes les contraintes techniques, notamment l'usage de l'ES5 et la structure HTML demandée. L'implémentation du 'mouse over' est très réussie, influençant dynamiquement l'amplitude et la fréquence, ce qui dépasse la simple demande. L'animation est fluide et l'esthétique est soignée avec un bel effet de traînée (motion blur) via le fillRect transparent.
<canvas id="c" width="400" height="400" style="background:#050505"></canvas>
<script>
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var width = 400;
var height = 400;
var tick = 0;
var mouseX = 200;
var mouseY = 200;
canvas.onmousemove = function(e) {
var rect = canvas.getBoundingClientRect();
mouseX = e.clientX - rect.left;
mouseY = e.clientY - rect.top;
};
function render() {
ctx.fillStyle = "rgba(5, 5, 5, 0.2)";
ctx.fillRect(0, 0, width, height);
var waveConfigs = [
{ color: "#00ffff", amplitude: 40, frequency: 0.01, speed: 0.04, offset: 0 },
{ color: "#ff00ff", amplitude: 30, frequency: 0.02, speed: 0.06, offset: 2 },
{ color: "#7700ff", amplitude: 50, frequency: 0.015, speed: 0.03, offset: 4 }
];
for (var i = 0; i < waveConfigs.length; i++) {
var config = waveConfigs[i];
ctx.beginPath();
ctx.strokeStyle = config.color;
ctx.lineWidth = 2;
var dynamicAmp = config.amplitude + (400 - mouseY) * 0.3;
var dynamicFreq = config.frequency + (mouseX / 400) * 0.02;
for (var x = 0; x <= width; x += 2) {
var angle = x * dynamicFreq + tick * config.speed + config.offset;
var y = height / 2 + Math.sin(angle) * dynamicAmp;
if (x === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.stroke();
}
tick += 1.0;
requestAnimationFrame(render);
}
render();
</script>
googlegemini-flash-lite-latest
6.0/102.2 s
googlegemini-flash-lite-latest
Tokens578
Code source540 B
Temps2.2 s
Jugement Matania
Animation
9
Rendering
8
Qualité du code
9
Créativité
6
Fidélité
4
Global
6
Revue
Le code est propre et respecte les contraintes techniques (ES5, structure, canvas), mais il échoue sur la contrainte majeure de l'interaction : l'onde ne réagit absolument pas au 'mouse over' comme demandé. L'esthétique est correcte, mais l'absence de la fonctionnalité interactive principale fait chuter drastiquement la note de fidélité.
Le code est propre, bien structuré en ES5 et l'animation est fluide. Cependant, le modèle a totalement ignoré la contrainte majeure du prompt : l'interaction au 'mouse over'. L'onde défile de manière autonome sans réagir à la souris, ce qui entraîne une note de fidélité très basse malgré la qualité technique du reste.
<canvas id="c" width="400" height="400"></canvas><script>
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var time = 0;
var colors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#f9ca24", "#6c5ce7"];
var amplitude = 80;
var frequency = 0.02;
var speed = 0.05;
function draw() {
ctx.fillStyle = "#1a1a2e";
ctx.fillRect(0, 0, c.width, c.height);
for (var i = 0; i < colors.length; i++) {
ctx.strokeStyle = colors[i];
ctx.lineWidth = 2;
ctx.beginPath();
for (var x = 0; x < c.width; x++) {
var y = c.height / 2 + amplitude * Math.sin(frequency * x + time + i * 0.5);
if (x === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.stroke();
}
time += speed;
requestAnimationFrame(draw);
}
draw();
</script>
mistralmistral-medium-latest
9.1/104.8 s
mistralmistral-medium-latest
Tokens699
Code source1.4 KB
Temps4.8 s
Jugement Matania
Animation
9
Rendering
8
Qualité du code
9
Créativité
7
Fidélité
10
Global
9.13
Revue
Le modèle respecte scrupuleusement toutes les contraintes techniques, notamment l'usage de l'ES5, la structure HTML brute et l'interaction au mouseover. L'animation est fluide et l'effet de superposition des ondes est esthétiquement réussi. L'ajout de nouvelles ondes aléatoires lors du survol apporte une dimension interactive pertinente qui dépasse la simple demande.
<canvas id="c" width="400" height="400"></canvas>
<script>
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var w = c.width;
var h = c.height;
var time = 0;
var waves = [
{ amplitude: 80, frequency: 0.02, speed: 0.03, color: "#ff9a8b", phase: 0 },
{ amplitude: 60, frequency: 0.03, speed: 0.02, color: "#ffd166", phase: 2 },
{ amplitude: 40, frequency: 0.04, speed: 0.04, color: "#06d6a0", phase: 4 }
];
function draw() {
ctx.fillStyle = "#1a1a2e";
ctx.fillRect(0, 0, w, h);
ctx.lineWidth = 2;
ctx.strokeStyle = "#fff";
ctx.beginPath();
ctx.moveTo(0, h / 2);
ctx.lineTo(w, h / 2);
ctx.stroke();
for (var i = 0; i < waves.length; i++) {
var wave = waves[i];
ctx.beginPath();
ctx.strokeStyle = wave.color;
ctx.lineWidth = 3;
for (var x = 0; x < w; x += 5) {
var y = h / 2 + Math.sin(x * wave.frequency + time * wave.speed + wave.phase) * wave.amplitude;
if (x === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.stroke();
}
time += 0.5;
requestAnimationFrame(draw);
}
c.addEventListener("mouseover", function() {
waves.push({
amplitude: 50,
frequency: 0.025 + Math.random() * 0.01,
speed: 0.03 + Math.random() * 0.01,
color: "hsl(" + Math.random() * 360 + ", 80%, 60%)",
phase: Math.random() * 6
});
});
draw();
</script>
mistralmistral-small-latest
5.5/102.6 s
mistralmistral-small-latest
Tokens510
Code source713 B
Temps2.6 s
Jugement Matania
Animation
9
Rendering
8
Qualité du code
9
Créativité
6
Fidélité
3
Global
5.5
Revue
Le modèle échoue sur la contrainte majeure du prompt : l'animation ne se déclenche pas au 'mouse over', elle est automatique. Bien que le code soit propre, respecte l'ES5 et offre un rendu visuel fluide et esthétique, l'absence de l'interaction demandée constitue un défaut de fidélité critique.
<canvas id="c" width="400" height="400"></canvas><script>
var c = document.getElementById('c');
var ctx = c.getContext('2d');
var t = 0;
var colors = ['#ff9aa2','#ffb7b2','#ffdac1','#e2f0cb','#b5ead7','#c7ceea'];
function draw() {
ctx.fillStyle = '#222222';
ctx.fillRect(0, 0, 400, 400);
ctx.lineWidth = 2;
ctx.strokeStyle = '#ffffff';
for (var i = 0; i < 3; i++) {
ctx.beginPath();
ctx.moveTo(0, 200 + Math.sin(t + i * 0.5) * 80);
for (var x = 0; x < 400; x++) {
var y = 200 + Math.sin(x * 0.05 + t + i * 0.5) * 80 * (1 - i * 0.2);
ctx.lineTo(x, y);
}
ctx.strokeStyle = colors[i];
ctx.stroke();
}
t += 0.05;
requestAnimationFrame(draw);
}
draw();
</script>
openaigpt-4o-mini
4.9/103.9 s
openaigpt-4o-mini
Tokens434
Code source410 B
Temps3.9 s
Jugement Matania
Animation
8
Rendering
6
Qualité du code
9
Créativité
4
Fidélité
3
Global
4.88
Revue
Le modèle échoue sur la contrainte majeure du prompt : l'animation ne réagit absolument pas au 'mouse over'. Bien que le code soit propre, fluide et respecte la syntaxe ES5 et le format demandé, l'absence de l'interaction utilisateur principale fait chuter drastiquement la note de fidélité.
Le modèle a parfaitement respecté toutes les contraintes techniques, y compris l'usage de l'ES5 et le format de sortie. L'effet de 'mouse over' est élégamment implémenté avec une interpolation fluide (easing) qui affecte l'amplitude et l'éclat des ondes. Le rendu visuel est professionnel, avec une gestion harmonieuse des couleurs, des dégradés et des effets de lueur (glow).
<canvas id="c" width="400" height="400"></canvas><script>
(function () {
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
var running = false;
var phase = 0;
var hover = 0;
var targetHover = 0;
var last = 0;
function drawBackground() {
var bg = ctx.createLinearGradient(0, 0, 0, h);
bg.addColorStop(0, '#0b1020');
bg.addColorStop(1, '#151c33');
ctx.fillStyle = bg;
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = 'rgba(255,255,255,0.04)';
ctx.lineWidth = 1;
var i;
for (i = 0; i <= 10; i++) {
var y = i * 40;
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(w, y);
ctx.stroke();
}
}
function drawWave(color, alpha, baseY, amp, freq, speed, thickness, glow, offset) {
ctx.save();
ctx.strokeStyle = color;
ctx.globalAlpha = alpha;
ctx.lineWidth = thickness;
ctx.shadowBlur = glow;
ctx.shadowColor = color;
ctx.beginPath();
var x;
for (x = 0; x <= w; x += 2) {
var y = baseY + Math.sin((x * freq) + phase * speed + offset) * amp;
if (x === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.stroke();
ctx.restore();
}
function render() {
drawBackground();
hover += (targetHover - hover) * 0.08;
var ampBoost = 1 + hover * 0.9;
var glowBoost = 1 + hover * 1.4;
var alphaBoost = 0.45 + hover * 0.35;
drawWave('#6ee7ff', alphaBoost, 130, 18 * ampBoost, 0.028, 2.0, 2.5, 8 * glowBoost, 0);
drawWave('#8b5cf6', alphaBoost, 200, 24 * ampBoost, 0.022, 2.8, 3.0, 10 * glowBoost, 1.3);
drawWave('#ff6ec7', alphaBoost, 270, 16 * ampBoost, 0.034, 3.5, 2.0, 7 * glowBoost, 2.6);
ctx.save();
ctx.globalAlpha = 0.08 + hover * 0.08;
var g = ctx.createLinearGradient(0, 0, w, 0);
g.addColorStop(0, '#6ee7ff');
g.addColorStop(0.5, '#8b5cf6');
g.addColorStop(1, '#ff6ec7');
ctx.fillStyle = g;
ctx.fillRect(0, 0, w, h);
ctx.restore();
}
function loop(ts) {
if (!last) {
last = ts;
}
var dt = ts - last;
last = ts;
phase += dt * 0.0035;
render();
if (running) {
requestAnimationFrame(loop);
}
}
function start() {
targetHover = 1;
if (!running) {
running = true;
last = 0;
requestAnimationFrame(loop);
}
}
function stop() {
targetHover = 0;
setTimeout(function () {
if (targetHover === 0) {
running = false;
}
}, 300);
}
canvas.addEventListener('mouseenter', start);
canvas.addEventListener('mousemove', start);
canvas.addEventListener('mouseleave', stop);
render();
}());
</script>
openaigpt-5.4-mini
9.4/103.8 s
openaigpt-5.4-mini
Tokens686
Code source1.4 KB
Temps3.8 s
Jugement Matania
Animation
9
Rendering
9
Qualité du code
9
Créativité
8
Fidélité
10
Global
9.38
Revue
Le modèle respecte scrupuleusement toutes les contraintes techniques, notamment l'usage de l'ES5 et la structure HTML brute demandée. L'effet de 'mouse over' est subtilement intégré via une variation de l'amplitude, et l'esthétique est très réussie avec des dégradés et des effets de lueur (glow) qui dépassent les attentes simples. L'animation est parfaitement fluide et le code est optimisé.
Le modèle a parfaitement respecté toutes les contraintes, y compris l'utilisation de JavaScript ES5 et la structure spécifique. Le rendu visuel est exceptionnel avec une gestion sophistiquée de la lumière (glow), du mouvement et de l'interaction souris. L'animation est fluide et l'esthétique dépasse les attentes pour une simple onde sinusoïdale.
<canvas id="c" width="400" height="400"></canvas>
<script>
(function () {
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var W = canvas.width;
var H = canvas.height;
var dpr = 1;
if (window.devicePixelRatio) dpr = window.devicePixelRatio;
if (dpr && dpr !== 1) {
canvas.width = Math.round(W * dpr);
canvas.height = Math.round(H * dpr);
canvas.style.width = W + 'px';
canvas.style.height = H + 'px';
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
} else {
canvas.width = W;
canvas.height = H;
}
function clamp01(x) {
if (x < 0) return 0;
if (x > 1) return 1;
return x;
}
function lerp(a, b, t) {
return a + (b - a) * t;
}
function smoothstep(t) {
t = clamp01(t);
return t * t * (3 - 2 * t);
}
var mouse = { x: W * 0.5, y: H * 0.5, inside: false };
var hasHover = false;
canvas.addEventListener('mousemove', function (e) {
var rect = canvas.getBoundingClientRect();
mouse.x = (e.clientX - rect.left) * (W / rect.width);
mouse.y = (e.clientY - rect.top) * (H / rect.height);
mouse.inside = true;
hasHover = true;
}, false);
canvas.addEventListener('mouseenter', function () {
mouse.inside = true;
hasHover = true;
}, false);
canvas.addEventListener('mouseleave', function () {
mouse.inside = false;
hasHover = false;
}, false);
var t0 = 0;
var palette = [
{ line: '#7CF7D4', glow: 'rgba(124,247,212,0.55)' },
{ line: '#7AA7FF', glow: 'rgba(122,167,255,0.55)' },
{ line: '#FF7AC8', glow: 'rgba(255,122,200,0.55)' },
{ line: '#FFD67A', glow: 'rgba(255,214,122,0.45)' }
];
var lines = [
{ y0: H * 0.30, amp: 26, freq: 1.4, speed: 1.25, phase: 0, col: palette[0] },
{ y0: H * 0.50, amp: 18, freq: 1.8, speed: 1.55, phase: 1.2, col: palette[1] },
{ y0: H * 0.70, amp: 22, freq: 1.55, speed: 1.35, phase: 2.1, col: palette[2] }
];
function drawBackground(time) {
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = '#071026';
ctx.fillRect(0, 0, W, H);
ctx.save();
var gridAlpha = 0.12;
ctx.globalAlpha = gridAlpha;
ctx.strokeStyle = '#9FB6FF';
ctx.lineWidth = 1;
var spacing = 40;
var offset = (time * 0.03) % spacing;
ctx.beginPath();
for (var x = -spacing; x <= W + spacing; x += spacing) {
ctx.moveTo(x + offset, 0);
ctx.lineTo(x + offset, H);
}
for (var y = 0; y <= H; y += spacing) {
ctx.moveTo(0, y);
ctx.lineTo(W, y);
}
ctx.stroke();
ctx.restore();
ctx.save();
ctx.globalCompositeOperation = 'screen';
ctx.globalAlpha = 0.22;
for (var i = 0; i < 7; i++) {
var p = i / 6;
var cx = lerp(W * 0.15, W * 0.85, p);
var cy = lerp(H * 0.15, H * 0.85, (1 - p));
var r = lerp(70, 140, 1 - Math.abs(p - 0.5) * 2);
var wobble = Math.sin(time * 0.0007 + i * 1.7) * 8;
cx += Math.sin(time * 0.0004 + i) * 10;
cy += wobble;
var grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
grad.addColorStop(0, 'rgba(122,167,255,0.45)');
grad.addColorStop(1, 'rgba(122,167,255,0)');
ctx.fillStyle = grad;
ctx.beginPath();
ctx.arc(cx, cy, r, 0, Math.PI * 2, false);
ctx.fill();
}
ctx.restore();
}
function waveValue(x, line, time, hoverInfluence) {
var k = line.freq * 2 * Math.PI / W;
var speed = line.speed;
var base = Math.sin(k * x + time * 0.001 * speed + line.phase);
return base * line.amp * (1 + hoverInfluence * 0.55);
}
function drawWaveLine(line, time, targetHover) {
var hoverX = mouse.x;
var hoverY = mouse.y;
var dxToMouse = 0;
var dyToMouse = 0;
ctx.save();
ctx.globalCompositeOperation = 'lighter';
var baseAlpha = 0.95;
var alpha = baseAlpha * (0.85 + targetHover * 0.15);
ctx.globalAlpha = alpha;
ctx.lineWidth = 2.25;
var strokeColor = line.col.line;
var glowColor = line.col.glow;
ctx.shadowBlur = 18 + 26 * targetHover;
ctx.shadowColor = glowColor;
ctx.strokeStyle = strokeColor;
ctx.beginPath();
var step = 3;
var first = true;
for (var x = 0; x <= W; x += step) {
dxToMouse = x - hoverX;
dyToMouse = (line.y0 - hoverY);
var dist = Math.sqrt(dxToMouse * dxToMouse + dyToMouse * dyToMouse);
var m = 1 - dist / 220;
if (m < 0) m = 0;
var influence = smoothstep(m) * targetHover;
var y = line.y0 + waveValue(x, line, time, influence) + (influence * 10 * Math.sin(time * 0.001 + x * 0.01));
if (first) {
ctx.moveTo(x, y);
first = false;
} else {
ctx.lineTo(x, y);
}
}
ctx.stroke();
ctx.shadowBlur = 0;
ctx.globalAlpha = 0.35 * (0.6 + targetHover);
ctx.lineWidth = 1.25;
ctx.strokeStyle = 'rgba(255,255,255,0.9)';
ctx.beginPath();
first = true;
for (var x2 = 0; x2 <= W; x2 += step * 2) {
dxToMouse = x2 - hoverX;
dyToMouse = (line.y0 - hoverY);
dist = Math.sqrt(dxToMouse * dxToMouse + dyToMouse * dyToMouse);
var m2 = 1 - dist / 240;
if (m2 < 0) m2 = 0;
var influence2 = smoothstep(m2) * targetHover;
var y2 = line.y0 + waveValue(x2, line, time, influence2) * 0.72 - 2 + (influence2 * 7);
if (first) {
ctx.moveTo(x2, y2);
first = false;
} else {
ctx.lineTo(x2, y2);
}
}
ctx.stroke();
ctx.restore();
}
var hoverStrength = 0;
function animate(time) {
if (!t0) t0 = time;
drawBackground(time - t0);
var target = hasHover ? 1 : 0;
hoverStrength = lerp(hoverStrength, target, 0.06);
if (hoverStrength < 0.001) hoverStrength = 0;
var t = time - t0;
var swirl = 0.6 + 0.4 * Math.sin(t * 0.0009);
for (var i = 0; i < lines.length; i++) {
var line = lines[i];
line.amp = lerp(line.amp, 16 + 16 * swirl + i * 2, 0.02);
drawWaveLine(line, t * (1 + 0.25 * hoverStrength), hoverStrength);
}
ctx.save();
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.65 * (0.55 + hoverStrength * 0.45);
var mx = mouse.x;
var my = mouse.y;
var ringR = 10 + hoverStrength * 18;
ctx.strokeStyle = 'rgba(124,247,212,0.6)';
ctx.lineWidth = 1.5 + hoverStrength * 1.1;
ctx.shadowBlur = 18 + hoverStrength * 20;
ctx.shadowColor = 'rgba(124,247,212,0.55)';
ctx.beginPath();
ctx.arc(mx, my, ringR, 0, Math.PI * 2, false);
ctx.stroke();
ctx.shadowBlur = 0;
ctx.globalAlpha = 0.35 * (0.55 + hoverStrength * 0.45);
ctx.fillStyle = '#7CF7D4';
ctx.beginPath();
ctx.arc(mx, my, 2.3 + hoverStrength * 1.6, 0, Math.PI * 2, false);
ctx.fill();
ctx.restore();
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
})();
</script>
openaigpt-5.4-pro
9.9/10279.9 s
openaigpt-5.4-pro
Tokens1 625
Code source5.1 KB
Temps279.9 s
Jugement Matania
Animation
10
Rendering
10
Qualité du code
10
Créativité
9
Fidélité
10
Global
9.88
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques, y compris l'usage de JavaScript ES5 et la structure HTML demandée. L'implémentation de l'interaction au survol de la souris est exceptionnelle, avec une interpolation fluide (easing) qui affecte l'amplitude, la vitesse et l'éclat des ondes. Le rendu visuel est de qualité professionnelle avec une gestion sophistiquée des effets de lueur et de composition.
Le modèle a parfaitement respecté toutes les contraintes techniques, y compris l'usage du JavaScript ES5 et la structure demandée. L'interaction au mouseover est extrêmement fluide et créative, ajoutant une dimension de distorsion élégante à l'onde. Le rendu visuel est de haute qualité avec une gestion sophistiquée des effets de lumière (glow) et de la composition.
<canvas id="c" width="400" height="400"></canvas><script>
(function(){
var canvas=document.getElementById("c");
var ctx=canvas.getContext("2d");
var w=400;
var h=400;
var t=0;
var mouse={x:200,y:200,inside:false};
canvas.style.display="block";
canvas.style.width="400px";
canvas.style.height="400px";
canvas.addEventListener("mousemove",function(e){
var r=canvas.getBoundingClientRect();
mouse.x=(e.clientX-r.left)*(canvas.width/r.width);
mouse.y=(e.clientY-r.top)*(canvas.height/r.height);
mouse.inside=true;
});
canvas.addEventListener("mouseenter",function(){mouse.inside=true;});
canvas.addEventListener("mouseleave",function(){mouse.inside=false;});
function bg(){
ctx.fillStyle="#08111f";
ctx.fillRect(0,0,w,h);
ctx.fillStyle="rgba(255,255,255,0.035)";
var x,y;
for(x=0;x<=w;x+=20){
ctx.fillRect(x,0,1,h);
}
for(y=0;y<=h;y+=20){
ctx.fillRect(0,y,w,1);
}
ctx.fillStyle="rgba(80,210,255,0.08)";
ctx.beginPath();
ctx.arc(200,200,180,0,Math.PI*2);
ctx.fill();
}
function wave(color,base,amp,freq,phase,width,alpha){
var x,yy,dx,boost,dist;
ctx.save();
ctx.globalAlpha=alpha;
ctx.strokeStyle=color;
ctx.lineWidth=width+6;
ctx.lineCap="round";
ctx.lineJoin="round";
ctx.shadowColor=color;
ctx.shadowBlur=16;
ctx.globalCompositeOperation="lighter";
ctx.beginPath();
for(x=0;x<=w;x+=2){
yy=base+Math.sin((x+t*phase)*freq)*amp+Math.sin((x*0.035)-t*0.04)*10;
if(mouse.inside){
dx=x-mouse.x;
dist=Math.abs(dx);
boost=Math.max(0,1-dist/95);
yy+=Math.sin(dx*0.12-t*0.12)*boost*34;
yy+=(mouse.y-base)*boost*0.18;
}
if(x===0){ctx.moveTo(x,yy);}else{ctx.lineTo(x,yy);}
}
ctx.stroke();
ctx.shadowBlur=0;
ctx.lineWidth=width;
ctx.strokeStyle=color;
ctx.beginPath();
for(x=0;x<=w;x+=2){
yy=base+Math.sin((x+t*phase)*freq)*amp+Math.sin((x*0.035)-t*0.04)*10;
if(mouse.inside){
dx=x-mouse.x;
dist=Math.abs(dx);
boost=Math.max(0,1-dist/95);
yy+=Math.sin(dx*0.12-t*0.12)*boost*34;
yy+=(mouse.y-base)*boost*0.18;
}
if(x===0){ctx.moveTo(x,yy);}else{ctx.lineTo(x,yy);}
}
ctx.stroke();
ctx.restore();
}
function particles(){
var i,a,r,x,y,s;
ctx.save();
ctx.globalCompositeOperation="lighter";
for(i=0;i<34;i++){
a=i*0.62+t*0.006;
r=95+Math.sin(t*0.015+i)*45;
x=200+Math.cos(a)*r;
y=200+Math.sin(a*0.8)*r*0.55;
s=1.2+Math.sin(t*0.04+i)*0.8;
ctx.fillStyle=i%2===0?"rgba(75,217,255,0.55)":"rgba(255,92,204,0.45)";
ctx.beginPath();
ctx.arc(x,y,s,0,Math.PI*2);
ctx.fill();
}
ctx.restore();
}
function cursorGlow(){
if(!mouse.inside){return;}
ctx.save();
ctx.globalCompositeOperation="lighter";
ctx.fillStyle="rgba(255,255,255,0.10)";
ctx.beginPath();
ctx.arc(mouse.x,mouse.y,48,0,Math.PI*2);
ctx.fill();
ctx.strokeStyle="rgba(255,255,255,0.55)";
ctx.lineWidth=2;
ctx.beginPath();
ctx.arc(mouse.x,mouse.y,8+Math.sin(t*0.08)*2,0,Math.PI*2);
ctx.stroke();
ctx.restore();
}
function frame(){
t+=1;
bg();
particles();
wave("#34d6ff",180,32,0.045,1.5,3,0.95);
wave("#ff5dcc",205,24,0.055,-1.2,2.5,0.85);
wave("#ffe66d",155,18,0.038,1.0,2,0.65);
wave("#7cffb2",235,21,0.049,-1.6,2,0.70);
cursorGlow();
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
}());
</script>
openaigpt-5.5-pro
9.9/10181.0 s
openaigpt-5.5-pro
Tokens1 121
Code source3.1 KB
Temps181.0 s
Jugement Matania
Animation
10
Rendering
10
Qualité du code
9
Créativité
10
Fidélité
10
Global
9.88
Revue
Le modèle a largement dépassé les attentes. L'animation est d'une fluidité exemplaire avec un effet de parallaxe et une interaction au survol très sophistiquée (influence de la souris sur la forme de l'onde). Le code respecte strictement toutes les contraintes techniques (ES5, canvas 400x400, requestAnimationFrame) et l'esthétique est digne d'un composant professionnel.
Le code est excellent et respecte scrupuleusement toutes les contraintes techniques, y compris l'usage de l'ES5 et la structure demandée. L'interaction au survol est bien implémentée avec un effet de surbrillance et un gradient de lumière. Note de rendu pénalisée car aucune capture d'écran n'est fournie pour valider l'esthétique finale.
<canvas id="c" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
var mouse = { x: -1000, y: -1000 };
var offset = 0;
var waves = [
{ amplitude: 30, frequency: 0.02, speed: 0.05, color: '#ff007f', phase: 0 },
{ amplitude: 50, frequency: 0.01, speed: 0.03, color: '#00d4ff', phase: 2 },
{ amplitude: 20, frequency: 0.04, speed: 0.07, color: '#7a00ff', phase: 4 }
];
function updateMouse(e) {
var rect = canvas.getBoundingClientRect();
mouse.x = e.clientX - rect.left;
mouse.y = e.clientY - rect.top;
}
canvas.addEventListener('mousemove', updateMouse);
canvas.addEventListener('mouseleave', function() {
mouse.x = -1000;
mouse.y = -1000;
});
function draw() {
ctx.fillStyle = '#0a0a12';
ctx.fillRect(0, 0, width, height);
offset += 0.05;
for (var i = 0; i < waves.length; i++) {
var w = waves[i];
ctx.beginPath();
ctx.lineWidth = 3;
ctx.strokeStyle = w.color;
for (var x = 0; x <= width; x++) {
var y = height / 2 + Math.sin(x * w.frequency + offset + w.phase) * w.amplitude;
if (x === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
// Interaction effect
var dx = x - mouse.x;
var dy = y - mouse.y;
var dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 80) {
ctx.lineWidth = 6;
ctx.strokeStyle = '#ffffff';
} else {
ctx.lineWidth = 3;
ctx.strokeStyle = w.color;
}
}
ctx.stroke();
}
// Mouse glow effect
if (mouse.x > 0 && mouse.x < width && mouse.y > 0 && mouse.y < height) {
var gradient = ctx.createRadialGradient(mouse.x, mouse.y, 0, mouse.x, mouse.y, 100);
gradient.addColorStop(0, 'rgba(255, 255, 255, 0.15)');
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);
}
requestAnimationFrame(draw);
}
draw();
</script>
xaigrok-4-1-fast-non-reasoning
9.4/104.6 s
xaigrok-4-1-fast-non-reasoning
Tokens622
Code source1.1 KB
Temps4.6 s
Jugement Matania
Animation
9
Rendering
9
Qualité du code
9
Créativité
8
Fidélité
10
Global
9.38
Revue
Le modèle respecte scrupuleusement toutes les contraintes techniques, notamment l'usage du JavaScript ES5 et le format de sortie strict. L'animation est fluide et l'effet de l'onde réagit de manière élégante au mouvement de la souris, créant une interaction visuelle satisfaisante. L'esthétique est soignée avec un bon usage des couleurs HSL et des effets de lueur (shadowBlur).
<canvas id="c" width="400" height="400"></canvas><script>
var c=document.getElementById("c");
var ctx=c.getContext("2d");
var t=0;
var mx=0,my=0;
c.onmousemove=function(e){
var rect=c.getBoundingClientRect();
mx=e.clientX-rect.left;
my=e.clientY-rect.top;
};
function draw(){
ctx.fillStyle="#0a0a1f";
ctx.fillRect(0,0,400,400);
ctx.lineWidth=3;
ctx.lineCap="round";
ctx.lineJoin="round";
ctx.shadowBlur=20;
ctx.shadowColor="#00ffff";
for(var i=0;i<3;i++){
var offset=i*0.3;
var freq=(1+offset)*0.02;
var amp=60+Math.sin(t*0.01+i)*10;
var speed=1+offset*0.5;
ctx.strokeStyle="hsl("+(200+i*40)+",80%,"+(40+Math.sin(t*0.02+i)*10)+"%)";
ctx.beginPath();
for(var x=0;x<=400;x+=2){
var y=200+my*0.3+Math.sin((x*0.02+speed*t*0.05+offset))*amp*Math.cos(t*0.005);
y+=Math.sin((x*0.015+(t*0.03)+offset*2))*amp*0.4;
if(x==0)ctx.moveTo(x,y);
else ctx.lineTo(x,y);
}
ctx.stroke();
}
ctx.shadowBlur=30;
ctx.fillStyle="rgba(0,255,255,0.1)";
ctx.beginPath();
ctx.arc(mx,my,30,0,Math.PI*2);
ctx.fill();
t++;
requestAnimationFrame(draw);
}
draw();
</script>
xaigrok-4-1-fast-reasoning
9.5/1046.2 s
xaigrok-4-1-fast-reasoning
Tokens790
Code source1.8 KB
Temps46.2 s
Jugement Matania
Animation
9
Rendering
9
Qualité du code
9
Créativité
9
Fidélité
10
Global
9.5
Revue
Le modèle respecte scrupuleusement toutes les contraintes techniques, y compris le format HTML brut et l'usage de JavaScript ES5. L'effet de 'ripple' (ondulation) au passage de la souris est une excellente interprétation créative du prompt, dépassant la simple animation de base. Le rendu visuel est esthétique avec des dégradés et des effets de lueur (glow) très réussis.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'utilisation de JavaScript ES5, la structure HTML demandée et le nombre exact d'étoiles. L'animation est fluide et le rendu visuel respecte bien l'esthétique demandée (fond noir, étoiles bleutées/blanches). Le code est propre, optimisé et sans aucune fuite mémoire.
<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 stars = [];
var rotation = 0;
function initStars() {
for (var i = 0; i < 200; i++) {
var distance = Math.random() * 150 + 20;
var angle = Math.random() * Math.PI * 2;
var size = Math.random() * 2 + 0.5;
var brightness = Math.random() * 0.5 + 0.5;
var color = Math.random() > 0.5 ? 'rgba(200, 220, 255, ' + brightness + ')' : 'rgba(255, 255, 255, ' + brightness + ')';
stars.push({
distance: distance,
angle: angle,
size: size,
color: color
});
}
}
function drawStars() {
ctx.fillStyle = '#000010';
ctx.fillRect(0, 0, 400, 400);
for (var i = 0; i < stars.length; i++) {
var star = stars[i];
var currentAngle = star.angle + rotation;
var x = centerX + Math.cos(currentAngle) * star.distance;
var y = centerY + Math.sin(currentAngle) * star.distance;
ctx.fillStyle = star.color;
ctx.beginPath();
ctx.arc(x, y, star.size, 0, Math.PI * 2);
ctx.fill();
}
}
function animate() {
rotation += 0.0005;
drawStars();
requestAnimationFrame(animate);
}
initStars();
animate();
</script>
anthropicclaude-opus-4-6
9.5/1017.0 s
anthropicclaude-opus-4-6
Tokens1 637
Code source3.1 KB
Temps17.0 s
Jugement Matania
Animation
9
Rendering
9
Qualité du code
10
Créativité
8
Fidélité
10
Global
9.5
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques (ES5, canvas 400x400, 200 étoiles, sortie HTML brut). L'implémentation de l'effet de profondeur via la taille et le scintillement, ainsi que la gestion des couleurs bleuâtres, dépasse les attentes simples du prompt. Le code est propre, optimisé et l'animation est fluide avec un rendu visuel très esthétique.
<canvas id="c" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var stars = [];
var numStars = 200;
var centerX = 200;
var centerY = 200;
var time = 0;
function randomRange(min, max) {
return Math.random() * (max - min) + min;
}
for (var i = 0; i < numStars; i++) {
var distance = randomRange(5, 190);
var angle = randomRange(0, Math.PI * 2);
var size = randomRange(0.5, 3);
var depth = randomRange(0.3, 1.0);
var armOffset = Math.floor(Math.random() * 4) * (Math.PI / 2);
var spread = randomRange(-0.6, 0.6);
var colorType = Math.random();
var r, g, b;
if (colorType < 0.3) {
r = 180;
g = 200;
b = 255;
} else if (colorType < 0.6) {
r = 200;
g = 220;
b = 255;
} else if (colorType < 0.85) {
r = 255;
g = 255;
b = 255;
} else {
r = 230;
g = 240;
b = 255;
}
stars.push({
distance: distance,
baseAngle: armOffset + Math.log(distance + 1) * 0.5 + spread,
size: size,
depth: depth,
r: r,
g: g,
b: b,
twinkleSpeed: randomRange(0.5, 3.0),
twinkleOffset: randomRange(0, Math.PI * 2)
});
}
function draw() {
time += 0.002;
ctx.fillStyle = "#000005";
ctx.fillRect(0, 0, 400, 400);
var grd = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, 60);
grd.addColorStop(0, "rgba(100, 120, 180, 0.08)");
grd.addColorStop(1, "rgba(0, 0, 5, 0)");
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 400, 400);
for (var i = 0; i < numStars; i++) {
var star = stars[i];
var speed = 0.15 / (star.distance * 0.05 + 1);
var angle = star.baseAngle + time * speed * 50;
var x = centerX + Math.cos(angle) * star.distance;
var y = centerY + Math.sin(angle) * star.distance * 0.6;
var cosRot = Math.cos(time * 0.3);
var sinRot = Math.sin(time * 0.3);
var rx = centerX + (x - centerX) * cosRot - (y - centerY) * sinRot;
var ry = centerY + (x - centerX) * sinRot + (y - centerY) * cosRot;
var twinkle = 0.5 + 0.5 * Math.sin(time * star.twinkleSpeed * 100 + star.twinkleOffset);
var alpha = star.depth * (0.4 + 0.6 * twinkle);
var currentSize = star.size * (0.7 + 0.3 * twinkle);
if (currentSize > 1.5) {
var glowSize = currentSize * 3;
var glowGrd = ctx.createRadialGradient(rx, ry, 0, rx, ry, glowSize);
glowGrd.addColorStop(0, "rgba(" + star.r + "," + star.g + "," + star.b + "," + (alpha * 0.3) + ")");
glowGrd.addColorStop(1, "rgba(" + star.r + "," + star.g + "," + star.b + ",0)");
ctx.fillStyle = glowGrd;
ctx.beginPath();
ctx.arc(rx, ry, glowSize, 0, Math.PI * 2);
ctx.fill();
}
ctx.fillStyle = "rgba(" + star.r + "," + star.g + "," + star.b + "," + alpha + ")";
ctx.beginPath();
ctx.arc(rx, ry, currentSize, 0, Math.PI * 2);
ctx.fill();
}
requestAnimationFrame(draw);
}
draw();
</script>
anthropicclaude-opus-4-7
9.1/106.4 s
anthropicclaude-opus-4-7
Tokens996
Code source721 B
Temps6.4 s
Jugement Matania
Animation
9
Rendering
8
Qualité du code
9
Créativité
7
Fidélité
10
Global
9.13
Revue
Le modèle respecte scrupuleusement toutes les contraintes techniques : le nombre d'étoiles, le format de sortie, l'utilisation de l'ES5 et la structure du canvas. L'effet de profondeur est bien géré via la variation de taille et la couleur (bleutée pour les étoiles lointaines), et l'animation est fluide grâce à une rotation différentielle selon la distance. Le code est concis, efficace et parfaitement fonctionnel.
<canvas id="c" width="400" height="400"></canvas><script>
var c=document.getElementById("c"),x=c.getContext("2d");
var stars=[];
for(var i=0;i<200;i++){
var d=Math.pow(Math.random(),0.5)*180;
stars.push({d:d,a:Math.random()*Math.PI*2,s:Math.random()*1.5+0.3,b:Math.random()*0.5+0.5,t:Math.random()});
}
function f(){
x.fillStyle="#000005";
x.fillRect(0,0,400,400);
for(var i=0;i<stars.length;i++){
var s=stars[i];
s.a+=0.0008*(1-s.d/300);
var px=200+Math.cos(s.a)*s.d;
var py=200+Math.sin(s.a)*s.d;
var tw=s.b*(0.7+0.3*Math.sin(s.t+=0.05));
var col=s.d>100?"rgba(200,220,255,":"rgba(255,255,255,";
x.fillStyle=col+tw+")";
x.beginPath();
x.arc(px,py,s.s,0,Math.PI*2);
x.fill();
}
requestAnimationFrame(f);
}
f();
</script>
anthropicclaude-sonnet-4-6
9.5/1011.1 s
anthropicclaude-sonnet-4-6
Tokens1 217
Code source1.9 KB
Temps11.1 s
Jugement Matania
Animation
9
Rendering
9
Qualité du code
10
Créativité
8
Fidélité
10
Global
9.5
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques, y compris l'utilisation du JavaScript ES5 et le format de sortie brut. L'effet visuel est excellent, avec une gestion intelligente de la profondeur par la taille et la luminosité, ainsi qu'un rendu élégant de la spirale galactique grâce à l'ajout d'un gradient central et d'un effet de halo.
<canvas id="c" width="400" height="400"></canvas><script>
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var W = 400, H = 400, CX = 200, CY = 200;
var stars = [];
var numStars = 200;
function rand(min, max) {
return min + Math.random() * (max - min);
}
for (var i = 0; i < numStars; i++) {
var dist = rand(5, 190);
var angle = rand(0, Math.PI * 2);
var spiralOffset = dist * 0.012;
stars.push({
dist: dist,
angle: angle + spiralOffset,
size: rand(0.3, 2.5),
brightness: rand(0.4, 1.0),
speed: rand(0.0002, 0.0012) * (1 / (dist * 0.05 + 0.5)),
blue: Math.random() > 0.5 ? true : false
});
}
var lastTime = 0;
function draw(timestamp) {
var delta = timestamp - lastTime;
lastTime = timestamp;
ctx.fillStyle = '#000008';
ctx.fillRect(0, 0, W, H);
ctx.save();
ctx.translate(CX, CY);
for (var i = 0; i < stars.length; i++) {
var s = stars[i];
s.angle += s.speed * delta;
var x = Math.cos(s.angle) * s.dist;
var y = Math.sin(s.angle) * s.dist * 0.45;
var alpha = s.brightness;
var r = Math.floor(200 + 55 * alpha);
var g = Math.floor(200 + 55 * alpha);
var b = s.blue ? 255 : Math.floor(200 + 55 * alpha);
ctx.beginPath();
ctx.arc(x, y, s.size, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')';
ctx.fill();
if (s.size > 1.2) {
ctx.beginPath();
ctx.arc(x, y, s.size * 2.5, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + (alpha * 0.08) + ')';
ctx.fill();
}
}
ctx.restore();
var grad = ctx.createRadialGradient(CX, CY, 0, CX, CY, 60);
grad.addColorStop(0, 'rgba(180,200,255,0.18)');
grad.addColorStop(0.5, 'rgba(120,150,255,0.06)');
grad.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, W, H);
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
</script>
googlegemini-flash-latest
9.5/1012.7 s
googlegemini-flash-latest
Tokens770
Code source2.2 KB
Temps12.7 s
Jugement Matania
Animation
9
Rendering
9
Qualité du code
10
Créativité
8
Fidélité
10
Global
9.5
Revue
Le modèle respecte scrupuleusement toutes les contraintes techniques, notamment l'usage de JavaScript ES5, le format HTML brut et le nombre exact d'étoiles. L'effet de perspective elliptique et le gradient central ajoutent une dimension esthétique supérieure à la simple demande, créant une galaxie visuellement convaincante et fluide.
<canvas id="c" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var stars = [];
var centerX = 200;
var centerY = 200;
// Création des 200 étoiles avec une structure spirale
for (var i = 0; i < 200; i++) {
// Distribution : plus dense au centre
var dist = Math.pow(Math.random(), 1.2) * 180;
// Création de deux bras spiraux
var armOffset = (Math.random() > 0.5 ? 0 : Math.PI);
var spiralFactor = dist * 0.05;
var angle = Math.random() * 0.8 + armOffset + spiralFactor;
stars.push({
dist: dist,
angle: angle,
// Vitesse de rotation : les étoiles proches tournent plus vite
speed: 0.005 + (1 / (dist + 20)) * 0.5,
size: 0.4 + Math.random() * 1.3,
// Couleurs : dominantes blanc/bleu avec quelques touches dorées
color: Math.random() > 0.2 ? "200, 230, 255" : "255, 240, 200",
opacity: 0.4 + Math.random() * 0.6
});
}
function render() {
// Fond noir
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, 400, 400);
// Bulbe central lumineux
var gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, 60);
gradient.addColorStop(0, "rgba(100, 80, 150, 0.4)");
gradient.addColorStop(0.5, "rgba(40, 20, 80, 0.1)");
gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 400, 400);
for (var i = 0; i < stars.length; i++) {
var s = stars[i];
s.angle += s.speed * 0.4;
// Projection elliptique pour donner un effet de perspective
var x = centerX + Math.cos(s.angle) * s.dist;
var y = centerY + Math.sin(s.angle) * s.dist * 0.6;
// Dessin du halo de l'étoile
ctx.beginPath();
var starGrad = ctx.createRadialGradient(x, y, 0, x, y, s.size * 2.5);
starGrad.addColorStop(0, "rgba(" + s.color + "," + (s.opacity * 0.6) + ")");
starGrad.addColorStop(1, "rgba(0,0,0,0)");
ctx.fillStyle = starGrad;
ctx.arc(x, y, s.size * 2.5, 0, Math.PI * 2);
ctx.fill();
// Cœur de l'étoile
ctx.beginPath();
ctx.fillStyle = "rgba(" + s.color + "," + s.opacity + ")";
ctx.arc(x, y, s.size * 0.7, 0, Math.PI * 2);
ctx.fill();
}
requestAnimationFrame(render);
}
render();
</script>
googlegemini-flash-lite-latest
9.0/102.9 s
googlegemini-flash-lite-latest
Tokens738
Code source870 B
Temps2.9 s
Jugement Matania
Animation
9
Rendering
8
Qualité du code
9
Créativité
6
Fidélité
10
Global
9
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'utilisation de JavaScript ES5 et le format de sortie unique. L'animation est fluide et l'effet de vitesse différentielle selon la distance au centre simule bien une rotation galactique. Le rendu visuel est propre, bien que simple, respectant fidèlement la palette de couleurs demandée.
<canvas id="c" width="400" height="400" style="background:#000"></canvas>
<script>
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var stars = [];
var count = 200;
for (var i = 0; i < count; i++) {
stars.push({
d: Math.random() * 180 + 10,
a: Math.random() * Math.PI * 2,
s: Math.random() * 1.5 + 0.5,
o: Math.random() * 0.5 + 0.5
});
}
function draw() {
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, 400, 400);
for (var i = 0; i < count; i++) {
var s = stars[i];
s.a += 0.002 * (200 / s.d);
var x = 200 + Math.cos(s.a) * s.d;
var y = 200 + Math.sin(s.a) * s.d;
ctx.fillStyle = "rgba(200, 220, 255, " + s.o + ")";
ctx.beginPath();
ctx.arc(x, y, s.s, 0, Math.PI * 2);
ctx.fill();
}
requestAnimationFrame(draw);
}
draw();
</script>
mistralmistral-large-latest
9.3/107.1 s
mistralmistral-large-latest
Tokens689
Code source1.4 KB
Temps7.1 s
Jugement Matania
Animation
9
Rendering
8
Qualité du code
10
Créativité
7
Fidélité
10
Global
9.25
Revue
Le modèle respecte scrupuleusement toutes les contraintes techniques : JavaScript ES5, canvas 400x400, 200 étoiles, et le format de sortie brut. L'implémentation des gradients radiaux pour l'effet de brillance est excellente et apporte une belle profondeur visuelle malgré la simplicité du code. L'animation est fluide et la structure du code est parfaitement propre.
<canvas id="c" width="400" height="400"></canvas><script>
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var stars = [];
var centerX = 200;
var centerY = 200;
var angle = 0;
for (var i = 0; i < 200; i++) {
stars.push({
distance: Math.random() * 150 + 20,
angle: Math.random() * Math.PI * 2,
size: Math.random() * 2 + 0.5,
brightness: Math.random() * 0.8 + 0.2,
speed: (Math.random() * 0.005 + 0.001) * (Math.random() > 0.5 ? 1 : -1)
});
}
function draw() {
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, 400, 400);
angle += 0.002;
for (var i = 0; i < stars.length; i++) {
var star = stars[i];
star.angle += star.speed;
var x = centerX + Math.cos(star.angle) * star.distance;
var y = centerY + Math.sin(star.angle) * star.distance;
var alpha = star.brightness;
var size = star.size;
var gradient = ctx.createRadialGradient(x, y, 0, x, y, size);
gradient.addColorStop(0, "rgba(255, 255, 255, " + alpha + ")");
gradient.addColorStop(0.5, "rgba(200, 220, 255, " + alpha * 0.7 + ")");
gradient.addColorStop(1, "rgba(100, 150, 255, 0)");
ctx.beginPath();
ctx.fillStyle = gradient;
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fill();
}
requestAnimationFrame(draw);
}
draw();
</script>
mistralmistral-medium-latest
6.4/104.6 s
mistralmistral-medium-latest
Tokens694
Code source1.4 KB
Temps4.6 s
Jugement Matania
Animation
6
Rendering
7
Qualité du code
9
Créativité
5
Fidélité
6
Global
6.38
Revue
Le modèle respecte la structure et les contraintes techniques (ES5, canvas, 200 étoiles), mais échoue sur la logique mathématique de l'animation : en multipliant l'angle par le temps dans les fonctions cos/sin, il crée une accélération exponentielle au lieu d'une rotation lente et constante. Le rendu visuel est correct avec les couleurs demandées, mais le mouvement devient rapidement chaotique et imprévisible.
<canvas id="c" width="400" height="400"></canvas>
<script>
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var centerX = 200;
var centerY = 200;
var stars = [];
var time = 0;
function initStars() {
for (var i = 0; i < 200; i++) {
var distance = Math.sqrt(Math.random()) * 180;
var angle = Math.random() * Math.PI * 2;
var size = 0.5 + Math.random() * 3;
var brightness = 0.3 + Math.random() * 0.7;
var speed = (1 / distance) * 0.00005;
stars.push({
distance: distance,
angle: angle,
size: size,
brightness: brightness,
speed: speed
});
}
}
function draw() {
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, 400, 400);
time += 0.01;
for (var i = 0; i < stars.length; i++) {
var star = stars[i];
star.angle += star.speed;
var x = centerX + Math.cos(star.angle * time) * star.distance;
var y = centerY + Math.sin(star.angle * time) * star.distance;
ctx.beginPath();
ctx.arc(x, y, star.size, 0, Math.PI * 2);
var alpha = star.brightness;
var hue = 210 + (1 - star.brightness) * 30;
ctx.fillStyle = "hsla(" + hue + ", 100%, " + (80 + (1 - star.brightness) * 20) + "%, " + alpha + ")";
ctx.fill();
}
requestAnimationFrame(draw);
}
initStars();
draw();
</script>
mistralmistral-small-latest
8.3/102.4 s
mistralmistral-small-latest
Tokens542
Code source798 B
Temps2.4 s
Jugement Matania
Animation
7
Rendering
7
Qualité du code
7
Créativité
5
Fidélité
10
Global
8.25
Revue
Le modèle respecte scrupuleusement toutes les contraintes techniques : format HTML brut, canvas 400x400, JavaScript ES5, et les 200 étoiles. L'animation est fonctionnelle mais utilise setInterval au lieu de requestAnimationFrame comme demandé, ce qui est une légère entorse à la règle 5. Le rendu visuel est conforme (étoiles blanches/bleutées sur fond noir) mais reste très basique.
Le modèle respecte scrupuleusement toutes les contraintes techniques (ES5, canvas 400x400, 200 étoiles, structure HTML brute). Cependant, l'implémentation de la brillance via Math.random() à chaque frame crée un scintillement extrêmement agressif et visuellement désagréable (effet de bruit/stroboscopique) plutôt qu'un effet de brillance élégant. Le rendu est fonctionnel mais manque de profondeur visuelle réelle malgré la variation de taille.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'usage de l'ES5 et la structure HTML brute. Le rendu visuel est excellent avec un effet de profondeur réussi grâce à la variation des tailles et l'ajout d'un cœur galactique qui dépasse les attentes du prompt initial. L'animation est fluide et l'effet de scintillement (twinkle) apporte une touche de réalisme très agréable.
<canvas id="c" width="400" height="400"></canvas><script>
var c = document.getElementById('c');
var ctx = c.getContext('2d');
var w = c.width;
var h = c.height;
var cx = w / 2;
var cy = h / 2;
var stars = [];
var count = 200;
function rand(min, max) {
return min + Math.random() * (max - min);
}
for (var i = 0; i < count; i++) {
var distBias = Math.pow(Math.random(), 0.72);
var r = distBias * 185;
var arm = Math.random() < 0.5 ? 0 : Math.PI;
var spiralOffset = r * 0.055;
var a = arm + spiralOffset + rand(-0.55, 0.55);
var speed = 0.001 + (1 - distBias) * 0.0025 + rand(0, 0.0008);
var size = 0.35 + (1 - distBias) * 2.1 + Math.random() * 0.6;
var alpha = 0.35 + Math.random() * 0.55;
var blueMix = Math.random();
var twinkle = Math.random() * Math.PI * 2;
var twinkleSpeed = 0.015 + Math.random() * 0.035;
stars.push({
r: r,
a: a,
speed: speed,
size: size,
alpha: alpha,
blueMix: blueMix,
twinkle: twinkle,
twinkleSpeed: twinkleSpeed
});
}
function drawBackground() {
ctx.fillStyle = 'rgb(1,2,10)';
ctx.fillRect(0, 0, w, h);
}
function drawCore() {
var g = ctx.createRadialGradient(cx, cy, 0, cx, cy, 42);
g.addColorStop(0, 'rgba(255,255,255,0.85)');
g.addColorStop(0.18, 'rgba(215,225,255,0.55)');
g.addColorStop(0.45, 'rgba(120,150,255,0.18)');
g.addColorStop(1, 'rgba(40,60,120,0)');
ctx.fillStyle = g;
ctx.beginPath();
ctx.arc(cx, cy, 42, 0, Math.PI * 2, false);
ctx.fill();
}
function render() {
drawBackground();
drawCore();
for (var i = 0; i < stars.length; i++) {
var s = stars[i];
s.a += s.speed;
s.twinkle += s.twinkleSpeed;
var x = cx + Math.cos(s.a) * s.r;
var y = cy + Math.sin(s.a) * s.r * 0.62;
var pulse = 0.8 + 0.2 * Math.sin(s.twinkle);
var size = s.size * pulse;
var a = s.alpha * pulse;
var rCol, gCol, bCol;
if (s.blueMix < 0.55) {
rCol = 255; gCol = 255; bCol = 255;
} else if (s.blueMix < 0.85) {
rCol = 220; gCol = 232; bCol = 255;
} else {
rCol = 190; gCol = 215; bCol = 255;
}
if (size > 1.4) {
ctx.beginPath();
ctx.fillStyle = 'rgba(' + rCol + ',' + gCol + ',' + bCol + ',' + (a * 0.12) + ')';
ctx.arc(x, y, size * 2.6, 0, Math.PI * 2, false);
ctx.fill();
}
ctx.beginPath();
ctx.fillStyle = 'rgba(' + rCol + ',' + gCol + ',' + bCol + ',' + a + ')';
ctx.arc(x, y, size, 0, Math.PI * 2, false);
ctx.fill();
}
requestAnimationFrame(render);
}
render();
</script>
openaigpt-5.4-mini
9.1/103.7 s
openaigpt-5.4-mini
Tokens607
Code source1.0 KB
Temps3.7 s
Jugement Matania
Animation
9
Rendering
8
Qualité du code
9
Créativité
7
Fidélité
10
Global
9.13
Revue
Le modèle respecte scrupuleusement toutes les contraintes techniques, notamment l'utilisation de JavaScript ES5, le format HTML brut et le nombre d'étoiles. L'effet de profondeur est bien géré par la variation de taille et l'ajout de traits lumineux pour les étoiles plus grandes. L'animation est fluide et l'esthétique respecte parfaitement la palette de couleurs demandée.
Le modèle a parfaitement respecté toutes les contraintes techniques, y compris l'utilisation de JavaScript ES5 et la structure spécifique du canvas. Le rendu visuel est exceptionnel pour un simple script, avec une gestion sophistiquée de la profondeur, du scintillement et des halos qui dépasse largement les attentes de base. L'animation est fluide et la composition esthétique est digne d'une véritable simulation de galaxie.
<canvas id="c" width="400" height="400"></canvas>
<script>
(function () {
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
var cx = w / 2;
var cy = h / 2;
var starsCount = 200;
var stars = [];
var minDim = Math.min(w, h);
var maxDist = minDim * 0.48;
function rand(min, max) {
return min + Math.random() * (max - min);
}
function clamp(x, a, b) {
if (x < a) return a;
if (x > b) return b;
return x;
}
function easeOutCubic(x) {
x = clamp(x, 0, 1);
return 1 - Math.pow(1 - x, 3);
}
// Fond noir profond + noyau bleu subtil + vignettage
function paintBackground(t) {
ctx.globalCompositeOperation = 'source-over';
// Base
ctx.fillStyle = '#000000';
ctx.fillRect(0, 0, w, h);
// Légère pulsation de fond radial (sans trop éclairer)
var corePulse = 0.92 + 0.08 * Math.sin(t * 0.25);
var grd = ctx.createRadialGradient(cx, cy, 0, cx, cy, maxDist * 1.08);
grd.addColorStop(0.0, 'rgba(120, 170, 255, ' + (0.13 * corePulse).toFixed(3) + ')');
grd.addColorStop(0.16, 'rgba(70, 120, 255, ' + (0.05 * corePulse).toFixed(3) + ')');
grd.addColorStop(0.62, 'rgba(0, 0, 0, 0.0)');
grd.addColorStop(1.0, 'rgba(0, 0, 0, 0.82)');
ctx.fillStyle = grd;
ctx.fillRect(0, 0, w, h);
// Vignettage plus sombre
var vig = ctx.createRadialGradient(cx, cy, minDim * 0.08, cx, cy, minDim * 0.78);
vig.addColorStop(0.0, 'rgba(0,0,0,0)');
vig.addColorStop(1.0, 'rgba(0,0,0,0.80)');
ctx.fillStyle = vig;
ctx.fillRect(0, 0, w, h);
}
// Génération étoiles: distribution biaisée vers le centre + variété de tailles/alphas
for (var i = 0; i < starsCount; i++) {
// Biais vers centre (halo/noyau plus lisible)
var u = Math.random();
var dist = Math.pow(u, 0.85) * maxDist;
var distNorm = dist / maxDist;
// Angle initial et vitesse: rotation lente avec diversité
var angle = rand(0, Math.PI * 2);
var swirl = rand(0.75, 1.55);
// Vitesse légèrement plus élevée vers l'extérieur (effet rotation)
var baseSpeed = (0.06 + 0.48 * distNorm);
var speed = baseSpeed * rand(0.35, 0.78) * swirl;
// Taille: majorité petites étoiles, rares grosses
var p = Math.random();
var size;
if (p < 0.62) {
size = rand(0.35, 1.15);
} else if (p < 0.92) {
size = rand(1.05, 2.2);
} else {
size = rand(2.15, 3.05);
}
// Brillance/alpha: plus fort au centre
var centerBoost = 0.55 + 0.65 * easeOutCubic(1 - distNorm);
var baseAlpha = rand(0.10, 1.0) * centerBoost;
// Couleur: bleutée majoritaire, un peu de blanc
var bluish = Math.random() < 0.72;
var color = bluish ? '220,235,255' : '245,245,255';
// Scintillement: discret, plus faible pour pinpoints et grosses étoiles
var isPin = size <= 1.15;
var twinkle = isPin ? rand(0.20, 0.75) : (size > 2.1 ? rand(0.35, 0.85) : rand(0.55, 1.15));
var twinklePhase = rand(0, Math.PI * 2);
// Facteur de halo: réduit pour éviter le flou global
var haloStrength;
if (isPin) haloStrength = rand(0.45, 0.75);
else if (size > 2.1) haloStrength = rand(0.75, 1.05);
else haloStrength = rand(0.60, 0.92);
stars.push({
dist: dist,
angle: angle,
size: size,
speed: speed,
baseAlpha: baseAlpha,
color: color,
twinkle: twinkle,
twinklePhase: twinklePhase,
haloStrength: haloStrength
});
}
var t0 = null;
function frame(ts) {
if (t0 === null) t0 = ts;
var t = (ts - t0) * 0.001;
paintBackground(t);
ctx.save();
ctx.translate(cx, cy);
// Composition: rester en source-over pour limiter l'effet “brouillon”
ctx.globalCompositeOperation = 'source-over';
for (var i = 0; i < stars.length; i++) {
var s = stars[i];
var ang = s.angle + t * s.speed;
var x = Math.cos(ang) * s.dist;
var y = Math.sin(ang) * s.dist;
var distNorm = clamp(s.dist / maxDist, 0, 1);
// Profondeur: plus fort près du centre
var depth = 1 - distNorm;
var depthE = easeOutCubic(depth);
// Scintillement: amplitude modérée
var tw = 1.0 + 0.12 * Math.sin(t * (0.55 + s.twinkle * 0.35) + s.twinklePhase);
var alpha = clamp(s.baseAlpha * (0.14 + 0.86 * depthE) * tw, 0, 1);
// Taille: augmente vers le centre mais sans trop gonfler
var radius = s.size * (0.20 + 0.98 * depthE);
// Halo: fortement réduit (évite l'effet “bulle”/flou)
var haloScale = (1.0 + 1.25 * depthE) * s.haloStrength;
var haloR = Math.max(0.4, radius * haloScale);
// Halo doux
ctx.beginPath();
ctx.fillStyle = 'rgba(' + s.color + ',' + (alpha * 0.16).toFixed(3) + ')';
ctx.arc(x, y, haloR, 0, Math.PI * 2, false);
ctx.fill();
// Cœur plus net
ctx.beginPath();
ctx.fillStyle = 'rgba(' + s.color + ',' + (alpha * 0.95).toFixed(3) + ')';
var isPin = s.size <= 1.15;
var coreR = Math.max(0.45, radius * (isPin ? 0.62 : 0.54 + 0.16 * depthE));
ctx.arc(x, y, coreR, 0, Math.PI * 2, false);
ctx.fill();
// Très rare cross (toujours discret)
if (s.size > 2.15 && depthE > 0.65 && Math.random() < 0.004) {
ctx.beginPath();
ctx.strokeStyle = 'rgba(' + s.color + ',' + (alpha * 0.15).toFixed(3) + ')';
ctx.lineWidth = 1;
ctx.moveTo(x - radius * 2.0, y);
ctx.lineTo(x + radius * 2.0, y);
ctx.moveTo(x, y - radius * 2.0);
ctx.lineTo(x, y + radius * 2.0);
ctx.stroke();
}
}
ctx.restore();
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
})();
</script>
openaigpt-5.4-pro
9.5/10378.7 s
openaigpt-5.4-pro
Tokens1 021
Code source2.6 KB
Temps378.7 s
Jugement Matania
Animation
9
Rendering
9
Qualité du code
10
Créativité
8
Fidélité
10
Global
9.5
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'usage de l'ES5 et la structure demandée. L'implémentation de la rotation, de la profondeur via la taille et de l'effet de scintillement est d'une grande qualité mathématique. Le rendu visuel est élégant, avec un cœur galactique subtil et une gestion très propre des couleurs bleutées.
<canvas id="c" width="400" height="400"></canvas><script>
(function () {
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
var cx = w / 2;
var cy = h / 2;
var tau = Math.PI * 2;
var count = 200;
var stars = [];
var colors = [
[255, 255, 255],
[230, 240, 255],
[200, 220, 255],
[170, 205, 255]
];
canvas.style.display = "block";
canvas.style.background = "#000008";
function rand(min, max) {
return min + Math.random() * (max - min);
}
for (var i = 0; i < count; i++) {
var distance = Math.pow(Math.random(), 1.45) * 190;
var arm = Math.floor(Math.random() * 4);
var angle = arm * (tau / 4) + distance * 0.09 + rand(-0.70, 0.70);
var depth = Math.random();
var size = 0.40 + Math.pow(depth, 2.00) * 2.80;
var brightness = 0.25 + Math.random() * 0.75;
var speed = 0.00010 + (1.00 - distance / 190.00) * 0.00080 + Math.random() * 0.00005;
var color = colors[Math.floor(Math.random() * colors.length)];
stars.push({
distance: distance,
angle: angle,
size: size,
brightness: brightness,
speed: speed,
r: color[0],
g: color[1],
b: color[2],
twinkle: rand(0.60, 2.20),
phase: rand(0.00, tau)
});
}
stars.sort(function (a, b) {
return a.size - b.size;
});
function circle(x, y, radius, color) {
ctx.beginPath();
ctx.fillStyle = color;
ctx.arc(x, y, radius, 0.00, tau);
ctx.fill();
}
function drawCore() {
circle(cx, cy, 90.00, "rgba(70,110,255,0.05)");
circle(cx, cy, 56.00, "rgba(180,210,255,0.06)");
circle(cx, cy, 28.00, "rgba(255,255,255,0.08)");
circle(cx, cy, 10.00, "rgba(255,255,255,0.12)");
}
var last = 0.00;
function frame(t) {
if (!last) {
last = t;
}
var dt = (t - last) / 16.6666666667;
last = t;
ctx.fillStyle = "#000008";
ctx.fillRect(0.00, 0.00, w, h);
drawCore();
for (var i = 0; i < stars.length; i++) {
var s = stars[i];
s.angle += s.speed * dt;
var x = cx + Math.cos(s.angle) * s.distance;
var y = cy + Math.sin(s.angle) * s.distance;
var pulse = 0.70 + 0.30 * Math.sin(t * 0.001 * s.twinkle + s.phase);
var alpha = s.brightness * pulse;
var haloAlpha = alpha * 0.16;
circle(
x,
y,
s.size * 2.20,
"rgba(" + s.r + "," + s.g + "," + s.b + "," + haloAlpha + ")"
);
circle(
x,
y,
s.size,
"rgba(" + s.r + "," + s.g + "," + s.b + "," + alpha + ")"
);
}
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
}());
</script>
openaigpt-5.5
9.4/1012.0 s
openaigpt-5.5
Tokens615
Code source1.1 KB
Temps12.0 s
Jugement Matania
Animation
9
Rendering
9
Qualité du code
9
Créativité
8
Fidélité
10
Global
9.38
Revue
Le modèle respecte scrupuleusement toutes les contraintes techniques (ES5, canvas 400x400, 200 étoiles, HTML brut uniquement). L'implémentation mathématique est excellente, utilisant des bras spiraux pour simuler une galaxie spirale plutôt qu'un simple cercle, ce qui dépasse les attentes de créativité. L'animation est fluide et les variations de taille/couleur apportent une belle profondeur visuelle.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'utilisation de JavaScript ES5 et le format de sortie brut. L'implémentation de l'effet de profondeur via la variation de taille et de brillance est excellente, et l'animation est fluide grâce à une gestion intelligente du delta de temps. Le rendu visuel est esthétique, avec un beau mélange de teintes bleutées et blanches sur fond noir profond.
Le code est excellent et respecte scrupuleusement toutes les contraintes techniques (ES5, format, nombre d'étoiles, couleurs). L'animation sera fluide grâce à requestAnimationFrame. La note de rendering est pénalisée car l'absence de capture d'écran ne permet pas de valider l'esthétique réelle, bien que le code suggère un rendu propre et conforme.
<canvas id="c" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var width = 400;
var height = 400;
var stars = [];
var numStars = 200;
function init() {
for (var i = 0; i < numStars; i++) {
var dist = Math.random() * 180;
var angle = Math.random() * Math.PI * 2;
var speed = 0.002 + Math.random() * 0.005;
var size = 0.5 + Math.random() * 1.5;
var brightness = 0.5 + Math.random() * 0.5;
// Color variation: white to light blue
var colorVal = Math.floor(200 + Math.random() * 55);
var blueVal = Math.floor(230 + Math.random() * 25);
stars.push({
dist: dist,
angle: angle,
speed: speed,
size: size,
brightness: brightness,
color: 'rgba(' + colorVal + ',' + colorVal + ',' + blueVal + ',' + brightness + ')'
});
}
}
function draw() {
ctx.fillStyle = '#000000';
ctx.fillRect(0, 0, width, height);
var centerX = width / 2;
var centerY = height / 2;
for (var i = 0; i < stars.length; i++) {
var s = stars[i];
s.angle += s.speed;
var x = centerX + Math.cos(s.angle) * s.dist;
var y = centerY + Math.sin(s.angle) * s.dist;
ctx.beginPath();
ctx.arc(x, y, s.size, 0, Math.PI * 2);
ctx.fillStyle = s.color;
ctx.fill();
}
requestAnimationFrame(draw);
}
init();
draw();
</script>
xaigrok-4-1-fast-non-reasoning
9.4/103.8 s
xaigrok-4-1-fast-non-reasoning
Tokens612
Code source2.1 KB
Temps3.8 s
Jugement Matania
Animation
9
Rendering
9
Qualité du code
9
Créativité
8
Fidélité
10
Global
9.38
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques, incluant le format de sortie, le nombre d'étoiles, l'usage de ES5 et le canvas 400x400. L'implémentation de la spirale logarithmique et des dégradés radiaux dépasse les attentes pour un prompt aussi simple, offrant un rendu visuel très esthétique et une animation fluide.
<canvas id="c" width="400" height="400"></canvas><script>
var canvas=document.getElementById("c");
var ctx=canvas.getContext("2d");
var cx=200,cy=200;
var stars=200;
var starData=[];
var angle=0;
for(var i=0;i<stars;i++){
var arm=Math.floor(Math.random()*4); // 4 bras
var armOffset=(arm+Math.random()*0.5)*Math.PI*0.5;
starData[i]={
dist:Math.random()*180+10,
angleOffset:Math.random()*Math.PI*2 + armOffset,
size:Math.random()*2+0.3,
brightness:Math.random()*0.8+0.2,
hue:Math.random()*0.4,
arm:arm
};
}
function draw(){
ctx.fillStyle="#000011";
ctx.fillRect(0,0,400,400);
angle+=0.002; // Rotation plus visible mais lente
for(var i=0;i<stars;i++){
var s=starData[i];
// Spirale logarithmique : angle = base_angle + rotation + twist
var spiralAngle = s.angleOffset + angle + s.dist*0.04 + Math.sin(s.dist*0.03)*0.1;
var x=cx + s.dist * Math.cos(spiralAngle);
var y=cy + s.dist * Math.sin(spiralAngle);
// Variation de taille avec distance (plus petites au loin)
var drawSize = s.size * (1 - s.dist/250);
var gradient=ctx.createRadialGradient(x,y,0,x,y,drawSize*4);
gradient.addColorStop(0,"hsla("+(220+s.hue*40)+",100%,"+(85+s.brightness*15)+"%,1)");
gradient.addColorStop(0.3,"hsla("+(220+s.hue*40)+",100%,"+(65+s.brightness*15)+"%,0.9)");
gradient.addColorStop(0.7,"hsla("+(220+s.hue*40)+",100%,"+(40+s.brightness*10)+"%,0.4)");
gradient.addColorStop(1,"transparent");
ctx.fillStyle=gradient;
ctx.beginPath();
ctx.arc(x,y,drawSize,0,Math.PI*2);
ctx.fill();
// Sparkles seulement pour étoiles brillantes, moins fréquents
if(s.brightness > 0.6 && Math.random()<0.05){
var sparkle=ctx.createRadialGradient(x+Math.random()*2-1,y+Math.random()*2-1,0,x+Math.random()*2-1,y+Math.random()*2-1,1.5);
sparkle.addColorStop(0,"white");
sparkle.addColorStop(0.4,"hsla(220,100%,100%,0.8)");
sparkle.addColorStop(1,"transparent");
ctx.fillStyle=sparkle;
ctx.beginPath();
ctx.arc(x+Math.random()*2-1,y+Math.random()*2-1,1.5,0,Math.PI*2);
ctx.fill();
}
}
requestAnimationFrame(draw);
}
draw();
</script>
xaigrok-4-1-fast-reasoning
9.3/1034.6 s
xaigrok-4-1-fast-reasoning
Tokens642
Code source1.2 KB
Temps34.6 s
Jugement Matania
Animation
9
Rendering
8
Qualité du code
9
Créativité
8
Fidélité
10
Global
9.25
Revue
Le modèle a parfaitement respecté toutes les contraintes techniques, incluant l'usage de l'ES5 et le format de sortie strict. L'implémentation de l'effet de spirale (spiralTwist) et de la profondeur via la taille/brillance dépasse les attentes minimales du prompt. L'animation est fluide et le rendu visuel est esthétique, bien que les étoiles soient légèrement larges par rapport à la taille du canvas.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'interdiction de SVG/JS et le format de sortie strict. L'esthétique est très réussie avec des animations superposées fluides et un dégradé de fond moderne. Le code est propre, bien structuré et l'effet visuel est élégant et professionnel.
Le rendu visuel et l'animation sont exceptionnels, avec une esthétique moderne et des effets de profondeur très réussis. Cependant, le modèle a échoué sur la contrainte de fidélité critique : le code est tronqué à la fin (il s'arrête brusquement à la première div de l'anneau), ce qui rend le composant incomplet et non fonctionnel dans son intégralité.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'interdiction du SVG et du JavaScript. L'esthétique est très moderne avec des dégradés et des effets de lueur (glow) réussis. L'animation est fluide et complexe grâce à l'utilisation de pseudo-éléments et de directions opposées, créant un effet visuel riche.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'interdiction du SVG et du JavaScript. Le rendu est visuellement exceptionnel avec une gestion magistrale des dégradés, des ombres portées (glow effect) et de la profondeur. L'animation est fluide, complexe et très élégante.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'absence de SVG/JS et le format de sortie strict. L'esthétique est moderne avec un excellent usage des couleurs et des animations superposées fluides. Le code est propre, optimisé et le rendu visuel est très professionnel.
Le modèle respecte scrupuleusement toutes les contraintes techniques, notamment l'absence de SVG/JS et le format de sortie strict. L'animation est fluide et propre, bien que le design reste très conventionnel et manque d'originalité (créativité faible). Le rendu visuel est conforme et élégant, respectant les dimensions demandées.
Le modèle respecte scrupuleusement toutes les contraintes techniques, notamment l'absence de SVG et l'utilisation exclusive de HTML/CSS. L'animation de pulsation est fluide et élégante, bien que le design reste assez minimaliste. Le code est propre, bien structuré et parfaitement centré comme demandé.
Le modèle respecte scrupuleusement toutes les contraintes techniques, notamment l'absence de SVG/JS et le format de sortie strict. L'animation combine rotation et pulsation de manière fluide, bien que l'effet visuel reste assez conventionnel. Le code est propre, bien structuré et le rendu est esthétiquement moderne conformément aux attentes.
Le modèle a totalement échoué sur la syntaxe CSS : il a oublié tous les deux-points (:) après les propriétés (ex: 'margin 0' au lieu de 'margin: 0;'), ce qui rend le code totalement invalide et non fonctionnel dans un navigateur. Bien que l'intention esthétique soit bonne, le respect des contraintes techniques est inexistant car le code est syntaxiquement incorrect, ce qui entraîne une note de fidélité très basse.
Le modèle respecte scrupuleusement toutes les contraintes techniques, notamment l'absence de SVG/JS et le format de sortie strict. L'animation est fluide et combine rotation et pulsation, bien que l'esthétique reste très classique (style spinner standard). Le centrage et la structure du code sont parfaits.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'absence de SVG et de JavaScript, ainsi que le format de sortie strict. L'esthétique est très réussie avec des dégradés et des lueurs (glow) qui donnent un aspect moderne et premium. Les animations sont fluides et superposées de manière intelligente pour créer de la profondeur.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'absence de SVG et l'utilisation exclusive de HTML/CSS. L'esthétique est très moderne avec un excellent usage des dégradés et des ombres, et l'animation combinant rotation et pulsation est fluide et élégante.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'interdiction du SVG et du JavaScript. Le rendu visuel est exceptionnel avec une gestion sophistiquée des ombres, des dégradés et des superpositions (glassmorphism), créant un effet de profondeur très moderne. L'animation est fluide et multicouche, offrant une expérience visuelle riche et élégante.
Le modèle a parfaitement respecté toutes les contraintes techniques, incluant l'absence de SVG/JS et le format de sortie strict. Le rendu est exceptionnel avec une esthétique 'glassmorphism' moderne, des animations complexes et superposées qui créent une profondeur visuelle très élégante. La qualité du code est exemplaire, utilisant des keyframes optimisées pour un effet de respiration et de rotation fluide.
Le modèle a parfaitement respecté toutes les contraintes techniques, notamment l'absence de SVG/JS et le format de sortie strict. L'esthétique est moderne avec une utilisation très réussie des ombres portées et des couleurs harmonieuses. L'animation combinée (rotation et pulsation) est fluide et élégante.
Le modèle respecte scrupuleusement toutes les contraintes techniques, notamment l'absence de SVG/JS et le format de sortie strict. L'esthétique est moderne et très soignée, avec une utilisation intelligente des pseudo-éléments pour créer de la profondeur sans images. L'animation est fluide et les animations imbriquées (rotation et pulsation) créent un effet visuel haut de gamme.
Le code est excellent et respecte scrupuleusement toutes les contraintes techniques, y compris l'absence de SVG et le format de sortie. L'animation est bien pensée avec des vitesses et des directions différentes pour les anneaux. Cependant, en l'absence de capture d'écran, la note de rendu est plafonnée par défaut.
Le modèle respecte scrupuleusement toutes les contraintes techniques, notamment l'absence de SVG et de JavaScript, ainsi que le format de sortie strict. L'esthétique est moderne et élégante avec un usage judicieux des ombres et des couleurs. L'animation est fluide, bien que l'effet reste assez classique pour un loader.
Le modèle respecte scrupuleusement toutes les contraintes techniques, notamment l'absence de SVG et le format de sortie strict. L'animation est fluide et combine élégamment rotation et pulsation. Le rendu est propre et moderne, bien que le design reste assez classique pour un loader.