Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
console.animate
Search
katashin
September 15, 2017
Programming
2
2.7k
console.animate
ToKyoto.js ― Kyoto.js in Tokyo
https://kyotojs.connpass.com/event/64310/
katashin
September 15, 2017
Tweet
Share
More Decks by katashin
See All by katashin
テストの重要性 / Test is Important
ktsn
0
200
Gulp のビルドをもっと効率化するツールを作ってみた / Making a Tool for Optimizing a Build Process of Gulp
ktsn
2
2.5k
ラムダ計算入門 / Introduction of Lambda Calculus
ktsn
0
400
Contextual ThisType and Vue.js
ktsn
0
13k
TypeScript で型検査器を作る / Implementing a type checker with TypeScript
ktsn
0
22k
大規模静的サイトのためのビルドツール
ktsn
0
2.3k
型付きテンプレートがほしい
ktsn
1
44k
Toward Type Safety of Vuex
ktsn
1
1k
Vue の TypeScript 事情
ktsn
1
2.6k
Other Decks in Programming
See All in Programming
コマンドとリード間の連携に対する脅威分析フレームワーク
pandayumi
1
430
ZJIT: The Ruby 4 JIT Compiler / Ruby Release 30th Anniversary Party
k0kubun
1
390
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
izumin5210
7
2.2k
AIエージェントの設計で注意するべきポイント6選
har1101
7
3.3k
Automatic Grammar Agreementと Markdown Extended Attributes について
kishikawakatsumi
0
180
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
heimusu
7
2.7k
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
azukiazusa1
1
600
KIKI_MBSD Cybersecurity Challenges 2025
ikema
0
1.3k
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
kanamasa
11
6k
そのAIレビュー、レビューしてますか? / Are you reviewing those AI reviews?
rkaga
6
4.4k
例外処理とどう使い分ける?Result型を使ったエラー設計 #burikaigi
kajitack
16
5.8k
.NET Conf 2025 の興味のあるセッ ションを復習した / dotnet conf 2025 quick recap for backend engineer
tomohisa
0
120
Featured
See All Featured
Side Projects
sachag
455
43k
Color Theory Basics | Prateek | Gurzu
gurzu
0
190
Measuring & Analyzing Core Web Vitals
bluesmoon
9
740
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
2.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.6k
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
0
260
Fireside Chat
paigeccino
41
3.8k
Exploring anti-patterns in Rails
aemeredith
2
230
Optimising Largest Contentful Paint
csswizardry
37
3.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.1k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Transcript
console.animate
!LUTO LBUBTIJO
ͬͪ͜ͷ͡Όͳ͍Ͱ͢
IUUQTEFWPSPDPN
None
None
render(‘͜Μʹͪ’) ͜Μʹͪ <canvas> [0, 0, 0, 0, 0, 0, 0,
209, 0, …] ImageData
[0, 0, 0, 0, 0, 0, 0, 209, 0, 0,
0, 255, …] ImageData SFE HSFFO CMVF BMQIB
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, … ], … ]
पลͷGBMTFΛמΓऔΔ [ [f, f, f, f, f], [f, t, t,
t, f], [f, t, t, t, f], [f, f, f, f, f] ]
5SVFˠ˙ɹGBMTFˠ˘ [ [˘, ˘, ˘, ˘, ˘], [˘, ˙, ˙,
˙, ˘], [˘, ˙, ˙, ˙, ˘], [˘, ˘, ˘, ˘, ˘] ]
7JFXQPSUΛͣΒͯ͠Ξχϝʔγϣϯ DPOTPMFDMFBSˠDPOTPMFMPHˠʜ [ [˘, ˘, ˘, ˘, ˘], [˘, ˙,
˙, ˙, ˘], [˘, ˙, ˙, ˙, ˘], [˘, ˘, ˘, ˘, ˘] ]
ΧʔιϧͳΜͯͳ͍ͷͰ DPOTPMFDMFBSˠDPOTPMFMPHˠʜ
ʊਓਓਓਓʊ ʼɹɹʻ ʉ:?:?:?:ʉ
'JSFGPY $ISPNF 4BGBSJ
ͳ͔ͥ'JSFGPYͷEFWUPPMͷύϑΥʔϚϯε ͕܈Λൈ͍ͯྑ͍ DPOTPMFMPHͷୈೋҾʹελΠϧΛͤΔ console.log('%cfoo’, 'font-size: 10px;') DBOWBTʹେ͖Ίʹॻ͍͔ͯΒ খ͍͞αΠζͰDPOTPMFMPH͢Δͷ͕ྑ͍ײ͡ ݟ
࣍Τοδݕग़ʜʜʁ render(‘’)