桜チャート(Sakura Chart)

CSV を貼り付けるだけで、統計グラフを自動生成できる無料ウェブツール

桜チャートで座標アートに挑戦:桜の花と犬

本記事では、散布図や折れ線グラフを扱うツール「桜チャート」を使って、 X・Y座標とLEVEL(グループ・色分け用の列)だけで“絵”を描くことに挑戦します。
前半は数学的に描ける代表例として「桜の花」、後半は同じやり方で「犬」を描こうとして苦戦した例を紹介します。


第1部:数学で描ける世界 ― 桜の花を座標で描く

桜チャートで桜の花を描く方法

本記事では、散布図や折れ線グラフを扱うツール「桜チャート」を使って、 数学的に桜の花を描く方法を解説します。
X・Y座標とLEVEL(グループ・色分け用の列)だけで花びらの形を作り、 回転の公式を使って 5 枚の花びらを並べることで、桜の形を表現していきます。

この方法は、桜チャートだけでなく、Excel や Python(Matplotlib)といった 他のツールにも応用できるので、 「データとして図形を扱う」「座標ベースで形を作る」考え方の参考にもなります。

この記事でできるようになること

  • X・Y 座標と簡単な直線の式だけで、花びらの形を作る方法が分かる
  • Y軸対称(左右反転)の考え方をグラフ作成に応用できる
  • 回転行列(x', y' の公式)を使って図形を回転させる手順が理解できる
  • 桜チャートに座標データを貼り付けて、桜の形を描く流れが分かる

まずは ChatGPT に座標を作ってもらった話

最初は、自分で座標を考えるのが少し大変そうだったので、 ChatGPT に「桜の形に見える X・Y 座標」を生成してもらい、 そのデータを桜チャートに読み込んでみました。

しかし、散布図で表示すると点がバラバラに見えてしまい、 どう見ても桜には見えませんでした。 そこで、いったん折れ線グラフとして点をつないで表示しています。

ChatGPT が生成した座標で描いた桜の折れ線グラフ
ChatGPT が生成した座標で描いたグラフ。Chat GPTはこういうの苦手なんでしょうか。。。

さらに、桜の画像を渡して「この形を座標にしてほしい」と頼んでみましたが、 こちらもきれいな桜にはならず、最終的には 自分で花びらの形を数式で定義する ことにしました。

桜画像から座標化を試みた結果のイメージ
(画像から座標化を試してみたものの、理想的な桜の形にはならず)

ステップ1:花びらの片側を 4 本の直線で作る

ここからは、桜の花びらを数学的に作っていきます。 花びらは左右対称の形なので、まずは片側だけを直線で定義します。

使用した直線は次の 4 本です:

  • ①Y = X(0 ≦ X ≦ 2)
  • ②X = 2(2 ≦ Y ≦ 5)※縦方向の直線
  • ③Y = -X + 7(1 ≦ X ≦ 2)
  • ④Y = X + 5(0 ≦ X ≦ 1)

これら 4 本の直線を順番につなげていくことで、 花びらの片側の輪郭ができます。

花びら片側の線分構成図
4 本の直線をつないで、花びら片側の輪郭を作成。

ステップ2:Y軸対称に反転させて花びら1枚を完成

花びらは左右対称なので、先ほど作った片側を Y軸に対して反転させることで、1 枚の花びらを完成させます。

関数で書くと Y = f(-X) のイメージで、 X の符号だけを反転させた点を追加していきます。

左右対称にした花びら1枚の図
Y 軸対称に反転させて、1 枚の花びらが完成。

ステップ3:回転の公式を使って 5 枚の花びらを並べる

桜の花は 5 枚の花びらを持つことが多いため、 完成した花びら 1 枚を 72°(= 360° ÷ 5)ずつ回転させて並べることで、 桜の形を作ることができます。

回転に使う基本公式(原点中心)

原点まわりに角度 θ 回転させるときの座標変換は、次の式を使います。

x' = x cosθ - y sinθ
y' = x sinθ + y cosθ

72° をラジアンにすると:

θ = 72° = 72π / 180 = 2π / 5 ≒ 1.256637

数値としては、おおよそ次のようになります。

  • cos(72°) ≒ 0.309016994
  • sin(72°) ≒ 0.951056516

Excel や桜チャートにそのまま入れやすい形にすると、

x' = 0.3090x - 0.9511y
y' = 0.9511x + 0.3090y

この変換を 72°ずつ(必要に応じて 144°, 216°, 288° …)繰り返して適用すると、 同じ形の花びらが回転して並び、5 弁の桜が出来上がります。

5枚の花びらを回転させて並べた桜の線画
72°ずつ回転させて 5 枚並べると、座標だけで桜の形が描ける。

桜チャートで描画する手順(実際の使い方)

実際に桜チャートで桜の形を描画する際の流れは、次のようになります。

  1. 花びら1枚分の X・Y 座標を作成する(直線の式から計算する)
  2. 回転公式を使って、72°ずつ回転させた座標を求める
  3. 花びらごとに LEVEL を振る(例:花びら1=LEVEL A、2=LEVEL B…)
  4. すべての座標を 1 つの CSV にまとめる
  5. 桜チャートに CSV を貼り付けて、散布図または折れ線グラフを描画する

桜チャートでは LEVEL ごとに自動で色分けできるため、 花びらごとに LEVEL を変えておくと、 「花びら単位で色を変える」といった表現も簡単にできます。

色分けした桜の花
LEVEL ごとに色を変えると、より桜らしい雰囲気に。

応用:座標データを使うと図形生成の幅が広がる

この記事で紹介した手法は、桜の花びら以外の図形にも応用できます。 例えば、星形、葉っぱ、ロゴマーク、幾何学模様などを、 座標と回転だけで生成することができます。

座標データに変換できれば、桜チャートだけでなく、 Excel や Python の Matplotlib、R などでも同じように描画できます。 データとして扱えるため、色分け、透過、サイズ変更なども自由に行えます。

まとめ:桜チャートは「図形をデータとして扱う」遊びにも使える

  • 直線の組み合わせと対称性、回転の公式だけで桜の花びらを表現できる
  • 座標ベースで図形を作ると、どのツールでも再現しやすい
  • 桜チャートは LEVEL 列による色分けが簡単で、図形のパーツごとに色を変えやすい
  • 実験データや統計グラフだけでなく、「図形を描く遊び」にも応用できる

ここまでは「桜の花」のように、対称性と回転で表現しやすい題材でした。
では同じ発想で、もっと複雑な自然物(犬)は描けるのでしょうか?

→ 続き:第2部:犬を座標で描いてみる


第2部:自然物の壁 ― 犬を座標で描いてみる

ここからは、桜の応用として、 X・Y座標とLEVELを使って「犬」を表現できるかどうかを試してみた記録です。

次は動物の絵を描いてみる

前回桜の絵を桜チャートを使って描いてみたという記事を書いたのですが、
今回は犬の絵を描いてみました。

ChatGPTに「座標で犬を描いて」と頼んだら普通の画像が出てきた

まずは、自分で座標を1点ずつ考えるのが大変そうだったので、 ChatGPT にこうお願いしてみました。

「X, Y, LEVEL の3列で、犬の絵になる座標データを作ってください」

すると返ってきたのは、きれいな犬のイラスト画像でした。

「いや、そうじゃない」
と心の中でつぶやきつつ、その画像をもとに座標を生成してもらおうと試行錯誤しました。

ChatGPTが生成した犬の画像のイメージ
(最初は普通の犬の画像が生成された)

画像をもとに座標プロットさせたら、ひどい犬(?)になった

そこで、先ほど生成した犬の画像をもとにChat GPTにプロットさせたところ 以下のような画像になりました。

散布図でグラフをプロットして表示すると…

座標で描いた犬の失敗作イメージ
どう頑張っても「犬には見えない」謎の生き物になってしまった図

かろうじて輪郭が分かるような絵になってしまいました。

Pythonで輪郭を座標として抽出してみるも、こちらも一筋縄ではいかず

今度は Python(OpenCV)で犬の輪郭を自動抽出し、 その輪郭点を桜チャートに流し込む方法を試しました。

ざっくりとした流れは、次のようなイメージです。

  • 犬の画像をグレースケールに変換する
  • エッジ検出や2値化で輪郭部分を強調する
  • 輪郭抽出で点列(X,Y)を取り出す
  • 取り出した座標をCSVにして桜チャートに読み込む
犬画像から輪郭抽出を試したイメージ
(Pythonで輪郭抽出を試したイメージ)

しかし、実際にやってみると、

  • 輪郭点が多すぎて、グラフとしては「ただの黒い塊」になりがち
  • 点を間引くと今度は輪郭がガタガタになる
  • LEVELで塗り分けようとしても、どこで区切るかの判断が難しい

といった問題にぶつかり、「きれいな犬の線画」にはなかなかたどり着けませんでした。

結局「犬の顔だけ」をグラフ化するようにお願いしたら

全身の犬を座標だけで表現するのは一旦あきらめて、 「顔だけ」に範囲を絞って、Chat GPTに座標を出してもらいました。

顔の輪郭、耳の先端、目・鼻・口の位置といった 「犬らしさ」に効くポイントだけを数十点ほどピックアップし、 それぞれに X・Y・LEVEL を振って桜チャートに読み込ませています。

桜チャートで描いた犬の顔のイメージ
(顔の輪郭とパーツだけに絞ってプロットすると、「あ、犬だ」と分かるレベルになった)

こうして描画されたグラフを見てみると、 耳の形や目・鼻の位置関係から、 「少なくとも犬の顔には見える」レベルの絵になりました。

座標で犬を描いてみて分かったこと

今回のチャレンジを通して、次のようなことが分かりました。

  • ChatGPT に「座標で犬を描いて」と頼んでも、まだ思った通りの座標は得られない
  • Pythonで輪郭抽出をしても、そのままでは座標が多すぎてグラフとして扱いづらい
  • 全身を一気に描こうとするより、「顔だけ」など範囲を絞った方が形にしやすい
  • 最終的な仕上がりには、やはり人間の調整や取捨選択が欠かせない

桜の花びらのような、数式できれいに書ける図形に比べると、 犬のような自然物は 「どこをどのくらい簡略化するか」 の判断が重要だと感じました。


第3部:比較まとめ ― 桜と犬で分かった「座標化の得意・不得意」

同じ「X・Y・LEVELで描く」でも、桜と犬では手応えがまったく違いました。 最後に、今回の結論をまとめます。

桜が描きやすかった理由

  • 左右対称・回転など、ルール(規則性)で表現できる
  • 直線の組み合わせでも、それっぽい輪郭が作れる
  • 必要な点の数が少なく、データとして扱いやすい

犬が難しかった理由

  • 輪郭が滑らかで、点が増えやすい(増えると“黒い塊”になりやすい)
  • 「犬らしさ」を作る要素(耳・目・鼻など)を取捨選択する必要がある
  • LEVELで区切る境界が題材依存で、機械的に決めにくい

桜チャートは「きれいな絵を描くツール」というより、 対象をどこまで座標(データ)に落とし込めるかを考えさせるツールだと感じました。
次は、別の図形や動物、キャラクターなどにも挑戦してみたいと思います。

ページ上部(桜パート)に戻る
犬パートに戻る
桜チャートのホームに戻る