【Processing】画像を保存する方法【save()でスクショの面倒くささをなくす】

ワタタク

Processingでコード書いて、実行したときに表示される画像を毎回スクショするのが面倒くさいなぁ……。

そんな悩みはsave()を使って解決することができました。

save()を使えば、コードを書いて実行したときに表示される画像が自動的に保存されるようになります。

しかもsize(1080, 1080);の画像なら、1080×1080のサイズで保存されるので、InstagramなどのSNSにも投稿しやすいです。

ワタタク

コードに1行つけ加えるだけで、スクショしないで保存できるようになるので、記事でsaveについて理解しながら、真似してくださいね。コードはコピペできますよ。

この記事を書いた人

当ブログがはじめての方へ

• クリエイティブコーディング初心者が、アーティストとして活躍するまでの上達の過程を発信
• コンセプトは「クリエイティブコーディング上達のための参考書」
• 参考にしてもらえるブログにするため、Processingを独学で勉強して共有中

 

【Processing】saveの英語の読み方と意味

ワタタク

ゲームでも「セーブポイント」や「セーブする」という言葉で出てくるので、ゲームをやってる人は知ってる人が多い英単語。

なんのためにProcessingで、saveを使うの？

Processingでbackgroundを使う理由は、コードを書いて、実行したら表示される画像の保存にかかる作業を楽にするため。

Processingでsaveを使う前は、画像を保存するのに「①保存するフォルダを作成する→②コードを書く→③実行する→④表示された画像をスクショする→⑤画像サイズを調整する→まる6スクショした画像をフォルダに移動させる」という6工程かかっていました。

Processingのsaveを使用するようになってからは「①画像を保存するフォルダを作成→②コードを書く→③実行する」の3工程で画像を保存できるようになりました。

ワタタク

6工程から3工程になったのは本当に楽。saveすごい。

【Processing】saveで画像を保存するための書き方

ワタタク

僕は.jpgか.pngを使ってます。

【コピペ可能】Processingのsaveを使って、画像を保存する例【3STEP】

STEP

画像を保存するフォルダを作成する

Processingを起動→ファイル→フォルダの名前を決めて保存し、画像を保存するフォルダを作成しておきます。

もし、画像を保存するフォルダの作成方法が分からないなら、以下の記事を参考にしてください。

ファイル保存の参考記事

【Processing】ファイルの保存方法を画像つきで解説【書いたコードを残し、管理しやすくする】 【記事の主な内容10】【1】初期設定のファイルの保存場所【2】ファイルの保存方法【3】ファイルの保存場所の変更方法【4】ファイルの名前rの付け方のコツ【5】ファイルの上書き方法【6】別のフォルダに保存する方法【7】ファイル保存関連のショートカット【8】ファイル名はそのままに【9】ファイルの開き方【10】疑問点の解決。pdeとは？

STEP

コードを書く

Copy

//Processingのsaveを使って、画像を保存する
size(500, 500);
background(#FFFFFF);
ellipse(250, 250, 250, 250);

//save("英語でファイルの名前.jpg");という書き方↓↓
save("ellipse.jpg");
//save("日本語でファイルの名前.jpg");という書き方↓↓
//save("丸.jpg");

STEP

実行すると保存される

【注意点】Processingのsaveは、実行するたびに画像が上書きされる

Processingのsaveは、実行するたびに画像が上書きされていくことを、コードと画像で説明します。

以下のように白い丸を入力します。

Copy

size(500, 500);
background(#FFFFFF);
ellipse(250, 250, 250, 250);

save("ellipse.jpg");

白い丸とellipseというファイル名で保存されている。

次は白い丸に青色をつけて、コードを実行すると、青い円の画像が上書きされます。

Copy

size(500, 500);
background(#FFFFFF);
ellipse(250, 250, 250, 250);

save("ellipse.jpg");

青い丸で上書きされる。

便利ではあるけれど、白い丸の画像も残しておきたいときは困ります。

Processingのsaveで、画像を上書きせずに保存する方法

save(“ellipse.jpg”);のellipseの部分の名前を変更すると、画像を上書きせずに保存することができます。

Copy

size(500, 500);
background(#FFFFFF);
fill(#00459B);
ellipse(250, 250, 250, 250);

//ellipseだったのをellipseblueに変更。
save("ellipseblue.jpg");

//日本語のファイル名にした例は
//save("青の円.jpg");

上書きせずに画像を保存することで、過程を自分で見えるようになり、上達を感じやすいです。

また、SNSで作品の制作過程を共有したいときにも役に立ちます。

画像を上書きせずに保存していく場合は、コメント機能を使ってコードにメモしておくと、すぐに変更前の画像にもどせます。コメントについては記事の「Processingのコメント // と /* */ は超便利【人や自分がコードを理解しやすくなる】」でご確認ください。

//背景も円も青バージョン
size(500, 500);
background(#00459B);
fill(#00459B);
ellipse(250, 250, 250, 250);
save("ellipse-blue-background-blue.jpg");

/*背景が白、円も白バージョン
size(500, 500);
background(#FFFFFF);
ellipse(250, 250, 250, 250);
save("ellipse.jpg");
*/

Processingのbackgroundで、気をつけたいエラー2つ

【1】「.」と「””」の入力忘れ

save(“.jpg”);のドット「.」の入力し忘れ、「””」の入力し忘れでエラーになるので、気をつけて入力。

ワタタク

僕は「.」の入力を忘れていて、なんでエラーになる？と解決するまでに時間がかかったことがあります……。みなさんも気をつけてくださいね。

【2】void setup と void drawをつかうときはエラーになった【対処方法あり】

void set up と void drawを使ってコードを書いたときに、save(“.jpg”);を使って実行しようとするとエラーになりました。

対処方法はsaveFrame(“ファイルの名前.jpg);を使うこと。

もしくは、以下のように画像でマウスをクリックしたら、保存されるようにコードを書くことで、画像を保存できました。

int a = 1; //マウスをクリックすると画像1、画像2と番号順に保存されるように必要な変数。

void setup(){
  size(500, 500); 
}

void draw(){
 ellipse(250, 250, 250, 250);
}

//マウスをクリックしたらtest1 test2という形で保存されていく
void mousePressed() {
  if (mousePressed == true) {
save("test" + a + ".jpeg");
a++;
  }
}

ワタタク

void setup と void drawを使ってコードを書くようになったら、saveFrame(“ファイルの名前.jpg);で書くこと。

Processingのsaveで、作品づくりをしやすくする

Processingのsave(“.jpg”);の構文を使うことで、スクショしなくてもよくなりました。

その結果「あ～スクショするの面倒くさいなぁ。」と思ってしまって、作品をつくるやる気も下がってしまうという問題も解決。

作品づくりもしやすくなりました。

スクショの手間がなくなった時間を利用して、ブログやSNSに作品を投稿していきましょう～。

ワタタク

それでは今日もレッツワクワクコーディング。