console.animate

ToKyoto.js ― Kyoto.js in Tokyo
https://kyotojs.connpass.com/event/64310/

Transcript

1. console.animate
   

   View Slide

2. !LUTO LBUBTIJO
   
   

   View Slide

3. ͬͪ͜ͷ࿩͡Όͳ͍Ͱ͢
   

   View Slide

4. IUUQTEFWPSPDPN
   

   View Slide

5. View Slide

6. View Slide

7. render(‘͜Μʹͪ͸’)
   ͜Μʹͪ͸
   
   [0, 0, 0, 0, 0, 0, 0, 209, 0, …]
   ImageData
   

   View Slide

8. [0, 0, 0, 0,
   0, 0, 0, 209,
   0, 0, 0, 255, …]
   ImageData
   SFE HSFFO CMVF BMQIB
   

   View Slide

9. BMQIBͰUSVFɹͦΕҎ֎ͰGBMTF
   [
   [f, f, f, f, f, f, … ],
   [f, f, f, f, f, f, … ],
   [f, f, f, f, t, t, … ],
   [f, f, f, f, t, t, … ],
   [f, f, f, f, f, f, … ],
   …
   ]
   

   View Slide

10. पลͷGBMTFΛמΓऔΔ
    [
    [f, f, f, f, f],
    [f, t, t, t, f],
    [f, t, t, t, f],
    [f, f, f, f, f]
    ]
    

    View Slide

11. 5SVFˠ˙ɹGBMTFˠ˘
    [
    [˘, ˘, ˘, ˘, ˘],
    [˘, ˙, ˙, ˙, ˘],
    [˘, ˙, ˙, ˙, ˘],
    [˘, ˘, ˘, ˘, ˘]
    ]
    

    View Slide

12. 7JFXQPSUΛͣΒͯ͠Ξχϝʔγϣϯ
    DPOTPMFDMFBSˠDPOTPMFMPHˠʜ
    [
    [˘, ˘, ˘, ˘, ˘],
    [˘, ˙, ˙, ˙, ˘],
    [˘, ˙, ˙, ˙, ˘],
    [˘, ˘, ˘, ˘, ˘]
    ]
    

    View Slide

13. ΧʔιϧͳΜͯͳ͍ͷͰ
    DPOTPMFDMFBSˠDPOTPMFMPHˠʜ
    

    View Slide

14. ʊਓਓਓਓʊ

    ʼɹ׬੒ɹʻ

    ʉ:?:?:?:ʉ
    

    View Slide

15. 'JSFGPY
    $ISPNF
    4BGBSJ
    

    View Slide

16. ͳ͔ͥ'JSFGPYͷEFWUPPMͷύϑΥʔϚϯε
    ͕܈Λൈ͍ͯྑ͍
    DPOTPMFMPHͷୈೋҾ਺ʹ͸ελΠϧΛ౉ͤΔ
    console.log('%cfoo’, 'font-size: 10px;')
    DBOWBTʹେ͖Ίʹॻ͍͔ͯΒ
    খ͍͞αΠζͰDPOTPMFMPH͢Δͷ͕ྑ͍ײ͡
    ஌ݟ
    

    View Slide

17. ࣍͸Τοδݕग़ʜʜʁ
    render(‘’)
    

    View Slide