p5.jsを使った線の描画方法

1. 直線の描画:

   function setup() {
   createCanvas(400, 400); // キャンバスの作成
   }
   function draw() {
   background(220); // バックグラウンドの色
   stroke(0); // 線の色（黒）
   line(50, 50, 350, 350); // 直線の描画（始点x座標, 始点y座標, 終点x座標, 終点y座標）
   }

2. 複数の線の描画:

   function setup() {
   createCanvas(400, 400); // キャンバスの作成
   }
   function draw() {
   background(220); // バックグラウンドの色
   stroke(0); // 線の色（黒）
   line(50, 50, 350, 350); // 直線の描画（始点x座標, 始点y座標, 終点x座標, 終点y座標）
   line(50, 350, 350, 50); // 直線の描画（始点x座標, 始点y座標, 終点x座標, 終点y座標）
   }

3. 線の太さと透明度の変更:

   function setup() {
   createCanvas(400, 400); // キャンバスの作成
   }
   function draw() {
   background(220); // バックグラウンドの色
   stroke(0, 128); // 線の色（黒）と透明度（128）
   strokeWeight(5); // 線の太さ（5ピクセル）
   line(50, 50, 350, 350); // 直線の描画（始点x座標, 始点y座標, 終点x座標, 終点y座標）
   }

これらの例では、setup()関数でキャンバスを作成し、draw()関数で線を描画しています。createCanvas()関数は、指定した幅と高さのキャンバスを作成します。background()関数はキャンバスの背景色を設定し、stroke()関数は線の色を指定します。line()関数を使用して直線を描画する際には、始点と終点の座標を指定します。また、strokeWeight()関数を使用して線の太さを指定することもできます。