SVGベクターグラフィックス用のP5.jsへの以前の取り組みを踏まえ、私たちは新たな活力と目的を持ってデジタルアートのコーディングの領域に踏み込みます。テクノロジーと芸術表現の共生関係に突き動かされ、iDrawペンプロッター向けにカスタマイズされたSVG形式のアート作品を作成するための革新的なツールへの需要が私たちの探求を支えています。コーディングによる創造性の推進者として、私たちはデジタルアーティストがP5.jsの可能性を最大限に引き出すために必要なスキルと知識を身につけ、想像力をデジタルキャンバス上の具体的な傑作へと変えることを目指しています。 コーディング付きのSVGファイルが必要ですか？ ここからダウンロード>>>
ステップ1：キャンバスの作成
P5.jsを使ったデジタルアートのコーディングを始めるには、まずアートワークを描くキャンバスを作成します。P5.jsのcreateCanvas()関数を使って、400x400のキャンバス（背景は黒、塗りつぶしなし）を定義し、創作活動の舞台を整えます。
関数セットアップ() {
キャンバスを作成します(400,400);
塗りつぶしなし(0);
ストローク(255);
}
ステップ2：中央に正方形を配置した円を描く
小さな円の内側の円を注意深く観察すると、あるパターンが見つかります。それは、直径75の円周に沿って均等に分布する64個の円で構成されています。この時点で、forループを使用して、小さな円の中心の座標(X, Y)を定義できます。具体的には、ループの各反復ごとに、「i」の値はπ/32ずつ増加し、「i」がTAUの値（完全な円を表す）を超えるまで増加します。ループ本体は次のように記述できます。
r=75とします。
x=sin(i)*r+200とします。
y=cos(i)*r+200とします。
楕円(x,y,6,6);
XとYの値は極座標です。なぜ200を加算するのでしょうか？P5.jsでは、座標系の原点は左上隅にあり、Yの正の値は下に向かって増加するためです。
中央に配置するには、キャンバスの幅と高さの半分、つまり200を追加します。ellipse(x,y,6,6)コマンドを使用して、直径6ピクセルの円を描画します。次に、中央部分の円を見てみましょう。円の中心は、キャンバスの中央に位置する、辺の長さが280の正方形の各辺にあります。円の中心の位置は、IF文を使って次のように制限できます。
X>320の場合、X=320;
X<80の場合、X=80;
Y>320の場合、Y=320;
Y<80の場合、Y=80;
X>320の場合、X=320;
X座標が320より大きい場合は、X座標を320に設定します。Y座標は制限されません。つまり、最も外側のリングにある円のY座標は変更されず、X座標はすべて320に設定されます。その結果、図に示すように、赤い部分が緑の部分に移動します。
同様に、 if(X<80) X=80;
Y>320の場合、Y=320;
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 の細分値を調整して、デジタルアートワークをよりコンパクトにしたり、よりスパースにしたりすることができます。
完全なコードは次のとおりです。
関数セットアップ() {
キャンバスを作成します(400,400);
塗りつぶしなし(0);
ストローク(255);
}
関数draw() {
背景(0);
(i=0;i<TAU;i+=PI/36)の場合{
r=75とします。
x=sin(i)*r+200とします。
y=cos(i)*r+200とします。
楕円(x,y,6,6);
r=78;
x = sin(i)*r + 200;
y=cos(i)*r+200;
r=170;
X=sin(i)*r+200とします。
Y=cos(i)*r+200とします。
X>320の場合、X=320;
X<80の場合、X=80;
Y>320の場合、Y=320;
Y<80の場合、Y=80;
円(X,Y,6);
線(x,y,X,Y);
x = sin(i)*r + 200;
y=cos(i)*r+200;
円(x,y,6);
線(x,y,X,Y);
}
}
まとめ
結論として、P5.jsを用いたデジタルアートのコーディングの探求は、無限の創造性と無限の可能性の領域を明らかにしました。コードと想像力の複雑なダンスが作品に命を吹き込んだことを振り返ると、アーティストの手によるテクノロジーの変革力を改めて認識させられます。この旅に触発され、私たちは仲間のクリエイターたちに、私たちが発見したツールとテクニックを活用し、独自の傑作を創り出すためのコーディングの旅に乗り出すことを呼びかけます。そして、デジタル作品を物理的な世界に持ち込みたいと考えている方には、私たちの製品であるiDrawペンプロッターを活用して、作品を精密かつ優雅にレンダリングし、デジタルと物理的な世界のギャップを埋め、芸術的卓越性を追求することを心からお勧めします。
関連記事: