P5.jsによるSVGベクターグラフィックスへの以前の取り組みを踏まえ、今回は新たな意欲と目的を持って、デジタルアートをコーディングする世界へ踏み出します。テクノロジーと芸術表現の相互関係に प्रेर発され、iDrawペンプロッター向けに最適化されたSVG形式の作品制作に革新的なツールが求められていることを背景に、探究を進めていきます。コーディングによる創造性を提唱する私たちは、デジタルアーティストがP5.jsの可能性を最大限に引き出すために必要なスキルと知識を身につけ、デジタルキャンバス上で想像力を実体ある傑作へと変えることを目指しています。 コーディング付きのSVGファイルが必要ですか？ こちらからダウンロード>>>
ステップ1：キャンバスの作成
P5.jsでデジタルアートをコーディングする旅を始めるにあたり、まず作品に命を吹き込むキャンバスを設定します。P5.jsのcreateCanvas()関数を使用して、黒い背景で塗りつぶしなしの400x400キャンバスを定義し、創作の舞台を整えます。
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
ステップ2：中央に正方形状に配置された円を描く
小さな円で構成された内側の円をよく観察すると、パターンが見えてきます。直径75の円周上に64個の円が均等に配置されています。ここでは、forループを使って小さな円の中心の座標（X、Y）を定義できます。具体的には、ループが1回実行されるたびに「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を加える必要があります。ellipse(x,y,6,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より大きい場合、X座標を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ペンプロッター のご利用を心よりおすすめします。精密かつ美しく作品を描き出し、デジタルと現実の世界の隔たりを埋めながら、芸術的な完成度を追求できます。
関連記事：