fix(geom8 ch4): §3 §4 §5 — корректная геометрия SVG и подписи
Проверено 11 SVG в §3, §4, §5 — 11 исправлено. §3 Касательные из одной точки: - Card 3.1: пересчитаны точки касания T₁,T₂ по корректной формуле T_x=O_x+R²/OA, T_y=O_y±R·AT/OA (раньше координаты были произвольные); маркеры прямого угла направлены правильно (CCW perp для верхней, CW perp для нижней); все подписи вне линий касательных. - Интерактив 1 (slider): найден баг — sinA/cosA были перепутаны в T_x/T_y. Теперь T₁x=cx+R*sinA, T₁y=cy−R*cosA. Маркер прямого угла T₂ исправлен с CCW на CW. ViewBox расширен под широкий OA. - Интерактив 2 (proof): тот же фикс формулы + маркер прямого угла. §4 Построение касательной: - Card 4.1 (построение): пересчитаны точки касания T₁,T₂ как пересечение исходной окружности O(90,100,r=50) и вспомогательной M(165,100,r=75) — раньше точки были вне окружности. - Card 4.3 (формула): точка касания T была на (107,56) — вне окружности. Пересчитана на T=(89,59) с правильным маркером. - Интерактив 1 (шаги): то же исправление формулы и направлений маркеров прямого угла. - Интерактив 2 (live): сlider tangent positions через радиальные unit-векторы для подписей вне линий. §5 Окружности в углу: - Card 5.1: центр окружности был на O(135,145) — не на биссектрисе и не равноудалён от сторон. Пересчитан на O(157,148) с r=35 по формуле от вершины угла. T₁,T₂ — проекции центра на стороны. Добавлены маркеры прямого угла в обеих точках касания. - Card 5.3: две окружности на биссектрисе с r=d·sin(α/2). - Интерактив 1 (slider): добавлен маркер прямого угла в T₂ (отсутствовал); направление T₁-маркера исправлено. - Интерактив 2 (proof): то же. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
@@ -1239,24 +1239,42 @@ function buildP3(){
|
||||
<li><b>Биссектриса:</b> прямая $OA$ является биссектрисой угла $T_1AT_2$ (и угла $T_1OT_2$).</li>
|
||||
</ul>
|
||||
<div style="display:flex;justify-content:center;margin-top:14px">
|
||||
<svg viewBox="0 0 260 180" style="max-width:280px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
|
||||
<circle cx="100" cy="90" r="55" fill="rgba(2,132,199,.08)" stroke="#0284c7" stroke-width="2"/>
|
||||
<circle cx="100" cy="90" r="3.5" fill="#0369a1"/>
|
||||
<line x1="100" y1="90" x2="100" y2="35" stroke="#0284c7" stroke-width="1.8" stroke-dasharray="4,3"/>
|
||||
<line x1="100" y1="90" x2="136" y2="132" stroke="#0284c7" stroke-width="1.8" stroke-dasharray="4,3"/>
|
||||
<circle cx="100" cy="35" r="4" fill="#0284c7"/>
|
||||
<circle cx="136" cy="132" r="4" fill="#0284c7"/>
|
||||
<line x1="100" y1="35" x2="220" y2="82" stroke="#10b981" stroke-width="2.2"/>
|
||||
<line x1="136" y1="132" x2="220" y2="82" stroke="#10b981" stroke-width="2.2"/>
|
||||
<line x1="100" y1="90" x2="220" y2="82" stroke="#64748b" stroke-width="1.5" stroke-dasharray="5,3"/>
|
||||
<circle cx="220" cy="82" r="4" fill="#0369a1"/>
|
||||
<text x="95" y="107" font-size="11" font-weight="700" fill="#0369a1">O</text>
|
||||
<text x="97" y="30" font-size="11" font-weight="700" fill="#0369a1">T₁</text>
|
||||
<text x="140" y="148" font-size="11" font-weight="700" fill="#0369a1">T₂</text>
|
||||
<text x="224" y="86" font-size="11" font-weight="700" fill="#0369a1">A</text>
|
||||
<text x="162" y="50" font-size="10" fill="#065f46" font-weight="700">AT₁</text>
|
||||
<text x="188" y="128" font-size="10" fill="#065f46" font-weight="700">AT₂</text>
|
||||
<text x="100" y="170" text-anchor="middle" font-size="10" fill="#0369a1" font-weight="700">AT₁ = AT₂</text>
|
||||
<svg viewBox="0 0 270 185" style="max-width:285px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
|
||||
<!-- O=(95,100) R=50 A=(220,92) — geometrically correct tangent points -->
|
||||
<!-- OA=(125,-8) |OA|=125.26 AT=sqrt(OA²-R²)=sqrt(15064)=117.7 -->
|
||||
<!-- R²/OA²=0.159 R·AT/OA²=0.376 perp_OA=(8,125) -->
|
||||
<!-- T₂(upper)=(95+125*.159+8*.376,100-8*.159-125*.376)=(114.9,52.6) -->
|
||||
<!-- T₁(lower)=(95+125*.159-8*.376,100-8*.159+125*.376)=(114.9-3,100-1.27+47)=(112,145.7) -->
|
||||
<circle cx="95" cy="100" r="50" fill="rgba(2,132,199,.08)" stroke="#0284c7" stroke-width="2"/>
|
||||
<circle cx="95" cy="100" r="3.5" fill="#0369a1"/>
|
||||
<!-- radii to tangent points -->
|
||||
<line x1="95" y1="100" x2="115" y2="53" stroke="#0284c7" stroke-width="1.8" stroke-dasharray="4,3"/>
|
||||
<line x1="95" y1="100" x2="112" y2="146" stroke="#0284c7" stroke-width="1.8" stroke-dasharray="4,3"/>
|
||||
<!-- tangent points -->
|
||||
<circle cx="115" cy="53" r="4" fill="#0284c7"/>
|
||||
<circle cx="112" cy="146" r="4" fill="#0284c7"/>
|
||||
<!-- tangent lines from A -->
|
||||
<line x1="115" y1="53" x2="220" y2="92" stroke="#10b981" stroke-width="2.2"/>
|
||||
<line x1="112" y1="146" x2="220" y2="92" stroke="#10b981" stroke-width="2.2"/>
|
||||
<!-- OA bisector -->
|
||||
<line x1="95" y1="100" x2="220" y2="92" stroke="#64748b" stroke-width="1.5" stroke-dasharray="5,3"/>
|
||||
<circle cx="220" cy="92" r="4" fill="#0369a1"/>
|
||||
<!-- right-angle at T₂=(115,53): u_r=(20/50,-47/50)=(0.4,-0.94) u_t=(0.94,0.4) s=8 -->
|
||||
<polyline points="118.2,45.5 125.7,48.7 122.5,56.2" fill="none" stroke="#0369a1" stroke-width="1.6"/>
|
||||
<!-- right-angle at T₁=(112,146): u_r=(0.34,0.92) u_t=+CW_perp=(0.92,-0.34) toward A s=8 -->
|
||||
<polyline points="114.7,153.4 122.1,150.7 119.4,143.3" fill="none" stroke="#0369a1" stroke-width="1.6"/>
|
||||
<!-- labels: O left of center, A right of point -->
|
||||
<text x="79" y="104" font-size="11" font-weight="700" fill="#0369a1">O</text>
|
||||
<text x="224" y="96" font-size="11" font-weight="700" fill="#0369a1">A</text>
|
||||
<!-- T₂ label: outward from O direction (0.4,-0.94)*15 from T₂ offset -->
|
||||
<text x="118" y="37" font-size="11" font-weight="700" fill="#0369a1">T₂</text>
|
||||
<!-- T₁ label: outward direction (0.34,0.92)*15 from T₁ -->
|
||||
<text x="107" y="165" font-size="11" font-weight="700" fill="#0369a1">T₁</text>
|
||||
<!-- AT₂ label: midpoint(115,53)→(220,92)=(167.5,72.5) perp-offset outward -->
|
||||
<text x="178" y="58" font-size="10" fill="#065f46" font-weight="700">AT₂</text>
|
||||
<!-- AT₁ label: midpoint(112,146)→(220,92)=(166,119) perp-offset outward -->
|
||||
<text x="177" y="136" font-size="10" fill="#065f46" font-weight="700">AT₁</text>
|
||||
<text x="135" y="178" text-anchor="middle" font-size="10" fill="#0369a1" font-weight="700">AT₁ = AT₂</text>
|
||||
</svg>
|
||||
</div>`);
|
||||
|
||||
@@ -1362,22 +1380,26 @@ function buildP3(){
|
||||
const oaVal=document.getElementById('p3-oa-val');
|
||||
const svgWrap=document.getElementById('p3-two-svg');
|
||||
const info=document.getElementById('p3-two-info');
|
||||
const R=65, cx=100, cy=130, W=280, H=240;
|
||||
const R=65, cx=90, cy=130, W=320, H=245;
|
||||
function draw(){
|
||||
const OA=+sl.value;
|
||||
oaVal.textContent=OA;
|
||||
const Ax=cx+OA, Ay=cy;
|
||||
const AT=Math.sqrt(OA*OA-R*R);
|
||||
/* sinA=R/OA is sin(∠OAT); cosA=AT/OA is cos(∠OAT).
|
||||
Tangent point: T_x=O_x+R*(R/OA)=O_x+R*sinA; T_y=O_y∓R*(AT/OA)=O_y∓R*cosA */
|
||||
const sinA=R/OA, cosA=AT/OA;
|
||||
const T1x=cx+R*cosA, T1y=cy-R*sinA;
|
||||
const T2x=cx+R*cosA, T2y=cy+R*sinA;
|
||||
// right angle markers
|
||||
const ur1x=(T1x-cx)/R, ur1y=(T1y-cy)/R;
|
||||
const T1x=cx+R*sinA, T1y=cy-R*cosA;
|
||||
const T2x=cx+R*sinA, T2y=cy+R*cosA;
|
||||
// right angle markers — ut must point TOWARD A from each tangent point
|
||||
const ur1x=(T1x-cx)/R, ur1y=(T1y-cy)/R; // T1 is upper; radius points upper-right
|
||||
// CCW perp of upper-right radius = lower-right = toward A ✓
|
||||
const ut1x=-(ur1y), ut1y=ur1x;
|
||||
const s=8;
|
||||
const rm1=`${(T1x+ur1x*s).toFixed(1)},${(T1y+ur1y*s).toFixed(1)} ${(T1x+ur1x*s+ut1x*s).toFixed(1)},${(T1y+ur1y*s+ut1y*s).toFixed(1)} ${(T1x+ut1x*s).toFixed(1)},${(T1y+ut1y*s).toFixed(1)}`;
|
||||
const ur2x=(T2x-cx)/R, ur2y=(T2y-cy)/R;
|
||||
const ut2x=-(ur2y), ut2y=ur2x;
|
||||
const ur2x=(T2x-cx)/R, ur2y=(T2y-cy)/R; // T2 is lower; radius points lower-right
|
||||
// CW perp of lower-right radius = upper-right = toward A ✓
|
||||
const ut2x=ur2y, ut2y=-ur2x;
|
||||
const rm2=`${(T2x+ur2x*s).toFixed(1)},${(T2y+ur2y*s).toFixed(1)} ${(T2x+ur2x*s+ut2x*s).toFixed(1)},${(T2y+ur2y*s+ut2y*s).toFixed(1)} ${(T2x+ut2x*s).toFixed(1)},${(T2y+ut2y*s).toFixed(1)}`;
|
||||
/* Position T₁ label OUTSIDE circle, above-left of T₁ (away from upper tangent) */
|
||||
const T1lx=(T1x-cx)/R, T1ly=(T1y-cy)/R; /* outward unit */
|
||||
@@ -1439,12 +1461,13 @@ function buildP3(){
|
||||
const txtEl=document.getElementById('p3-proof-text');
|
||||
const nextBtn=document.getElementById('p3-proof-next');
|
||||
const resetBtn=document.getElementById('p3-proof-reset');
|
||||
const R=55, cx=100, cy=105;
|
||||
const OA=130;
|
||||
const R=55, cx=90, cy=110;
|
||||
const OA=140;
|
||||
const AT=Math.sqrt(OA*OA-R*R);
|
||||
const sinA=R/OA, cosA=AT/OA;
|
||||
const T1x=cx+R*cosA, T1y=cy-R*sinA;
|
||||
const T2x=cx+R*cosA, T2y=cy+R*sinA;
|
||||
/* T_x=cx+R*sinA=cx+R²/OA, T_y=cy∓R*cosA=cy∓R*AT/OA */
|
||||
const T1x=cx+R*sinA, T1y=cy-R*cosA;
|
||||
const T2x=cx+R*sinA, T2y=cy+R*cosA;
|
||||
const Ax=cx+OA, Ay=cy;
|
||||
function drawProof(ph){
|
||||
let tri1='',tri2='',equal='';
|
||||
@@ -1452,11 +1475,11 @@ function buildP3(){
|
||||
tri1=`<polygon points="${cx},${cy} ${T1x.toFixed(1)},${T1y.toFixed(1)} ${Ax},${Ay}" fill="rgba(6,182,212,.12)" stroke="#06b6d4" stroke-width="1.3"/>`;
|
||||
tri2=`<polygon points="${cx},${cy} ${T2x.toFixed(1)},${T2y.toFixed(1)} ${Ax},${Ay}" fill="rgba(2,132,199,.10)" stroke="#0284c7" stroke-width="1.3"/>`;
|
||||
const s=7;
|
||||
const ur1x=(T1x-cx)/R, ur1y=(T1y-cy)/R;
|
||||
const ut1x=-(ur1y), ut1y=ur1x;
|
||||
const ur1x=(T1x-cx)/R, ur1y=(T1y-cy)/R; // T1 upper
|
||||
const ut1x=-(ur1y), ut1y=ur1x; // CCW perp → toward A ✓
|
||||
const rm1=`${(T1x+ur1x*s).toFixed(1)},${(T1y+ur1y*s).toFixed(1)} ${(T1x+ur1x*s+ut1x*s).toFixed(1)},${(T1y+ur1y*s+ut1y*s).toFixed(1)} ${(T1x+ut1x*s).toFixed(1)},${(T1y+ut1y*s).toFixed(1)}`;
|
||||
const ur2x=(T2x-cx)/R, ur2y=(T2y-cy)/R;
|
||||
const ut2x=-(ur2y), ut2y=ur2x;
|
||||
const ur2x=(T2x-cx)/R, ur2y=(T2y-cy)/R; // T2 lower
|
||||
const ut2x=ur2y, ut2y=-ur2x; // CW perp → toward A ✓
|
||||
const rm2=`${(T2x+ur2x*s).toFixed(1)},${(T2y+ur2y*s).toFixed(1)} ${(T2x+ur2x*s+ut2x*s).toFixed(1)},${(T2y+ur2y*s+ut2y*s).toFixed(1)} ${(T2x+ut2x*s).toFixed(1)},${(T2y+ut2y*s).toFixed(1)}`;
|
||||
equal=`<polyline points="${rm1}" fill="none" stroke="#0369a1" stroke-width="1.8"/><polyline points="${rm2}" fill="none" stroke="#0369a1" stroke-width="1.8"/>`;
|
||||
}
|
||||
@@ -1644,24 +1667,38 @@ function buildP4(){
|
||||
html+=makeCard('theory','Задача построения касательной','4.1',`
|
||||
<p><b>Задача.</b> Дана окружность с центром $O$ радиусом $R$ и точка $A$ вне окружности ($|OA|>R$). Построить касательную из точки $A$ к окружности.</p>
|
||||
<div style="display:flex;justify-content:center;margin-top:12px">
|
||||
<svg viewBox="0 0 280 170" style="max-width:300px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
|
||||
<circle cx="90" cy="95" r="50" fill="rgba(37,99,235,.08)" stroke="#2563eb" stroke-width="2"/>
|
||||
<circle cx="90" cy="95" r="3" fill="#1d4ed8"/>
|
||||
<text x="94" y="92" font-size="11" font-weight="700" fill="#1d4ed8">O</text>
|
||||
<circle cx="240" cy="95" r="3.5" fill="#1d4ed8"/>
|
||||
<text x="244" y="92" font-size="11" font-weight="700" fill="#1d4ed8">A</text>
|
||||
<circle cx="165" cy="95" r="3" fill="#64748b"/>
|
||||
<text x="168" y="91" font-size="10" fill="#64748b">M</text>
|
||||
<circle cx="130" cy="57" r="4" fill="#10b981"/>
|
||||
<circle cx="130" cy="133" r="4" fill="#10b981"/>
|
||||
<text x="132" y="53" font-size="11" font-weight="700" fill="#10b981">T₁</text>
|
||||
<text x="132" y="149" font-size="11" font-weight="700" fill="#10b981">T₂</text>
|
||||
<line x1="240" y1="95" x2="130" y2="57" stroke="#10b981" stroke-width="2"/>
|
||||
<line x1="240" y1="95" x2="130" y2="133" stroke="#10b981" stroke-width="2"/>
|
||||
<circle cx="165" cy="95" r="75" fill="none" stroke="#64748b" stroke-width="1.4" stroke-dasharray="5,3"/>
|
||||
<line x1="90" y1="95" x2="240" y2="95" stroke="#64748b" stroke-width="1.4" stroke-dasharray="4,3"/>
|
||||
<polyline points="130,57 130,66 139,66" fill="none" stroke="#1d4ed8" stroke-width="1.6"/>
|
||||
<polyline points="130,133 130,124 139,124" fill="none" stroke="#1d4ed8" stroke-width="1.6"/>
|
||||
<svg viewBox="0 0 285 200" style="max-width:300px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
|
||||
<!-- O=(90,100) R=50 A=(240,100) M=(165,100) MR=75 -->
|
||||
<!-- T₂(upper)=(107,53) T₁(lower)=(107,147) — on both circles -->
|
||||
<circle cx="90" cy="100" r="50" fill="rgba(37,99,235,.08)" stroke="#2563eb" stroke-width="2"/>
|
||||
<!-- auxiliary circle: center M=(165,100) radius 75 — passes through O and A -->
|
||||
<circle cx="165" cy="100" r="75" fill="none" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="5,3"/>
|
||||
<!-- OA line -->
|
||||
<line x1="90" y1="100" x2="240" y2="100" stroke="#64748b" stroke-width="1.4" stroke-dasharray="4,3"/>
|
||||
<!-- radii to tangent points -->
|
||||
<line x1="90" y1="100" x2="107" y2="53" stroke="#2563eb" stroke-width="1.5" stroke-dasharray="3,2"/>
|
||||
<line x1="90" y1="100" x2="107" y2="147" stroke="#2563eb" stroke-width="1.5" stroke-dasharray="3,2"/>
|
||||
<!-- tangent lines -->
|
||||
<line x1="240" y1="100" x2="107" y2="53" stroke="#10b981" stroke-width="2.2"/>
|
||||
<line x1="240" y1="100" x2="107" y2="147" stroke="#10b981" stroke-width="2.2"/>
|
||||
<!-- points -->
|
||||
<circle cx="90" cy="100" r="3" fill="#1d4ed8"/>
|
||||
<circle cx="240" cy="100" r="3.5" fill="#1d4ed8"/>
|
||||
<circle cx="165" cy="100" r="3" fill="#f59e0b"/>
|
||||
<circle cx="107" cy="53" r="4" fill="#10b981"/>
|
||||
<circle cx="107" cy="147" r="4" fill="#10b981"/>
|
||||
<!-- right-angle at T₂=(107,53): u_r=(0.34,-0.94) u_t_CCW=(0.94,0.34) toward A s=8 -->
|
||||
<polyline points="109.7,45.5 117.2,48.2 114.5,55.7" fill="none" stroke="#1d4ed8" stroke-width="1.6"/>
|
||||
<!-- right-angle at T₁=(107,147): u_r=(0.34,0.94) u_t_CW=(0.94,-0.34) toward A s=8 -->
|
||||
<polyline points="109.7,154.5 117.2,151.8 114.5,144.3" fill="none" stroke="#1d4ed8" stroke-width="1.6"/>
|
||||
<!-- labels -->
|
||||
<text x="74" y="97" font-size="11" font-weight="700" fill="#1d4ed8">O</text>
|
||||
<text x="244" y="97" font-size="11" font-weight="700" fill="#1d4ed8">A</text>
|
||||
<text x="169" y="96" font-size="10" fill="#b45309">M</text>
|
||||
<!-- T₂ label: outward direction (0.34,-0.94) from T₂ -->
|
||||
<text x="109" y="38" font-size="11" font-weight="700" fill="#10b981">T₂</text>
|
||||
<!-- T₁ label: outward direction (0.34,0.94) from T₁ -->
|
||||
<text x="109" y="168" font-size="11" font-weight="700" fill="#10b981">T₁</text>
|
||||
</svg>
|
||||
</div>`);
|
||||
|
||||
@@ -1682,21 +1719,32 @@ function buildP4(){
|
||||
$$AT_1 = \\sqrt{|OA|^2 - R^2}$$
|
||||
<p style="margin-top:8px">Условие существования: $|OA| > R$ (точка $A$ вне окружности).</p>
|
||||
<div style="display:flex;justify-content:center;margin-top:10px">
|
||||
<svg viewBox="0 0 220 160" style="max-width:240px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
|
||||
<circle cx="70" cy="100" r="50" fill="rgba(37,99,235,.08)" stroke="#2563eb" stroke-width="2"/>
|
||||
<circle cx="70" cy="100" r="3" fill="#1d4ed8"/>
|
||||
<circle cx="200" cy="100" r="3.5" fill="#1d4ed8"/>
|
||||
<circle cx="107" cy="56" r="4" fill="#10b981"/>
|
||||
<line x1="70" y1="100" x2="107" y2="56" stroke="#2563eb" stroke-width="2"/>
|
||||
<line x1="107" y1="56" x2="200" y2="100" stroke="#10b981" stroke-width="2.2"/>
|
||||
<line x1="70" y1="100" x2="200" y2="100" stroke="#64748b" stroke-width="1.5" stroke-dasharray="4,3"/>
|
||||
<polyline points="107,56 107,65 116,65" fill="none" stroke="#1d4ed8" stroke-width="1.6"/>
|
||||
<text x="74" y="115" font-size="11" font-weight="700" fill="#1d4ed8">O</text>
|
||||
<text x="204" y="104" font-size="11" font-weight="700" fill="#1d4ed8">A</text>
|
||||
<text x="110" y="53" font-size="11" font-weight="700" fill="#10b981">T</text>
|
||||
<text x="83" y="83" font-size="10" fill="#2563eb" font-weight="700">R</text>
|
||||
<text x="145" y="72" font-size="10" fill="#10b981" font-weight="700">AT</text>
|
||||
<text x="125" y="118" font-size="10" fill="#64748b">|OA|</text>
|
||||
<svg viewBox="0 0 230 170" style="max-width:245px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
|
||||
<!-- O=(70,105) R=50 A=(205,105) T=(89,58) — correct tangent point -->
|
||||
<!-- OA=135 AT=sqrt(135²-50²)=125 T_x=70+50²/135=70+18.5=88.5 T_y=105-50*125/135=105-46.3=58.7 -->
|
||||
<circle cx="70" cy="105" r="50" fill="rgba(37,99,235,.08)" stroke="#2563eb" stroke-width="2"/>
|
||||
<circle cx="70" cy="105" r="3" fill="#1d4ed8"/>
|
||||
<circle cx="205" cy="105" r="3.5" fill="#1d4ed8"/>
|
||||
<circle cx="89" cy="59" r="4" fill="#10b981"/>
|
||||
<!-- radius OT -->
|
||||
<line x1="70" y1="105" x2="89" y2="59" stroke="#2563eb" stroke-width="2"/>
|
||||
<!-- tangent line TA -->
|
||||
<line x1="89" y1="59" x2="205" y2="105" stroke="#10b981" stroke-width="2.2"/>
|
||||
<!-- OA base line -->
|
||||
<line x1="70" y1="105" x2="205" y2="105" stroke="#64748b" stroke-width="1.5" stroke-dasharray="4,3"/>
|
||||
<!-- right-angle at T=(89,59): u_r=(0.38,-0.92) u_t=(0.92,0.38) s=8 -->
|
||||
<polyline points="92.0,51.6 99.4,54.6 96.4,62.0" fill="none" stroke="#1d4ed8" stroke-width="1.6"/>
|
||||
<!-- labels off their respective lines -->
|
||||
<text x="54" y="102" font-size="11" font-weight="700" fill="#1d4ed8">O</text>
|
||||
<text x="209" y="109" font-size="11" font-weight="700" fill="#1d4ed8">A</text>
|
||||
<!-- T label: outward from O direction (0.38,-0.92)*16 from T -->
|
||||
<text x="92" y="43" font-size="11" font-weight="700" fill="#10b981">T</text>
|
||||
<!-- R label: midpoint OT=(79.5,82) offset perpendicular (-0.92,-0.38)*8 left side -->
|
||||
<text x="66" y="82" font-size="10" fill="#2563eb" font-weight="700">R</text>
|
||||
<!-- AT label: midpoint T→A=(147,82) offset perp upward (-0.38,0.92)*-12 = above line -->
|
||||
<text x="143" y="69" font-size="10" fill="#10b981" font-weight="700">AT</text>
|
||||
<!-- |OA| label: below midpoint of OA -->
|
||||
<text x="124" y="122" font-size="10" fill="#64748b">|OA|</text>
|
||||
</svg>
|
||||
</div>`);
|
||||
|
||||
@@ -1784,12 +1832,13 @@ function buildP4(){
|
||||
|
||||
/* === INIT 1: пошаговое построение === */
|
||||
(function(){
|
||||
const OX=80,OY=110,AX=230,AY=110,R=55;
|
||||
const OX=80,OY=110,AX=240,AY=110,R=55;
|
||||
const MX=(OX+AX)/2, MY=(OY+AY)/2, MR=(AX-OX)/2;
|
||||
const sinA=R/Math.sqrt((AX-OX)*(AX-OX)+(AY-OY)*(AY-OY));
|
||||
const cosA=Math.sqrt(1-sinA*sinA);
|
||||
const T1X=OX+R*cosA, T1Y=OY-R*sinA;
|
||||
const T2X=OX+R*cosA, T2Y=OY+R*sinA;
|
||||
const OA=Math.sqrt((AX-OX)**2+(AY-OY)**2);
|
||||
const sinA=R/OA, cosA=Math.sqrt(1-sinA*sinA);
|
||||
/* T_x=OX+R*sinA=OX+R²/OA, T_y=OY∓R*cosA=OY∓R*AT/OA */
|
||||
const T1X=OX+R*sinA, T1Y=OY-R*cosA;
|
||||
const T2X=OX+R*sinA, T2Y=OY+R*cosA;
|
||||
const steps=[
|
||||
{title:'Шаг 0 / 5',text:'<b>Дано:</b> окружность с центром $O$, радиусом $R$, и точка $A$ вне окружности. Нужно провести касательную из $A$.'},
|
||||
{title:'Шаг 1 / 5',text:'<b>Шаг 1.</b> Соединяем $O$ и $A$ — строим отрезок $OA$.'},
|
||||
@@ -1810,13 +1859,23 @@ function buildP4(){
|
||||
if(step>=2) extras+=`<circle cx="${MX}" cy="${MY}" r="4" fill="#f59e0b"/><text x="${MX+5}" y="${MY-4}" font-size="11" font-weight="700" fill="#b45309">M</text>`;
|
||||
if(step>=3) extras+=`<circle cx="${MX}" cy="${MY}" r="${MR}" fill="none" stroke="#f59e0b" stroke-width="1.8" stroke-dasharray="6,3"/>`;
|
||||
if(step>=4){
|
||||
extras+=`<circle cx="${T1X}" cy="${T1Y}" r="4.5" fill="#10b981"/>`;
|
||||
extras+=`<circle cx="${T2X}" cy="${T2Y}" r="4.5" fill="#10b981"/>`;
|
||||
extras+=`<text x="${T1X+5}" y="${T1Y-5}" font-size="11" font-weight="700" fill="#065f46">T₁</text>`;
|
||||
extras+=`<text x="${T2X+5}" y="${T2Y+14}" font-size="11" font-weight="700" fill="#065f46">T₂</text>`;
|
||||
const u1x=T1Y-OY, u1y=-(T1X-OX); const u1n=Math.sqrt(u1x*u1x+u1y*u1y);
|
||||
const pu1x=u1x/u1n*9, pu1y=u1y/u1n*9;
|
||||
extras+=`<polyline points="${T1X},${T1Y} ${T1X+pu1x},${T1Y+pu1y} ${T1X+pu1x+(OX-T1X)/Math.sqrt((OX-T1X)**2+(OY-T1Y)**2)*9},${T1Y+pu1y+(OY-T1Y)/Math.sqrt((OX-T1X)**2+(OY-T1Y)**2)*9}" fill="none" stroke="#1d4ed8" stroke-width="1.6"/>`;
|
||||
extras+=`<circle cx="${T1X.toFixed(1)}" cy="${T1Y.toFixed(1)}" r="4.5" fill="#10b981"/>`;
|
||||
extras+=`<circle cx="${T2X.toFixed(1)}" cy="${T2Y.toFixed(1)}" r="4.5" fill="#10b981"/>`;
|
||||
/* T labels in outward radial direction */
|
||||
const ur1x=(T1X-OX)/R, ur1y=(T1Y-OY)/R;
|
||||
const ur2x=(T2X-OX)/R, ur2y=(T2Y-OY)/R;
|
||||
extras+=`<text x="${(T1X+ur1x*15-5).toFixed(1)}" y="${(T1Y+ur1y*15+4).toFixed(1)}" font-size="11" font-weight="700" fill="#065f46">T₁</text>`;
|
||||
extras+=`<text x="${(T2X+ur2x*15-5).toFixed(1)}" y="${(T2Y+ur2y*15+10).toFixed(1)}" font-size="11" font-weight="700" fill="#065f46">T₂</text>`;
|
||||
/* right-angle markers: ut must point TOWARD A from each tangent point */
|
||||
/* T1 is upper (ur1y<0): CCW perp = down-right = toward A ✓ */
|
||||
const ut1x=-ur1y, ut1y=ur1x;
|
||||
const s=8;
|
||||
const rm1=`${(T1X+ur1x*s).toFixed(1)},${(T1Y+ur1y*s).toFixed(1)} ${(T1X+ur1x*s+ut1x*s).toFixed(1)},${(T1Y+ur1y*s+ut1y*s).toFixed(1)} ${(T1X+ut1x*s).toFixed(1)},${(T1Y+ut1y*s).toFixed(1)}`;
|
||||
/* T2 is lower (ur2y>0): CW perp = up-right = toward A ✓ */
|
||||
const ut2x=ur2y, ut2y=-ur2x;
|
||||
const rm2=`${(T2X+ur2x*s).toFixed(1)},${(T2Y+ur2y*s).toFixed(1)} ${(T2X+ur2x*s+ut2x*s).toFixed(1)},${(T2Y+ur2y*s+ut2y*s).toFixed(1)} ${(T2X+ut2x*s).toFixed(1)},${(T2Y+ut2y*s).toFixed(1)}`;
|
||||
extras+=`<polyline points="${rm1}" fill="none" stroke="#1d4ed8" stroke-width="1.6"/>`;
|
||||
extras+=`<polyline points="${rm2}" fill="none" stroke="#1d4ed8" stroke-width="1.6"/>`;
|
||||
}
|
||||
if(step>=5){
|
||||
extras+=`<line x1="${AX}" y1="${AY}" x2="${T1X}" y2="${T1Y}" stroke="#10b981" stroke-width="2.2"/>`;
|
||||
@@ -1850,27 +1909,31 @@ function buildP4(){
|
||||
rVal.textContent=R; oaVal.textContent=OA;
|
||||
const AX=OX+OA, AY=OY;
|
||||
const MX=(OX+AX)/2, MY=OY, MR=OA/2;
|
||||
const discr=R*R-(OA/2-OA/2)*(OA/2-OA/2);
|
||||
const sinT=R/OA, cosT=Math.sqrt(Math.max(0,1-sinT*sinT));
|
||||
const T1X=OX+R*cosT, T1Y=OY-R*sinT;
|
||||
const T2X=OX+R*cosT, T2Y=OY+R*sinT;
|
||||
/* T_x=OX+R*sinT=OX+R²/OA, T_y=OY∓R*cosT=OY∓R*AT/OA */
|
||||
const T1X=OX+R*sinT, T1Y=OY-R*cosT;
|
||||
const T2X=OX+R*sinT, T2Y=OY+R*cosT;
|
||||
const AT=Math.sqrt(Math.max(0,OA*OA-R*R));
|
||||
const AXc=Math.min(AX,W-14);
|
||||
lenEl.textContent='Длина касательной AT = √('+OA+'²−'+R+'²) = '+AT.toFixed(2);
|
||||
/* T labels: outward from O */
|
||||
const ur1x=(T1X-OX)/R, ur1y=(T1Y-OY)/R;
|
||||
const ur2x=(T2X-OX)/R, ur2y=(T2Y-OY)/R;
|
||||
svgWrap.innerHTML=`<svg viewBox="0 0 ${W} ${H}" style="max-width:${W}px;width:100%;background:#fafafa;border:1px solid var(--border);border-radius:10px">
|
||||
<circle cx="${OX}" cy="${OY}" r="${R}" fill="rgba(37,99,235,.08)" stroke="#2563eb" stroke-width="2"/>
|
||||
<circle cx="${OX}" cy="${OY}" r="3" fill="#1d4ed8"/>
|
||||
<text x="${OX+4}" y="${OY-5}" font-size="10" font-weight="700" fill="#1d4ed8">O</text>
|
||||
<circle cx="${Math.min(AX,W-10)}" cy="${AY}" r="3.5" fill="#1d4ed8"/>
|
||||
<text x="${Math.min(AX,W-10)+4}" y="${AY-5}" font-size="10" font-weight="700" fill="#1d4ed8">A</text>
|
||||
<line x1="${OX}" y1="${OY}" x2="${Math.min(AX,W-10)}" y2="${AY}" stroke="#64748b" stroke-width="1.3" stroke-dasharray="4,3"/>
|
||||
<text x="${OX-16}" y="${OY+5}" font-size="10" font-weight="700" fill="#1d4ed8">O</text>
|
||||
<circle cx="${AXc}" cy="${AY}" r="3.5" fill="#1d4ed8"/>
|
||||
<text x="${AXc+4}" y="${AY+5}" font-size="10" font-weight="700" fill="#1d4ed8">A</text>
|
||||
<line x1="${OX}" y1="${OY}" x2="${AXc}" y2="${AY}" stroke="#64748b" stroke-width="1.3" stroke-dasharray="4,3"/>
|
||||
<circle cx="${MX}" cy="${MY}" r="3" fill="#f59e0b"/>
|
||||
<circle cx="${MX}" cy="${MY}" r="${MR}" fill="none" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="5,3"/>
|
||||
<circle cx="${T1X}" cy="${T1Y}" r="4" fill="#10b981"/>
|
||||
<circle cx="${T2X}" cy="${T2Y}" r="4" fill="#10b981"/>
|
||||
<line x1="${Math.min(AX,W-10)}" y1="${AY}" x2="${T1X}" y2="${T1Y}" stroke="#10b981" stroke-width="2"/>
|
||||
<line x1="${Math.min(AX,W-10)}" y1="${AY}" x2="${T2X}" y2="${T2Y}" stroke="#10b981" stroke-width="2"/>
|
||||
<text x="${T1X-12}" y="${T1Y-6}" font-size="10" font-weight="700" fill="#065f46">T₁</text>
|
||||
<text x="${T2X-12}" y="${T2Y+14}" font-size="10" font-weight="700" fill="#065f46">T₂</text>
|
||||
<circle cx="${T1X.toFixed(1)}" cy="${T1Y.toFixed(1)}" r="4" fill="#10b981"/>
|
||||
<circle cx="${T2X.toFixed(1)}" cy="${T2Y.toFixed(1)}" r="4" fill="#10b981"/>
|
||||
<line x1="${AXc}" y1="${AY}" x2="${T1X.toFixed(1)}" y2="${T1Y.toFixed(1)}" stroke="#10b981" stroke-width="2"/>
|
||||
<line x1="${AXc}" y1="${AY}" x2="${T2X.toFixed(1)}" y2="${T2Y.toFixed(1)}" stroke="#10b981" stroke-width="2"/>
|
||||
<text x="${(T1X+ur1x*13-5).toFixed(1)}" y="${(T1Y+ur1y*13+4).toFixed(1)}" font-size="10" font-weight="700" fill="#065f46">T₁</text>
|
||||
<text x="${(T2X+ur2x*13-5).toFixed(1)}" y="${(T2Y+ur2y*13+10).toFixed(1)}" font-size="10" font-weight="700" fill="#065f46">T₂</text>
|
||||
</svg>`;
|
||||
}
|
||||
rSl.addEventListener('input',()=>{if(+rSl.value>=+oaSl.value-5)oaSl.value=+rSl.value+10;draw();});
|
||||
@@ -1999,22 +2062,41 @@ function buildP5(){
|
||||
<p><b>Определение.</b> Окружность называется <b>вписанной в угол</b>, если она касается обеих сторон этого угла.</p>
|
||||
<p style="margin-top:8px"><b>Теорема.</b> Центр окружности, вписанной в угол, лежит на биссектрисе этого угла.</p>
|
||||
<div style="display:flex;justify-content:center;margin-top:12px">
|
||||
<svg viewBox="0 0 260 200" style="max-width:280px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
|
||||
<line x1="20" y1="180" x2="240" y2="60" stroke="#0891b2" stroke-width="2"/>
|
||||
<line x1="20" y1="180" x2="240" y2="180" stroke="#0891b2" stroke-width="2"/>
|
||||
<line x1="20" y1="180" x2="200" y2="120" stroke="#64748b" stroke-width="1.4" stroke-dasharray="5,3"/>
|
||||
<circle cx="135" cy="145" r="35" fill="rgba(8,145,178,.09)" stroke="#0891b2" stroke-width="2"/>
|
||||
<circle cx="135" cy="145" r="3" fill="#0e7490"/>
|
||||
<text x="139" y="142" font-size="11" font-weight="700" fill="#0e7490">O</text>
|
||||
<circle cx="20" cy="180" r="3" fill="#0e7490"/>
|
||||
<text x="8" y="178" font-size="11" font-weight="700" fill="#0e7490">B</text>
|
||||
<line x1="135" y1="145" x2="135" y2="180" stroke="#64748b" stroke-width="1.4" stroke-dasharray="3,2"/>
|
||||
<polyline points="135,180 135,171 126,171" fill="none" stroke="#0e7490" stroke-width="1.5"/>
|
||||
<text x="115" y="195" font-size="9" fill="#0e7490">T₁</text>
|
||||
<text x="96" y="108" font-size="9" fill="#0e7490">T₂</text>
|
||||
<circle cx="135" cy="180" r="3.5" fill="#10b981"/>
|
||||
<circle cx="102" cy="113" r="3.5" fill="#10b981"/>
|
||||
<text x="205" y="118" font-size="9" fill="#64748b" font-style="italic">биссектриса</text>
|
||||
<svg viewBox="0 0 265 205" style="max-width:280px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
|
||||
<!-- angle vertex B=(20,183), two sides: horizontal + upper-right (220,-120)/253 -->
|
||||
<!-- half-angle≈14.3°, bisector dir≈(0.969,-0.247) -->
|
||||
<!-- inscribed circle r=35: d=r/sin(14.3°)=141.7 -->
|
||||
<!-- O=(157,148), T₁=(157,183) on horiz side, T₂=(140,117) on upper side -->
|
||||
<!-- side 1: B=(20,183) rightward -->
|
||||
<line x1="20" y1="183" x2="255" y2="183" stroke="#0891b2" stroke-width="2"/>
|
||||
<!-- side 2: B=(20,183) to (240,63) direction (220,-120)/253 -->
|
||||
<line x1="20" y1="183" x2="245" y2="63" stroke="#0891b2" stroke-width="2"/>
|
||||
<!-- bisector dashed: B to ~(195,140) -->
|
||||
<line x1="20" y1="183" x2="200" y2="138" stroke="#64748b" stroke-width="1.4" stroke-dasharray="5,3"/>
|
||||
<!-- inscribed circle O=(157,148) r=35 -->
|
||||
<circle cx="157" cy="148" r="35" fill="rgba(8,145,178,.09)" stroke="#0891b2" stroke-width="2"/>
|
||||
<circle cx="157" cy="148" r="3" fill="#0e7490"/>
|
||||
<!-- radii to tangent points -->
|
||||
<line x1="157" y1="148" x2="157" y2="183" stroke="#64748b" stroke-width="1.3" stroke-dasharray="3,2"/>
|
||||
<line x1="157" y1="148" x2="140" y2="117" stroke="#64748b" stroke-width="1.3" stroke-dasharray="3,2"/>
|
||||
<!-- right-angle at T₁=(157,183): radius goes upward (0,-1), tangent is horizontal (1,0) s=8 -->
|
||||
<polyline points="157,175 165,175 165,183" fill="none" stroke="#0e7490" stroke-width="1.5"/>
|
||||
<!-- right-angle at T₂=(140,117): u_r=(T₂-O)/r=(-17/35,-31/35)=(-0.486,-0.886) u_t=(0.886,-0.486) s=8 -->
|
||||
<!-- T₂+s*ur=(140-3.9,117-7.1)=(136.1,109.9) next=(136.1+7.1,109.9-3.9)=(143.2,106.0) next=(140+7.1,117-3.9)=(147.1,113.1) -->
|
||||
<polyline points="136.1,109.9 143.2,106.0 147.1,113.1" fill="none" stroke="#0e7490" stroke-width="1.5"/>
|
||||
<!-- tangent point dots -->
|
||||
<circle cx="157" cy="183" r="3.5" fill="#10b981"/>
|
||||
<circle cx="140" cy="117" r="3.5" fill="#10b981"/>
|
||||
<!-- labels -->
|
||||
<circle cx="20" cy="183" r="3" fill="#0e7490"/>
|
||||
<text x="7" y="181" font-size="11" font-weight="700" fill="#0e7490">B</text>
|
||||
<!-- O label: above-right of center, off the radii -->
|
||||
<text x="162" y="145" font-size="11" font-weight="700" fill="#0e7490">O</text>
|
||||
<!-- T₁ label: below T₁, off horizontal line -->
|
||||
<text x="160" y="196" font-size="10" font-weight="700" fill="#0e7490">T₁</text>
|
||||
<!-- T₂ label: upper-left of T₂, outward direction (-0.486,-0.886)*13 from T₂ -->
|
||||
<text x="126" y="107" font-size="10" font-weight="700" fill="#0e7490">T₂</text>
|
||||
<text x="203" y="131" font-size="9" fill="#64748b" font-style="italic">биссектриса</text>
|
||||
</svg>
|
||||
</div>`);
|
||||
|
||||
@@ -2033,18 +2115,27 @@ function buildP5(){
|
||||
$$|BT_1| = |BT_2|, \\quad |BT_3| = |BT_4|$$
|
||||
<p style="margin-top:8px">Формула радиуса: $r = d\\cdot\\sin\\dfrac{\\alpha}{2}$, где $d = |BO|$ — расстояние от вершины до центра, $\\alpha$ — угол.</p>
|
||||
<div style="display:flex;justify-content:center;margin-top:10px">
|
||||
<svg viewBox="0 0 270 190" style="max-width:285px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
|
||||
<line x1="10" y1="175" x2="260" y2="70" stroke="#0891b2" stroke-width="2"/>
|
||||
<line x1="10" y1="175" x2="260" y2="175" stroke="#0891b2" stroke-width="2"/>
|
||||
<line x1="10" y1="175" x2="220" y2="122" stroke="#64748b" stroke-width="1.3" stroke-dasharray="4,3"/>
|
||||
<circle cx="95" cy="150" r="25" fill="rgba(8,145,178,.08)" stroke="#0891b2" stroke-width="1.8"/>
|
||||
<circle cx="95" cy="150" r="2.5" fill="#0e7490"/>
|
||||
<circle cx="185" cy="138" r="38" fill="rgba(8,145,178,.05)" stroke="#0891b2" stroke-width="1.8"/>
|
||||
<circle cx="185" cy="138" r="2.5" fill="#0e7490"/>
|
||||
<circle cx="10" cy="175" r="3" fill="#0e7490"/>
|
||||
<text x="2" y="172" font-size="10" font-weight="700" fill="#0e7490">B</text>
|
||||
<text x="98" y="148" font-size="9" fill="#0e7490">O₁</text>
|
||||
<text x="188" y="136" font-size="9" fill="#0e7490">O₂</text>
|
||||
<svg viewBox="0 0 275 195" style="max-width:285px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
|
||||
<!-- B=(15,178), half-angle=15°, side1=horizontal, side2=30° above horiz -->
|
||||
<!-- bisector dir=(cos15°,-sin15°)=(0.966,-0.259) -->
|
||||
<!-- O₁: r=22, d=84.9 → O₁=(97,156); O₂: r=36, d=139 → O₂=(149,142) -->
|
||||
<line x1="15" y1="178" x2="265" y2="178" stroke="#0891b2" stroke-width="2"/>
|
||||
<line x1="15" y1="178" x2="258" y2="56" stroke="#0891b2" stroke-width="2"/>
|
||||
<line x1="15" y1="178" x2="220" y2="127" stroke="#64748b" stroke-width="1.3" stroke-dasharray="4,3"/>
|
||||
<!-- small circle O₁=(97,156) r=22 -->
|
||||
<circle cx="97" cy="156" r="22" fill="rgba(8,145,178,.09)" stroke="#0891b2" stroke-width="1.8"/>
|
||||
<circle cx="97" cy="156" r="2.5" fill="#0e7490"/>
|
||||
<!-- large circle O₂=(149,142) r=36 -->
|
||||
<circle cx="149" cy="142" r="36" fill="rgba(8,145,178,.05)" stroke="#0891b2" stroke-width="1.8"/>
|
||||
<circle cx="149" cy="142" r="2.5" fill="#0e7490"/>
|
||||
<!-- tangent points: T₁_h=(97,178), T₁_s=(86,137), T₂_h=(149,178), T₂_s=(131,111) -->
|
||||
<circle cx="97" cy="178" r="3" fill="#10b981"/>
|
||||
<circle cx="149" cy="178" r="3" fill="#10b981"/>
|
||||
<circle cx="15" cy="178" r="3" fill="#0e7490"/>
|
||||
<text x="3" y="175" font-size="10" font-weight="700" fill="#0e7490">B</text>
|
||||
<!-- O labels just outside circle boundary to avoid overlap -->
|
||||
<text x="100" y="154" font-size="9" fill="#0e7490" font-weight="700">O₁</text>
|
||||
<text x="152" y="140" font-size="9" fill="#0e7490" font-weight="700">O₂</text>
|
||||
</svg>
|
||||
</div>`);
|
||||
|
||||
@@ -2152,21 +2243,32 @@ function buildP5(){
|
||||
const proj=((OX-BX)*side2DX+(OY-BY)*side2DY);
|
||||
const T2X=BX+proj*side2DX, T2Y=BY+proj*side2DY;
|
||||
infoEl.textContent='r = d·sin(α/2) = '+d+'·sin('+ang2/2+'°) = '+r.toFixed(2);
|
||||
/* right-angle at T₂ on side 2 */
|
||||
const s2x=Math.cos(ang2*Math.PI/180), s2y=-Math.sin(ang2*Math.PI/180);
|
||||
const ot2ux=(OX-T2X)/r, ot2uy=(OY-T2Y)/r;
|
||||
const rs=8;
|
||||
const rm2pts=`${(T2X+s2x*rs).toFixed(1)},${(T2Y+s2y*rs).toFixed(1)} ${(T2X+s2x*rs+ot2ux*rs).toFixed(1)},${(T2Y+s2y*rs+ot2uy*rs).toFixed(1)} ${(T2X+ot2ux*rs).toFixed(1)},${(T2Y+ot2uy*rs).toFixed(1)}`;
|
||||
/* T₂ label: perpendicular outward from side 2 (left when going along side 2) = (-s2y, s2x) = (sin(ang2), cos(ang2)) */
|
||||
const t2labX=(T2X+Math.sin(ang2*Math.PI/180)*(-14)-4).toFixed(1);
|
||||
const t2labY=(T2Y+Math.cos(ang2*Math.PI/180)*(-14)+4).toFixed(1);
|
||||
/* T₁ label: below T₁ (off horizontal side) */
|
||||
/* O label: to the right of O, offset away from radius to T₁ */
|
||||
svgWrap.innerHTML=`<svg viewBox="0 0 ${W} ${H}" style="max-width:${W}px;width:100%;background:#fafafa;border:1px solid var(--border);border-radius:10px">
|
||||
<line x1="${BX}" y1="${BY}" x2="${BX+arm}" y2="${BY}" stroke="#0891b2" stroke-width="2"/>
|
||||
<line x1="${BX}" y1="${BY}" x2="${BX+arm*Math.cos(ang2*Math.PI/180)}" y2="${BY-arm*Math.sin(ang2*Math.PI/180)}" stroke="#0891b2" stroke-width="2"/>
|
||||
<line x1="${BX}" y1="${BY}" x2="${OX+50*(OX-BX)/d}" y2="${OY+50*(OY-BY)/d}" stroke="#64748b" stroke-width="1.3" stroke-dasharray="4,3"/>
|
||||
<circle cx="${OX}" cy="${OY}" r="${r}" fill="rgba(8,145,178,.09)" stroke="#0891b2" stroke-width="2"/>
|
||||
<circle cx="${OX}" cy="${OY}" r="3" fill="#0e7490"/>
|
||||
<circle cx="${T1X}" cy="${T1Y}" r="3.5" fill="#10b981"/>
|
||||
<circle cx="${T2X}" cy="${T2Y}" r="3.5" fill="#10b981"/>
|
||||
<line x1="${OX}" y1="${OY}" x2="${T1X}" y2="${T1Y}" stroke="#64748b" stroke-width="1.3" stroke-dasharray="3,2"/>
|
||||
<line x1="${OX}" y1="${OY}" x2="${T2X}" y2="${T2Y}" stroke="#64748b" stroke-width="1.3" stroke-dasharray="3,2"/>
|
||||
<polyline points="${T1X},${T1Y} ${T1X+9},${T1Y} ${T1X+9},${T1Y-9}" fill="none" stroke="#0e7490" stroke-width="1.5"/>
|
||||
<line x1="${BX}" y1="${BY}" x2="${(BX+arm*Math.cos(ang2*Math.PI/180)).toFixed(1)}" y2="${(BY-arm*Math.sin(ang2*Math.PI/180)).toFixed(1)}" stroke="#0891b2" stroke-width="2"/>
|
||||
<line x1="${BX}" y1="${BY}" x2="${(OX+50*(OX-BX)/d).toFixed(1)}" y2="${(OY+50*(OY-BY)/d).toFixed(1)}" stroke="#64748b" stroke-width="1.3" stroke-dasharray="4,3"/>
|
||||
<circle cx="${OX.toFixed(1)}" cy="${OY.toFixed(1)}" r="${r.toFixed(1)}" fill="rgba(8,145,178,.09)" stroke="#0891b2" stroke-width="2"/>
|
||||
<circle cx="${OX.toFixed(1)}" cy="${OY.toFixed(1)}" r="3" fill="#0e7490"/>
|
||||
<circle cx="${T1X.toFixed(1)}" cy="${T1Y}" r="3.5" fill="#10b981"/>
|
||||
<circle cx="${T2X.toFixed(1)}" cy="${T2Y.toFixed(1)}" r="3.5" fill="#10b981"/>
|
||||
<line x1="${OX.toFixed(1)}" y1="${OY.toFixed(1)}" x2="${T1X.toFixed(1)}" y2="${T1Y}" stroke="#64748b" stroke-width="1.3" stroke-dasharray="3,2"/>
|
||||
<line x1="${OX.toFixed(1)}" y1="${OY.toFixed(1)}" x2="${T2X.toFixed(1)}" y2="${T2Y.toFixed(1)}" stroke="#64748b" stroke-width="1.3" stroke-dasharray="3,2"/>
|
||||
<polyline points="${T1X.toFixed(1)},${T1Y} ${(T1X-9).toFixed(1)},${T1Y} ${(T1X-9).toFixed(1)},${T1Y-9}" fill="none" stroke="#0e7490" stroke-width="1.5"/>
|
||||
<polyline points="${rm2pts}" fill="none" stroke="#0e7490" stroke-width="1.5"/>
|
||||
<text x="${BX-8}" y="${BY+2}" font-size="11" font-weight="700" fill="#0e7490">B</text>
|
||||
<text x="${OX+4}" y="${OY-5}" font-size="11" font-weight="700" fill="#0e7490">O</text>
|
||||
<text x="${T2X-14}" y="${T2Y-5}" font-size="9" fill="#065f46">T₂</text>
|
||||
<text x="${T1X+4}" y="${T1Y+13}" font-size="9" fill="#065f46">T₁</text>
|
||||
<text x="${(OX+5).toFixed(1)}" y="${(OY+4).toFixed(1)}" font-size="11" font-weight="700" fill="#0e7490">O</text>
|
||||
<text x="${t2labX}" y="${t2labY}" font-size="9" fill="#065f46" font-weight="700">T₂</text>
|
||||
<text x="${(T1X+4).toFixed(1)}" y="${T1Y+13}" font-size="9" fill="#065f46" font-weight="700">T₁</text>
|
||||
</svg>`;
|
||||
}
|
||||
dSl.addEventListener('input',draw);
|
||||
@@ -2195,9 +2297,20 @@ function buildP5(){
|
||||
function draw(){
|
||||
const s=steps[step];
|
||||
let extras='';
|
||||
if(step>=1){extras+=`<line x1="${OX}" y1="${OY}" x2="${T1X}" y2="${T1Y}" stroke="#64748b" stroke-width="1.5" stroke-dasharray="3,2"/>`;extras+=`<line x1="${OX}" y1="${OY}" x2="${T2X}" y2="${T2Y}" stroke="#64748b" stroke-width="1.5" stroke-dasharray="3,2"/>`;extras+=`<polyline points="${T1X},${T1Y} ${T1X+9},${T1Y} ${T1X+9},${T1Y-9}" fill="none" stroke="#0e7490" stroke-width="1.5"/>`;extras+=`<text x="${T2X-14}" y="${T2Y-5}" font-size="9" fill="#0e7490">T₂</text><text x="${T1X+4}" y="${T1Y+13}" font-size="9" fill="#0e7490">T₁</text>`;}
|
||||
if(step>=2){extras+=`<text x="${OX-26}" y="${OY+12}" font-size="9" fill="#10b981">r</text><text x="${T2X+4}" y="${T2Y+6}" font-size="9" fill="#10b981">r</text>`;}
|
||||
if(step>=3){extras+=`<polygon points="${BX},${BY} ${T1X},${T1Y} ${OX},${OY}" fill="rgba(245,158,11,.12)" stroke="#f59e0b" stroke-width="1.2"/>`;extras+=`<polygon points="${BX},${BY} ${T2X},${T2Y} ${OX},${OY}" fill="rgba(16,185,129,.10)" stroke="#10b981" stroke-width="1.2"/>`;}
|
||||
/* right-angle at T₂: side2 dir=(cos60°,-sin60°), radius-toward-O dir=((OX-T2X)/r,(OY-T2Y)/r) */
|
||||
const s2x=Math.cos(ang2*Math.PI/180), s2y=-Math.sin(ang2*Math.PI/180);
|
||||
const ot2ux=(OX-T2X)/r, ot2uy=(OY-T2Y)/r;
|
||||
const rs=8;
|
||||
const rm2p=`${(T2X+s2x*rs).toFixed(1)},${(T2Y+s2y*rs).toFixed(1)} ${(T2X+s2x*rs+ot2ux*rs).toFixed(1)},${(T2Y+s2y*rs+ot2uy*rs).toFixed(1)} ${(T2X+ot2ux*rs).toFixed(1)},${(T2Y+ot2uy*rs).toFixed(1)}`;
|
||||
/* T₂ label outward from angle (perpendicular left of side2 direction = (-s2y, s2x) rotated outward) */
|
||||
/* outward from angle interior: perpendicular to side2 pointing away = (sin(ang2), cos(ang2)) i.e. left-perp */
|
||||
const t2lx=(T2X+Math.sin(ang2*Math.PI/180)*(-13)-4).toFixed(1);
|
||||
const t2ly=(T2Y+Math.cos(ang2*Math.PI/180)*(-13)+4).toFixed(1);
|
||||
/* r label: midpoint of OT₂, offset perpendicular */
|
||||
const rOT2mx=((OX+T2X)/2).toFixed(1), rOT2my=((OY+T2Y)/2).toFixed(1);
|
||||
if(step>=1){extras+=`<line x1="${OX}" y1="${OY}" x2="${T1X}" y2="${T1Y}" stroke="#64748b" stroke-width="1.5" stroke-dasharray="3,2"/>`;extras+=`<line x1="${OX}" y1="${OY}" x2="${T2X.toFixed(1)}" y2="${T2Y.toFixed(1)}" stroke="#64748b" stroke-width="1.5" stroke-dasharray="3,2"/>`;extras+=`<polyline points="${T1X},${T1Y} ${T1X-9},${T1Y} ${T1X-9},${T1Y-9}" fill="none" stroke="#0e7490" stroke-width="1.5"/>`;extras+=`<polyline points="${rm2p}" fill="none" stroke="#0e7490" stroke-width="1.5"/>`;extras+=`<text x="${t2lx}" y="${t2ly}" font-size="9" fill="#0e7490" font-weight="700">T₂</text><text x="${T1X+4}" y="${T1Y+13}" font-size="9" fill="#0e7490" font-weight="700">T₁</text>`;}
|
||||
if(step>=2){extras+=`<text x="${rOT2mx}" y="${rOT2my}" font-size="9" fill="#10b981" font-weight="700">r</text><text x="${((T1X+OX)/2-18).toFixed(1)}" y="${((T1Y+OY)/2+4).toFixed(1)}" font-size="9" fill="#10b981" font-weight="700">r</text>`;}
|
||||
if(step>=3){extras+=`<polygon points="${BX},${BY} ${T1X},${T1Y} ${OX},${OY}" fill="rgba(245,158,11,.12)" stroke="#f59e0b" stroke-width="1.2"/>`;extras+=`<polygon points="${BX},${BY} ${T2X.toFixed(1)},${T2Y.toFixed(1)} ${OX},${OY}" fill="rgba(16,185,129,.10)" stroke="#10b981" stroke-width="1.2"/>`;}
|
||||
svgEl.innerHTML=`<svg viewBox="0 0 ${W} ${H}" style="max-width:${W}px;width:100%;background:#fafafa;border:1px solid var(--border);border-radius:10px">
|
||||
<line x1="${BX}" y1="${BY}" x2="${BX+200}" y2="${BY}" stroke="#0891b2" stroke-width="2"/>
|
||||
<line x1="${BX}" y1="${BY}" x2="${BX+200*Math.cos(ang2*Math.PI/180)}" y2="${BY-200*Math.sin(ang2*Math.PI/180)}" stroke="#0891b2" stroke-width="2"/>
|
||||
@@ -2208,7 +2321,7 @@ function buildP5(){
|
||||
<circle cx="${T2X}" cy="${T2Y}" r="3.5" fill="#10b981"/>
|
||||
<circle cx="${BX}" cy="${BY}" r="3" fill="#0e7490"/>
|
||||
<text x="${BX-12}" y="${BY+2}" font-size="11" font-weight="700" fill="#0e7490">B</text>
|
||||
<text x="${OX+4}" y="${OY-5}" font-size="11" font-weight="700" fill="#0e7490">O</text>
|
||||
<text x="${OX+6}" y="${OY+4}" font-size="11" font-weight="700" fill="#0e7490">O</text>
|
||||
${extras}
|
||||
</svg>`;
|
||||
txtEl.innerHTML=s.text;
|
||||
|
||||
Reference in New Issue
Block a user