クリエイティブコーディングをはじめよう we are java-scripters! @12th

1. クリエイティブコーディングをはじめよう
～アート表現ができるJavaScriptの世界～
We Are JavaScripters! @12th
ゆきしお
TwitterID:YuxioArts

2. 目次
• 発表の目的
• 自己紹介
• デザインとアートの違い
• コンピューター上のアート
• クリエイティブコーディングとは
• JavaScriptを使用したクリエイティブコーディング
• クリエイティブコーディングを学ぶことの意義

3. 発表の目的
クリエイティブコーディングを取り入れることで・・・
• JavaScriptでアート表現ができる
• WEBサイト・エンジニアの表現の幅を広げることができる
この２つを持って帰って頂ければと思います。

4. 自己紹介
＜名前＞
ゆきしお
TwitterID:YuxioArts
＜仕事＞
本業：データアナリスト（2年目）
使用言語：SQL、Python
＜趣味＞
WEB開発
使用言語：HTML、CSS、PHP、Python、
JavaScript
フレームワーク：Laravel（PHP）
＜一言＞
最近、JavaScriptが好きになってReactや
クリエイティブコーディングを勉強中

5. デザインとアートの違い
デザイン アート
客観的である 主観的である
設計する 表現する
問題解決 自己表現
アートとは「特殊な素材・手段・形式により、技巧を駆使して美を創造・表現しようとする人間活動、お
よびその作品」
デザインとは「作ろうとするものの形態について、機能や生産工程などを考えて構成すること」
ー大辞林よりー
※個人的にデザインは構成よりも「設計」のほうがしっくりくるので、
本スライドでは、「設計する」とします。

6. デザインとアートの違い
設計する 表現する
TOPページは、企業の
顔。だから企業のイメー
ジカラーであるこの色が
いいと思う。
うんうん

7. コンピューター上のアート
• デジタルアート • コンピューターミュージック
• デジタル絵画 • クリエイティブコーディング

8. クリエイティブコーディングとは
・表現力のあるものを創造することを目指すコーティング
・アーティストやデザイナーが創作に使えるプログラミング・ツール
を作る創作活動
コーディングでアート的な表現することができます

9. JavaScriptを使用したクリエイティブコーディング
P5.js
https://p5js.org/
Sketch.js
http://soulwire.github.io/sketch.js/
下記のサンプルは、Sketch.jsから。GithubやCodepenからすぐに利用可
能 BUBBLES
1 MILLION PARTICLES
PARTICLES

10. JavaScriptを使用したクリエイティブコーディング
Particles.js
http://vincentgarreau.com/particles.js/
下記のサンプルは、Codepenからすぐに利用可能

11. クリエイティブコーディングを行う意義 １
WEBサイトの表現を広げることができる
⇒UXの向上につなげることができる
1 MILLION PARTICLESの使用イメージ
宇宙関係の研究室のHP
Particlesの使用イメージ
AI関係の研究室・会社のHP
WEBサイトの直感的イメージと結びつけ
ユーザーに受け入れやすくなる

12. クリエイティブコーディングを行う意義 ２
エンジニアまたはコーディングができるデザイナーの表現力の向上
コーディング自体のマンネリ化防止
ちょっと息抜きに
クリエイティブコーディング
すっかー！

13. Let’s クリエイティブコーディング