DeepSeek-V4をテストする
· 約10分
Claude Opus4.6、4.7の代替にはDeepSeek-V4はまだなれないかな
まだ出たばっかで修正されるかもしれないですがツールもまともに使えないことがあります
あと基本的に1回のプロンプトでエラーなく作れたかだけをみてます。
ギアテスト
これができたらClaudeから乗り換えでもいいかなと思いましたが不安定でした。
# 指示: 自律生成型ギアシード・シミュレーター (Procedural Gear-Seed Simulator)
以下の仕様に従い、**1つのHTMLファイル**（HTML/CSS/JavaScript 全て内包）で完全に動作するギアシード・シミュレーターを生成してください。外部ライブラリは一切使用しないでください。Canvas API のみで描画してください。
---
## ■ コンセプト
1つの起点歯車（ドライブ・ギア）から始まり、ユーザーが「追加」するたびにシステムが **自律的に** 噛み合い位置を計算し、歯車が連鎖的に増殖・連動して回転するシミュレーター。
---
## ■ 1. 歯車の幾何学モデル
### 1-1. インボリュート歯形の簡易モデル
各歯車は以下のパラメータで定義する:
- `teethCount` (歯数 N): 8〜60 の整数（追加時にランダム or スライダーで指定）
- `module` (モジュール m): 全歯車で統一値（デフォルト = 8px）。UIスライダーで 4〜16 に変更可。
- `pitchRadius` (ピッチ円半径 r): `r = m * N / 2`
- `addedum` (歯先高さ): `1.0 * m`
- `dedendum` (歯元深さ): `1.25 * m`
- `outerRadius` (歯先円半径): `r + addendum`
- `rootRadius` (歯元円半径): `r − dedendum`
- `toothAngle` (1歯あたりの角度): `2π / N`
- 各歯は台形近似（tooth tip arc → flank line → root fillet arc）で描く。最低でも **歯先の円弧・フランク直線・歯元のフィレット曲線** を含む滑らかな形状にすること。
### 1-2. 描画関数
```
function drawGear(ctx, gear, time) { ... }
```
- `gear` オブジェクトから全パラメータを取得
- 現在の回転角度 `gear.angle` を適用して描画
- 歯面にグラデーション（金属調）を適用
- 中心にシャフト穴（小円）を描画
- 歯車の中心座標 `(gear.x, gear.y)` を基準に `ctx.translate` + `ctx.rotate` で描画
---
## ■ 2. 噛み合い（メッシュ）の自律計算
### 2-1. 新規歯車の配置アルゴリズム
新しい歯車（子ギヤ）を追加するとき:
1. **親ギヤの選択**: 既存歯車リストからランダムに1つ選ぶ（または最後に追加されたものを優先するモード切替可）
2. **中心間距離の計算**: `d = r_parent + r_child`（両ピッチ円が接する距離）
3. **配置角度の探索**:
- 親ギヤの中心から角度 θ (0〜360°) を 1°刻みでスキャンし、候補位置 `(px + d*cosθ, py + d*sinθ)` を算出
- 候補位置が **既存の全歯車と重ならない**（中心間距離 > `outerRadius_existing + outerRadius_child + gap` ）ことを確認
- **Canvas境界内** に収まることも確認
- 有効な候補の中から **ランダムに1つ** を選ぶ（有機的な広がりを演出）
- 全角度で配置不能なら、別の親ギヤを再選択してリトライ（最大リトライ = 既存歯車数）
### 2-2. 回転方向と歯の位相同期
- 親ギヤと子ギヤは **逆回転** する
- `child.angularVelocity = −parent.angularVelocity * (parent.teethCount / child.teethCount)`
- **歯の位相合わせ**: 配置時に、親の歯の谷と子の歯の山が正確に噛み合うよう初期角度 `child.initialAngle` を計算する:
```
接触点方向の角度 = atan2(child.y − parent.y, child.x − parent.x)
parent側の歯位置 = (parent.angle + 接触点角度) を toothAngle で割った余り
child.initialAngle = 接触点角度 + π + (半歯分オフセット) − 対応する位相補正
```
この計算により、**アニメーション中に歯が貫通せず、滑らかに噛み合う** こと。
### 2-3. 連鎖的回転更新
- ドライブギア（最初の歯車）のみ `baseAngularVelocity`（UIスライダーで調整可）を持つ
- 各フレームで BFS/DFS により接続グラフを走査し、全歯車の角度を更新
- `gear.angle = gear.initialAngle + gear.angularVelocity * time`
---
## ■ 3. アニメーション・レンダリング
### 3-1. メインループ
```
requestAnimationFrame ベースの60fpsループ
```
- 毎フレーム Canvas をクリアし、全歯車を描画
- 噛み合い線（メッシュライン: 親子の中心を結ぶ薄い線）をオプション表示
### 3-2. 歯車のビジュアル
- **金属調グラデーション**: 歯面に放射グラデーション（#888 → #CCC → #888）
- **歯先のハイライト**: outerRadius付近に薄い光沢線
- **シャフト穴**: 中心に半径 `m * 1.5` の穴（ダークグレー）
- **スポーク**: シャフトから歯元まで 4〜6本のスポーク線（歯数が20以上の場合のみ）
- **影**: 各歯車の下に `ctx.shadowBlur = 8, shadowColor = rgba(0,0,0,0.3)` でドロップシャドウ
### 3-3. 背景
- ダークグレー (#1a1a2e) 〜 ネイビー (#16213e) のグラデーション背景
- 薄いグリッドパターン（50px間隔、rgba(255,255,255,0.05)）
---
## ■ 4. ユーザーインターフェース
### 4-1. コントロールパネル（画面左側 or 上部にオーバーレイ）
以下のUIを配置:
| UI要素 | 機能 |
|---|---|
| 「+ ギア追加」ボタン | 歯車を1つ自律追加 |
| 「自動増殖」トグルボタン | ON: 1〜2秒間隔で自動追加 / OFF: 手動のみ |
| 「歯数」スライダー (8〜60) | 次に追加する歯車の歯数を指定 / 「ランダム」チェックボックスON時は無視 |
| 「ランダム歯数」チェックボックス | ON: 歯数を8〜40のランダムに |
| 「モジュール」スライダー (4〜16) | 全歯車の共通モジュール値（変更時は全再計算） |
| 「速度」スライダー (0.1〜5.0) | ドライブギアの回転速度 |
| 「メッシュライン表示」チェック | 歯車間の接続線の表示切替 |
| 「リセット」ボタン | 全消去してドライブギアのみに戻す |
| 「歯車数」表示 | 現在の総歯車数をリアルタイム表示 |
### 4-2. ドラッグ操作
- Canvas上でマウスドラッグすると **ビューポート全体をパン** （移動）できる
- マウスホイールで **ズームイン/アウト** （0.2x 〜 3.0x）
- ズーム中心はマウスカーソル位置
### 4-3. レスポンシブ
- Canvas は `window.innerWidth × window.innerHeight` のフルスクリーン
- リサイズ時に自動調整
---
## ■ 5. データ構造
```javascript
const state = {
gears: [], // Gear オブジェクトの配列
module: 8, // 共通モジュール
driveSpeed: 1.0, // ドライブギアの角速度
time: 0, // アニメーション経過時間
autoSpawn: false, // 自動増殖フラグ
viewport: { x: 0, y: 0, zoom: 1.0 }, // パン・ズーム
};
class Gear {
constructor({ teethCount, x, y, parentIndex, angularVelocity, initialAngle, color }) {
this.teethCount = teethCount;
this.x = x;
this.y = y;
this.parentIndex = parentIndex; // 噛み合い親のindex (-1 = ドライブ)
this.angularVelocity = angularVelocity;
this.initialAngle = initialAngle;
this.angle = initialAngle; // 現在角度（毎フレーム更新）
this.color = color; // アクセントカラー
// 派生値
this.module = state.module;
this.pitchRadius = this.module * this.teethCount / 2;
this.outerRadius = this.pitchRadius + this.module;
this.rootRadius = this.pitchRadius - this.module * 1.25;
}
}
```
---
## ■ 6. 初期状態
- Canvas中央にドライブギア（歯数 = 20, parentIndex = -1, angularVelocity = driveSpeed）を配置
- ドライブギアには特別なマーカー（中心に赤い点 or 金色のリング）をつける
---
## ■ 7. 追加の演出（実装必須）
1. **追加アニメーション**: 新しい歯車はスケール0から1.0へ 300ms の ease-out で拡大して出現
2. **色彩**: 各歯車に HSL カラーを割当（hue = index * 37 % 360 で自動変化）。歯面のグラデーションに薄く反映
3. **パーティクル**: 歯車追加時に噛み合い点から小さな火花パーティクル（10〜20個）を放出。200ms で消滅
4. **歯車情報ツールチップ**: 歯車にマウスホバーすると歯数・回転速度・ギア比を表示
5. **FPSカウンタ**: 右上に小さくFPS表示
---
## ■ 8. コード品質
- 関数は機能ごとに分離（描画 / 計算 / UI / イベント）
- 日本語コメントを主要関数に付与
- ES6+ 構文（class, const/let, arrow function, template literal）
- 即座にブラウザで開いて動作すること
---
## ■ 9. 出力形式
- **単一のHTMLファイル** として出力
- `<style>` タグ内にCSS、`<script>` タグ内にJavaScript
- ファイル冒頭に `<!-- Procedural Gear-Seed Simulator -->` コメント
DeepSeek-V4 Pro
ダメですね。
1回じゃエラーだらけだし回転してないし追加できないし・・・
ただギアの描画は綺麗
調整入ればわんちゃん。
DeepSeek-V4 Flash
回転はしてるけど追加などは不可
Claude Opus 4.7の例
前回使ったやつです。
3D地球儀テスト
地図が暗かったので指定変えてみました
あなたは優秀なフロントエンドエンジニアです。
Three.jsを使用して、ブラウザ上で動く「サイバーパンク風のインタラクティブな3D地球儀ネットワーク」をHTML1ファイル（CSS、JS内包）で作成してください。
以下の要件を必ずすべて満たしてください。
【1. ビジュアルとデザイン】
・全体的にダークでサイバーパンク、SF映画のような雰囲気にすること。
・背景はCSSの放射状グラデーション（暗いネイビーから黒）にし、さらにThree.js側で星屑のようなパーティクルを無数に散りばめること。
・画面の右上に「STORIES」「EXPLORE」、左下に「GLOBAL NETWORK」といったミニマルで透明感のあるダミーのHTML/CSS UIをオーバーレイ配置すること。
・テーマカラーはシアン（#26c6daなどの青緑系）をアクセントに使うこと。
【2. 地球の表現】
・中心に配置する地球は、以下のダークな世界地図テクスチャを使用すること。
URL: https://unpkg.com/three-globe@2.45.2/example/img/earth-night.jpg
・テクスチャを貼った球体の上に、わずかに大きいワイヤーフレームの球体を重ねて、デジタルのグリッド感を出すこと。
・アンビエントライトとディレクショナルライトを適切に当てて立体感を出すこと。
【3. 都市とネットワークデータ】
・世界中の主要都市（東京、ニューヨーク、ロンドン、サンフランシスコ、サンパウロ、シドニー、ドバイなど計20箇所以上）の緯度経度データを用意すること。
・緯度経度から3D座標に変換し、各都市の位置に「光るドット（Sprite）」と「都市名のテキストラベル（Canvasで作ったSprite）」を配置すること。ラベルは地球にめり込まないよう少し浮かせること。
・主要都市間を結ぶ、地球の表面から少し飛び出す放物線（ベジェ曲線など）を多数描画し、世界中が繋がっているネットワーク網を表現すること。
【4. アニメーションとインタラクション】
・ネットワークの放物線上を、光の粒（パーティクル）が移動し続けるアニメーションを実装し、データが送受信されているように見せること。
・地球自体もゆっくりとY軸方向に自転し続けるようにすること。
・OrbitControlsを導入し、マウスドラッグで地球を回転させたりズームしたりできるようにすること。
・【重要】カメラの初期位置は、北米ではなく「日本（アジア）」が最初から見えているアングルに設定すること。
コードは省略せずに、完全に動作するものを出力してください。
DeepSeek-V4 Pro
綺麗ですね。
東京などの位置もだいたいあってる
DeepSeek-V4 Flash
CORSエラーで画像がでませんでしたが左下の文字とかは綺麗
まだダメだぽん
DeepSeek-V5か4.1まだかな