【Processing】mag()の使い方【2つの数字（xとy）が作る線がどれだけ長いかを教えてくれる】

ワタタク

今回の記事の目的はProcessingの「mag()」を理解し、自分なりに使ってみること。

この記事を書いた人

プロフィール

• クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
• コンセプトは「クリエイティブコーディング1万時間の歩き方」
• 2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始（クリエイティブコーディングで作成した作品集）

 

記事内のProcessingのバージョンは4.3。

【Processing】mag()について

【Processing】mag()の使い方【画像とコード】

なぜ5.0になるのかは後述

  // 画面の大きさを設定
  size(200, 200);
  // 背景を白に
  background(255);
  PFont font = createFont("Meiryo", 50); textFont(font);
  
  // xとyの値を設定
  float x = 3;
  float y = 4;
  
  // mag()を使って長さを計算
  float length = mag(x, y);
  
  // 計算結果を表示
  fill(0);  // 文字の色を黒に
  textSize(16);  // 文字サイズを設定
  text("長さ: " + length, 50, 100);  // 計算結果を表示

上記のコードの結果がなぜ5.0になるのか？（どういう計算が行われているか）

このコードの中でmag(x, y)が5になる理由は、ピタゴラスの定理に基づいているからです。

ピタゴラスの定理では、直角三角形の斜辺（長い方の辺）の長さは、他の2辺の長さの二乗の和の平方根です。この場合、xとyは直角三角形の2つの辺の長さを表しています。

上記のコードでは

• x = 3
• y = 4

この場合、斜辺（hypotenuse）の長さは次のように計算される

なのでmag(3, 4)は5を返します。

この計算方法は、数学の基本的な概念であり、ベクトルの大きさや2点間の距離を計算する際に非常に役に立つ。

【Processing】mag()を使ってみた感想

ピタゴラスの定理が出てきた。

Processingも数学を頑張ろうと思える。

本格的に取り組むときは必要な数学だけに取り組むことにする。

小学校4年生くらいからの数学を全部やろうとしないこと。おそらく挫折する。

ワタタク

それでは今日もレッツワクワクコーディング。