loop-the-loop/index.html at main · step/loop-the-loop · GitHub

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html><html lang=en><head><script async src="https://www.googletagmanager.com/gtag/js?id=G-6THV95E09G"></script><script>window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-6THV95E09G');</script><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>Loop The Loop</title><link rel=stylesheet type=text/css href=style.css><script src=libraries/p5.min.js></script></head><body><h1>Loop the Loop</h1><div id=inputs><div id=file-section><button id=choose-file>Choose File</button></div><div id=gif-controls><label for=gif-length>Number of frames:</label> <input id=gif-length type=number min=1 max=100 value=15> <button id=save-gif>Save GIF</button></div></div><div id=sketch></div><div class=help-section><h2>How to Use</h2><p>This tool animates ASCII art frames uploaded by the user. Follow these steps to create and view your animation:</p><ol><li>Prepare a text file containing the ASCII art frames. See the <strong>Data Format</strong> section below for details.</li><li>Click the "Choose File" button under the "File" section and select your ASCII art file.</li><li>Once the file is loaded, the animation will begin automatically on the canvas above.</li><li>Use the "Loop Length (in frames)" slider to control the length of the animation loop.</li><li>If you want to save the animation as a GIF, use the dedicated "Save GIF" button (if implemented).</li></ol><h3>Data Format</h3><p>The ASCII art file must adhere to the following format:</p><pre>
        width height
        frames
      </pre><ul><li><strong>width:</strong> The width (a positive number) of each frame.</li><li><strong>height:</strong> The height (a positive number) of each frame.</li><li><strong>frames:</strong> A single string containing all the ASCII art frames concatenated together. Each frame is exactly <code>width × height</code> characters long.</li></ul><p>For example, a file with two 4x3 frames could look like this:</p><pre>
        4 3
        AAAABBBBCCCCDDDDEEEEFFFF
      </pre><p>Here, the file contains two frames. The first frame is <code>AAAABBBBCCCC</code>, and the second frame is <code>DDDDEEEEFFFF</code>, displayed sequentially.</p><p>Ensure that the total number of characters in the frames section equals <code>width × height × number of frames</code>.</p></div><script src=sketch.js></script></body></html>