Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>アルキメデスの螺旋</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script> | |
| <script src="sketch.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <!-- UI コントロールパネル --> | |
| <div id="controls"> | |
| <div> <!-- a (巻き具合) --> | |
| <label for="aSlider">a (XY巻き具合):</label> | |
| <input type="range" id="aSlider" min="0.1" max="20" step="0.1" value="4"> | |
| <span id="aValue">4.0</span> | |
| </div> | |
| <div> <!-- b (Z軸の伸び) --> | |
| <label for="bSlider">b (Z軸伸び):</label> | |
| <input type="range" id="bSlider" min="0" max="10" step="0.1" value="2"> <!-- 適切な範囲を設定 --> | |
| <span id="bValue">2.0</span> | |
| </div> | |
| <div> <!-- 点間距離目標 --> | |
| <label for="distSlider">点間距離目標:</label> | |
| <input type="range" id="distSlider" min="0.1" max="10" step="0.1" value="1.5"> | |
| <span id="distValue">1.5</span> | |
| </div> | |
| <div> <!-- 角度増分(最大) --> | |
| <label for="maxAngleSlider">角度増分(最大):</label> | |
| <input type="range" id="maxAngleSlider" min="0.01" max="0.5" step="0.01" value="0.15"> | |
| <span id="maxAngleValue">0.15</span> | |
| </div> | |
| <div> <!-- 角度増分(最小) --> | |
| <label for="minAngleSlider">角度増分(最小):</label> | |
| <input type="range" id="minAngleSlider" min="0.001" max="0.1" step="0.001" value="0.005"> | |
| <span id="minAngleValue">0.005</span> | |
| </div> | |
| <div> <!-- ステップ/フレーム --> | |
| <label for="stepsSlider">ステップ/フレーム:</label> | |
| <input type="range" id="stepsSlider" min="1" max="20" step="1" value="3"> | |
| <span id="stepsValue">3</span> | |
| </div> | |
| <div> <!-- 点の大きさ --> | |
| <label for="sizeSlider">点の大きさ:</label> | |
| <input type="range" id="sizeSlider" min="0.5" max="10" step="0.1" value="2"> | |
| <span id="sizeValue">2.0</span> | |
| </div> | |
| </div> | |
| <!-- p5.jsのキャンバスが挿入されるコンテナ --> | |
| <main id="canvas-container"></main> | |
| </body> | |
| </html> |