point以外で点を描くことができますか？

Q: point以外で点を描くことができますか？

ellipseやcircleを使って、丸い点を描くことができます。 参考記事： 【Processing】ellipseで楕円を描く方法【数値を調整したら線も描けた】

ellipseやcircleを使って、丸い点を描くことができます。参考記事：【Processing】ellipseで楕円を描く方法【数値を調整したら線も描けた】

【Processing】pointの使い方【小さいので、大きさを変える方法も解説】

2024年5月7日2024年6月18日

当ブログ記事には広告が含まれている場合があります

【Processing】pointの使い方【小さいので、大きさを変える方法も解説】

URLをコピーしました！

ワタタク

Processingで点ってどうやって描くんだろう？点はどんなアートのジャンルで使うのかについても気になるなぁ。

調べたところ、pointを使えば、Processingで点を描けることが分かりました。

今回の記事では、pointの書き方を書いているだけではなく、なぜ点を使い、どんなアートのジャンルで使うのかなどについてなど、点について掘り下げています。

ワタタク

点を活かした作品をつくれるようになりますよ～。

この記事を書いた人

ワタタク

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

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

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

英語のpointについて
英語の読み方	ポイント
英語の意味	点

ワタタク

覚えやすい。

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

Processingでpointを使う理由5つ

点を描くため
目の瞳など、小さめの丸を表現したいときに使うため
楕円のコード(ellipse)を入力するよりも楽に丸を描くため
四角のコード(rect)を入力するよりも楽に四角形を描くためstrokeCap(PROJECT)を使う。（記事の先で解説）
点を使ったアートを表現するため

【参考記事】：【Processing】ellipseで楕円を描く方法【数値を調整したら線も描けた】

Processingのpointはellipseやrectよりも入力するコードが少ないので、少し楽に入力できます。

ワタタク

描く位置の調整もしやすいです。

【Processing】pointはどんなジャンルのアートで使うの？

点を使えるアートのジャンル

点描画法（ポワンティリズム）。ジュルジュ・スーラさんが有名
ドットペインティング。アボリジニアートが参考になる
ピクセルアート
ミニマリズム

ポワンティリズムは、Processingで写真と組み合わせた表現をすると面白そう。

ワタタク

ドットペインティングもかなり可愛い印象の作品をつくることができる。子供に気に入ってもらえそうな作品をつくるときによさそう。

【Processing】pointの書き方のルール

pointの書き方のルールと解説
書き方	point(x座標の数値, y座標の数値);
数値の範囲	入力する数値は、sizeによる size(500, 500);なら、x座標500, y座標500以内で書く 10.5のような数値も入力して、位置を細かく調整できる
数値を入力したらどうなるか	すごく小さな点が入力される

ワタタク

「え？これ？」ってくらいめちゃくちゃ小さい点が入力される。大きい点を入力する方法は記事の後半で解説。まずは、次の項目を真似してみて、どれだけ点が小さいのか確認してみてください。

【Processing】pointのを使い方を最初から丁寧に解説【画像つき】

STEP

pointのX軸（横）の位置を決める

size(1000, 1000);//キャンバスの大きさを設定
background(255);//背景を白に

//点をX軸。横に500の位置に設定
point(500,

上記コードの画像。

STEP

pointのY軸（縦）の位置を決める

size(1000, 1000);//キャンバスの大きさを設定
background(255);//背景を白に

//点をX軸。横に500の位置に設定
point(500, 500);

上記コードの画像。

STEP

実行して点の位置を確認

500, 500（真ん中）の位置にすごく小さい点が表示されている。

針の穴くらいの小さな点です。

目を凝らしてよ～く見てください。

ワタタク

はじめて入力したとき「何も入力されてないけど？」と思って「入力間違えてる？」と思って、いろいろ調べて時間かかった。

Processingのpointで入力した点を、大きくする方法【コードと画像あり】

ProcessingのstrokeWeightを使うと、pointで描く点を大きくできます。

strokeWeightは、輪郭線を太くするのですが、pointで使うと、点が大きくなります。

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

//pointの大きさを変える

size(1000, 1000);
background(255);
strokeWeight(500);//点を大きくする
point(500, 500);

上記コードの画像。

Processingのpointで入力した点を、大きくする方法【コードと画像あり】

Processingのpointに色をつける

Processingのstrokeを使うと、pointの色を変えることができます。

参考記事：【Processing】strokeで輪郭線の色を変える方法【黒以外の色にしてみたら、新鮮な気持ちになれた】

//pointで描いた点に色をつける

size(1000, 1000);
background(255);
strokeWeight(500);//点を大きくする
stroke(0, 255, 0, 70);//色をつける
point(500, 500);

上記コードの画像。

【Processing】pointの点の形を変える

strokeCap(PROJECT);を書くと、pointで描かれる点の形が四角になります。

//pointで描いた点を四角にする

size(1000, 1000);
background(255);
strokeCap(PROJECT);//点の形を四角にする
strokeWeight(500);//点を大きくする
stroke(255, 165, 0, 80);
point(500, 500);

上記コードの画像。

ワタタク

strokeCap(PROJECT);で四角にすると、ピクセルアートとかを描きやすい。

pointで四角と丸の点を描く方法

Processingのpointで描かれる点を丸にするには、strokeCap(ROUND);と入力します。

最初は点が丸で表示されるように設定されているので、strokeCap(ROUND);を使うときは、点を四角にした後で、丸にしたいときに使います。

//pointで四角と丸の点を描く方法

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

//四角の点
strokeCap(PROJECT);//点を四角にする
strokeWeight(500);
stroke(255, 255, 0, 70);
point(300, 300);

//丸の点
strokeCap(ROUND);//点を丸にする
strokeWeight(500);
stroke(255, 165, 0, 70);
point(700, 700);