1a-02 矩形で絵を描く - はじめてのProcessing

• Processingを起動する
• 矩形を描く
• 課題

size ウィンドウ（キャンバス）のサイズを指定する

「ウィンドウサイズを幅480ピクセル高さ320ピクセルに設定」

size(480, 320);

rect 矩形（長方形、正方形）を描く

「左上の点が(60,80)で幅240ピクセル高さ180ピクセルの矩形」

size(480, 320);
rect(60, 80, 240, 180);

後に書いた矩形が、重なり順で上になる。

size(480, 320);
rect(60, 80, 240, 180);
rect(120, 140, 240, 100);

fill 矩形の塗り色

「黒く塗る」

size(480, 320);
fill(0);
rect(60, 80, 240, 180);
rect(120, 140, 240, 100);

※fill(0);以降の矩形は全て黒く塗られる

「白く塗る」

size(480, 320);
fill(0);
rect(60, 80, 240, 180);
fill(255); //白く塗る
rect(120, 140, 240, 100);

※厳密な色の設定は来週の授業で詳しく解説する

noFill 塗りつぶさない

size(480, 320);
noFill();
rect(60, 80, 240, 180);
rect(120, 140, 240, 100);

※noFill();以降の矩形は全て塗りつぶされない設定になる

strokeWeight 線の太さを設定する

「線の太さを3にする」

size(480, 320);
strokeWeight(3);
rect(60, 80, 240, 180);
rect(120, 140, 240, 100);

課題「Processingでお絵かき：フレーミーを描く」

• フレーミーとは？ → 知らなければGoogleの画像検索で調べてみる
• ウィンドウサイズは幅480ピクセル高さ320ピクセルとする
• 基本的に、矩形のみで構成すれば良い。しっぽは斜め上を向いていなくても良い。
• いきなり描こうとしても難しい。まず手描きで座標を明確にしてからプログラミングに入ること。
• 最低限、フレーミー1匹を描くこと。周りの景色を描き込んだりするなど絵としての完成度を上げた場合はボーナス点を加算する。
• 締め切りは今週木曜日の18時までとする。これ以降の提出は40%offの評価となる。

TAによる解答例1

size(480,320);

colorMode(HSB,100);
background(99);

noFill();
rect(90,70,90,90);//顔 
rect(70,50,35,40);//左耳
rect(160,50,40,40);//右耳
rect(55,125,55,35);//鼻
rect(165,130,160,70);//胴体
rect(165,205,20,50);//前足
rect(190,205,20,50);//前足
rect(280,205,20,50);//後足
rect(305,205,20,50);//後足
rect(310,120,50,20);//尾

fill(0);
rect(55,125,11,5);//黒鼻
rect(100,110,4,4);//目
rect(145,110,4,4);//目

TAによる解答例2

size(480,320);
colorMode(HSB,100);
background(99);

noFill();// 塗りなし
rect(160,95,60,60);//顔
rect(150,85,20,25);//右耳
rect(205,85,27,27);//左耳
rect(135,135,35,20);//鼻


rect(210,140,110,50);//胴体
rect(212,192,12,30);//前足
rect(228,192,12,30);//前足
rect(290,192,12,30);//後ろ足
rect(306,192,12,30);//後ろ足
rect(310,134,30,12);//しっぽ

fill(0);// 塗りあり
rect(135,135,9,4);//黒鼻
rect(167,120,2,2);//右目
rect(197,120,2,2);//左目

TAによる解答例3

size(480,320);
colorMode(RGB,256);
background(255);
stroke(0);
smooth();

//黒犬ペインティー
fill(0);
rect(85,235,30,30);
rect(72,255,18,10);
rect(78,228,13,16);
rect(107,228,16,16);

rect(110,258,52,23);

rect(110,283,6,15);
rect(120,283,6,15);
rect(144,283,6,15);
rect(154,283,6,15);

rect(156,255,15,6);

fill(255);
rect(88,248,3,3);
rect(103,248,3,3);

rect(72,255,6,3);


//ぶち犬スポッティー
noFill();
rect(205,235,30,30);
rect(192,255,18,10);
rect(227,228,16,16);

rect(230,258,52,23);

rect(230,283,6,15);
rect(264,283,6,15);
rect(274,283,6,15);

fill(0);
rect(208,248,1,1);

rect(192,255,5,2);
rect(198,228,13,16);
rect(276,255,15,6);
rect(240,283,6,15);

rect(230,258,9,11);
rect(261,258,11,11);
rect(245,272,11,9);
rect(220,244,7,7);

fill(255);
rect(222,246,3,3);



//フレーミー
noFill();
rect(325,235,30,30);
rect(312,255,18,10);
rect(317,228,13,16);
rect(347,228,16,16);

rect(350,258,52,23);

rect(350,283,6,15);
rect(360,283,6,15);
rect(384,283,6,15);
rect(394,283,6,15);

rect(396,255,15,6);

fill(0);
rect(328,248,1,1);
rect(343,248,1,1);
rect(312,255,5,2);


//ロゴ
noFill();
rect(120,22,7,48);//F
rect(127,22,22,7);
rect(127,42,22,7);

rect(165,49,7,35);//R
rect(172,49,18,7);
rect(172,64,18,7);
rect(190,56,7,15);

beginShape();
vertex(190,71);
vertex(197,82);
vertex(192,86);
vertex(185,75);
endShape(CLOSE);

rect(213,45,7,30);//A
rect(238,45,7,30);
rect(220,38,18,7);
rect(220,56,18,7);

rect(261,30,7,35);//M
rect(292,30,7,35);
line(261,30,280,50);
line(280,50,299,30);

rect(315,50,7,18);//Y
rect(322,61,27,7);
rect(342,45,7,16);
rect(330,68,7,16);