samples
目次
Chapter 0
はじめに

はじめに
Chapter 1
仕組み

1-1 DesigningMath-Base
1-2 example.jsの中身
Chapter 2
基礎描画

2-1 直線を描く
2-2 画面サイズ、線をつなげる
2-3 いろいろな線を描く
2-4 いろいろな形を描く
2-5 色の設定
2-6  文字を描く
2-7  動きの表現、指の位置
2-8  タッチの状態
2-9  タッチイベント
Chapter 3
繰り返し

3-1  縦横に●を並べる
3-2  エリア内にぴったり収める
3-3  徐々に大きさを変える
3-4  時間に沿って大きさを動かす
3-5  色を変える
Chapter 4
互い違い

4-1  ○を並べる
4-2  縦方向に詰める
4-3  互い違いに配置する
4-4  青海波を描く
4-5  波をつくる
4-6  波の角度をずらす
4-7  それぞれの波をずらす
4-8  トリミングする
Chapter 5
三角関数

5-1  円周上に○を並べる
5-2  ○の大きさをsinカーブにする
5-3  円周の半径をsinカーブにする
5-4  個々の○の半径を時間で動かす
5-5  全体の○の半径を時間で動かす
5-6  円周の半径を時間で動かす
Chapter 6

6-1  HSB→ RGB変換
6-2  色相を位置に展開
6-3  明度の波
6-4  三崩し模様
Chapter 7
角度と距離

7-1  ○を敷き詰める
7-2  距離で○の大きさを変える
7-3  方向を考慮する
7-4  なぞった部分を覚えておく
7-5  指の方向に線を描く
7-6  指の方向の線が揺らぐ
Chapter 8
一次変換

8-1  ●を敷き詰める
8-2  ●全体を回転する
8-3  指の位置で●全体が回転する
8-4  指との距離で回転方向を変える
8-5  残像を残す
8-6  徐々に近づく
8-7  ゆっくりと動き出す
Chapter 9
左右判定

9-1  コントロールポイントをつくる
9-2  ベジェ曲線を描く
9-3  下地を描く
9-4  左右判定
9-5  曲線の左右判定
9-6  下地のパターンを六角形にする
Chapter 10
三次元

10-1  投影変換
10-2  クラスへの関数の組み込み
10-3  空間内で回転させる
10-4  指で回転させる
10-5  空間内のベジェ曲線
10-6  空間内のベジェ曲線の効率化
Appendix
JavaScriptの構文

・変数
・配列変数
・グローバル変数、ローカル変数
・JavaScriptにおける計算方法
・関数
・if文
・for文
One Point
 

・DesigningMath-Base独自の変数
・画面サイズ変更
・ソーティング
・new Date().getTime()はなぜ1970年
 1月1日から計算されるのか?
・螺旋と黄金比
・数学用のライブラリ
・色彩の同時対比
・なせatanではなくatan2なのか?
・ベジェ曲線の原理
・回転の順番
Chapter 0
はじめに

はじめに
Chapter 1
仕組み

1-1 DesigningMath-Base
1-2 example.jsの中身
Chapter 2
基礎描画

2-1 直線を描く
2-2 画面サイズ、線をつなげる
2-3 いろいろな線を描く
2-4 いろいろな形を描く
2-5 色の設定
2-6  文字を描く
2-7  動きの表現、指の位置
2-8  タッチの状態
2-9  タッチイベント
Chapter 3
繰り返し

3-1  縦横に●を並べる
3-2  エリア内にぴったり収める
3-3  徐々に大きさを変える
3-4  時間に沿って大きさを動かす
3-5  色を変える
Chapter 4
互い違い

4-1  ○を並べる
4-2  縦方向に詰める
4-3  互い違いに配置する
4-4  青海波を描く
4-5  波をつくる
4-6  波の角度をずらす
4-7  それぞれの波をずらす
4-8  トリミングする
Chapter 5
三角関数

5-1  円周上に○を並べる
5-2  ○の大きさをsinカーブにする
5-3  円周の半径をsinカーブにする
5-4  個々の○の半径を時間で動かす
5-5  全体の○の半径を時間で動かす
5-6  円周の半径を時間で動かす
Chapter 6

6-1  HSB→ RGB変換
6-2  色相を位置に展開
6-3  明度の波
6-4  三崩し模様
Chapter 7
角度と距離

7-1  ○を敷き詰める
7-2  距離で○の大きさを変える
7-3  方向を考慮する
7-4  なぞった部分を覚えておく
7-5  指の方向に線を描く
7-6  指の方向の線が揺らぐ
Chapter 8
一次変換

8-1  ●を敷き詰める
8-2  ●全体を回転する
8-3  指の位置で●全体が回転する
8-4  指との距離で回転方向を変える
8-5  残像を残す
8-6  徐々に近づく
8-7  ゆっくりと動き出す
Chapter 9
左右判定

9-1  コントロールポイントをつくる
9-2  ベジェ曲線を描く
9-3  下地を描く
9-4  左右判定
9-5  曲線の左右判定
9-6  下地のパターンを六角形にする
Chapter 10
三次元

10-1  投影変換
10-2  クラスへの関数の組み込み
10-3  空間内で回転させる
10-4  指で回転させる
10-5  空間内のベジェ曲線
10-6  空間内のベジェ曲線の効率化
Appendix
JavaScriptの構文

・変数
・配列変数
・グローバル変数、ローカル変数
・JavaScriptにおける計算方法
・関数
・if文
・for文
One Point
 

・DesigningMath-Base独自の変数
・画面サイズ変更
・ソーティング
・new Date().getTime()はなぜ1970年
 1月1日から計算されるのか?
・螺旋と黄金比
・数学用のライブラリ
・色彩の同時対比
・なせatanではなくatan2なのか?
・ベジェ曲線の原理
・回転の順番
本書について
本書は、数学とデザインの関係性をプログラミングという手法を交えて考えたものです。

数学とデザインは、一般的に遠い分野のように思われがちです。数学は世の中のを追求する論理的で計算する学問、デザインはから美しいものを生み出す直感や感性を駆使する分野だと思われています。このは相容れない、反対のものと考えられがちです。
大学の学部を考えてみても、数学は理学部や工学部のいわゆる理科系、デザインは美術大学や芸術大学のいわゆる芸術系として入口が違っています。
しかし、そもそも数学は例えば幾何学という分野があるように、世の中の形や構造を解き明かし、それを記述するためのものであり、デザインはその形や構造を使って世の中に機能を提供するものです。
つまり、数学は世界観を記述するもの、デザインはその世界観を構築するものと考えられ、実はとても近いところにあるものだと思います。

もう1つ、数学とデザインの共通性を考えてみましょう。数学は論理的です。ではこの論理的とはいったい何なのでしょう? 筆者は論理的とは他人と考え方を共有できることだと思っています。反対に、論理的の反対語とされている非論理的とは他人にはわかりにくいことだと思います。
つまり、数学は論理的なので他人と考え方を共有する学問です。数学は概念です。基本的には実物はありません。「りんごが3個とみかんが5個あります。全部で幾つでしょう?」とか、紙に鉛筆を使ってグラフという絵を描くこともあるので、実物があるように見えますが、あれは、便宜上のもので、頭の中の考え方を他人と共有するために表しただけのものです。そして、デザインも他人と考え方を共有します。製品を作るときには企画者やスポンサーなどと、どういったものを作るかという考えを共有し、出来上がった製品には、ユーザーにも使い方や便利さがわかるようにデザイナーの頭の中にある考え方をマニュアルや広告、また製品そのものに埋め込んで共有しなくてはいけません。こういった考え方を共有するというところに数学とデザインは共通性があり、また、デザイン分野に数学の特徴を埋め込めるのではないかと思っています。

筆者は学生時代、理学部で計算幾何学というプログラミングを使った幾何学の研究をし、社会人になってからはコンピュータやプログラミングを使ってデザインワークをしたり、芸術系大学で教えたりしてきました。折しも筆者が若きを過ごした 1990 年代は Macintosh がデザインワークのツールとして認知され始め、インターネットが普及し始め、デザインワークに本格的にコンピュータが導入され始めた頃です。それまでのまっすぐな直線を描くことやきれいに紙を切るなどといった職人技がコンピュータや機械に担保され始め、デザイナーは直感的なアイデアをコンピュータを使って論理的に作ることができるようになりだしました。
こういった状況下で筆者は理科系出身という自身の特性を使い、プログラミングでデザインすることを生業としていました。つまり、本来、近いところにあると考えている数学とデザインの関係性をプログラミングという手法を使って、模索、研究、制作をしていました。

と書くと、一見、とても崇高な考えから普段の研究・制作活動を行なっていたような雰囲気を醸し出していますが実情はそんなことはありません。単にプログラミングが好きなので、自然の成り行きでそれを使ってデザインワークをしようとあまり意識せず活動していたら、周りから「不思議な方法で制作をしているね」と言われ、この方法はあまり一般的ではないのだということに気づきました。そこからプログラミングでデザインしているということを意識して、制作をおこなうようになり、また当時の手作業や職人肌が重視されるデザイン現場の実情と、プログラミングや数学を使った論理的な制作方法の融合を考えるようになりました。

そして、こういった研究や活動は、コンピュータが登場したがゆえに発生し、成果がでることだと思っていましたが、いろいろな過去の作品や研究を調べてみると、この書籍のタイトルのベースにもなっているカール・ゲルストナーの『Designing Programmes(デザイニング・プログラム)』(永原康史監訳、ヤーン・フォルネル訳、ビー・エヌ・エヌ、2020 年)や、ヨハネス・イッテンの『色彩論』(大智 浩訳、美術出版社、1971 年)や、それと繋がるバウハウスにおけるさまざまな教育活動、日本でも勝井三雄の「ギョームパターン」をはじめとした作品や、他にもいろいろと実はコンピュータが登場するかなり前から論理的で数学的な、アルゴリズミックな思考での制作は手作業でも試みられていたことがわかりました。つまり、数学的な感性を駆使したデザインの研究や活動は、コンピュータの登場で発生したのではなく、単に顕在化しただけで、実はそれ以前から人間の本能的なところでは同じ思考がはたらいていたと考えられます。

Designing Math. とは
このような考えから普段のデザインワークや大学の授業で筆者は論理的にデザインをするということを自身のオリジナリティとして念頭において活動するようになりました。
ただし、この論理的というのはネガティブに捉えられがちな 機械的 や 画一的 という意味ではもちろんありません。先にも書いたように、論理的というのは他人と考え方を共有するという考え方のもと、どのようにしたら、美しいやおもしろいという直感的な感覚や、クリエイティブという有機的で記述しにくい概念を他人と共有できるのかを考えています。

先ほど紹介した、本書のタイトルのベースにもなっている書籍『Designing Programmes』の中ではこう述べられています。

—大切なのは、解決ではない。形態は順列、あるいは式に従った結果であり、その形をとらなければならなかったということなのだ。創造的な楽しみは、形のデザイン(イメージ:チューリップ)ではなく、式のデザイン(イメージ:チューリップの球根)にある。ゆえに創造の目的もそこにある。(カール・ゲルストナー、『デザイニング・プログラム』、永原康史監訳、ヤーン・フォルネル翻訳、ビー・エヌ・エヌ、2020 年)

また、別の箇所では、

—作品はたしかに制作者の意図によって創られるものだが、鑑賞者の共感によって生き続けるのだ。この事実を前提とするなら、鑑賞者をデザインのプロセスに参加させることができるだろう。 (同上)

とも述べられています。カール・ゲルストナーがこの本を執筆した 1950 〜 60 年代はコンピュータもプログラミング言語も一般的ではない時代ですが、筆者なりの解釈で書くとプログラミング的な発想や手法を使って創作をすると、制作者は鑑賞者と概念が共有できると述べています。
今の時代はパソコンがあり、プログラミングができるので、カール・ゲルストナーが紙面や机上で手作業により構築していた思想を、コンピュータ上で容易に再現することが可能です。つまり、カール・ゲルストナーがプログラムと呼んでいたものを現在のプログラミングで実現することが可能です。

筆者が普段から考えていたこと、また、『Designing Programmes』に書かれていることを総合すると、自身が普段から行なっているプログラミングという制作手法は美しさやクリエイティブな感性を、他者と論理的に共有できる環境だと気づきました。

また、筆者は、美術系大学でプログラミングを駆使したデザインをかれこれ 20 年ほど教えていて、1つ気がついたことがあります。それは、視覚的なデザインワークにおいては、頻繁に使われるある特定の数式や数学理論があるということです。先に書いた美しいやクリエイティブな作品を作る際には円運動や立体表現、また、ベジェ曲線をはじめとする数式で描いた自由曲線もよく使われます。これらの、よく使われる数学理論を使ってデザインすると、先に書いたように、鑑賞者やユーザーに理解されやすい、つまり制作者と鑑賞者で考え方を共有しやすいのではないかと考えました。

そこでそれらのよく使われる、また共有されやすい数学理論を抽出し、それらを使って、できるだけ美しく、おもしろい惹きのあるサンプルを作り、その美しさやおもしろさをプログラミングのアルゴリズムを解説することで解きました。それが筆者の開設したサイト『Designing Math.』です。

Designing Math. には、数学をデザインするデザインする際に数学を使う、またデザインと数学という複数の意味を込めています。先に書いたようにデザインと数学は他者と考え方を共有するという共通性を持っています。その共通性を使って、双方の理解を深め、制作の手法を深める。それがこのサイトの目的です。本書はこのサイトを基礎としながら再編集し、新たなサンプルを追加したものになります。

美しさやおもしろさは視覚的なものだけではありません。例えば、本書の  Chapter 9  では左右判定という数学上での公式を活用してサンプルを制作しています。とある点が線の左右のどちらにあるかという計算を、画面内の何百個の点に対して行なった結果、そこに統一的なルールが見え隠れして、そこにおもしろさが出るのではないかというサンプルです。このようにそれぞれのサンプルは一見複雑だけど、そこには何かルールが見える気がします。そのルールという論理性をプログラミングで記述し、考え方の共有を図っています。
著者
古堅 真彦 Masahiko Furukata
コンピュータとデザインの関係について研究している。最近は「アルゴリズミックな思考」が主な研究テーマ。
美術系の学校で「アルゴリズミックなデザイン」や「プログラミングを使ったデザイン」をテーマに演習や講義、共同研究をおこなったり、研究成果をアプリケーションソフトウェアに落とし込み、世の中に頒布したりしている。
独立行政法人情報処理推進機構(IPA)より2004年度下期「天才プログラマー/スーパークリエータ」に認定/武蔵野美術大学視覚伝達デザイン学科教授
デザイニング・マス
Designing Math.
数学とデザインをむすぶプログラミング入門
 
著者:古堅真彦
 
デザイン:松川祐子
カバーデザイン:チョーヒカル
編集:河野和史
 
ISBN:978-4-8025-1219-0
2,750円(税込)
B5判変型/248ページ
発行元:株式会社ビー・エヌ・エヌ
 
© 2022 Masahiko Furukata
Amazon で購入
BNN で購入