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

ワタタク

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

この記事を書いた人

上達の研究家 / アーティスト

「才能」ではなく「発見」で描く。文系・36歳からの上達ハック。

• ゼロから独学でクリエイティブコーディングに挑戦し、以下の実績を達成
  • 開始1年8ヶ月目までに公募6つに挑戦し、3つ入選（勝率50%）
    • KITTE大阪の18メートルあるAxCROSS大型スクリーン
    • 虎ノ門ヒルズステーションタワーB2F TOKYO NODE エントランスサイネージで展示
    • UN:O（東京大手町）にある会員限定のサテライトオフィスにて2作品常設展示
  • 開始1年9ヶ月目に、虎ノ門ヒルズ49階、地上250mのインフィニティプールへ作品提供・展示
• 【上達の秘密】
  • 起源の物語：未経験から虎ノ門ヒルズ展示までの全記録（Genesis）
  • 思考の技術：「上達」をシステム化する、モレスキン6冊の運用設計図
    • ※虎ノ門ヒルズでの実績を出した「思考」と「経験」を、再現可能な形に体系化

記事内の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);  // 計算結果を表示

  // 画面の大きさを設定
  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年生くらいからの数学を全部やろうとしないこと。おそらく挫折する。

ワタタク

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