ごあいさつ
やあ、みんな！ウルトラ先生だよ！
数学で習う「XY座標」と、コンピュータで絵を描くときによく使う「SVGの座標」。なんだかちょっと違うって気づいたこと、あるかな？点を打つ場所がズレちゃったり、クルクル回したら「あれれ？」ってなったり。
このウェブサイトは、そんな「なんで？」を「なるほど！」に変えるための秘密基地だ。特に、中学校で一番元気（？）なクラスのみんなにも分かるように、図やアニメーション、そして実際に触って試せるサンプルをいっぱい用意したぞ。
この冒険が終わるころには、キミも座標変換の達人になっているはず！さあ、一緒に座標の謎を解き明かす冒険に出かけよう！
数学の座標とSVGの座標、なんか違うぞ？
学校の数学でグラフを描くとき、X軸は右に行くとプラス、Y軸は上に行くとプラスだったよね。これがみんなが慣れ親しんでいる「数学の座標」だ。
ところが、ウェブページで図形を表示するときによく使うSVG (スケーラブル・ベクター・グラフィックス) っていう技術では、X軸は同じように右がプラスなんだけど、なんとY軸は下に行くとプラスになるんだ！
「えー！なんでそんなややこしいことするのー？」って思うよね。大丈夫、このサイトでその違いと、どうやって仲良く付き合っていくかをバッチリ解説するからね。
上の図みたいに、Y軸の向きが違うだけで、点の位置を表す数字の意味が変わってくるんだ。これが、$\sin$ や $\cos$ を使った回転なんかが出てくると、さらに頭を悩ませる原因になるんだよ。（$\sin$ や $\cos$ も綺麗に表示される！）
このサイトでキミが得られる「座標マスターへの道」
このサイトでは、ステップ・バイ・ステップで座標変換のコツを伝授するぞ！
- 数学の座標とSVGの座標、それぞれの特徴をしっかり理解できる！
- 点を移動したり、大きくしたり小さくしたり、回転させたり… そんな操作をSVGでどうやるか、数学の考え方とどう繋げるかが分かる！
- むずかしい数式も、図やアニメーションで見て、触って、楽しく学べる！
- $y = ax+b$ みたいな一次関数から、もっと複雑な図形まで、数学で考えたものをSVGでバッチリ表示できるようになる！
- 最後には、SVGの秘密兵器 `viewBox` を使って、座標変換をもっと簡単にするテクニックも教えちゃうぞ！
さあ、準備はいいかな？次のページから、本格的な冒険が始まるよ！
目次
A journey of a thousand miles begins with a single step.
Summary in English
Welcome to this guide where we'll explore the differences between mathematical XY coordinates and SVG (Scalable Vector Graphics) coordinates. You'll learn why they differ, especially the Y-axis direction, and how this affects drawing shapes and performing transformations like translation, scaling, and rotation.
This website is designed to be easy to understand, even for middle school students. We'll use plenty of examples, interactive demos, and step-by-step explanations. By the end, you'll be able to confidently convert mathematical concepts into SVG visuals, including handling complex rotations and even drawing mathematical functions.
We'll cover basics of both coordinate systems, then move on to transformations (translation, scaling, rotation), and finally tackle practical examples like plotting graphs and rotating shapes. We'll also introduce powerful SVG features like `viewBox` to simplify your work. Let's start this exciting journey into the world of coordinates!