電子媒体における正方形の描画 をテンプレートにして作成

開始行:
*電子媒体における正方形の描画 &small(ー芸術工学的「正方形」研究 Iー); Drawing "SQUARES" with electronic media ーStudy on "SQUARES" in field of design Iー ~ ***はじめに 　画素から広場まで、我々の周囲には様々な正方形が存在する... 　折り紙、風呂敷、四畳半。日本には正方形を基調としたデザ... ~ ***1.本稿の目的と背景 　紙媒体におけるデザインの基礎実習では、定規とコンパスに... 　しかし正方形の描画には他にも様々な方法がある。それらを... ~ ***2.電子媒体上の正方形 　ピクセル、フォント、アイコン、ボタン、ダイアログボック... 　PC用のモニターでは縦横1:1の正方形ピクセルが原則であり、... 　スクリーンについては、4:3や16:9といった横長の長方形が大... 　正方形を電子媒体上に作り出す方法は、画素を縦横並べると... 　現在、PCの利用において最も使用頻度が高く、またその技術... ~ ***3.ラスターツールによる正方形 　ここでいうラスターツールとは、ラスターデータすなわち画... 3.1 画素単位の描画 　ラスター画像は正方形ピクセルの集合である(図1)。したがっ... 　電子媒体上のグラフィックスには「ドット絵」という概念が... &lightbox(Fig1.png,,20%);　図1.正方形の画素 3.2 領域選択と塗りつぶし 　ラスターツールにおける正方形描画で最も一般的な方法は、... 　正方形の領域選択は、後述のベクターツールと同様、矩形選... &lightbox(Fig2.png,,20%);　図2.矩形領域の選択 3.3.画像サイズの変更 　画像というものは、そのデータ構造上、矩形の存在である。... ~ ***4.ベクターツールによる正方形 　ここでいうベクターツールとは、図形情報すなわち、頂点座... 　 4.1.矩形ツール 　ベクターツールで正方形を描く場合、大半はこの矩形ツール... &lightbox(Fig3.png,,20%);　図3.矩形ツール(縦横比1:1) 　しかし、このキー操作は直感的にアフォードされるものでは... 　ひとつは、任意の矩形を描画した後、図形の情報を表示する... 　もうひとつは、グリッドを表示させて、縦横の長さが等しく... 　そして最後に「ほぼ正方形」を描いて「良し」とする解答(数... &lightbox(Fig4.png,,20%);　図4.数値入力による調整 &lightbox(Fig5.png,,20%);　図5.グリッドにスナップ 4.2.ペンツール 　矩形ツールで正方形を描くと「面」が強調されるが、「線」... 　最も簡単な方法は、グリッドを表示して、正方形になるよう... 　通常のガイド・グリッドは垂直水平を基軸とするが、斜めの... &lightbox(Fig6.png,,20%);　図6.円の端点 　ガイドやグリッドを利用せずに描画する方法もある。数値入... 　さてここで、ペンツールが描く「線」というものを通常とは... 　道の交わるところには正方形の広場(スクエア)ができる。輪... &lightbox(Fig7.png,,20%);　図7.線の交差 4.3.多角形ツール 　矩形ツール、楕円ツール、ペンツール等と同様多角形ツール... 　このツールは任意の正多角形を描くためのツールであり、基... &lightbox(Fig8.png,,20%);　図8.多角形(角の数=4) 4.4.ストロークの破線 　ベクターツールが描く図形には、一般に塗り(フィル)と線(ス... &lightbox(Fig9.png,,20%);　図9.破線(線幅=間隔) ~ ***5.　フォントによる正方形 　フォントは一般にビットマップフォントとアウトラインフォ... 5.1. ■(しかく) 　テキストツールで「しかく」と入力して変換すると、記号と... 5.2. コロン・ピリオド等 　アルファベットや半角の記号にも正方形は存在する。コロン... &lightbox(Fig10.png,,20%);　図10.フォントに含まれる正方形 5.3. 国構えの漢字 　図、囲、固、回、国、國、因、団、囮、困。国構えの漢字は... &lightbox(Fig11.png,,20%);　図11.国構えの漢字 ~ ***6.表・罫線の利用 　オフィス系のソフトウエアパッケージに含まれるワードプロ... 　例えばスプレッドシートでは、行の間隔と列幅を同じサイズ... &lightbox(Fig12.png,,20%);　図12.表・罫線 　また一般に、テーブルの表現はXMLを代表とするタグフォーマ... 　実際のデザイン業務においても、表形式のグラフィックを作... 　コンピュータを多用するデザイン教育の現場においても、ベ... 　 ~ ***7.手続き記述による正方形 　PC上では、手続きの記述による描画も可能である。記述のス... #lightbox(html_js.png,right,around,25%) 　実際に描画を実現するには、右に示すような、CANVASを表示... 　尚、以下の事例では「描画を行うコード」の部分のみを掲載... #clear() 7.1 rect()関数による描画　 　ベクターグラフィックスにおける矩形ツールと同様、始点(x,... dc.fillRect(left, top, width, height); 7.2 lineTo()関数による描画 　ペンツール同様、4つの頂点(x0,y0)～(x3,y3)をループ状に順... dc.beginPath(); dc.moveTo( x0, y0 ); dc.lineTo( x1, y1 ); dc.lineTo( x2, y2 ); dc.lineTo( x3, y3 ); dc.closePath(); dc.stroke(); &lightbox(Fig13.png,,20%);　図13.線の接続 7.3.三角関数による円描画の離散化 　以下は円のパラメータ表現である。 x = r * cos(θ) y = r * sin(θ) 　多角形ツール同様、この表現を用いて90°間隔の4点を連結す... 　 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(); &lightbox(Fig14.png,,20%);　図14.円(90°ステップ) 7.4.三角関数のべき乗による超楕円描画 　円のパラメータ表現を応用すると、超楕円の描画を行う式が... |x| = r * cosp(θ) |y| = r * sinp(θ) 　これはp=1で7.3.と同じ円。pを0に近づけた場合に、半径rの... 　尚、このプログラムでp=2とすると、 |x| + |y| = r という式が得られる。半径rの円に内接する正方形を表す最もシ... 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(); &lightbox(Fig15.png,,20%);　図15.超楕円(P=3～0.1) ~ ***8.正方形描画とその応用 　ここでは有理数・無理数の算出やパターンの生成など、正方... 8.1. 有理数 1/n の算出 　一般に1/nというサイズを作図で求める場合は、図形の相似を... 8.2. √の算出 　自然数の√の図形的算出は、先行研究SUP{註3)};で述べた定規... 8.3. 黄金比の算出 　これも定規とコンパスによるものと同様、正方形を左右に分... 8.4. πの算出 　ベクターでは難しいが、ラスターでは近似値を求める方法が... &lightbox(Fig16.png,,20%);　図16 有理数・無理数の算出 8.5. アフィン変換によるパターン生成 　一般にグラフィックツール上で可能な変形操作は、移動、回... &lightbox(Fig17.png,,20%);　図17.移動・回転・拡大縮小によ... 8.6. パス上配置、エリア内の敷き詰め 　複数の正方形を配列的に扱うには手続き的手法が必要だが、... &lightbox(Fig18.png,,20%);　図18.パス上文字とエリア内文字 ~ ***9.電子媒体と紙媒体 　ここでは電子媒体上での正方形描画に特徴的なキーワードを... 9.1.矩形ツールと三角定規　 　矩形ツールによる正方形描画の要点は「縦横を等しく保った... &lightbox(Fig19.png,,20%);　図19.三角定規でつくる正方形 9.2.ペンツールとラインテープ 　ペンツールを画材におきかえると、例えばラインテープのよ... 　 9.3. 多角形ツールと分度器＋コンパス 　多角形ツールの発想は「円をn等分する」というものである。... 　 &lightbox(Fig20.png,,20%);　図20.円をn等分する道具 9.4 超楕円のパラメトリックな描画 　計算結果を画面にプロットする発想は原理的には紙の上でも... 9.5 アフィン変換 　電子媒体では、移動・回転・拡大縮小といったアフィン変換... 　一方、紙媒体では「折る」という操作が可能である。電子媒... 9.6.グリッド 　方眼紙は単位が固定されているが、電子媒体上のグリッドは... 　小学校で方眼紙の利用、中学校で定規とコンパスという学び... 9.7.複製と整列 　紙と絵の具でn個の複製をつくるには、n倍の時間とn倍の絵の... 　一方、紙媒体の場合「複数枚重ねて切る」という方法であれ... ~ ***10.まとめ 　電子媒体上に描かれる正方形について、様々な角度から概説... 　まず「形」としては、描画ツールや手法の違いから以下のよ... 　「メディア」による様態の違いという観点からいえば、電子... 　「形の理解」と「メディアの理解」。正方形は対称性の高い... 　本稿では、一般に自明のこととして関心の対象外になってい... 　美術・デザインの教育現場でコンピュータが日常的に使用さ... 　道具はひとつとは限らない。茶道の世界に道具を「見立てる... 　本研究ノートで紹介した描画手法は、筆者が関わる実習やゼ... ~ ''註'' 1) ブルーノムナーリ(上松正直訳), 1971,正方形-その発見と展... 2) 桜井進,2006,雪月花の数学,祥伝社 　渡辺信,1998,正方形が好きな日本文化と数学,数学教育学会発... 　牟田淳,2008,アートのための数学,オーム社 3)「正方形」研究・序説,井上貢一,2010,九州産業大学芸術学会... 4) Apple iPod nano, 1.54インチ(対角), 240×240 　EIZO RaptorSQ2801, 71cm (28.05)型, 2048x2048 5) 最も基本的なコンピュータグラフィックスの手法。プログラ... 6) W3C CANVAS：動的な画像の描画のためのHTML要素で、W3C(Wo... 7) 紙面の都合で変数の初期化部分は省略している。top,bottom... 8) これは、超楕円の式　|x/r|(2/p) + |y/r|(2/p) = 1　 　をパラメータ表現したもの。 　楕円の方程式　(x/a)2 +(y/b)2 = 1　の応用である。 9) 太田あや,2008,「東大合格生のノートはかならず美しい」,... 10) 井上貢一,2010,電子媒体における正方形の描画－「正方形... ~ ~

終了行:
*電子媒体における正方形の描画 &small(ー芸術工学的「正方形」研究 Iー); Drawing "SQUARES" with electronic media ーStudy on "SQUARES" in field of design Iー ~ ***はじめに 　画素から広場まで、我々の周囲には様々な正方形が存在する... 　折り紙、風呂敷、四畳半。日本には正方形を基調としたデザ... ~ ***1.本稿の目的と背景 　紙媒体におけるデザインの基礎実習では、定規とコンパスに... 　しかし正方形の描画には他にも様々な方法がある。それらを... ~ ***2.電子媒体上の正方形 　ピクセル、フォント、アイコン、ボタン、ダイアログボック... 　PC用のモニターでは縦横1:1の正方形ピクセルが原則であり、... 　スクリーンについては、4:3や16:9といった横長の長方形が大... 　正方形を電子媒体上に作り出す方法は、画素を縦横並べると... 　現在、PCの利用において最も使用頻度が高く、またその技術... ~ ***3.ラスターツールによる正方形 　ここでいうラスターツールとは、ラスターデータすなわち画... 3.1 画素単位の描画 　ラスター画像は正方形ピクセルの集合である(図1)。したがっ... 　電子媒体上のグラフィックスには「ドット絵」という概念が... &lightbox(Fig1.png,,20%);　図1.正方形の画素 3.2 領域選択と塗りつぶし 　ラスターツールにおける正方形描画で最も一般的な方法は、... 　正方形の領域選択は、後述のベクターツールと同様、矩形選... &lightbox(Fig2.png,,20%);　図2.矩形領域の選択 3.3.画像サイズの変更 　画像というものは、そのデータ構造上、矩形の存在である。... ~ ***4.ベクターツールによる正方形 　ここでいうベクターツールとは、図形情報すなわち、頂点座... 　 4.1.矩形ツール 　ベクターツールで正方形を描く場合、大半はこの矩形ツール... &lightbox(Fig3.png,,20%);　図3.矩形ツール(縦横比1:1) 　しかし、このキー操作は直感的にアフォードされるものでは... 　ひとつは、任意の矩形を描画した後、図形の情報を表示する... 　もうひとつは、グリッドを表示させて、縦横の長さが等しく... 　そして最後に「ほぼ正方形」を描いて「良し」とする解答(数... &lightbox(Fig4.png,,20%);　図4.数値入力による調整 &lightbox(Fig5.png,,20%);　図5.グリッドにスナップ 4.2.ペンツール 　矩形ツールで正方形を描くと「面」が強調されるが、「線」... 　最も簡単な方法は、グリッドを表示して、正方形になるよう... 　通常のガイド・グリッドは垂直水平を基軸とするが、斜めの... &lightbox(Fig6.png,,20%);　図6.円の端点 　ガイドやグリッドを利用せずに描画する方法もある。数値入... 　さてここで、ペンツールが描く「線」というものを通常とは... 　道の交わるところには正方形の広場(スクエア)ができる。輪... &lightbox(Fig7.png,,20%);　図7.線の交差 4.3.多角形ツール 　矩形ツール、楕円ツール、ペンツール等と同様多角形ツール... 　このツールは任意の正多角形を描くためのツールであり、基... &lightbox(Fig8.png,,20%);　図8.多角形(角の数=4) 4.4.ストロークの破線 　ベクターツールが描く図形には、一般に塗り(フィル)と線(ス... &lightbox(Fig9.png,,20%);　図9.破線(線幅=間隔) ~ ***5.　フォントによる正方形 　フォントは一般にビットマップフォントとアウトラインフォ... 5.1. ■(しかく) 　テキストツールで「しかく」と入力して変換すると、記号と... 5.2. コロン・ピリオド等 　アルファベットや半角の記号にも正方形は存在する。コロン... &lightbox(Fig10.png,,20%);　図10.フォントに含まれる正方形 5.3. 国構えの漢字 　図、囲、固、回、国、國、因、団、囮、困。国構えの漢字は... &lightbox(Fig11.png,,20%);　図11.国構えの漢字 ~ ***6.表・罫線の利用 　オフィス系のソフトウエアパッケージに含まれるワードプロ... 　例えばスプレッドシートでは、行の間隔と列幅を同じサイズ... &lightbox(Fig12.png,,20%);　図12.表・罫線 　また一般に、テーブルの表現はXMLを代表とするタグフォーマ... 　実際のデザイン業務においても、表形式のグラフィックを作... 　コンピュータを多用するデザイン教育の現場においても、ベ... 　 ~ ***7.手続き記述による正方形 　PC上では、手続きの記述による描画も可能である。記述のス... #lightbox(html_js.png,right,around,25%) 　実際に描画を実現するには、右に示すような、CANVASを表示... 　尚、以下の事例では「描画を行うコード」の部分のみを掲載... #clear() 7.1 rect()関数による描画　 　ベクターグラフィックスにおける矩形ツールと同様、始点(x,... dc.fillRect(left, top, width, height); 7.2 lineTo()関数による描画 　ペンツール同様、4つの頂点(x0,y0)～(x3,y3)をループ状に順... dc.beginPath(); dc.moveTo( x0, y0 ); dc.lineTo( x1, y1 ); dc.lineTo( x2, y2 ); dc.lineTo( x3, y3 ); dc.closePath(); dc.stroke(); &lightbox(Fig13.png,,20%);　図13.線の接続 7.3.三角関数による円描画の離散化 　以下は円のパラメータ表現である。 x = r * cos(θ) y = r * sin(θ) 　多角形ツール同様、この表現を用いて90°間隔の4点を連結す... 　 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(); &lightbox(Fig14.png,,20%);　図14.円(90°ステップ) 7.4.三角関数のべき乗による超楕円描画 　円のパラメータ表現を応用すると、超楕円の描画を行う式が... |x| = r * cosp(θ) |y| = r * sinp(θ) 　これはp=1で7.3.と同じ円。pを0に近づけた場合に、半径rの... 　尚、このプログラムでp=2とすると、 |x| + |y| = r という式が得られる。半径rの円に内接する正方形を表す最もシ... 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(); &lightbox(Fig15.png,,20%);　図15.超楕円(P=3～0.1) ~ ***8.正方形描画とその応用 　ここでは有理数・無理数の算出やパターンの生成など、正方... 8.1. 有理数 1/n の算出 　一般に1/nというサイズを作図で求める場合は、図形の相似を... 8.2. √の算出 　自然数の√の図形的算出は、先行研究SUP{註3)};で述べた定規... 8.3. 黄金比の算出 　これも定規とコンパスによるものと同様、正方形を左右に分... 8.4. πの算出 　ベクターでは難しいが、ラスターでは近似値を求める方法が... &lightbox(Fig16.png,,20%);　図16 有理数・無理数の算出 8.5. アフィン変換によるパターン生成 　一般にグラフィックツール上で可能な変形操作は、移動、回... &lightbox(Fig17.png,,20%);　図17.移動・回転・拡大縮小によ... 8.6. パス上配置、エリア内の敷き詰め 　複数の正方形を配列的に扱うには手続き的手法が必要だが、... &lightbox(Fig18.png,,20%);　図18.パス上文字とエリア内文字 ~ ***9.電子媒体と紙媒体 　ここでは電子媒体上での正方形描画に特徴的なキーワードを... 9.1.矩形ツールと三角定規　 　矩形ツールによる正方形描画の要点は「縦横を等しく保った... &lightbox(Fig19.png,,20%);　図19.三角定規でつくる正方形 9.2.ペンツールとラインテープ 　ペンツールを画材におきかえると、例えばラインテープのよ... 　 9.3. 多角形ツールと分度器＋コンパス 　多角形ツールの発想は「円をn等分する」というものである。... 　 &lightbox(Fig20.png,,20%);　図20.円をn等分する道具 9.4 超楕円のパラメトリックな描画 　計算結果を画面にプロットする発想は原理的には紙の上でも... 9.5 アフィン変換 　電子媒体では、移動・回転・拡大縮小といったアフィン変換... 　一方、紙媒体では「折る」という操作が可能である。電子媒... 9.6.グリッド 　方眼紙は単位が固定されているが、電子媒体上のグリッドは... 　小学校で方眼紙の利用、中学校で定規とコンパスという学び... 9.7.複製と整列 　紙と絵の具でn個の複製をつくるには、n倍の時間とn倍の絵の... 　一方、紙媒体の場合「複数枚重ねて切る」という方法であれ... ~ ***10.まとめ 　電子媒体上に描かれる正方形について、様々な角度から概説... 　まず「形」としては、描画ツールや手法の違いから以下のよ... 　「メディア」による様態の違いという観点からいえば、電子... 　「形の理解」と「メディアの理解」。正方形は対称性の高い... 　本稿では、一般に自明のこととして関心の対象外になってい... 　美術・デザインの教育現場でコンピュータが日常的に使用さ... 　道具はひとつとは限らない。茶道の世界に道具を「見立てる... 　本研究ノートで紹介した描画手法は、筆者が関わる実習やゼ... ~ ''註'' 1) ブルーノムナーリ(上松正直訳), 1971,正方形-その発見と展... 2) 桜井進,2006,雪月花の数学,祥伝社 　渡辺信,1998,正方形が好きな日本文化と数学,数学教育学会発... 　牟田淳,2008,アートのための数学,オーム社 3)「正方形」研究・序説,井上貢一,2010,九州産業大学芸術学会... 4) Apple iPod nano, 1.54インチ(対角), 240×240 　EIZO RaptorSQ2801, 71cm (28.05)型, 2048x2048 5) 最も基本的なコンピュータグラフィックスの手法。プログラ... 6) W3C CANVAS：動的な画像の描画のためのHTML要素で、W3C(Wo... 7) 紙面の都合で変数の初期化部分は省略している。top,bottom... 8) これは、超楕円の式　|x/r|(2/p) + |y/r|(2/p) = 1　 　をパラメータ表現したもの。 　楕円の方程式　(x/a)2 +(y/b)2 = 1　の応用である。 9) 太田あや,2008,「東大合格生のノートはかならず美しい」,... 10) 井上貢一,2010,電子媒体における正方形の描画－「正方形... ~ ~

ページ名: