見出し画像

2021 コツコツと

詮(せん)ずるところ学問は、ただ年月長くうまず怠らずして、はげみつとむるぞ肝要にて、学びやうは、いかやうにてもよかるべく、さのみかかはるまじきことなり。 いかほど学びかたよくても怠りてつとめざれば、功はなし。
本居宣長

9月から更新をしていない = 学習が捗っていない。
『時間がある時に。。。』というのは言い訳であって、時間は作らなければない!
ということで今年も(今年は?)コツコツとやっていきたいと思います。

冒頭の本居先生の引用にもあるように学び方ではなく飽きずに続けること。続ければいいってもんでもないけど、まずは続けること。

新年一発目ですが、今回はなかなか退屈な関数たち。退屈といえば聞こえは悪いですが、ポジティブな言い方をするとシンプル。

画像を置いてみよう

Processingをはじめようのp.095から始まるメディアの章にあたります。
退屈とは言いましたが、画像を取り込むだけで『作った感』が出るので少しテンション上がります。まずはステップから。

①dataフォルダに画像を追加
 スケッチ>ファイルを追加
②画像を格納するためにPImage変数を作る
③loadImage(filename)を使ってその変数に画像を読み込む
④image(img, x, y, width, height)で画像を表示

画像の準備はどこでも良いのでわかりやすい場所にフォルダを作っておき、使いたいものを入れておきます。わたしは教科書通りmediaというフォルダを作ってデスクトップに置いています。

最初に勘違いをしていたのですが、ここに入れたからと言ってProcessingの中で使えるわけではありません。新しいスケッチを作成するたびにそのスケッチ内に画像を追加する必要があります。それがこの部分。スケッチ>ファイルを追加
画像のスケッチの練習で何回か新しいものにするたびにエラーがでて間違えていました。一回追加すると、もうそこで使える気になってしまっていました。


PImage img; //画像を扱うデータ型PImageを設定、名前をimgとする

void setup(){
 size(800, 600);
 img = loadImage("legoflower.JPG"); //imgを取り込んだ画像データ(legoflower.JPG)にする
}

void draw(){
 imageMode(CENTER);
 background(0);
 translate(width/2, height/2);
 image(img, 0, 0, 400, 500 ); //画像を表示しまする
 }
 

スクリーンショット 2021-01-11 11.44.32

写真のlegoflowerは最近発売レゴのボタニカルコレクションという商品でその名の通りブロックで花束が作れちゃいます。盆栽もあるのでそれも写真にとって生かしていきたいと思います(脱線)

フォントを使ってみよう

基本、上記の画像と同じステップになります。データの追加、データの呼び出し、利用。ただフォントに関しては1ステップ多くなります。

①フォントをdataフォルダに追加
②フォントを格納するPFont変数を作成
③createFont(name, size)を使ってフォントを変数に割り当てる
④textFont(font, size)関数で使用フォントを変更
⑤text(data, x, y)でテキストを表示

PFont font; //フォントを格納するPFont変数を作成
void setup(){
 size(800, 600);
 font = createFont("SourceCodePro-Regular.ttf", 32); //フォントを変数に割り当てる
 textFont(font); //使用フォントを変更
}
void draw(){
 background(102);
 textSize(32);
 text("That's small step for man...", mouseX, mouseY);//テキストを表示
 textSize(16);
  text("That's small step for man...", mouseX, mouseY+100);
}

スクリーンショット 2021-01-11 12.04.01

ダブルクオーテーションの中に好きな文字を打ち込むことができます。テキストのパラメーターは最後に二つ、表示する領域の幅と高さを指定することができます。



void draw(){
 background(102);
 textSize(32);
 text("That's small step for man...", mouseX, mouseY);//テキストを表示
 textSize(16);
  text("That's small step for man...", mouseX, mouseY+100, 200, 400 );
}

スクリーンショット 2021-01-11 12.06.25

フォントをデータにしよう

フォントをそのまま使ってしまうと長い文章などになるとコードが長くなりすぎます。そこでダブルクオーテーションの部分を変数として扱えるようにします。
String型の中ではテキストを入れることができます。

PFont font;
String quote = "That's small step for man...";

void setup(){
size(800, 600);
font = createFont("SourceCodePro-Regular.ttf", 32); 
textFont(font);
}

void draw(){
background(102);
textSize(32);
text(quote, mouseX, mouseY);
textSize(16);
 text(quote, mouseX, mouseY+100);
}

文章の部分を最初にquote 引用として宣言してしまい、それを利用します。
コード内で繰り返す必要がないためシンプルになりました。


この記事が気に入ったらサポートをしてみませんか?