7
\$\begingroup\$

Write a program that outputs Lewis Carroll's poem The Mouse's Tale from Alice in Wonderland, drawn in its distinctive tail-like shape.

The Mouse's Tale

Plain text of the poem:

Fury said to a mouse, That he met in the house, 'Let us both go to law: I will prosecute you.— Come, I'll take no denial; We must have a trial: For really this morning I've nothing to do.' Said the mouse to the cur, 'Such a trial, dear sir, With no jury or judge, would be wasting our breath.' 'I'll be judge, I'll be jury,' Said cunning old Fury; 'I'll try the whole cause, and condemn you to death.'

Your output could be ASCII art or an image or an animation or a webpage or pretty much anything that follows the rules. The point of course is to be artistic and original.

The highest voted answer will win in approximately one week.

Rules

  • Your representation of the poem must exactly match the quoted text above.
  • Your representation must be legible. Any literate person with decent eyesight should be able to decipher it and not have to zoom in.
  • The tail must be vertically oriented, taking roughly 2 to 3 times more vertical space than horizontal space.
  • The tail must be thicker at the top and grow thinner as it gets to the bottom.
  • There must be at least 3 distinct curves or turns in the shape of the tail. (I count 5 above.)
  • You may not use existing images/layouts of the poem as your output or in your code.
  • You must actually write a program that generates your output. You cannot simply arrange some text in Photoshop.
\$\endgroup\$
15
\$\begingroup\$

JavaScript, animated edition

Live Demo

animated "The Mouse's Tale"

HTML

<div id='wrapper'>
    <p id='intro'>
        "It is a long tail, certainly," said Alice, looking down with wonder at the Mouse's tail; "but why do you call it sad?" And she kept on puzzling about it while the Mouse was speaking, so that her idea of the tale was something like this:&mdash;"
    </p>
    <div id='tail'></div>
</div>

CSS

#wrapper { width: 300px; font: 16px serif; text-align: justify; }
p { margin: 0; padding: 0; }
p.wordEl { position: relative; }

JS

var poem = "Fury said to a mouse, That he met in the house, 'Let us both go to law: I will prosecute you.- Come, I'll take no denial; We must have a trial: For really this morning I've nothing to do.' Said the mouse to the cur, 'Such a trial, dear sir, With no jury or judge, would be wasting our breath.' 'I'll be judge, I'll be jury,' Said cunning old Fury; 'I'll try the whole cause, and condemn you to death.'\" ",
    words = poem.match(/.{0,15}[ ]/g),
    wordEls = [],
    tail = document.getElementById('tail'),
    startFontSize = 16,
    endFontSize = 8;

for (var i = 0; i < words.length; ++i) {
    var word = words[i].slice(0, words[i].length - 1);

    var wordEl = document.createElement('p');
    wordEl.className = 'wordEl';
    wordEl.innerText = word;
    wordEl.style.setProperty('font-size', (Math.round(((words.length - i) / words.length) * (startFontSize - endFontSize)) + endFontSize) + 'px');
    wordEls.push(wordEl);

    tail.appendChild(wordEl);
}

var counter = 0;
setInterval(function() {
    ++counter;
    for (var i = 0; i < wordEls.length; ++i) {
        var sn = Math.sin((i*2 + counter) / 5) * 150; // sn = result of math.SiN
        var wsn = sn * (i / wordEls.length); // weighted sn
        wordEls[i].style.setProperty('left', (wsn + 150) + 'px');
    }
}, 50);
\$\endgroup\$
  • 1
    \$\begingroup\$ -1: cannot read it=) Really like that idea of the animation! \$\endgroup\$ – flawr Jul 26 '14 at 13:27
  • \$\begingroup\$ I can just read it at this speed so it's alright. \$\endgroup\$ – Calvin's Hobbies Jul 28 '14 at 16:19
  • \$\begingroup\$ I fixed the fiddle: jsfiddle.net/aLay9/3 \$\endgroup\$ – Tomáš Zato Feb 2 '16 at 13:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.