6
\$\begingroup\$

Codidact post, CGCC Sandbox, Codidact Sandbox

Given three positive integers as input, animate an ascii-art polygonal loading symbol on the screen.

Intro

You will be given three inputs, \$n\$, \$l\$, and \$d\$...

\$n\$ (one of \$3\$, \$4\$, \$6\$, or \$8\$), is the number of sides of a polygon:

                           * * *
                          *     *
                * * *    *       *
               *     *   *       *
  *    * * *  *       *  *       *
 * *   *   *   *     *    *     *
* * *  * * *    * * *      * * *

\$l\$ is the side length to use. (The above all use \$l = 3\$, the minimum possible value).

You may use any printable ASCII character other than space instead of *.

\$d\$ is the load length and is less than the perimeter.

The task is to create a loading animation as follows:

  1. Make the first frame of the animation by starting at any one of the topmost corners and drawing the perimeter until its length is \$d\$.
  2. Make the next frame by shifting this partial perimeter by 1 clockwise.
  3. Repeat step 2 ad-infinitum.

For example, \$n=3,l=3,d=4\$ would result in the following steps:

  *                          *       *        *
   *  ->    *  ->  *    ->  *   ->  * *  ->  * *  -> . . .
  * *    * * *    * * *    * *     *            *

Example

Here is a solution made by Hakerh400: Try It Online!

Further details(important):

  • You are guaranteed that \$n∊(3,4,6,8)\$
  • You are guaranteed that \$l≥3.\$ You are guaranteed that \$d<(l-1)×n.\$
  • There must be a delay of at least 0.1 s between each step. You can have a delay of up to 10 seconds.
  • Your language is allowed to output a list of steps infinitely if and only if it cannot clear the screen or do something similar.
  • If so, there must be at least 2 newlines between each step.
  • This is not .

Scoring

This is . Shortest answer in each language wins.

\$\endgroup\$
9
  • \$\begingroup\$ Could you specify that \$n\$ is the number of sides of the polygon, rather than an index, earlier in the question? \$\endgroup\$
    – pxeger
    Dec 23 '20 at 7:28
  • \$\begingroup\$ Also for the example, it might be worth using a larger side length to make it clearer. \$\endgroup\$
    – pxeger
    Dec 23 '20 at 7:29
  • \$\begingroup\$ @pxeger clarified that part. \$\endgroup\$
    – Razetime
    Dec 23 '20 at 7:33
  • 4
    \$\begingroup\$ Could you show what the output looks like for more examples? \$\endgroup\$
    – xnor
    Dec 23 '20 at 12:00
  • 1
    \$\begingroup\$ Oh, sorry. Edited it in. \$\endgroup\$
    – Razetime
    Dec 24 '20 at 1:47
3
\$\begingroup\$

JavaScript (ES8), 265 bytes

(n,l,d)=>setInterval(_=>(g=i=>i<q?g(i+1,(m[y-=634%~(D+=i%l?0:+("02112122230"[(n*12^i/l)%43%29]||1))-2>>1]=m[y]||[...''.padEnd(l*4)])[x-=D<4?D-1:5-D]=(i+j)%q<d?0:" "):C.log(m.reverse().map(r=>r.join``).join`
`))(y=D=!++j,(C=console).clear(x=l*3,m=[])),j=100,q=n*--l)

Try it online!

Snippet

f=

(n,l,d)=>setInterval(_=>(g=i=>i<q?g(i+1,(m[y-=634%~(D+=i%l?0:+("02112122230"[(n*12^i/l)%43%29]||1))-2>>1]=m[y]||[...''.padEnd(l*4)])[x-=D<4?D-1:5-D]=(i+j)%q<d?0:" "):C.log(m.reverse().map(r=>r.join``).join`
`))(y=D=!++j,(C=console).clear(x=l*3,m=[])),j=100,q=n*--l)

console.log = s => o.innerHTML = s; f(3, 5, 9)
<pre id="o"></pre>

\$\endgroup\$
3
\$\begingroup\$

JavaScript (V8), 353 318 bytes

f=(n,l,d,o=0)=>{w=[...{3:'330231',4:'42240220',6:'423313021131',8:'4233231302112131'}[n]]
a=Array(3*l).fill().map(_=>Array(4*l).fill` `)
x=n==4?0:l,y=0
for(i=0;i<d+o;++i){a[y][x]=i>=o?'*':' '
j=~~(i/(l-1))%n*2
x+=w[j]-2
y+=w[j+1]-2}(c=console).clear()
c.log(a.join`
`.replace(/,/g,''))
setTimeout(_=>f(n,l,d,o+1),100)}

Try it online!

On the tio.run it displays all output instantly, but in the browser console it animates as it should.

f=(n,l,d,o=0)=>{w=[...{3:'330231',4:'42240220',6:'423313021131',8:'4233231302112131'}[n]]
a=Array(3*l).fill().map(_=>Array(4*l).fill` `)
x=n==4?0:l,y=0
for(i=0;i<d+o;++i){a[y][x]=i>=o?'*':' '
j=~~(i/(l-1))%n*2
x+=w[j]-2
y+=w[j+1]-2}(c=console).clear()
c.log(a.join`
`.replace(/,/g,''))
setTimeout(_=>f(n,l,d,o+1),100)}
f(3,3,4)
    

\$\endgroup\$
2
  • \$\begingroup\$ Does it work as a Stack Snippet? \$\endgroup\$
    – Neil
    Dec 24 '20 at 0:29
  • \$\begingroup\$ @Neil, Yes, it works. Added to answer. \$\endgroup\$ Dec 24 '20 at 14:38
2
\$\begingroup\$

Charcoal, 69 65 bytes

NθNηNζ≔⁰εRWφ¹«≦⊖εF§⪪”)″‴Byε=μχ?⟦⌕r”8θF⊖η«≦⊕ε✳Iκ⁺§ *‹﹪ε×⊖ηθζ× №04κ

Try it online! Link is to verbose version of code with 100× speed-up (φ replaced with χ) so that you can get results in a reasonable amount of time; each frame is separated by ␛ [2J␛ [0;0H. Explanation:

NθNηNζ

Input n, l and d as numbers.

≔⁰ε

Keep track of how many frames have passed and which step we are on the current frame.

RWφ¹«

Every second, run the rest of the code and refresh the screen.

≦⊖ε

Decrement the frame/step counter, so that each frame starts a step later than the previous.

F§⪪”)″‴Byε=μχ?⟦⌕r”8θ

Look up the direction vectors for the appropriate shape in a compressed string and loop over them.

F⊖η«

Loop over the length of each side.

≦⊕ε

Increment the frame/step counter.

✳Iκ⁺§ *‹﹪ε×⊖ηθζ× №04κ

Print a * if the frame/step counter is within the input length, plus a further space for a horizontal movement.

\$\endgroup\$

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.