console.animate - Speaker Deck

console.animate

by katashin

Slide 1

Slide 1 text

console.animate

Slide 2

Slide 2 text

!LUTO LBUBTIJO

Slide 3

Slide 3 text

ͬͪ͜ͷ࿩͡Όͳ͍Ͱ͢

Slide 4

Slide 4 text

IUUQTEFWPSPDPN

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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, … ], … ]

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

ʊਓਓਓਓʊ  ʼɹ׬੒ɹʻ  ʉ:?:?:?:ʉ

Slide 15

Slide 15 text

'JSFGPY $ISPNF 4BGBSJ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

࣍͸Τοδݕग़ʜʜʁ render(‘’)