साइनसोइडल एएससीआईआई-कला एनिमेटेड पाठ

Question

मुझे कुछ पुराने डेमो की याद आती है, जब वे कंप्यूटर की क्षमताओं को दिखाते हैं, जब उन्हें i3, i5 और i7 के बजाय x86 कहा जाता था। मैंने अपने 386 में जो पहली बार देखा था, वह फ्यूचर क्रू से अवास्तविक डेमो था जो अब अपनी 25 वीं वर्षगांठ मना रहा है। पर मिनट 00:43 डेमो के पहले भाग शुरू होता है और हम एक sinusoidal मार्ग का अनुसरण एक स्क्रॉल पाठ को देखने। आइए ASCII कला में उस प्रभाव की नकल करने की कोशिश करें!

चुनौती

इस मार्ग को देखते हुए:

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

और एक इनपुट पाठ, इस तरह से पाठ का अनुसरण करें, जैसे:

Thi                                Golf! 
   s i                          de       Yay
      s                       Co            !
        P                     
         r                  d
         o                  n
          g                a
           ra            s 
             mmi      zle
                ng Puz

ध्यान दें कि रिक्त स्थान पथ में वर्णों के रूप में गिना जाता है, और यदि पाठ नमूना से अधिक लंबा है तो पथ स्वयं को दोहराता है।

एनीमेशन हिस्सा है

एक बार जब आप पाठ खींच लेते हैं, तो 100 एमएस (लगभग 10 एफपीएस का एक एनीमेशन बनाने के लिए) प्रतीक्षा करें और पाठ को फिर से ड्रा करें लेकिन पथ की अगली स्थिति से शुरू करें। इसलिए, फ्रेम के लिए #n, गणना करें n modulo 40और पाठ के साथ पथ की निम्नलिखित स्थिति में ड्राइंग को हमेशा कैनवास के बाईं ओर संरेखित करें:

***                                ***
|  ***                          ***  |
|     **                      **     |
|       *                    *       |
|        *                  *        |
|        *                  *        |
|         *                *         |
|          **            **          |
|            ***      ***            |
|               ******               |
Position 0                 Position 39

तो फ्रेम 10 के लिए हमारे पास होगा:

                           and Co
                        es       de 
                      zl            Go
                     z                l
                    u                  f
T                   P                  !
 h                                       
  is             ng                       Ya
     is       mmi                           y!
        Progra

टिप्पणियाँ

• इनपुट एक एकल string(या charसरणी, जो भी हो) पाठ के साथ चेतन करने के लिए होगा, और हमेशा कम से कम 1 वर्ण होगा।
• चेतन करने के लिए वैध वर्ण मुद्रण योग्य ASCII सेट में हैं ।
• अनुसरण करने का मार्ग बिल्कुल वैसा ही होगा जैसा दिया गया है।
• पाठ हमेशा कैनवास के बाईं ओर संरेखित किया जाएगा, इसलिए इसका प्रभाव ध्वज की तरह लहराता हुआ पाठ होगा, जिसमें कोई पाठ विस्थापन नहीं होगा। और कैनवस से मेरा मतलब है स्क्रीन या जो भी आप टेक्स्ट दिखाने के लिए इस्तेमाल करेंगे । ;-)
• फ़्रेम पिछले फ्रेम से किसी भी वर्ण / पिक्सेल के स्पष्ट होना चाहिए जब तक कि चरित्र / पिक्सेल दोनों फ़्रेमों में समान न हो।
• एनीमेशन की गति तब तक मायने नहीं रखती है जब तक कि यह सुचारू रूप से या आपके डिवाइस के रूप में तेज़ चलता है (हम न्यूनतम 5 एफपीएस सेट कर सकते हैं, लेकिन यह कोई आवश्यकता नहीं है)। बस इसे तरल बनाने की गति को समायोजित करें और चिंता न करें यदि प्रतीक्षा समय बिल्कुल समान नहीं है।
• एनीमेशन अंतहीन रूप से लूप करेगा।

यह कोड-गोल्फ है , इसलिए पाठ जीतने के लिए सबसे छोटा कार्यक्रम या फ़ंक्शन सक्षम हो सकता है!

Comments

संबंधित । सैंडबॉक्स ।

— चार्ली

मैं बजाय 38 कॉलम 40. भरोसा कर सकते हैं

— Arnauld

@ अरनल्ड इसलिए है क्योंकि पथ में जो स्थितियां हैं, कॉलम नहीं।

— चार्ली

ओह मैं समझा। समझ में आता है।

— अरनुलद

क्या यह आउटपुट के रूप में ठीक है? यह एक साइनसोइडल तरंग के रूप में इनपुट को प्रदर्शित करता है और छोरों को अंतहीन रूप से प्रदर्शित करता है। बेशक, चूंकि वीडियो ग्राफिक्स इंटरचेंज प्रारूप में है, इसलिए यह वास्तविकता में तेज है।

— आर। काप

Answer 1

HTML + ES6, 241 244 237 बाइट्स

टूट - फूट:

• HTML: 16 बाइट्स
• जेएस फ़ंक्शन: 221 बाइट्स

let f =

s=>setInterval(_=>o.innerHTML=[...s].map((c,i)=>([j,y]=[...Array(40)].map((_,k)=>[j=k%20,y,y+=77732>>j&1?k<20||-1:0],y=0)[(i+p)%40],a[y]=a[y]||[...s].fill` `)[x]=(x+=j!=9,c),x=0,a=[],p++)&&a.map(r=>r.join``).join`
`,p=30)

f("This is Programming Puzzles and Code Golf! Yay!")

<pre id=o></pre>

कैसे?

पथ निर्माण

निम्नलिखित कोड पथ बनाता है:

[...Array(40)].map((_, k) =>
  [
    j = k % 20,
    y,
    y += 77732 >> j & 1 ? k < 20 || -1 : 0
  ],
  y = 0
)

यह एरे का एक सरणी देता है [j, y, z]जहां j स्थिति modulo 20 है, y इस स्थिति में y-निर्देशांक है और z का उपयोग बाद में नहीं किया जाता है (यह सिर्फ कुछ बाइट्स को बचाने के लिए यहां गणना की जाती है)।

क्योंकि पथ सममित है, हमें केवल 20 पहले पदों को एनकोड करना होगा। हम एक बाइनरी नंबर का उपयोग करके करते हैं, जहां प्रत्येक 1बिट का मतलब है कि y को अपडेट किया जाना चाहिए (पहली छमाही के लिए +1, दूसरी छमाही के लिए -1)।

001
   001
      01
        1
         1
         1
          1
           01
             001
                000

पहली स्थिति को कम से कम महत्वपूर्ण बिट में मैप करने के साथ, यह देता है:

00010010111110100100 as binary = 77732 as decimal

क्योंकि यह द्विआधारी संख्या स्वयं भी सममित है, हम इसे दूसरे छमाही के लिए उसी क्रम में पढ़ सकते हैं।

इसलिए सूत्र:

y += (77732 >> j) & 1 ? (k < 20 ? 1 : -1) : 0

जो इस प्रकार लिखा जा सकता है:

y += (77732 >> j) & 1 ? k < 20 || -1 : 0

जहां k स्थिति है और जम्मू स्थिति modulo 20 है।

अपडेट करना x बहुत आसान है: हमारे पास एक विशेष मामला है कि 9 के साथ स्थिति modulo 20 की तुलना करके पता लगाया जा सके।

पाठ आकर्षित करना

निम्नलिखित कोड में, ऊपर वर्णित पथ निर्माण कोड pathको पठनीयता के लिए एक चर द्वारा प्रतिस्थापित किया गया है।

s => setInterval(                       // set a periodic timer:
  _ =>                                  //   with an anonymous callback
    o.innerHTML =                       //   which updates the content of 'o'
      [...s].map((c, i) => (            //   for each character c of the string s
          [j, y] = path[(i + p) % 40],  //     retrieve j and y from the path
          a[y] = a[y] || [...s].fill` ` //     initialize a[y] if it's undefined
        )[x] = (x += j! = 9, c),        //     update a[y][x] / update x
        x = 0,                          //     initialize x
        a = [],                         //     initialize a[]
        p++                             //     increment the phase
      ) &&                              //   end of map()
      a.map(r => r.join``).join`\n`,    //   join everything together
  p = 30                                //   initial phase = interval period = 30
)                                       // end of timer definition

Comments

यह शानदार है, और पूछे गए मार्ग के काफी करीब है, लेकिन रास्ता बिल्कुल वैसा नहीं है जैसा मैंने आकर्षित किया था। जिन दो स्तंभों में दो *ऊर्ध्वाधर होते हैं, वे एक ही ऊंचाई पर (एक ही ऊंचाई पर) संरेखित नहीं होते हैं, और एक और छोटा नाइटपिक। लेकिन मुझे कहना होगा कि मुझे अभी भी नहीं पता है कि आपका कोड तरंग प्रभाव कैसे बनाता है (क्या करता y+=155464है?)। बधाई हो!

— चार्ली

@CarlosAlejo मुझे लगता है कि अब रास्ता तय होना चाहिए। क्या आप कृपया दोबारा जांच कर सकते हैं? मैं इस्तेमाल की गई विधि का स्पष्टीकरण जोड़ दूँगा।

— अरनुलद

पथ की जाँच की, और स्पष्टीकरण के लिए बहुत बहुत धन्यवाद!

— चार्ली