【Processing】lineの使い方【線をつなげて描くと面白かった】

ワタタク

Processingで線ってどうやって描くんだろう？

調べたところ、Processingで線を描くには、lineを使えば描けると分かりました。

ただ線を描くだけじゃなく、線を何本も描いてつなげることで、面白いなと感じることができました。

記事の後半部分で、lineを使って描いた例の画像とコードを載せているので、参考にしてください。シンプルな表現なので、クリエイティブコーディング初心者さんも理解できます。

ワタタク

シンプルな線の表現も使い方次第で楽しくなる。

この記事を書いた人

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

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

 

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

ワタタク

スマホアプリのLineを使ってる人も多いし、読めたと思います。

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

②と③は、例えば、線を途切れさせながら文字を描いたり、四角形を描くと、個性的な表現ができるようになります。

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

素描はデッサンみたいな感じ。Processingのlineと他の構文を組み合わせて素描に挑戦してみると面白い表現ができそう。

Processingのline、point、ellipseなどの図形、forの繰り返し構文を組み合わせると表現は無限にひろがる。

ワタタク

個人的にはProcessingで版画を描くことに興味がある。

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

ワタタク

慣れると簡単。

【Processing】lineの使い方を5STEPで解説【コードと画像つき】

STEP

線が始まる場所の横の位置（x1）を決める

Copy

// 線の始まりの横の位置、x1を入力
// この段階ではエラーになる

size(1000, 1000); // 画面のサイズを横1000、縦1000にする
background(255); // 画面の背景の色を白にする
line(100, //x1を入力

STEP

線が始まる場所の縦の位置（y1）を決める

Copy

// 線の始まりの縦の位置、y1を入力
// この段階ではエラーになる

size(1000, 1000);
background(255);
line(100, 500, // 500がy1

STEP

線が終わる場所の、横の位置（x2）を決める

Copy

// 線の終わりの横の位置、x2を入力
// この段階ではエラーになる

size(1000, 1000);
background(255);
line(100, 500, 900 // 3番目の100がx2

STEP

【完成】線が終わる場所の縦の位置（y2）を決める

Copy

// 線の終わりの縦の位置、y2を入力して完成

size(1000, 1000);
background(255);
line(100, 500, 900, 500); // 4番目の500がy2

STEP

実行して線が完成

実行した画像。

ワタタク

数値を変えて10本くらい線を描くと慣れます。

【Processing】lineで線を水平にする方法

y1とy2を同じ数値にすれば、水平の線になります。

size(1000, 1000);
background(255);
line(500, 500, 900, 500);

【Processing】lineで線を垂直にする方法

x1とx2を同じ数値にすれば、垂直の線になります。

size(1000, 1000);
background(255);
line(800, 200, 800, 1000);

【Processing】lineで線を斜めにする方法

全部の数値をバラバラにすれば、斜めになります。

size(1000, 1000);
background(255);
line(100, 200, 700, 950);

【Processing】lineで2本以上の線をつなげる方法

size(1000, 1000);
background(255);
line(100, 500, 700, 500);
line(100, 500, 300, 800);
line(300, 800, 900, 800);

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

lineは「,」を半角で入力。数値を4つ入力。することに気をつけること。

ワタタク

線は始まりの位置と、終わりの位置を入力するので、4つの数値を入力するってことを意識しやすい。

【Processing】lineを学んでいた感じた疑問2つを解決

lineで線の色を変えるには？

Processingのstrokeという構文を使うと色を変えることができます。

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

Copy

size(1000, 1000);
background(255);
stroke(255, 0, 0);
line(100, 500, 700, 500);
stroke(0, 255, 0);
line(100, 500, 300, 800);
stroke(0, 0, 255);
line(300, 800, 900, 800);

lineで線の太さを変えるには？

ProcessingのstrokeWeightという構文を使うと、線の太さを変えることができます。

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

Copy

size(1000, 1000);
background(255);
strokeWeight(5);
line(100, 500, 700, 500);
strokeWeight(15);
line(100, 500, 300, 800);
strokeWeight(25);
line(300, 800, 900, 800);

【Processing】lineを学ぶと、世界の見え方がこう変わる

まっすぐな世界や物を、lineを思い浮かべながら見ることができるようになりました。

ワタタク

水平線とかを見るとline(0, 500, 1000, 500);くらいかと思えるようになって楽しい。

Processingのlineで線の表現を楽しもう

僕はlineを工夫して、版画のような作品をつくれたらいいなと思っております。

気に入った表現ができたら、印刷して、自分の部屋に飾ってみたい。

ワタタク

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