SkyPattern ユーザーガイド

SkyPattern は、インタラクティブなキャンバス上で幾何学的要素を作成および操作できる幾何学的デザインツールです。このガイドでは、アプリケーションの効果的な使い方を説明します。

• はじめに
  • インターフェースの概要
  • 基本的なナビゲーション
• 要素の操作
  • 新しい要素の追加
  • 要素タイプ
    • 基点
    • 定数
    • 角度距離
    • 直線沿い
    • 交差線
    • XとYの交差
    • 直線
    • ベジェ曲線
    • 円弧
    • 高度な交差
    • 型紙ピース
  • 数式の使用
    • 基本演算
    • 動的関数 (要素の操作)
    • 静的数学関数
    • 定数と要素参照
    • 重要な注意事項
  • 要素管理
    • 要素の選択
    • 要素の並べ替え
    • 要素の削除
• キャンバス操作
  • 座標系
  • キーボードショートカット
  • マウス操作
• 保存と読み込み
  • クラウドドキュメント
  • ローカルバックアップ
• ヒントとベストプラクティス
  • 要素の命名
  • 複雑なデザインの構築
  • 数式の例
  • トラブルシューティング
• 高度な機能
  • ベジェ曲線の編集
  • 円弧と曲線の交点
  • 動的測定

はじめに

インターフェースの概要

SkyPattern インターフェースは、3 つの主要な領域で構成されています。

1. 上部ツールバー: SkyPattern のロゴと、ローカルバックアップ用の保存/読み込みボタンがあります。
2. キャンバス領域: インタラクティブな SVG キャンバスで、幾何学的要素の表示と操作が可能です。
3. 右側パネル: 要素リスト、追加/削除ボタン、プロパティエディタがあります。
4. 下部ステータスバー: ドキュメント ID と保存ステータスが表示されます。

基本的なナビゲーション

• パン: マウスホイール（中ボタン）をクリック＆ドラッグして移動します。
• ズーム: マウスホイールをスクロールしてズームイン/ズームアウトします。
• 要素を選択: キャンバスまたは要素リスト内の任意の要素をクリックして選択します。

要素の操作

新しい要素の追加

1. 右側パネルの ➕ ボタンをクリックするか、n キーを押します。
2. 名前のない新しい要素が作成され、選択されます。
3. エディターのドロップダウンから要素の種類を選択します。
4. 要素のプロパティを設定します。

要素タイプ

基点

• 目的: 特定の X,Y 座標に固定点を作成します
• プロパティ:
  • X 座標 (cm)
  • Y 座標 (cm)
• 例: x: 10, y: 20 は、位置 (10cm, 20cm) に点を作成します

定数

• 目的: 再利用可能な数値を定義します
• プロパティ: 値 (数式も使用可能)
• 例: value: 15 または value: 10 * 1.5

角度距離

• 目的: 別の点から特定の角度と距離にある点を作成します
• プロパティ:
  • 基準点: 基準点の名前
  • 角度: 方向（度単位、0° = 右/東、90° = 下/南、180° = 左/西、270° = 上/北）
  • 距離: 基準点からの距離（cm）
• 例: 「basePoint」から、角度 45°、距離 20

直線沿い

• 目的: 既存の2点間の直線上に点を配置します
• プロパティ:
  • 始点: 直線の始点
  • 終点: 直線の終点
  • 長さ: 始点からの直線沿いの距離（cm）
• 例: 直線の中間点: length: len(@point1, @point2) * 0.5

交差線

• 目的: 2本の直線が交差する位置を検索します
• プロパティ: 始点と終点のペアを使用して2本の直線を定義します
• 例: 直線1「point1」から「point2」、直線2「point3」から「point4」

XとYの交差

• 目的: ある要素のX座標と別の要素のY座標を使用して点を作成します
• プロパティ:
  • 点X: X座標を取得する要素
  • 点Y: Y座標を取得する要素

直線

• 目的: 2点間に目に見える線を描画します
• プロパティ: 始点と終点

ベジェ曲線

• 目的: コントロールハンドルを使用して滑らかな曲線を作成します
• プロパティ: コントロール角度と距離を持つ複数の点
• 使用方法: コントロールハンドルをクリックしてドラッグし、曲線の形状を調整します

円弧

• 目的: 円弧を作成します
• プロパティ: 中心点と半径（cm）

高度な交差

• 円弧と曲線: 円弧とベジェ曲線の交点を検索します
• 曲線に沿った点: 曲線に沿って特定の距離に点を配置します

型紙ピース

• 目的: 点、線、曲線を接続して閉じた多角形を作成します
• プロパティ: 要素名の配列（点またはベジェ曲線）
• 機能:
  • 隣接する点の間でベジェ曲線を自動的に切り詰めます
  • 塗りつぶされた閉じたパスとしてレンダリングされます
  • 図形の重心にラベルを表示します
• 例: 点配列: ["cornerA", "edgeCurve", "cornerB", "bottomLine", "cornerC"]
  • edgeCurve がベジェ曲線の場合、cornerA と cornerB の間で自動的に切り詰められます
  • 隣接する点がない曲線は全長を使用します
• 用途: 洋裁型紙、技術図面、またはデザインテンプレートの型紙ピースの境界を定義します

数式の使用

ほとんどの数値プロパティは数式を使用できます。使用できる関数:

基本演算

• 10 + 5、width * 2、radius / 3
• (10 + 5) * 2 (括弧はグループ化用)
• +、-、*、/ 演算子をサポート

動的関数 (要素の操作)

• len(@point1, @point2) - 2点間の距離 (cm)
• angle(@point1, @point2) - point1 から point2 への角度 (度)
• getX(@pointName) - 点の X 座標を取得
• getY(@pointName) - 点の Y 座標を取得
• bisect(@centerPoint, @point1, @point2) - 中心点から2点への角度を二等分する角度

重要: 関数内で要素名を参照する場合は、必ず先頭に @ を付けてください。例: len(@basePoint, @corner) であり、len(basePoint, corner) ではありません。

静的数学関数

• 三角法: sin(radians), cos(radians), tan(radians)
• 逆三角法: asin(value), acos(value), atan(value)
• 2引数アークタンジェント: atan2(y, x)
• 指数/対数: exp(x), log(x), log10(x)
• 基本数学: sqrt(x), abs(x), pow(base, exponent), sign(x)
• 丸め: ceil(x), floor(x), round(x), trunc(x)
• 複数の引数: min(a, b, c, ...), max(a, b, c, ...)

定数と要素参照

• 組み込み定数: PI (3.14159...), GOLDEN_RATIO (1.618...)
• 要素参照: 要素名を直接使用します: myConstant, centerRadius
• 関数内の要素名: 関数呼び出しで要素名を参照するには @elementName を使用します

重要な注意事項

• 三角関数はラジアンを使用しますが、SkyPatternの角度は度数法で表されます。
• 変換するには、sin(myAngle * PI / 180) または cos(myAngle * PI / 180) を使用します。
• 要素名は大文字と小文字が区別されます。
• 関数には括弧とカンマ区切りの引数が必要です。

要素管理

要素の選択

• キャンバス上の要素をクリックします
• 右側パネルの要素リストを使用します
• 選択された要素はハイライト表示されます

要素の並べ替え

• ⬆︎ と ⬇︎ ボタンを使用して計算順序を変更します
• 要素はリスト順に計算されるため、依存関係のある要素は先に配置する必要があります

要素の削除

• 要素を選択して ➖ ボタンをクリックします
• 注意: この要素を参照している他の要素は計算ができなくなります

キャンバス操作

座標系

• 原点 (0,0) は左上にあります
• Xは右（東）に増加します
• Yは下（南）に増加します
• 角度: 0° = 右、90° = 下、180° = 左、270° = 上
• すべての距離はセンチメートル（cm）単位です

キーボードショートカット

• n: 新しい要素を追加
• 要素の外側をクリックして選択解除

マウス操作

• クリック: 要素を選択
• ホイールクリック＆ドラッグ: キャンバスを移動
• ホイールスクロール: ズームイン/ズームアウト
• ベジェハンドル: クリック＆ドラッグで曲線のコントロールポイントを調整

保存と読み込み

クラウドドキュメント

ドキュメントID（下部のステータスバーに表示）をお持ちの場合、作業内容は500ミリ秒ごとに自動的にクラウドに保存されます。

ローカルバックアップ

• 保存: 「S」ボタンをクリックしてJSONバックアップをダウンロードします。
• 読み込み: 「L」ボタンをクリックしてJSONファイルをアップロードします。
• オフラインでの作業やデザインの共有に便利です。

ヒントとベストプラクティス

要素の命名

• 「centerPoint」、「radius」、「cornerAngle」のように、わかりやすい名前を付けます。
• 名前は数式で使用されるため、スペースや特殊文字は使用しないでください。
• キャメルケースまたはアンダースコアを使用します（例：baseWidth または base_width）。

複雑なデザインの構築

1. 基点から始めて主要な位置を決定します。
2. 重要な測定値には定数を作成します。
3. 角度/距離要素と直線要素を使用して、関連点を作成します。
4. 直線と曲線を追加してデザインを視覚化します。
5. 交点を使用して派生点を見つけます。

数式の例

• 定数: myRadius / 2 - 半径定数の半分
• 垂直角度: angle(@center, @corner) + 90 - 角度から90度
• 位置のシフト: getX(@point1) + 5 - X位置を右に5cm移動
• 中点の距離: len(@point1, @point2) * 0.5 - 2点間の距離の半分
• 線上の分数: len(@point1, @point2) / 3 - 距離の3分の1
• 三角法: sin(angle(@p1, @p2) * PI / 180) * 10 - 角度のサインに10を掛ける
• 複雑な式: sqrt(pow(getX(@p2) - getX(@p1), 2) + pow(getY(@p2) - getY(@p1), 2)) - 距離の公式
• 角度の二等分線: bisect(@vertex, @arm1, @arm2) - 2つのアームを均等に分割する角度
• 最小/最大: max(getX(@p1), getX(@p2), getX(@p3)) - 最も右のX座標

トラブルシューティング

• 要素が計算されない: 参照されているすべての要素が存在し、最初に計算されていることを確認してください。
• 予期しない位置: 数式と要素の順序を確認してください。
• パフォーマンスの問題: 複雑な曲線を単純化するか、要素数を減らしてください。

高度な機能

ベジェ曲線の編集

• ベジェ曲線を選択すると、コントロールハンドルが表示されます。
• ハンドルをドラッグして曲線の形状を調整します。
• コントロール角度は度、距離はキャンバス単位(cm)で表されます。

円弧と曲線の交点

• 正確な交点を見つけるのに役立ちます。
• 交点インデックスで、使用する交点を選択します(0、1、2...)。

動的測定

• 依存関係が変更されると、要素は自動的に更新されます。
• 基本値を変更することで、パラメトリックなデザインを作成できます。

このガイドでは、SkyPatternの基本機能について説明します。 さまざまな要素タイプと数式を試して、複雑な幾何学的デザインを作成しましょう。