1a-07 画像や文字を使う

教科書 p.82〜p.87

• 画像を使う
• 文字を使う

PImage / image 画像を使う

準備

1. 上の写真（photo.jpg）をデスクトップにドラッグ
2. メニューの「File > Save As」で「書類 > Processing」にsketchを保存
3. Processingのエディタに画像ファイルをドラッグする

画像を表示する

size(500,500);

// PImage型の変数photoに「photo.jpg」を読み込む
PImage photo1=loadImage("photo.jpg");

// 画像を表示
image(photo1,0,0);

表示位置を調整する

size(500,500);

PImage photo1=loadImage("photo.jpg");

image(photo1,50,100); //画像の左上を(50,100)に指定

表示サイズを調整する

size(500,500);

PImage photo1=loadImage("photo.jpg");

image(photo1,50,100,300,200);//画像の幅を300, 高さを200に指定

色を調整する

size(500,500);

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

PImage photo1=loadImage("photo.jpg");

//黄色を付ける
tint(20,99,99);

image(photo1,0,0);

複数の画像を配置する

上の画像をデスクトップにドラッグして、Processingのエディタにドラッグしておく。

size(500,500);

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

PImage photo1=loadImage("photo.jpg");
PImage photo2=loadImage("bus.png");

image(photo1,0,0);
image(photo2,350,200);

練習

1. 写真をランダムな位置に配置する（10個）

2. 写真をランダムな位置に配置する（小さくして100個）

3. 写真をランダムな位置に配置する（サイズもランダムにして100個）

PFont / textFont / text 文字を描く

準備

フォントデータを生成しておく

文字を描く

size(500,200);

PFont myFont=loadFont("HelveticaNeue-Bold-24.vlw");
textFont(myFont,24);

text("I Love Processing!",0,100);

文字に色を付ける

size(500,200);
colorMode(HSB,100);
background(99);

PFont myFont=loadFont("HelveticaNeue-Bold-24.vlw");
textFont(myFont,24);

fill(0,99,99);
text("I Love Processing!",0,100);

文字の揃え位置を設定する

size(500,200);
colorMode(HSB,100);
background(99);

PFont myFont=loadFont("HelveticaNeue-Bold-24.vlw");
textFont(myFont,24);

textAlign(CENTER);
fill(0,99,99);
text("I Love Processing!",width/2,height/2);