第二章形を描く

　ｒｅｆｅｒｎｃｅ日本語

　http://tetraleaf.com/p5_reference_alpha/

　１直線を描く

　ｐｒｏｃｅｓｓｉｎｇのエディターを起動する。

　プログラムは上から順番に読み取られ、実行される。

　関数の説明

　ｓｉｚｅ（）は画面の大きさを決める。size(300,300);

　ｌｉｎｅ（）は直線の始点ｘ軸２００、ｙ軸０、終点ｘ軸０ｙ軸２００と指定する。

　ｐｒｉｎｔ（””）は下部表示部に文章を表示する。

　プログラムを書く（　hello worldプログラム）

　size(300,300);
　line(200,0,0,200);
　print("直線を描く");
　print("x200ピクセルｙ０ピクセル、ｘ０ピクセルｙ２００ピクセル");

　上部のｓｋｅｔｃｈをクリックする。

　図形が表示される。

　x軸２００ｙ軸０　　　　　　　　ａ

　 ｂ　ｘ軸０ｙ軸２００

 　直線を描く
　
　x200ピクセルｙ０ピクセル、ｘ０ピクセルｙ２００ピクセル

　2 作品をＰＤＦにする方法。

　ＰＤＦに出力したいプログラムを開く

　ｉｍｐｏｒｔ　ｌｉｂｒａｒｙを開く

　ｐｄｆを選択する

　import processing.pdf.*;行が加えられる

　size(200,200,PDF"sanple2.pdf");

　としてＰＤＦ”出力ファイル名”を加える

　プログラムを実行する。ｒｕｎ

　ウインドウは表示されない。

ｓｋｅｔｃｈを開きｓｈｏｗ　ｓｋｅｔｃｈ　ｆｏｌｄｅｒをクリックする。

　ｐｄｆファイルが確認できる。

　ｐｄｆファイルとして利用できる。

 　３　四角形を作る。図形に色をつける。

  size(200,200);　　　　　　　　　　　　　　　　　画面のサイズをきめる
　point(50,50);　　　　　　　　　　　　　　　　　　点を描く(x座標、ｙ座標）
  rectMode(CENTER);　　　　　　　　　　　　　四角形の位置　　　　　
  fill(43,237,196);　　　　　　　　　　　　　　　　四角形の色（ＲＧＢ）
  rect(50,50,50,50);　　　　　　　　　　　　　　左上角ｘ座標、ｙ座標、矩形幅、高さ
  print("四角形を描く。色を図形につける。");　説明
  print("色はツールで選択する。");　　　　　番号Ｒ４３、Ｇ２３７Ｂ１９６で決める。

 

 

Name		rectMode()
Examples		rectMode(CENTER_DIAMETER); rect(35, 35, 50, 50); rectMode(CORNER); fill(102); rect(35, 35, 50, 50);
Description		rectMode()によって長方形の起点が変更される。長方形モードの初期値は、rectMode(CORNER)で、形の左上の位置へ定められている。rectMode(CENTER_DIAMETER)機能は中心点からシェイプを描く。Processingは大文字小文字の区別する言語であるため、パラメータは"大文字"によって書かなければならない。
Syntax		rectMode(MODE)
Parameters		MODE   CORNERかCENTER_DIAMETERのどちらか
Returns		なし
Usage		Web & Application

Examples		rect(30, 20, 55, 55);
Description		長方形をスクリーンに描く。長方形は４つの９０度の角からなる平面体である。初めの２パラメータは左上の角を指し、３つめは長さ、４つめは高さを表す。また、rectMode() 機能を使って長方形の起点をかえる。
Syntax		rect(x, y, width, height);
Parameters		x   整数か浮動少数点数: 長方形のy-座標値 y   整数か浮動少数点数:長方形のy-座標値 width   整数か浮動少数点数: 長方形の幅 height   整数か浮動少数点数: 長方形の高さ
Returns		なし
Usage		Web & Application

PDFファイルに変換するため修正したオウログラム。

 import processing.pdf.*;
 size(200,200,PDF,"sample2.pdf");
 point(50,50);
 rectMode(CENTER);
 fill(43,237,196);
 rect(50,50,50,50);
 print("四角形を描く。色を図形につける。");
 print("色はツールで選択する。");

 ４四角形、三角形、矩形を描く

　関数fill() 次の図形の色をつける。色ツールを開いて、RGB三色の数値をきめる。
　色を指定しないと、始めに指定した色がすべてつけられる。
　前の図形の部分に次の図形が重なると、新しい図形によつって塗つぶされる。

　size(250,250);  //画面サイズ
　fill(242,7,7);　　　　　　　　　　　　　　　四角形の色
　rect(50,50,100,100);//左上角ｘ座標、ｙ座標、矩形の幅、高さ
　fill(10,7,242);　　　　　　　　　　　　　　三角形の色
　triangle(100,50,50,150,150,150);//三つの角のｘ座標、ｙ座標
　fill(242,204,7);　　　　　　　　　　　　　矩形の色
　quad(100,50,75,100,100,150,125,100);//四つの角のｘ、ｙ座標

 

Name		quad()
Examples		quad(38, 31, 86, 20, 69, 63, 30, 76);
Description		quadとは四角形のことで、４面の多面体である。四辺形に似ているが、角は90度に制限されていない。
Syntax		quad(x1, y1, x2, y2, x3, y3, x4, y4);
Parameters		x1   整数か浮動少数点数: 最初の点のx-座標値 y1   整数か浮動少数点数: 最初の点のy-座標値 x2   整数か浮動少数点数: 2つめの点のx-座標値 y2   整数か浮動少数点数: 2つめ点のy-座標値 x3   整数か浮動少数点数: 3つめ点のx-座標値 y3   整数か浮動少数点数: 3つめ点のy-座標値 x4   整数か浮動少数点数: 4つめ点のx-座標値 y4   整数か浮動少数点数:4つめ点のy-座標値
Returns		なし
Usage		Web & Application

 

Name		triangle()
Examples		triangle(30, 75, 58, 20, 86, 75);
Description		三角形(triangle)は、３つの点によってつなげられた平面である。初めの２つのパラメータは最初の点を、真ん中の２つのパラメータは２つめの点を、最後の２つのパラメータは３つめの点を決定する
Syntax		triangle(x1, y1, x2, y2, x3, y3);
Parameters		x1   整数か浮動少数点数: 最初の点のx-座標値 y1   整数か浮動少数点数: 最初の点のy-座標値 x2   整数か浮動少数点数: 2つめのx-座標値 y2   整数か浮動少数点数:2つめ点のy-座標値 x3   整数か浮動少数点数: ３つめ点x-座標値 y3   整数か浮動少数点数: ３つめ点のy-座標値
Returns		なし
Usage		Web & Application
Related		beginShape()

5丸を描く

size(250,250);
fill(227,234,26);
ellipse(70,70,100,100);//中心のｘ、ｙ座標、横直径、縦直径

 

Name		ellipse()
Examples		ellipse(30, 20, 55, 55);
Description		ディスプレーに楕円を描く。同じ幅と高さの楕円は、円である。はじめの２つのパラメータは位置を表し、３つめのパラメータは長さ、そして４つめは高さを設定する。また、ellipseMode() メソッドを使って楕円の起点を変えることもできる。
Syntax		ellipse(x, y, width, height)
Parameters		x   整数か浮動少数点数:楕円のx-座標値   y   整数か浮動少数点数:楕円のx-座標値 width   整数か浮動少数点数:楕円の幅 height   整数か浮動少数点数:楕円の高さ
Returns		なし
Usage		Web & Application
Related		ellipseMode()

 

Name		ellipseMode()
Examples		ellipseMode(CENTER_DIAMETER); ellipse(35, 35, 50, 50); ellipseMode(CORNER); fill(102); ellipse(35, 35, 50, 50);
Description		ellipseMode()によって楕円の起点が変更される。長方形モードの初期値は、ellipseMode(CORNER)で、形の左上の位置へ定められている。ellipseMode(CENTER_DIAMETER)機能は中心点からシェイプを描く。Processingは大文字小文字の区別する言語であるため、パラメータは"大文字"によって書かなければならない。
Syntax		ellipseMode(MODE)
Parameters		MODE   CORNER, CORNERS, CENTER_DIAMETER, のCENTER_RADIUSのどれか
Returns		なし
Usage		Web & Application
Related		ellipse()

６円弧を描く

 （１）

 　size(250,250);
　fill(203,78,90);
　arc(100,100,100,200,radians(80),radians(120));//円弧
　arc(50,50,100,200,radians(80),radians(120));//円弧
　arc(150,150,100,200,radians(80),radians(120));//円弧

左上角のｘ座標、左上角のｙ座標、
書き始めの角度、書き終わりの角度ラジアンで表記

（２）

size(250,250);
fill(203,78,90);
arc(100,100,100,200,radians(80),radians(120));//円弧
arc(100,100,100,200,radians(160),radians(240));//円弧

 ７曲線を描く

　四つの点をなめらかに結ぶ曲線の、真ん中の２点間の曲線を描く

(1) curve()

　size(200,200);
　fill(255,7,7);
　curve(40,0,160,60,40,120,160,180);
　fill(255,203,13);
　rect(40,0,8,8);
　rect(160,60,8,8);
　rect(40,120,8,8);
　rect(160,180,8,8);

Name		curve()
Examples		curve(10, 26, 83, 24, 83, 61, 25, 65);
Description		スクリーンに曲げられた線を描く。初めと２つめのパラメータは、曲線の初めの点を決定し、残りの２つのパラメータは曲線の２つめの点を決める。真ん中のそれぞれのパラメータは、曲線の形を決める点を設定する。それに加えて、curveMode()とよばれる機能は曲線の視覚的な特質を操作する。curve()機能は、Catmull-Romスプラインの実装である。
Syntax		curve(x1, y1, x2, y2, x3, y3, x4, y4);
Parameters		x1   整数か浮動少数点数: 最初の点のx-座標値   y1   整数か浮動少数点数: 最初の点のy-座標値   x2   整数か浮動少数点数: 2つめの点のx-座標値   y2   整数か浮動少数点数: 2つめの点のy-座標値   x3   整数か浮動少数点数: 3つめの点のx-座標値   y3   整数か浮動少数点数: 3つめの点のy-座標値   x4   整数か浮動少数点数: 4つめの点のx-座標値   y4   整数か浮動少数点数: 4つめの点のy-座標値
Returns		なし
Usage		Web & Application
Related		curveVertex() bezier()

(2)bezier()

ドローソフトのペンツールと同じ方法で描く

 size(200,200);
 fill(255,7,7);
 bezier(40,40,160,40,40,160,160,160);
 fill(255,215,13);
 rectMode(CENTER);
 rect(40,40,8,8);
 rect(160,40,8,8);
 rect(40,160,8,8);
 rect(160,160,8,8);

Name		bezier()
Examples		stroke(255, 102, 0); line(85, 20, 10, 10); line(90, 90, 15, 80); stroke(0, 0, 0); bezier(85, 20, 10, 10, 90, 90, 15, 80); stroke(255, 102, 0); line(30, 20, 80, 5); line(80, 75, 30, 75); stroke(0, 0, 0); bezier(30, 20, 80, 5, 80, 75, 30, 75);
Description		スクリーンにベジェ曲線を描く。アンカーによって決定され点がコントロールする。初めの２つのパラメータは、曲線の初めの点を決定し、残りの２つのパラメータは曲線の最後の点を決める。真ん中のそれぞれのパラメータは、曲線の形を決めるコンテクストを与える。ベジェ曲線は、フランスのエンジニアPierre Bezierによって開発された。
Syntax		bezier(x1, y1, x2, y2, x3, y3, x4, y4);
Parameters		x1   y1   x2   y2   x3   y3   x4   y4
Returns		なし
Usage		Web & Application
Related		bezierVertex() curve()

 　　８やや複雑な画像