Friends Who Said No

[ { "narration": "The Little Red Hen had a task, and naturally, she looked for a helping hand.", "duration": 5, "animation_code": "ctx.clearRect(0, 0, w, h); ctx.fillStyle = 'rgb(252, 165, 165)'; ctx.beginPath(); ctx.arc(w/2, h/2, 20, 0, 2*Math.PI); ctx.fill(); /* Little Red Hen */ ctx.strokeStyle = 'rgba(180, 180, 180, ' + (1 - progress * 0.6) + ')'; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(w/2, h/2, 40 + progress * 40, 0, 2*Math.PI); ctx.stroke(); /* Expanding circle for 'task' */ ctx.strokeStyle = 'rgba(100, 100, 100, ' + Math.min(1, (progress - 0.6) * 5) + ')'; ctx.lineWidth = 2; if (progress > 0.6) { ctx.beginPath(); ctx.arc(w/2 + 80, h/2 - 50, 25, 0, 2*Math.PI); ctx.stroke(); ctx.beginPath(); ctx.arc(w/2 - 80, h/2 - 50, 25, 0, 2*Math.PI); ctx.stroke(); ctx.beginPath(); ctx.arc(w/2, h/2 + 90, 25, 0, 2*Math.PI); ctx.stroke(); } /* Three empty circles indicating potential helpers */", "animated_text": [ { "text": "Little Red Hen", "start": 0.5, "animation": "fadeIn" }, { "text": "Task", "start": 2.0, "animation": "highlight" }, { "text": "❓", "start": 3.5, "animation": "popIn" }, { "text": "Help", "start": 4.0, "animation": "fadeIn" } ] }, { "narration": "She approached her companions: the clever cat, the loyal dog, and the hungry pig.", "duration": 6, "animation_code": "ctx.clearRect(0, 0, w, h); ctx.fillStyle = 'rgb(252, 165, 165)'; ctx.beginPath(); ctx.arc(w/2, h/2, 20, 0, 2*Math.PI); ctx.fill(); /* Little Red Hen */ const friendAlpha = Math.min(1, progress * 2); const scale = Math.min(1, progress * 1.5); /* Cat (Triangle) */ ctx.fillStyle = 'rgba(63, 63, 70, ' + friendAlpha + ')'; ctx.beginPath(); ctx.moveTo(w/2 + 80, h/2 - 50 - 25 * (1-scale)); ctx.lineTo(w/2 + 80 - 25 * scale, h/2 - 50 + 25 * scale); ctx.lineTo(w/2 + 80 + 25 * scale, h/2 - 50 + 25 * scale); ctx.closePath(); ctx.fill(); /* Dog (Square) */ ctx.fillStyle = 'rgba(168, 115, 78, ' + friendAlpha + ')'; ctx.fillRect(w/2 - 80 - 25*(1-scale), h/2 - 50 - 25*(1-scale), 50*scale, 50*scale); /* Pig (Oval) */ ctx.fillStyle = 'rgba(255, 192, 203, ' + friendAlpha + ')'; ctx.beginPath(); ctx.ellipse(w/2, h/2 + 90, 30*scale, 20*scale, 0, 0, 2*Math.PI); ctx.fill();", "animated_text": [ { "text": "Companions", "start": 1.0, "animation": "fadeIn" }, { "text": "Cat 🐱", "start": 2.5, "animation": "popIn" }, { "text": "Dog 🐶", "start": 3.8, "animation": "popIn" }, { "text": "Pig 🐷", "start": 5.0, "animation": "popIn" } ] }, { "narration": "Yet, despite her pleas, each of them, one after another, responded with a clear, unwavering 'no'.", "duration": 7, "animation_code": "ctx.clearRect(0, 0, w, h); ctx.fillStyle = 'rgb(252, 165, 165)'; ctx.beginPath(); ctx.arc(w/2, h/2, 20 * (1 - progress * 0.1), 0, 2*Math.PI); ctx.fill(); /* Hen shrinks slightly */ const shakeOffset = Math.sin(progress * Math.PI * 15) * 3; /* Helper function for 'X' fade-in/out */ function getXAlpha(p_current, p_event_start_ratio, p_event_duration_ratio) { if (p_current < p_event_start_ratio || p_current > p_event_start_ratio + p_event_duration_ratio) return 0; return Math.sin((p_current - p_event_start_ratio) * Math.PI / p_event_duration_ratio); } /* Define X mark timings based on narration text */ const durationRatio = 0.5 / 7; /* 0.5 seconds duration for X mark relative to 7s scene */ const alphaCatX = getXAlpha(progress, 4.0/7, durationRatio); const alphaDogX = getXAlpha(progress, 5.0/7, durationRatio); const alphaPigX = getXAlpha(progress, 6.0/7, durationRatio); /* Cat (Triangle) */ ctx.fillStyle = 'rgb(63, 63, 70)'; ctx.beginPath(); ctx.moveTo(w/2 + 80 + shakeOffset, h/2 - 50); ctx.lineTo(w/2 + 80 - 25, h/2 - 50 + 25); ctx.lineTo(w/2 + 80 + 25, h/2 - 50 + 25); ctx.closePath(); ctx.fill(); if (alphaCatX > 0) { ctx.strokeStyle = 'rgba(239, 68, 68, ' + alphaCatX + ')'; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(w/2 + 80 - 20, h/2 - 50 - 20); ctx.lineTo(w/2 + 80 + 20, h/2 - 50 + 20); ctx.moveTo(w/2 + 80 + 20, h/2 - 50 - 20); ctx.lineTo(w/2 + 80 - 20, h/2 - 50 + 20); ctx.stroke(); } /* Dog (Square) */ ctx.fillStyle = 'rgb(168, 115, 78)'; ctx.fillRect(w/2 - 80 + shakeOffset, h/2 - 50, 50, 50); if (alphaDogX > 0) { ctx.strokeStyle = 'rgba(239, 68, 68, ' + alphaDogX + ')'; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(w/2 - 80 - 20, h/2 - 50 - 20); ctx.lineTo(w/2 - 80 + 20, h/2 - 50 + 20); ctx.moveTo(w/2 - 80 + 20, h/2 - 50 - 20); ctx.lineTo(w/2 - 80 - 20, h/2 - 50 + 20); ctx.stroke(); } /* Pig (Oval) */ ctx.fillStyle = 'rgb(255, 192, 203)'; ctx.beginPath(); ctx.ellipse(w/2 + shakeOffset, h/2 + 90, 30, 20, 0, 0, 2*Math.PI); ctx.fill(); if (alphaPigX > 0) { ctx.strokeStyle = 'rgba(239, 68, 68, ' + alphaPigX + ')'; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(w/2 - 20, h/2 + 90 - 20); ctx.lineTo(w/2 + 20, h/2 + 90 + 20); ctx.moveTo(w/2 + 20, h/2 + 90 - 20); ctx.lineTo(w/2 - 20, h/2 + 90 + 20); ctx.stroke(); }", "animated_text": [ { "text": "Pleas", "start": 2.0, "animation": "fadeIn" }, { "text": "No.", "start": 4.0, "animation": "highlight" }, { "text": "🚫", "start": 4.2, "animation": "popIn" }, { "text": "No.", "start": 5.0, "animation": "highlight" }, { "text": "🚫", "start": 5.2, "animation": "popIn" }, { "text": "No.", "start": 6.0, "animation": "highlight" }, { "text": "🚫", "start": 6.2, "animation": "popIn" } ] } ]