LogoMark.png

電子媒体における正方形の描画

電子媒体における正方形の描画

ー芸術工学的「正方形」研究 Iー
Drawing "SQUARES" with electronic media
ーStudy on "SQUARES" in field of design Iー

はじめに

 画素から広場まで、我々の周囲には様々な正方形が存在する。かつてブルーノムナーリは「正方形-その発見と展開」註1)において、170項目に及ぶ正方形の事例を紹介したが、正方形そのものの日常性と単純さのせいか、以後、正方形というものを正面から扱った文献は見あたらない。
 折り紙、風呂敷、四畳半。日本には正方形を基調としたデザインが多く、また日本人が正方形を好むという報告も多い註2)。省エネ大国日本。その日本人の感性が良しとする「正方形」は、デザインの現場に様々な問題解決への糸口を与えてくれるかもしれない。本研究ノートは、そのような動機から着手した「正方形」研究註3)のひとつとして位置づけられる。

1.本稿の目的と背景

 紙媒体におけるデザインの基礎実習では、定規とコンパスによる正方形の描画についてそれなりの時間を費やす。しかし電子媒体すなわちソフトウエアによる正方形の描画に時間を費やすことは稀である。なぜなら「矩形ツールで比率を保って描く」という非常に簡単な方法があり、実務上はその知識だけで十分だからである。
 しかし正方形の描画には他にも様々な方法がある。それらを概説することは一見無駄な作業かもしれないが、方程式の解法に数体系の拡張が必要であるのと同様、実質的には無用な概念(技法)でも、その存在を仮定することで総体的な知見が得られることがある。「このツールでどんな表現できるか」ではなく、「この表現にはどんなツールが使えるか」。本研究ノートでは、そのような逆遠近法的な視点で「正方形」の考察を試みる。

2.電子媒体上の正方形

 ピクセル、フォント、アイコン、ボタン、ダイアログボックス、そしてスクリーン(液晶)、電子媒体上には様々な正方形が存在する。
 PC用のモニターでは縦横1:1の正方形ピクセルが原則であり、それを基本単位とするアイコンやフォントも24x24、32x32といった正方形サイズでデザインされている。またそれらを配列して格納するダイアログボックスも必然的にシンプルな整数比をもったサイズとなる。日本の活字と同様、それらは縦組にも横組にも対応する必要があるため、正方形であることが都合がよい。
 スクリーンについては、4:3や16:9といった横長の長方形が大半を占めるが、携帯音楽プレーヤや航空管制市場向けモニターには、正方形の液晶パネルも存在する註4)。DTP用途のモニターで、縦横を回転して使用できるもの(ピボット機能)があるが、縦も横もサイズが欲しい、回転操作が煩わしいといった理由から、正方形液晶モニターの需要も確実に存在している。
 正方形を電子媒体上に作り出す方法は、画素を縦横並べるというラスターグラフィックスの発想と、頂点座標と結線情報から形を数値的に定義するというベクターグラフィックスの発想とに大別できる。ソフトウエアとしては、ペイント系ソフト、ドロー系ソフト、ワープロ・表計算ソフト、また、手続き記述註5)が可能な各種言語の開発環境などが挙げられる。
 現在、PCの利用において最も使用頻度が高く、またその技術仕様の標準化が進んでいるWebブラウザ上では、画像(ラスター)、図形(ベクター)、表(罫線)、スクリプトによる描画など、上記すべての技術がその描画に応用可能である。


3.ラスターツールによる正方形

 ここでいうラスターツールとは、ラスターデータすなわち画素の配列としての画像データを扱うソフトウエアのことである。PhotoshopやTheGIMPといったペイント系ソフトはもちろん、アイコン作成支援ソフトなどもこの類に含まれる。

3.1 画素単位の描画
 ラスター画像は正方形ピクセルの集合である(図1)。したがって、ラスターツールで縦横同じ数になるように画素を塗りつぶせば正方形ができあがる。
 電子媒体上のグラフィックスには「ドット絵」という概念があるが、縦横斜めに移動する2Dゲームのキャラクタなどは、正方形のフォーマットで1ドットずつ描かれている。

Fig1.png 図1.正方形の画素

3.2 領域選択と塗りつぶし
 ラスターツールにおける正方形描画で最も一般的な方法は、まず正方形の領域選択を行い、その内部をブラシツールまたは塗りつぶしツールで塗る(あるいは逆に領域内を消去する)という方法である(図2)。
 正方形の領域選択は、後述のベクターツールと同様、矩形選択で「SHIFT(CTRL)+ドラッグ」という操作で簡単に行うことができる。この操作は初心者にとっては難問となることが多いが、この種のソフトウエアではほぼ標準的なルールである。

Fig2.png 図2.矩形領域の選択

3.3.画像サイズの変更
 画像というものは、そのデータ構造上、矩形の存在である。したがって画像の縦横を等しくする変形(再サンプリング)を行えば画像全体が正方形になる。この操作は紙媒体には不可能な電子媒体特有のものである(あえて紙で実現するとしたら「長辺が縮むよう蛇腹状にジグザクに折る」という操作に相当する)。


4.ベクターツールによる正方形

 ここでいうベクターツールとは、図形情報すなわち、頂点座標とその結線情報、またその輪郭線と塗りに関する属性情報を扱うソフトウエアのことである。IllustratorやInkscapeといった一般的なドローソフトやCADソフトなどが含まれる。

 
4.1.矩形ツール
 ベクターツールで正方形を描く場合、大半はこの矩形ツールが用いられる。矩形ツールは任意の矩形を描くツールであるが、SHIFTやCTRLといった特殊なキーを同時に使用することで、縦横の比率を1:1(あるいは簡単な整数比)に制限して描くことができる。経験値の高いユーザはまず間違いなく(ある意味では惰性的に)この方法で正方形を描く(図3)。

Fig3.png 図3.矩形ツール(縦横比1:1)

 しかし、このキー操作は直感的にアフォードされるものではないため、経験の浅いユーザには難しい。では、その方法が思いつかない場合はどうするか。筆者が担当する授業「CG実習」の経験からすると、その際の学生の解答には、他に3つのパターンがある
 ひとつは、任意の矩形を描画した後、図形の情報を表示するフォームから幅と高さが等しくなるよう数値を入力する方法である(図4)。
 もうひとつは、グリッドを表示させて、縦横の長さが等しくなるよう目視で、あるいはマウスをグリッドにスナップさせて変形する方法である(図5)。いずれにせよ「事後変形」である。
 そして最後に「ほぼ正方形」を描いて「良し」とする解答(数学的には不正解)がある。これは予想外に多く興味深い現象なのだが、この点については、事実の明記に止め、「日本文化と正方形」の問題としてまた別の機会に考察を加えたい。

Fig4.png 図4.数値入力による調整

Fig5.png 図5.グリッドにスナップ

4.2.ペンツール
 矩形ツールで正方形を描くと「面」が強調されるが、「線」のみでも正方形であることには変わりない。すなわち、ペンツールを用いて「4つの頂点を連続的に直線でつなぐ」という方法でも正方形を描くことはできる。矩形ツールと比較すると手間がかかり、形が歪む可能性も高いが、矩形ツールにはない発想も生まれる。
 最も簡単な方法は、グリッドを表示して、正方形になるように線をつなぐという方法で、これは小学生が方眼紙を使って正方形を描くのと同様のプロセスである。
 通常のガイド・グリッドは垂直水平を基軸とするが、斜めの軸で考えることもできる。右に示すように、円と十字を中心揃えにしてできる4つの交点を結ぶと、45°回転した正方形を描くことができる(図6)。手間のかかる方法であり、通常は用いることのない方法であるが、このアイデアは、我々を垂直水平への呪縛から解き放つ。

Fig6.png 図6.円の端点

 ガイドやグリッドを利用せずに描画する方法もある。数値入力や整列(揃え)を用いた「事後変形」である。はじめに任意の4頂点をつないで四角形をつくり、それが正方形になるように順次揃えれば良い。紙媒体では不可能な方法である。
 さてここで、ペンツールが描く「線」というものを通常とは違う観点で見てみよう。数学的には、線とは幅のない長さであり、我々は通常、その幅を意識することはない。しかし「見える線」には確実に「幅」が存在し、実際に線の属性としてパラメータ制御することができる。したがって線と線が十字に交差する部分があると、そこには線幅サイズの正方形ができることになる(図7)。
 道の交わるところには正方形の広場(スクエア)ができる。輪郭線に相当する線は存在しないが、我々はそこに2つの道の重なりを感じ取り、特別な意味を見出している。

Fig7.png 図7.線の交差

4.3.多角形ツール
 矩形ツール、楕円ツール、ペンツール等と同様多角形ツールも基本的なツールのひとつである。しかし、正方形を描くのに多角形ツールを使うという方法は通常の発想では出てこない。なぜなら四角い形をした矩形ツールの存在が直近に見えていることと、多角形ツールのアイコンが五角形や星形をしている(ものが多い)からである。一般にそれは正方形や正三角形といった、角数の少ない形の描画をアフォードしない。しかし、正方形はまさに正多角形の一種であり、辺あるいは角の数を4とすることで簡単に描くことができる。しかも描画時には自由な回転、拡大縮小を同時に行うことができるため、矩形ツールよりも自由度が高い(図8)。
 このツールは任意の正多角形を描くためのツールであり、基本的には円を離散的に描くという動作をしている。つまりコンパスに例えると連続的に円弧を描くのではなく、円を等分する一定の間隔で点を打ちながら、それらを直線でつなぐのである。360°/n を計算することで、n角形を描くための回転角ステップが得られる。いうまでもないが、90°ステップで正方形となる。

Fig8.png 図8.多角形(角の数=4)

4.4.ストロークの破線
 ベクターツールが描く図形には、一般に塗り(フィル)と線(ストローク)の概念がある。前節でペンツールが描く線の交差に注目したのと同様、矩形や多角形、さらに楕円ツールも含め、このストロークを用いた正方形を考えることができる。すなわち、そのスタイルを破線とし、線の幅と破線のステップを同じサイズにすれば、正方形の列ができるのだ。小さな正方形を線上に複数整列させるような造形を考える場合に有効な方法である。ただし曲線の場合は、できあがる図形がわずかに台形状となる(図9)。

Fig9.png 図9.破線(線幅=間隔)


5. フォントによる正方形

 フォントは一般にビットマップフォントとアウトラインフォントに大別できる。前者はラスターデータ、後者はベクターデータである。このフォントデータ、書体のデザインにも依存するが、その中から様々な「正方形」を抽出することができる。特に日本語の文字の場合、縦組みにも横組みにも対応できるよう、基本的に正方形の仮想ボディで設計されているため、その特徴がはっきりと現れる。これらは、文字のままで扱ってもいいし、ベクターツール上でアウトライン化して形状を取り出してもいい。造形要素としては様々な可能性を秘めている。

5.1. ■(しかく)
 テキストツールで「しかく」と入力して変換すると、記号としての「■□◆◇」が候補として現れる。例えばヒラギノ角ゴシックという書体のものをアウトライン化して計測した結果は完全な正方形であった。正方形を自由曲線上に整列配置したい場合に有効な素材となる(図10)。

5.2. コロン・ピリオド等
 アルファベットや半角の記号にも正方形は存在する。コロン、セミコロン、ピリオド、また'i'や'j'の点の部分。通常は小さな円形状であるが、サンセリフ系の多くの書体でそれらに正方形が採用されている(図10)。

Fig10.png 図10.フォントに含まれる正方形

5.3. 国構えの漢字
 図、囲、固、回、国、國、因、団、囮、困。国構えの漢字は、基本的に正方形である。通常の明朝、ゴシックでは、底辺の部分の凹みがあって図形としての正方形にはなり得ないが、丸ゴシック系では、角丸正方形となる。これらを並べると文字列というよりは図形配列のように見えてくる(図11)。

Fig11.png 図11.国構えの漢字

6.表・罫線の利用

 オフィス系のソフトウエアパッケージに含まれるワードプロセッサやスプレッドシート(いわゆる表計算ソフト)、またプレゼンテーションソフトでは、ラスターデータもベクターデータも扱うことができる。その点ではここまで述べたことと同様の描画が実現できるのだが、テーブルの生成に関わるセルやボーダー(罫線)という概念は、ラスター画像ともベクター形式の図形とも別の概念で扱われている。それは基本的にテーブル(表)の構成要素であるから、斜めの構図や曲線の適用はできず、当然垂直・水平のブロック構造としてしか存在しないのだが、これを造形要素として用いることももちろん可能である。
 例えばスプレッドシートでは、行の間隔と列幅を同じサイズにするとセルは正方形になる(図12)。また、セルは縦・横と連結することが可能であるから、Webページのエリア分割にテーブルを利用する(ただしこの方法はW3C非推奨)ことと同様の発想で、スプレッドシート上にも様々なパターン生成が可能である。

Fig12.png 図12.表・罫線

 また一般に、テーブルの表現はXMLを代表とするタグフォーマットで記述することができるため、スプレッドシートからベクターグラフィックスソフトへ、Webブラウザからスプレッドシートへなど、ソフトウエア間でのコピー&ペーストもスムーズにできる場合が多い。
 実際のデザイン業務においても、表形式のグラフィックを作成する場合は、ベクターツールよりもスプレッドシートの方がはるかに能率的である。我々は「業務の種類」と「ソフトウエア」の関係を惰性的に結びつけてしまいがちであるが、柔軟な視点を持てば、電子媒体上での創造行為の可能性は大きく広がりを見せるであろう。
 コンピュータを多用するデザイン教育の現場においても、ベクターツールにのみ依存するのではなく、スプレッドシートの可能性についても言及すべきであろう。

 

7.手続き記述による正方形

 PC上では、手続きの記述による描画も可能である。記述のスタイルはどのような言語でもほぼ共通しているので、ここでは、テキストエディターとブラウザのみで即グラフィックスの描画が得られるという利点を考え、W3CのHTML5で採用された CANVAS 註6)を用いて、ブラウザ上への描画手順を概説したい。

html_js.png

 実際に描画を実現するには、右に示すような、CANVASを表示するHTMLファイルと、描画を記述したJavaScriptファイルの2つを用意することが必要である註7)
 尚、以下の事例では「描画を行うコード」の部分のみを掲載する(その他のコードは共通である)。

7.1 rect()関数による描画 
 ベクターグラフィックスにおける矩形ツールと同様、始点(x,y)と幅・高さ(width,height)を与えるだけで簡単に描画が実現する。

dc.fillRect(left, top, width, height);

7.2 lineTo()関数による描画
 ペンツール同様、4つの頂点(x0,y0)~(x3,y3)をループ状に順次線分で結べばよい(図13)。

dc.beginPath();
dc.moveTo( x0, y0 );
dc.lineTo( x1, y1 );
dc.lineTo( x2, y2 );
dc.lineTo( x3, y3 );
dc.closePath();
dc.stroke();

Fig13.png 図13.線の接続

7.3.三角関数による円描画の離散化
 以下は円のパラメータ表現である。

x = r * cos(θ)
y = r * sin(θ)

 多角形ツール同様、この表現を用いて90°間隔の4点を連結すれば正方形となる。正方形は円を離散化した特殊形である(図14)。
 

dc.beginPath();
dc.moveTo( r + center, center - 0 );
for( deg = 0; deg <= 360; deg += 90 ){
    rad = deg/180*3.14159;
    x = r * Math.cos(rad );
    y = r * Math.sin( rad );
    dc.lineTo( x + center, center - y );
}
dc.closePath();
dc.stroke();

Fig14.png 図14.円(90°ステップ)

7.4.三角関数のべき乗による超楕円描画
 円のパラメータ表現を応用すると、超楕円の描画を行う式ができる註8)

|x| = r * cosp(θ)
|y| = r * sinp(θ)

 これはp=1で7.3.と同じ円。pを0に近づけた場合に、半径rの円に外接する正方形となる(図15)。
 尚、このプログラムでp=2とすると、

|x| + |y| = r

という式が得られる。半径rの円に内接する正方形を表す最もシンプルな数式である。7.3.では、正方形は「円を離散化」した特殊形であったが、ここでは「円を拡張」した特殊形である。

dc.beginPath();
dc.moveTo( right, center );
for( deg = 0; deg <= 90; deg++ ){
    rad = deg/180*3.14159;
    x = radius * Math.pow( Math.cos( rad ), p ) + center;
    y = center - radius * Math.pow( Math.sin( rad ), p );
    dc.lineTo( x, y );
}
: 第2-4象限分は省略 
dc.closePath(); 
dc.stroke();

Fig15.png 図15.超楕円(P=3~0.1)


8.正方形描画とその応用

 ここでは有理数・無理数の算出やパターンの生成など、正方形の様々な応用可能性に触れる。

8.1. 有理数 1/n の算出
 一般に1/nというサイズを作図で求める場合は、図形の相似を利用してn:1から1:1/nを得る。しかしベクターツールの場合は非常に簡単で、「複製してn倍に並んだ全体を元のサイズまで縮小する」という方法で1/nのサイズが得られる(図16-1)。描いたものをまとめて拡大縮小(変形)できるという発想は電子媒体特有のものである。 

8.2. √の算出
 自然数の√の図形的算出は、先行研究註3)で述べた定規とコンパスによる作図と同様、まず対角線で√2、それを水平に倒してできる長方形の対角線で√3 … 以下順次同様に求められる(図16-2)。

8.3. 黄金比の算出
 これも定規とコンパスによるものと同様、正方形を左右に分割した長方形の対角線(長さ√5/2)を底辺上に倒せば、1/2+√5/2≒1.618が得られる(図16-3)。

8.4. πの算出
 ベクターでは難しいが、ラスターでは近似値を求める方法がある。まず、正方形の頂点を中心に辺(長さr)を90°回転してできる1/4円を描く。正方形の面積Sと1/4円の面積Fは、S:F=r2:πr2/4の関係があるので、π=4x(F/S)と書ける。つまり、4x「1/4円領域の画素数」/「正方形領域の画素数」でπの近似値が得られる(図16-4)。

Fig16.png 図16 有理数・無理数の算出

8.5. アフィン変換によるパターン生成
 一般にグラフィックツール上で可能な変形操作は、移動、回転、拡大縮小という3つのアフィン変換に還元できる。それぞれ非常シンプルな変形だがそれらの変換を合成すると、様々なパターンを創出することができる(図17)。これらは通常「最初の複製操作を繰り返す」ことで実現するが、変形を行うダイアログから数値を直接入力して自動的に生成することも可能である。

Fig17.png 図17.移動・回転・拡大縮小によるパターン生成

8.6. パス上配置、エリア内の敷き詰め
 複数の正方形を配列的に扱うには手続き的手法が必要だが、文字としての「□」の連続を配列として用いるのは簡単である。この発想により、正方形の配列をパス上に並べたり、複雑なエリア内に敷き詰めたりすることが簡単にできる(図18)。

Fig18.png 図18.パス上文字とエリア内文字


9.電子媒体と紙媒体

 ここでは電子媒体上での正方形描画に特徴的なキーワードをいくつか取り上げ、それらが紙媒体(描画用具)にも応用可能かどうか考えてみたい。

9.1.矩形ツールと三角定規 
 矩形ツールによる正方形描画の要点は「縦横を等しく保ったまま対角線方向にスライドする」ということである。製品としては少数だが、三角定規のなかには直角部分を2等分する補助線のついたものがあり、この補助線同士が重なるように2枚の三角定規を使えば、任意のサイズの正方形を簡単に得ることができる(図19)。

Fig19.png 図19.三角定規でつくる正方形

9.2.ペンツールとラインテープ
 ペンツールを画材におきかえると、例えばラインテープのようなひも状のものがそれに該当する。先行研究註3)でも述べたように、「ひも」は直線定規としてもコンパスとしても機能する万能の描画ツールである。
 
9.3. 多角形ツールと分度器+コンパス
 多角形ツールの発想は「円をn等分する」というものである。分度器とコンパスが合体したサークルカッターのような道具を用いて一定の角度ステップで離散的に点を打ってつなげば、任意の正多角形が簡単に描ける(図20)。煩雑かつ拡張性のない「正五角形の描き方」を学習するより、よほどシンプルで現実的である。
 
Fig20.png 図20.円をn等分する道具

9.4 超楕円のパラメトリックな描画
 計算結果を画面にプロットする発想は原理的には紙の上でも可能である。7.4.のp→0の場合についてはコンピュータを用いるのが現実的だが、p=2の場合については、|x|+|y|=r とその関係がシンプルであり、機械的な描画も可能であろう。

9.5 アフィン変換
 電子媒体では、移動・回転・拡大縮小といったアフィン変換が可能である。描画後の変形、すなわち事後変形であり、紙媒体では不可能な操作である。元に戻す「UnDo」同様、後で調整できるという感覚は、電子媒体に特有のものである。
 一方、紙媒体では「折る」という操作が可能である。電子媒体が時間軸において変化するのに対し、紙媒体は表裏のある3次元的存在であり、奥行き方向への変形の可能性がある。

9.6.グリッド
 方眼紙は単位が固定されているが、電子媒体上のグリッドは基準サイズを自由に変更することができる。与えられた造形要素に事後的にグリッドを合わせられる点が電子媒体の強みといえよう。しかし「折り目をグリッドにする」という発想があれば、紙でもそれが可能である。縦横に複数回折り目をつける、折り重ねてハサミを入れる…といった方法があることも忘れてはならないだろう。
 小学校で方眼紙の利用、中学校で定規とコンパスという学びの順序があるせいか、方眼のトレースを幼稚な手法と感じる人が多いようだ。しかしグリッドの利用は、画面全体の秩序を向上させ、情報を読みやすくする。デザイン教育の現場ではグリッドを積極的に使うべきであろう。東大合格生のノートの分析註9)から発案されてヒット商品となった「ドット入り罫線ノート(コクヨS&T)」も、要するに方眼紙である。

9.7.複製と整列
 紙と絵の具でn個の複製をつくるには、n倍の時間とn倍の絵の具が必要であるが、電子媒体上では複製は一瞬、メモリー資源の消費も(データの記述を効率良くすれば)わずかの増分で済む。これは電子媒体の強みである。
 一方、紙媒体の場合「複数枚重ねて切る」という方法であれば「複製」が可能である。電子媒体における垂直・水平方向への複製・整列とは異なる、奥行き(重ね)方向への複製・整列である。


10.まとめ

 電子媒体上に描かれる正方形について、様々な角度から概説を試みた。それらは「形の理解」と「メディアの理解」という2つの観点からまとめることができる。
 まず「形」としては、描画ツールや手法の違いから以下のような様々な理解ができる。すなわち正方形とは、「斜め45°の対角線をもつ矩形」、「同じ距離を進んで90°進路変更する4つの線分の連結」、「90°間隔で離散化した円に内接する多角形」、「円に内接・外接する超楕円の特殊なケース(p=2及びp→0)」であり、さらに「幅をもった線同士の交差部分」、「アイコンやフォントとして定義された既存の形」であるということもできる。「形」は、どのような手法を用いてアプローチするかによって、複数の起源をもつ図形として捉える直すことができるのだ。
 「メディア」による様態の違いという観点からいえば、電子媒体上での正方形は、サイズが可変であること、事後変形(アフィン変換)が可能であること、複製、整列が容易であることなど、「元に戻す」ことも含めた「変形」すなわち時間軸(t)の存在を前提とした描画操作が可能であるという特徴をもつ。一方、紙媒体上の正方形は、それが表裏をもつ3次元的な存在であり、「折る」、「重ねる」といった平面に直交する軸(z)の存在を前提とした描画(造形)操作が可能となる点が、電子媒体とは対照的な特徴である。
 「形の理解」と「メディアの理解」。正方形は対称性の高いプリミティブな図形であるから、これら正方形に関する知見は、より複雑な図形の描画にも応用できるであろう。

 本稿では、一般に自明のこととして関心の対象外になっている「正方形の描画」について、電子媒体上での描画を事例として、様々なアプローチを試みた。通常は用いることのないツールや手法でも、それらをあえて列挙して視野に入れることで、「正方形」という対象の様々な側面・本質が見えてくる。

 美術・デザインの教育現場でコンピュータが日常的に使用されるようになった今日、従来の表現教育で一般的な問いかけ、すなわち「この画材・道具でどんな表現ができるか」という問いかけだけでは十分とは言い難い。素材もツールも無限にある状況下では、逆説的な問いかけ、すなわち、「この表現にはどんなツールが使えるか」という問いかけが必要なのではないだろうか。
 道具はひとつとは限らない。茶道の世界に道具を「見立てる」という発想があるように、異なるアプローチを企てることは、かたちの本質を見極めるための第一歩である。

 本研究ノートで紹介した描画手法は、筆者が関わる実習やゼミ、また描画実験註10)等、九州産業大学芸術学部デザイン学科の学生諸氏の協力によって得られた知見である。この場を借りて感謝の意を表したい。


1) ブルーノムナーリ(上松正直訳), 1971,正方形-その発見と展開,美術出版社
2) 桜井進,2006,雪月花の数学,祥伝社
 渡辺信,1998,正方形が好きな日本文化と数学,数学教育学会発表論文集1998(2)
 牟田淳,2008,アートのための数学,オーム社
3)「正方形」研究・序説,井上貢一,2010,九州産業大学芸術学会研究報告Vol.41,pp.93-100
4) Apple iPod nano, 1.54インチ(対角), 240×240
 EIZO RaptorSQ2801, 71cm (28.05)型, 2048x2048
5) 最も基本的なコンピュータグラフィックスの手法。プログラミング言語を用い、一定の手続き(計算規則)にしたがって自動的にグラフィックスを生成させるもの。
6) W3C CANVAS:動的な画像の描画のためのHTML要素で、W3C(World Wide Web Consortium)が次世代HTML標準、HTML5に採用。Firefox,GoogleChrome,Safari等のブラウザではすでに実装されており、ここで紹介したソースはそれらで動作確認できる。
7) 紙面の都合で変数の初期化部分は省略している。top,bottom,left,right,width,heightといった部分には具体的な値が入る。
8) これは、超楕円の式 |x/r|(2/p) + |y/r|(2/p) = 1 
 をパラメータ表現したもの。
 楕円の方程式 (x/a)2 +(y/b)2 = 1 の応用である。
9) 太田あや,2008,「東大合格生のノートはかならず美しい」,文藝春秋
10) 井上貢一,2010,電子媒体における正方形の描画-「正方形」を基調としたデザインのための基礎研究-,芸術工学会誌,Vol.54,pp.68-69




PAGES

GUIDE

DATA

添付ファイル: filehtml_js.png 584件 [詳細] fileFig9.png 670件 [詳細] fileFig8.png 600件 [詳細] fileFig7.png 584件 [詳細] fileFig6.png 586件 [詳細] fileFig5.png 548件 [詳細] fileFig4.png 587件 [詳細] fileFig3.png 563件 [詳細] fileFig20.png 652件 [詳細] fileFig2.png 565件 [詳細] fileFig1.png 568件 [詳細] fileFig10.png 595件 [詳細] fileFig18.png 607件 [詳細] fileFig17.png 631件 [詳細] fileFig16.png 561件 [詳細] fileFig15.png 565件 [詳細] fileFig14.png 581件 [詳細] fileFig13.png 536件 [詳細] fileFig12.png 555件 [詳細] fileFig11.png 657件 [詳細] fileFig19.png 544件 [詳細]
Last-modified: 2019-07-05 (金) 20:51:30