コードを用いてアニメーションやビジュアル表現を行うクリエイティブコーディングの世界。最初はシンプルな動きや見た目でも、少しのコードを追加するだけで驚くほどの変貌を遂げたり、些細な変化がインタラクションの手触りを大きく変えたり。そのようなコードでこだわりを重ねていくことの面白さを、いくつかの事例を交えながらお話します。

1. コードでつくる動きと見た目のこだわり
2024.2.9 DIST.42

2. 池田 亮
• devdev Inc. Founder, Programmer
• 富山在住
@ikeryou

3. 実績紹介

4. WebGL、HTMLを組み合わせたモーション、グラフィック実装

5. Web技術(HTML,WebGL等)をベースにした
クリエイティブコーディングでの作品づくり

6. 300個以上

7. これらの作品たちがどのような考えで作られたかを紹介
クリエイティブコーディングの奥深さ、楽しさを知って欲しい
話す内容
(20個くらい)

9. CSSのグラデーション表現を深掘りしたい

10. 最初のモチベーション
いじりたいモチーフがある
深掘りしたいテーマがある
些細な疑問の検証(技術研究)

11. CSSのグラデーション表現を深掘りしたい

23. 同じテーマで何個か作ることが多い
最終的なゴールがあるわけではないので
作品の途中経過ではない

24. 物理演算ライブラリいじってみたい

32. 瞬間に湧き出た好奇心やアイディアをコードにして
積み重ねていき、その変化を楽しむ

33. 画像をいじってみたい

41. スマホのスワイプと連動したインタラクション

45. スマホの回転と連動したインタラクション

52. クリエイティブコーディングの定義

53. コードを一行でも書いていて
本人がそれを表現と言えばOK

54. CSSでテキストを選択したときの背景色は
どこまで操作できるのか？？

62. devツールで表示されるHTMLはどこまでコントロール
できるのか？？

69. htmlのinput要素はどこまで表現につかえるのか

78. 瞬間に湧き出た好奇心やアイディアをコードにして
積み重ねていき、その変化を楽しむ

79. 心地いいものができた
予想外のものができた
微妙なものができた
思い通りのものができた

80. だからこそ続けられる、やりがいもある
まだまだ奥は深いし、やってないことたくさんある
(スライダーネタもまだまだあるはず、、)

81. 奥が深い世界ではありますが、
ぜひクリエイティブコーディングの世界に足を踏み込んでもらい、
その面白さに少しでも共感してもらえたらうれしいです

82. ありがとうございました！