p5.j​​s でスマイリーフェイスを描画する

この記事では、p5.js ライブラリを使用して、シンプルだが魅力的な絵、つまり笑顔を作成する方法を検討します。 p5.j​​s は、インタラクティブなグラフィックやアニメーションを簡単に作成できる JavaScript ライブラリです。コードベースのビジュアル プロジェクトを作成したいアーティスト、デザイナー、開発者に最適です。

p5.j​​sとは何ですか?

p5.js は、ビジュアル プログラミングの世界にアクセスできるようにすることを目的としたライブラリです。シンプルな方法で図形の描画、アニメーションの作成、ユーザーとの対話を可能にする一連の機能を提供します。これは JavaScript で書かれていますが、ユーザーは目を引くビジュアルの作成を始めるためにこの言語の専門家である必要はありません。

p5.j​​s のスケッチの基本構造

p5.js のスケッチには 2 つの主な機能があります:

1. setup(): 最初に1回実行されます。ここでキャンバスを初期化し、色を設定し、必要な要素を準備します。
2. draw(): フレームごとにループで実行されます。ここに、(アニメーションのように) 連続的に繰り返したい命令を配置します。私たちの場合、アニメーションは必要ないので、空のままにします。

プロジェクト：笑顔

目標は、単純な図形を使用して笑顔を描くことです。顔には大きな円、目には小さな円 2 つ、口には円弧を描きます。

ステップ 1: キャンバスを作成する

最初にキャンバスのサイズを定義します。この場合、400x400 ピクセルのサイズを使用し、黒の背景を設定します。

function setup() {
  createCanvas(400, 400);
  background(0); // Fondo negro
}

ステップ 2: 顔を描く

顔は単純に大きな円です。 p5.j​​s で円を描画するには、ellipse() 関数を使用します。この関数には、円の中心の座標、幅、高さが必要です。この例では、キャンバスの中心に直径 200 ピクセルの円を描画します。

stroke(255); // Color de línea blanco
strokeWeight(5); // Grosor de la línea
noFill(); // Sin relleno para el círculo
ellipse(200, 200, 200, 200); // Dibuja la cara

ステップ 3: 目を描く

目は2つの小さな白い丸です。同じ ellipse() 関数を使用できますが、今回は白で塗りつぶし、顔の中心の少し上と側面に配置します。

fill(255); // Relleno blanco para los ojos
noStroke(); // Sin borde para los ojos
ellipse(160, 170, 20, 20); // Ojo izquierdo
ellipse(240, 170, 20, 20); // Ojo derecho

ステップ4：笑顔を描く

最後に、笑顔のために arc() 関数を使用します。この機能を使用すると、笑顔のような楕円弧を描くことができます。カーブが中心にあり、口のように見えるように座標を調整します。

noFill(); // Sin relleno para la boca
stroke(255); // Líneas blancas de nuevo
arc(200, 220, 100, 80, 0, PI); // Dibuja la sonrisa

完全なコード:

function setup() {
  createCanvas(400, 400);
  background(0); // Fondo negro

  stroke(255); // Color de línea blanco
  strokeWeight(5); // Grosor de la línea
  noFill(); // Sin relleno para el círculo

  // Dibuja la cara (un círculo grande)
  ellipse(200, 200, 200, 200);

  // Ojos (dos círculos pequeños)
  fill(255); // Relleno blanco para los ojos
  noStroke(); // Sin borde para los ojos
  ellipse(160, 170, 20, 20);
  ellipse(240, 170, 20, 20);

  // Boca sonriente
  noFill(); // Sin relleno para la boca
  stroke(255); // Líneas blancas de nuevo
  arc(200, 220, 100, 80, 0, PI); // Dibuja la sonrisa
}

function draw() {
  // No se requiere animación, por lo que dejamos el draw vacío
}

結論

この簡単な例は、p5.js を使用して、数行のコードで魅力的なグラフィックを作成する方法を示しています。このプロジェクトは基本的なものですが、ここで使用される原則を拡張して、より複雑で詳細なビジュアルを作成することができます。さらに実験したい場合は、要素のサイズを変更したり、色の追加を試したり、draw() でアニメーションを作成したりすることもできます。

このスマイリーフェイスの独自バージョンを作成して、p5.js が提供するものを探索してください!