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
デザイン言語総合講座 - クリエイティブ・コーディング
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Atsushi Tadokoro
July 07, 2014
Technology
2.8k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
デザイン言語総合講座 - クリエイティブ・コーディング
Atsushi Tadokoro
July 07, 2014
More Decks by Atsushi Tadokoro
See All by Atsushi Tadokoro
Tumblrを使う4 - Webサイトを構成する、固定ページとタグ
tado
0
1.8k
Tumblrを使う3- カスタムHTMLテーマの作成
tado
0
460
Processing.jsによるデータの可視化と生成的表現
tado
1
1.9k
Tumblrを使う2 - テーマをカスタマイズする
tado
0
380
Touchéの仕組みを理解 - ProcessingとArduinoの連携
tado
0
2.4k
Github Pagesで作品を公開、Automatic Page Generatorでサイトを生成
tado
0
1.6k
TumblrでWebサイトを作成
tado
0
720
bmaw14 第2回: Touchéセンサーを使う1 Touchéセンサーを作成する
tado
0
2.2k
Webサーバーの準備 - Github PagesでWebサイト開設
tado
0
1.5k
Other Decks in Technology
See All in Technology
コミットの「なぜ」を読む
ota1022
0
120
起点・思考・出力で分解する 〜PM業務の自動化設計〜
kazu_kichi_67
1
1.1k
AIチャット検索改善の3週間
kworkdev
PRO
2
170
秘密度ラベル初心者が第1歩でつまづかないための「設計・運用」ポイント
seafay
PRO
1
480
[AWS Summit Japan 2026]迷っているあなたへ_小さな一歩が、やがて自分を助けてくれる
sh_fk2
2
410
2026年6月23日 Syncable Tech + Start Python Club にて
hamukazu
0
150
自分が詳しくない領域でAIを使う #プロヒス2026
konifar
20
7.5k
Deep Data Security 機能解説
oracle4engineer
PRO
2
120
AIAU_UMEMOGU_ninomiya_slide
ninomiya_ii
0
260
AIチャットの改善から見えた、良いAI体験とは / What Constitutes a Good AI Experience: Insights from Improving AI Chat
kubode
0
120
Comment regagner la souveraineté de vos données tout en étant payé grâce à Nostr !
rlifchitz
0
200
【FinOps】データドリブンな意思決定を目指して
z63d
0
350
Featured
See All Featured
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
190
From π to Pie charts
rasagy
0
220
Designing Powerful Visuals for Engaging Learning
tmiket
1
420
Six Lessons from altMBA
skipperchong
29
4.3k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
2.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.2k
Optimising Largest Contentful Paint
csswizardry
37
3.7k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
1
1.8k
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.9k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
1
230
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
250
1.3M
Transcript
σβΠϯݴޠ૯߹ߨ࠲ ΫϦΤΠςΟϒɾίʔσΟϯά ܚጯେֶڥใֶ෦ ݄ ాॴ३
Լهͷ63-͔ΒϑΝΠϧΛμϯϩʔυ͓͍͍ͯͯͩ͘͠͞ ˞େจࣈখจࣈͦͷ··Ͱ http://goo.gl/gxhX55
ࣗݾհ
ࣗݾհ ‣ ాॴ३ ͨͲ͜Ζ͋ͭ͠ ‣ ΫϦΤΠςΟϒɾίʔμʔ ‣ େֶඇৗۈߨࢣ
ଟຎඒज़େֶɺ౦ژज़େֶ ͳͲ ‣ ࡢ͔ΒɺࡦɾϝσΟΞݚڀՊത࢜՝ఔࡏ੶
ࣗݾհ ‣ IUUQZPQQBPSH TDSFFOTIPU@
ࣗݾհ ‣ ʰ#FZPOE*OUFSBDUJPO<վగୈ൛>ΫϦΤΠςΟϒɾίʔσΟϯάͷͨΊͷ PQFO'SBNFXPSLT࣮ફΨΠυʱઈࢍൢചத TDSFFOTIPU@
ΠϯτϩμΫγϣϯ લʹλΠϜεϦοϓ
લʹλΠϜεϦοϓ ‣ લͷʮ˞ΤϛϡϨʔλʔʯΛҎԼ͔Βμϯϩʔυ ‣ IUUQWJDFFNVTPVSDFGPSHFOFU ‣ ˞ΤϛϡϨʔλʔ͋ΔγεςϜ্Ͱଞͷ04$16ͷػೳΛ࠶ݱ͠ɺͦͷ04 $16 ͚ͷΞϓϦέʔγϣϯιϑτΛಈ࡞ͤ͞ΔιϑτΣΞ WJDF
લʹλΠϜεϦοϓ ‣ WJDF$PNNPEPSFͷΤϛϡʔϨʔλʔ ‣ $PNNPEPSF ‣ ୯Ұػछͱͯ͠࠷ൢചͷଟ͍ύʔιφϧίϯϐϡʔλ ‣
ສ͔Βສ ‣ ࣌ͷ57$.IUUQZPVUVCF%@GV*[&*YP
લʹλΠϜεϦοϓ ‣ ·ͣɺWJDFͷதʹ͋Δ9Λ࣮ߦͯ͠ΈΔ ‣ ҎԼͷΑ͏ͳىಈը໘͕දࣔ͞ΕΔ
લʹλΠϜεϦοϓ ‣ ࣌ͷύʔιφϧίϯϐϡʔλ ‣ γεςϜΛىಈ͢Δͱɺ#"4*$ΤσΟλʔ͕දࣔ͞ΕΔ ‣ ॳظը໘͕ɺϓϩάϥϛϯάڥͩͬͨ ‣
࣌ͷύιίϯͷ30.ʹɺ#"4*$ΠϯλϓϦλʔ ίϯϐϡʔλͷϓϩάϥϜΛ࣮ ߦ͢ΔιϑτΣΞ ͕ଂ͞Ε͍ͯͨ ‣ #"4*$ϚΠίϯʹ͓͚Δඪ४ݴޠ ‣ ϚΠΫϩιϑτ༂ਐͷ࢝·Γ
લʹλΠϜεϦοϓ ‣ ϓϩάϥϜΛ࣮ߦͯ͠ΈΔ ‣ ·ͣఆ൪ͷɺ)&--0803-% 10 PRINT “HELLO WORLD” RUN
લʹλΠϜεϦοϓ ‣ ࢛ଇԋࢉՄೳ ‣ ྫ 10 PRINT 123+456 RUN
લʹλΠϜεϦοϓ ‣ ͘Γ͔͑͠ɺϝοηʔδΛදࣔ͢Δ ‣ ྫ 10 PRINT “HELLO! ”; 20
GOTO 10 RUN
લʹλΠϜεϦοϓ ‣ ը໘͕ϝοηʔδͰຒΊͭ͘͞ΕΔ
લʹλΠϜεϦοϓ ‣ ϝοηʔδͷจࣈྻΛॻ͖͑ͯɺύλʔϯΛੜͯ͠ΈΔ
$PNNPEPSͰδΣωϥςΟϒͳදݱʹઓ
$PNNPEPSͰδΣωϥςΟϒͳදݱʹઓ ‣ ͜͜·ͰͷࣝΛ༻ͯ͠ɺ$PNNPEPSͰδΣωϥςΟϒ (FOFSBUJWFੜ త ͳදݱʹઓ ‣ ҎԼͷϓϩάϥϜΛೖྗ ‣ ্ͷϓϩάϥϜɺҎԼͷߦʹॖͯ͠ಉ͡ҙຯ
10 PRINT CHR$(205.5+RND(1)); 20 GOTO 10 RUN 10 PRINT CHR$(205.5+RND(1)); : GOTO 10 RUN
$PNNPEPSͰδΣωϥςΟϒͳදݱʹઓ ‣ ϥϯμϜͳ໎࿏ͷΑ͏ͳύλʔϯ͕ੜ͞ΕΔ
$PNNPEPSͰδΣωϥςΟϒͳදݱʹઓ ‣ ͳͥɺ͜ͷ༷͕ੜ͞ΕΔͷ͔ ‣ 3/% ˠʙͷϥϯμϜͳΛੜ ‣
$)3 ʜ Ͱɺׅހͷ࢛ࣺޒೖ͞ΕΔ ‣ 㱡Oˠ ‣ 㱡Oˠ ‣ ͭ·Γɺͱ͕ͷ֬Ͱੜ͞ΕΔ ‣ ͷจࣈʮaʯ ‣ ͷจࣈʮʯ ‣ ͜ͷͭͷจࣈͷΈ߹ΘͤͰɺύλʔϯ͕ੜ͞Ε͍ͯΔ ‣ ͷΛมԽͤͯ͞ΈΔ
$PNNPEPSͰδΣωϥςΟϒͳදݱʹઓ ‣ 10 PRINT CHR$(205.1+RND(1)); : GOTO 10
$PNNPEPSͰδΣωϥςΟϒͳදݱʹઓ ‣ 10 PRINT CHR$(205.97+RND(1)); : GOTO 10
$PNNPEPSͰδΣωϥςΟϒͳදݱʹઓ ‣ 10 PRINT CHR$(198.5+RND(1)); : GOTO 10
$PNNPEPSͰδΣωϥςΟϒͳදݱʹઓ ‣ ͞ΒʹෳࡶͳύλʔϯΛɺ͍Ζ͍Ζհ͠·͢ 10 PRINT CHR$(204+(INT(RND(1)+.5)*3)); : GOTO 10 10
PRINT CHR$(204+(RND(1)+.5)*3); : GOTO 10 10 print CHR$(105+(RND(1)+.5)*7); : goto 10 10 print CHR$(200+(RND(1)+.5)*3); : goto 10 10 print CHR$(199+(RND(1)+.5)*3); : goto 10 10 PRINT CHR$(181+(INT(RND(1)+.5)*3)+(INT(RND(1)+.5))); : GOTO 10 10 PRINT CHR$(181+(INT(RND(1)+.5)*3)); : GOTO 10 10 POKE 1024+RND(1)*1000,77.5+RND(1) : GOTO 10
ΫΠζ
ΫΠζ ‣ 13*/5ͷύλʔϯΛɺ1SPDFTTJOHͰඳ͚ͳ͍͔ ‣ Ͱ͖Δ͚ͩɺγϯϓϧʹ
ղྫ ‣ 13*/5GPS1SPDFTTJOH size(800, 600); int step = 20; for
(int y = 0; y < height; y += step) { for (int x = 0; x < width; x += step) { if (random(1) > 0.5) { line(x, y, x+step, y+step); } else { line(x, y+step, x+step, y); } } }
ղྫ ‣ 13*/5GPS1SPDFTTJOH
ղྫ ‣ ͞Βʹɺ͍Ζ͍Ζͯ͠ΈΔ void setup() { size(800, 600, P3D); background(0,
0, 127); stroke(255); tenPrint(10, 2); } void draw() { } void tenPrint(float step, float rnd) { for (int y = 0; y < height; y += step) { for (int x = 0; x < width; x += step) { if (random(1) > rnd) { line(x, y, x+step, y+step); } else { line(x, y+step, x+step, y); } } } } void mouseDragged() { background(0, 0, 127); float rnd = map(mouseX, 0, width, 0, 1); float div = map(mouseY, 0, height, 2, 80); tenPrint(div, rnd); }
ղྫ ‣ ϚεͷҐஔͰɺ༷ͷࡉ͔͞ͱࠨӈͷઢͷ֬Λมߋ
(-4-൛13*/5 ‣ IUUQHMTMIFSPLVDPNFIUNM
͜͜·Ͱͷ·ͱΊ
͜͜·Ͱͷ·ͱΊ ‣ ʮύιίϯʯΧϧνϟʔᴈ໌ظʙ ‣ ίϯϐϡʔλΛ͏ϓϩάϥϛϯά͕લఏ ‣ ϓϩάϥϛϯά͢Δָ͠͞ɺتͼ ‣ ίʔυʹΑΔࢥߟ ‣
ʮ1$༷ʑͳ͜ͱ͕ՄೳʹͳΔເͷϚγϯʯͱ͍͏Πϝʔδ ‣ ύιίϯͰ༡ͼͳ͕ΒʮίʔυʹΑΔࢥߟʯ͕ҭ·Ε͍ͯͬͨ
͜͜·Ͱͷ·ͱΊ ‣ ࢀߟɿ4IBSQ.;ͷϚχϡΞϧ ‣ ʮ.;4&3*&4#"4*$ղઆʯ
ίʔυʹΑΔࢥߟͷ࠶ൃݟ $SFBUJWF$PEJOH
$SFBUJWF$PEJOH ‣ ͜ͷ࡞ͷύλʔϯʹݟ͕֮͑
$SFBUJWF$PEJOH ‣ $BTFZ3FBT :FT/P ˡ͍ͭ࠷ۙͷ࡞
$SFBUJWF$PEJOH ‣ &OP)FO[F 3"45&3'")/%6/(
$SFBUJWF$PEJOH ‣ (PMBO-FWJO 4FMG"EIFSFODF GPS8SJUUFO*NBHFT
$SFBUJWF$PEJOH ‣ %BWJE8JDLT +BDPC`T$BWF
$SFBUJWF$PEJOH ‣ ‣ ʙͷίϯϐϡʔλɾΞʔτΛىͤ͞Δ࡞͕ଟग़ݱ ‣ ʮίʔυʹΑΔࢥߟʯͷϦόΠόϧ ‣ ͳͥɺ͜ͷΑ͏ͳݱ͕ىͬͨ͜ͷ͔
‣ ΞʔςΟετͷͨΊͷϓϩάϥϛϯάڥͷֵ໋ ‣ ˠΫϦΤΠςΟϒɾίʔσΠϯά $SFBUJWF$PEJOH
%FTJHOCZ/VNCFST %C/ ‣ +PIO.BFEB ʣ
1SPDFTTJOH ‣ $BTFZ3FBT #FO'SZ
PQFO'SBNFXPSLT ‣ ;BDIBSZ-JFCFSNBO 5IFP8BUTPO "SUVSP$BTUSP
ίʔσΟϯάڥͷൺᄻͷมભ ‣ %FTJHOCZ/VNCFSTˠ
ίʔσΟϯάڥͷൺᄻͷมભ ‣ 1SPDFTTJOHˠεέον
ίʔσΟϯάڥͷൺᄻͷมભ ‣ PQFO'SBNFXPSLTˠކ (MVF
࣍ͷΫϦΤΠςΟϒɾίʔσΟϯάͷτϨϯυʁ
࣍ͷΫϦΤΠςΟϒɾίʔσΟϯάͷτϨϯυʁ ˠ-*7&
4XJGU ‣ $ISJT-BUUOFS "QQMF ‣ 88%$Ͱಥൃද ‣
"QQMF७ਖ਼ɺϓϩάϥϛϯάݴޠ ‣ 0CKFDUJWF$ͷସΛࢦ͢
4XJGU ‣ 4XJGUγϯϓϧͰɺߴੑೳ // Objective-C NSString *str = @"Hello ";
str = [str stringByAppendingString:@" world"]; // Swift var str = "Hello " str += " world"
4XJGU ‣ 1MBZHSPVOE ‣ ϥΠϒίʔσΟϯάػೳ
"Playgrounds were heavily influenced by Bret Victor's ideas, by Light
Table and by many other interactive systems." - Chris Lattner (Apple)
"Playgrounds were heavily influenced by Bret Victor's ideas, by Light
Table and by many other interactive systems." - Chris Lattner (Apple)
#SFU7JDUPS*OWFOUJOHPO1SJODJQMF ‣ $64&$ͰͷσϞ ‣ ίʔσΟϯάաఔΛϥΠϒͰϓϨϏϡʔ͠ͳ͕Β։ൃ͢Δπʔϧ ‣ ·͞ʹɺϥΠϒίʔσΟϯάʂ ‣ IUUQTWJNFPDPN
-JHIU5BCMF ‣ ϥΠϒίʔσΟϯάʹಛԽͨ͠ΤσΟλ ‣ IUUQXXXMJHIUUBCMFDPN
ίʔυཧղͷͨΊͷϥΠϒίʔσΟϯά
ίʔυཧղͷͨΊͷϥΠϒίʔσΟϯά ‣ 5IFFOWJSPONFOUTIPVMEBMMPXUIFMFBSOFSUP ‣ SFBEUIFWPDBCVMBSZXIBUEPUIFTFXPSETNFBO ‣ GPMMPXUIFqPXXIBUIBQQFOTXIFO ‣
TFFUIFTUBUFXIBUJTUIFDPNQVUFSUIJOLJOH ‣ DSFBUFCZSFBDUJOHTUBSUTPNFXIFSF UIFOTDVMQU ‣ DSFBUFCZBCTUSBDUJOHTUBSUDPODSFUF UIFOHFOFSBMJ[F ‣ #SFU7JDUPS -FBOBCMF1SPHSBNNJOH
ίʔυཧղͷͨΊͷϥΠϒίʔσΟϯά ‣ ։ൃڥɺҎԼͷػೳΛఏڙ͢Δ͖ ‣ ޠኮ͕Θ͔Δͦͷݴ༿ԿΛҙຯ͍ͯ͠Δͷ͔ʁ ‣ ྲྀΕΛ͏Կ͕͍ͭى͍ͬͯ͜Δͷ͔ ‣ ঢ়ଶΛݟΔࠓίϯϐϡʔλԿΛߟ͍͑ͯΔ
‣ ૬ޓ࡞༻Λੜ͋ΔҰ͔Β࢝Ίͯɺܗ͍ͯ͘͠ ‣ நੑΛੜ۩ମతʹ࢝ΊͯɺҰൠԽ͍ͯ͘͠
4LFUDIˠ-JWF
4LFUDIˠ-JWF ‣ ύϑΥʔϚϯεͷखஈͱ͚ͯͩ͠Ͱͳ͘ɺ৽ͨͳ։ൃख๏ͷύϥμΠϜͱͯ͠ ‣ εέονʢ1SPDFTTJOH ͔ΒɺϥΠϒʢ-JWF$PEJOHʣϔ ‣ ϥΠϒύϑΥʔϚϯε͢ΔΑ͏ʹ։ൃ͍ͯ͘͠