試し読み：『Designing Math. 数学とデザインをむすぶプログラミング入門』
2022年1月20日に刊行した『Designing Math. 数学とデザインをむすぶプログラミング入門』（古堅真彦 著）より、Chapter0「はじめに」と作品サンプルをご紹介します。
本書は、数学とデザインの関係性をプログラミングという手法を交えて考えたものです。インタラクティブなグラフィックを生成するためのプログラミング方法と数学知識を実践的に学べます。
美術系の学校でプログラミングやアルゴリズミックなデザインを教える著者がつまずきやすいポイントを踏まえながら丁寧に解説します。
数式で面白いグラフィックを作りたい、数学に苦手意識があるけど興味がある、デザインに説得力を持たせたい、そんな人におすすめです。
本章の一部と作品サンプルは特設サイトからもご覧いただけます。こちらでは、実際にサンプルが動いている様子も確認できます。
------------------------------------------------------------
Chapter0 はじめに
数学とデザイン
本書は、数学とデザインの関係性をプログラミングという手法を交えて考えたものです。
数学とデザインは、一般的に遠い分野のように思われがちです。数学は世の中の理を追求する論理的で計算する学問、デザインは感から美しいものを生み出す直感や感性を駆使する分野だと思われています。この理と感は相容れない、反対のものと考えられがちです。
大学の学部を考えてみても、数学は理学部や工学部のいわゆる理科系、デザインは美術大学や芸術大学のいわゆる芸術系として入口が違っています。
しかし、そもそも数学は例えば幾何学という分野があるように、世の中の形や構造を解き明かし、それを記述するためのものであり、デザインはその形や構造を使って世の中に機能を提供するものです。
つまり、数学は世界観を記述するもの、デザインはその世界観を構築するものと考えられ、実はとても近いところにあるものだと思います。
もう１つ、数学とデザインの共通性を考えてみましょう。数学は論理的です。ではこの論理的とはいったい何なのでしょう？ 筆者は論理的とは他人と考え方を共有できることだと思っています。反対に、論理的の反対語とされている非論理的とは他人にはわかりにくいことだと思います。
つまり、数学は論理的なので他人と考え方を共有する学問です。数学は概念です。基本的には実物はありません｡「りんごが３個とみかんが５個あります。全部で幾つでしょう？」とか、紙に鉛筆を使ってグラフという絵を描くこともあるので、実物があるように見えますが、あれは、便宜上のもので、頭の中の考え方を他人と共有するために表しただけのものです。そして、デザインも他人と考え方を共有します。製品を作るときには企画者やスポンサーなどと、どういったものを作るかという考えを共有し、出来上がった製品には、ユーザーにも使い方や便利さがわかるようにデザイナーの頭の中にある考え方をマニュアルや広告、また製品そのものに埋め込んで共有しなくてはいけません。こういった考え方を共有するというところに数学とデザインは共通性があり、また、デザイン分野に数学の特徴を埋め込めるのではないかと思っています。
筆者は学生時代、理学部で計算幾何学というプログラミングを使った幾何学の研究をし、社会人になってからはコンピュータやプログラミングを使ってデザインワークをしたり、芸術系大学で教えたりしてきました。折しも筆者が若きを過ごした 1990 年代は Macintosh がデザインワークのツールとして認知され始め、インターネットが普及し始め、デザインワークに本格的にコンピュータが導入され始めた頃です。それまでのまっすぐな直線を描くことやきれいに紙を切るなどといった職人技がコンピュータや機械に担保され始め、デザイナーは直感的なアイデアをコンピュータを使って論理的に作ることができるようになりだしました。
こういった状況下で筆者は理科系出身という自身の特性を使い、プログラミングでデザインすることを生業としていました。つまり、本来、近いところにあると考えている数学とデザインの関係性をプログラミングという手法を使って、模索、研究、制作をしていました。
と書くと、一見、とても崇高な考えから普段の研究・制作活動を行なっていたような雰囲気を醸し出していますが実情はそんなことはありません。単にプログラミングが好きなので、自然の成り行きでそれを使ってデザインワークをしようとあまり意識せず活動していたら、周りから「不思議な方法で制作をしているね」と言われ、この方法はあまり一般的ではないのだということに気づきました。そこからプログラミングでデザインしているということを意識して、制作をおこなうようになり、また当時の手作業や職人肌が重視されるデザイン現場の実情と、プログラミングや数学を使った論理的な制作方法の融合を考えるようになりました。
そして、こういった研究や活動は、コンピュータが登場したがゆえに発生し、成果がでることだと思っていましたが、いろいろな過去の作品や研究を調べてみると、この書籍のタイトルのベースにもなっているカール・ゲルストナーの『Designing Programmes（デザイニング・プログラム)』（永原康史監訳、ヤーン・フォルネル訳、ビー・エヌ・エヌ、2020 年）や、ヨハネス・イッテンの『色彩論』（大智 浩訳、美術出版社、1971 年）や、それと繋がるバウハウスにおけるさまざまな教育活動、日本でも勝井三雄の「ギョームパターン」をはじめとした作品や、他にもいろいろと実はコンピュータが登場するかなり前から論理的で数学的な、アルゴリズミックな思考での制作は手作業でも試みられていたことがわかりました。つまり、数学的な感性を駆使したデザインの研究や活動は、コンピュータの登場で発生したのではなく、単に顕在化しただけで、実はそれ以前から人間の本能的なところでは同じ思考がはたらいていたと考えられます。
Designing Math. とは
このような考えから普段のデザインワークや大学の授業で筆者は論理的にデザインをするということを自身のオリジナリティとして念頭において活動するようになりました。
ただし、この論理的というのはネガティブに捉えられがちな 機械的や画一的 という意味ではもちろんありません。先にも書いたように、論理的というのは他人と考え方を共有するという考え方のもと、どのようにしたら、美しいやおもしろいという直感的な感覚や、クリエイティブという有機的で記述しにくい概念を他人と共有できるのかを考えています。
先ほど紹介した、本書のタイトルのベースにもなっている書籍『Designing Programmes』の中ではこう述べられています。
—大切なのは、解決ではない。形態は順列、あるいは式に従った結果であり、その形をとらなければならなかったということなのだ。創造的な楽しみは、形のデザイン（イメージ：チューリップ）ではなく、式のデザイン（イメージ：チューリップの球根）にある。ゆえに創造の目的もそこにある。（カール・ゲルストナー､『デザイニング・プログラム』、永原康史監訳、ヤーン・フォルネル翻訳、ビー・エヌ・エヌ、2020 年）
また、別の箇所では、
—作品はたしかに制作者の意図によって創られるものだが、鑑賞者の共感によって生き続けるのだ。この事実を前提とするなら、鑑賞者をデザインのプロセスに参加させることができるだろう。 （同上）
とも述べられています。カール・ゲルストナーがこの本を執筆した 1950 〜 60 年代はコンピュータもプログラミング言語も一般的ではない時代ですが、筆者なりの解釈で書くとプログラミング的な発想や手法を使って創作をすると、制作者は鑑賞者と概念が共有できると述べています。
今の時代はパソコンがあり、プログラミングができるので、カール・ゲルストナーが紙面や机上で手作業により構築していた思想を、コンピュータ上で容易に再現することが可能です。つまり、カール・ゲルストナーがプログラムと呼んでいたものを現在のプログラミングで実現することが可能です。
筆者が普段から考えていたこと、また､『Designing Programmes』に書かれていることを総合すると、自身が普段から行なっているプログラミングという制作手法は美しさやクリエイティブな感性を、他者と論理的に共有できる環境だと気づきました。
また、筆者は、美術系大学でプログラミングを駆使したデザインをかれこれ 20 年ほど教えていて、1つ気がついたことがあります。それは、視覚的なデザインワークにおいては、頻繁に使われるある特定の数式や数学理論があるということです。先に書いた美しいやクリエイティブな作品を作る際には円運動や立体表現、また、ベジェ曲線をはじめとする数式で描いた自由曲線もよく使われます。これらの、よく使われる数学理論を使ってデザインすると、先に書いたように、鑑賞者やユーザーに理解されやすい、つまり制作者と鑑賞者で考え方を共有しやすいのではないかと考えました。
そこでそれらのよく使われる、また共有されやすい数学理論を抽出し、それらを使って、できるだけ美しく、おもしろい惹きのあるサンプルを作り、その美しさやおもしろさをプログラミングのアルゴリズムを解説することで解きました。それが筆者の開設したサイト『Designing Math.』です。
Designing Math. には、数学をデザインする、デザインする際に数学を使う、またデザインと数学という複数の意味を込めています。先に書いたようにデザインと数学は他者と考え方を共有するという共通性を持っています。その共通性を使って、双方の理解を深め、制作の手法を深める。それがこのサイトの目的です。本書はこのサイトを基礎としながら再編集し、新たなサンプルを追加したものになります。
美しさやおもしろさは視覚的なものだけではありません。例えば、本書の Chapter 9では左右判定という数学上での公式を活用してサンプルを制作しています。とある点が線の左右のどちらにあるかという計算を、画面内の何百個の点に対して行なった結果、そこに統一的なルールが見え隠れして、そこにおもしろさが出るのではないかというサンプルです。このようにそれぞれのサンプルは一見複雑だけど、そこには何かルールが見える気がします。そのルールという論理性をプログラミングで記述し、考え方の共有を図っています。
【ここからは本編でお楽しみください】
------------------------------------------------------------
作品サンプル
繰り返し
コンピュータが得意な「繰り返し」を使ったグラフィックを描いてみましょう。この作品は一見とても複雑に見え、どのような仕組みで成り立っているのかわからないという人もいると思います。しかし、実は、単純な要素が複数絡み合うことで、複雑な構造に見えているのです。そこで、その単純な要素を一つひとつ分解しながら解説していきます。
互い違い
先ほどの「繰り返し」を利用して、青海波を使った「波」を描いてみましょう。この作品も一見、とても複雑ですが単純な仕組みがいくつも重なることによって、複雑に見えています。
三角関数
この作品は、sin、cosなどの「三角関数」を使っています。これまで円を描くにはJavaScriptに用意されているarc関数を使ってきました。ただ、arcは円を描けますが､「円周上の位置」は計算できません。円周上の位置は「三角関数」で計算します。
色
「色」について考えましょう。このSampleでは三崩しと呼ばれる日本古来の文様が彩られ、その色が流れていきます。それぞれ2 本が対になっている部分は色相環の反対に位置する「補色」の組み合わせになっていて、横方向に明度の波が流れ、指の位置で彩度が変化します。まず色の表現方法であるHSB について考え、そこからHSB→RGBの色の変換方法を考えます。
角度と距離
「角度」と「距離」について考えてみましょう。指（マウス）を画面上で動かすと赤くなったり、指に近いほど大きくなったり、円の中の線がこちらを向いたりします。これらは指との「角度」と「距離」を元に計算しています。
一次変換
「回転」について考えてみましょう。画面上をタッチ（マウスダウン）すると、●が指を中心に回転します。指を動かしても、その位置を中心に回転します。また、回転の半径は250 ごとに赤色で反時計回り、黒色で時計回りを繰り返します。
左右判定
画面上で指を動かすと、線がついてきます。敷き詰められた六角形のパターンは、線の進行方向に向かって右が赤色に、左が黒色になります。ここでは点が線の左右どちらにあるかを判定する「左右判定」について考えます。
三次元
「3D」について考えます。立方体とその中に「ふ」が描かれています。指で画面をなぞると回りはじめ、タッチしてすぐに離すとその回転が止まります。世の中には、3D の理論を詳しく知らなくても簡単に立体を表現できるライブラリがあります。しかし、本書は数学的にデザインを考えるので、数式だけで3D を表現します。
------------------------------------------------------------
Amazonページはこちら。Kindle版（リフロー形式）は後日配信予定です。
BNN直販ページはこちら。
この記事が気に入ったらサポートをしてみませんか？