P5.jsによるSVGベクターグラフィックスの前回の試みに基づき、今回は新たな意欲と目的を持ってデジタルアートのコーディングの世界に踏み込みます。技術と芸術表現の相互関係に動機づけられ、iDraw Pen Plotters向けに特化したSVG形式の作品制作における革新的なツールの需要に応えています。コーディングによる創造性の推進者として、デジタルアーティストがP5.jsの可能性を最大限に活用し、想像力をデジタルキャンバス上の具体的な傑作へと変えるためのスキルと知識を提供することを目指しています。コーディング付きのsvgファイルが必要ですか？ こちらからダウンロード>>>
ステップ1：キャンバスの作成
P5.jsでデジタルアートのコーディングを始めるにあたり、まず作品が生まれるキャンバスを設定します。P5.jsのcreateCanvas()関数を使い、400×400のキャンバスを黒背景かつ塗りなしで定義し、創造的な探求の舞台を整えます。
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
ステップ2：中央の正方形に配置された円の描画
内側の小さな円の円周上に均等に配置された64個の円のパターンを注意深く観察します。直径75の円周に沿って配置されているため、forループを使って小円の中心座標（X, Y）を定義できます。具体的には、ループの各反復で'i'の値をπ/32ずつ増加させ、'i'がTAU（完全な円を表す）を超えるまで続けます。ループの本体は以下のように書けます。
let r=75;
let x=sin(i)*r+200;
let y=cos(i)*r+200;
ellipse(x,y,6,6);
XとYの値は極座標です。なぜ200を足すのかというと、P5.jsでは座標系の原点が左上隅にあり、Yの正の方向が下向きだからです。
したがって、中央に配置するためにキャンバスの幅と高さの半分である200を加えます。直径6ピクセルの円を描くにはellipse(x,y,6,6)を使います。次に中央部分の円を見てみましょう。中心はキャンバス中央を中心とした一辺280の正方形の辺上にあります。IF文を使って円の中心位置を制限できます。例えば：
if(X>320) X=320;
if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
if(X>320) X=320;
X座標が320を超えたら320に設定します。Y座標は制限しません。これにより、最外周の円のY座標は変わらず、X座標だけが320に固定されます。結果として赤い部分が緑の部分に移動し、図のようになります。
同様に、if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
ステップ3：ステップ1と2の形状を線でつなぐ
XとYの値が最内周の小円の円周上にあり、XとYが中央の正方形の円の中心を表しているので、lineコマンドline(x,y,X,Y);を使ってそれらをつなげます。
ステップ4：最外周の小円を描き、ステップ2の円に直接つなぐ
最外周の円を中央に移動させたので、最外周の円を戻しましょう。この時点でxとyの値はr * sin(i)とr = cos(i)で表されます。最初はrが78でしたが、今は170です。xとyに値を代入するだけです：x=sin(i)*r+200; y=cos(i)*r+200;これでxとyは最外周の小円の中心を表します。円と線を描くことでこのシンプルなデジタルアートが完成します。コードは以下の通りです： circle(x,y,6); line(x,y,X,Y);
forループ内のPIの分割値を調整することで、デジタルアートの密度を濃くしたり疎らにしたりできます。
完全なコードは以下の通りです：
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
function draw() {
background(0);
for(i=0;i<TAU;i+=PI/36){
let r=75;
let x=sin(i)*r+200;
let y=cos(i)*r+200;
ellipse(x,y,6,6);
r=78;
x=sin(i)*r+200;
y=cos(i)*r+200;
r=170;
let X=sin(i)*r+200;
let Y=cos(i)*r+200;
if(X>320) X=320;
if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
circle(X,Y,6);
line(x,y,X,Y);
x=sin(i)*r+200;
y=cos(i)*r+200;
circle(x,y,6);
line(x,y,X,Y);
}
}
まとめ
結論として、P5.jsを使ったデジタルアートのコーディング探求は、無限の創造性と可能性の世界を明らかにしました。コードと想像力が織りなす複雑な舞踏が作品に命を吹き込み、技術がアーティストの手に渡ることで変革をもたらす力を再認識しました。この旅に触発され、他のクリエイターの皆様も独自のコーディングの冒険に出発し、私たちが発見したツールと技術を活用して独自の傑作を創り出すことをお勧めします。そして、デジタル作品を物理的な世界に持ち込みたい方には、iDraw Pen Plottersのご利用を心から推奨します。精密かつ優雅に作品を描き出し、デジタルと物理の世界の架け橋となり、芸術の卓越性を追求します。
関連する記事：