【Processing】noFillの使い方【形に注目してもらいたいときの表現】

2024年5月4日2024年6月18日

URLをコピーしました！

ワタタク

Processingで、図形を塗りつぶさないようにするには　どうしたらいいんだろう？

学んだところ、ProcessingのnoFillを使うと、図形を塗りつぶさない表現ができると分かりました。

主な使い方としては、図形の形状に注目してもらいたい表現をするときに使うのがいいと思います。

今回の記事で書いていること

記事の前半は、noFillの英語の意味や、なんのために使うのか？
次にnoFIllの書き方とコードと画像
後半部分では、疑問だったり、学ぶことで世界の見え方がどう変わるのか

ワタタク

noFillに詳しくなって、使いこなしていきましょう。

この記事を書いた人

ワタタク

プロフィール

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

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

英語のnoFillについて
英語の読み方	ノーフィル
英語の意味	塗りつぶさない

否定の意味がある「no」と塗りつぶす「fill」という英語の2つが合わさってできている英語。

塗りつぶすのにNoってことなので、noFillは塗りつぶさないという意味になります。

ワタタク

noFillはProcessing独自の英語だと思います。

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

ProcessingでnoFillを使う理由5つ

線画の表現をするため
線の表現を強調するため
線の形を強調するため
色を使いすぎて、ごちゃごちゃしているのを防ぐため
シンプルな表現をするため

ワタタク

とてもシンプルな表現をしたいときは、noFillを使おうと思います。

【Processing】noFillの使い方

noFill();と書くと図形が塗りつぶされなくなります。

ワタタク

1行だけでいいので簡単です。

noFillを入力したコードと画像

//noFIllで塗りつぶされない楕円

size(1000, 1000);
background(255);

fill(0, 255, 0);//塗りつぶし
ellipse(300, 500, 350, 350);

noFill();//塗りつぶさない
ellipse(700, 500, 400, 400);

上記コードの画像。

noFillだけを書くと、全て塗りつぶされなくなる

//noFillですべて塗りつぶされる例

size(1000, 1000);
background(255);

noFill();
ellipse(300, 500, 350, 350);

ellipse(700, 500, 400, 400);

上記コードの画像。

nofillを使ったあとに色を塗りつぶしたくなった場合の使い方

noFillを使ったあとにfillを使って書けば、塗りつぶされます。

//noFillを使った後にfillを使って楕円を塗りつぶした例

size(1000, 1000);
background(255);

noFill();
ellipse(300, 500, 350, 350);

fill(0, 0, 255);
ellipse(700, 500, 400, 400);

上記コードの画像。

【Processing】noFillと相性のいい表現

noFillはstrokeWeightと組み合わせると、線の太さの調整ができて、できることが増えます。

関連記事：【Processing】strokeWeightで輪郭線の太さを変える方法【表現を強調できるようになる】

//noFillとstrokeWeightを組み合わせたコードの例

size(1000, 1000);
background(255);
noFill();

//最も小さな楕円
ellipse(300, 300, 250, 250);

//真ん中の楕円
strokeWeight(10);
ellipse(500, 500, 500, 550);

//右下の楕円
strokeWeight(20);
ellipse(900, 800, 700, 750);