fix(alg10 ch1 §8): премиум-рисунки для геометрии sin/cos/tg = a
Переделаны 3 SVG в §8 — теперь это полноценные плакатные
визуализации с заголовками, формулами и цветовым кодированием:
sin x = a (400×430):
- Заголовочная плашка teal: 'УРАВНЕНИЕ: sin x = a' + пример a=1/2
- Окружность с осями, горизонтальная линия y=a в красной рамке
- 2 сектора углов π/6 и 5π/6 разных цветов (бирюзовый + фиолетовый)
- Вертикальные пунктиры от обеих точек к оси x (показывают sin α = a)
- Подписи P_{π/6} и P_{5π/6} крупно, цветом совпадающим с сектором
- Формульный блок снизу в рамке: x = (-1)^n · arcsin a + πn
cos x = a (400×430):
- Заголовочная плашка cyan
- Вертикальная линия x=a с красной плашкой-меткой
- Сектор +π/3 (верхний, cyan) и -π/3 (нижний, фиолетовый)
- Горизонтальные пунктиры от точек к оси y
- Формульный блок: x = ±arccos a + 2πn
tg x = a (440×430, шире из-за оси тангенсов):
- Заголовочная плашка green
- Ось тангенсов справа (вертикальная пунктирная)
- Точка A_a = (1; a) в красной рамке-метке
- Прямая через O и A_a пунктиром в обе стороны
- Пример a = √3/3 → корни π/6 и 7π/6
- Сектор угла π/6 + 2 точки
- Формульный блок: x = arctg a + πn
Все три SVG используют consistency:
- Заголовок с подзаголовком сверху
- Чёткое цветовое кодирование (a/sin/cos = красный)
- Сектора заполненные пастельными цветами
- Формула в нижней рамке с заголовком 'ОБЩАЯ ФОРМУЛА'
This commit is contained in:
Maxim Dolgolyov
@@ -1951,74 +1951,139 @@ function buildP8(){
|
||||
const A = window.ALG10;
|
||||
let html = '';
|
||||
|
||||
/* === SVG 1: геометрия решения sin x = a === */
|
||||
/* === SVG 1: геометрия решения sin x = a (премиум) === */
|
||||
let svgSin = '';
|
||||
if(A){
|
||||
const c = A.tri.canvas({id:'p8-sin', W:320, H:320, R:120});
|
||||
const a = 0.5; /* sin x = 0.5 */
|
||||
const x1 = Math.asin(a); /* π/6 */
|
||||
const x2 = Math.PI - x1; /* 5π/6 */
|
||||
const c = A.tri.canvas({id:'p8-sin', W:400, H:430, R:125, bg:'#fff'});
|
||||
const a = 0.5; /* sin x = 1/2 */
|
||||
const x1 = Math.asin(a); /* π/6 */
|
||||
const x2 = Math.PI - x1; /* 5π/6 */
|
||||
const yL = c.cy - a * c.R;
|
||||
const p1 = c.pointPx(x1);
|
||||
const p2 = c.pointPx(x2);
|
||||
let s = c.open
|
||||
/* === Заголовочная плашка === */
|
||||
+ '<rect x="0" y="0" width="'+c.W+'" height="48" fill="rgba(13,148,136,.08)"/>'
|
||||
+ '<text x="'+(c.W/2)+'" y="22" text-anchor="middle" font-size="14" font-family="Unbounded,Inter,sans-serif" font-weight="800" fill="#0d9488">УРАВНЕНИЕ: sin x = a</text>'
|
||||
+ '<text x="'+(c.W/2)+'" y="40" text-anchor="middle" font-size="11" font-family="Inter,sans-serif" font-style="italic" fill="#64748b">Пример: a = 1/2 → корни π/6 и 5π/6</text>'
|
||||
/* === Оси и окружность === */
|
||||
+ c.axes()
|
||||
+ c.circle({width:2})
|
||||
/* Горизонтальная линия y = a */
|
||||
+ '<line x1="'+(c.cx-c.R-10)+'" y1="'+yL+'" x2="'+(c.cx+c.R+10)+'" y2="'+yL+'" stroke="#dc2626" stroke-width="2" stroke-dasharray="6 3"/>'
|
||||
+ '<text x="'+(c.cx+c.R+14)+'" y="'+(yL+4)+'" font-size="12" font-family="JetBrains Mono,monospace" font-weight="700" fill="#dc2626">y = a</text>'
|
||||
/* Две точки пересечения */
|
||||
+ c.radius(x1, {color:'#0d9488'})
|
||||
+ c.point(x1, {color:'#0d9488', label:'P_{x_1}', labelOffset:18, fontSize:11})
|
||||
+ c.radius(x2, {color:'#7c3aed'})
|
||||
+ c.point(x2, {color:'#7c3aed', label:'P_{x_2}', labelOffset:18, fontSize:11})
|
||||
+ '<text x="160" y="304" text-anchor="middle" font-size="11" font-family="JetBrains Mono,monospace" font-weight="700" fill="#1e293b">x_1 = arcsin a, x_2 = π − arcsin a</text>'
|
||||
+ c.circle({width:2.5})
|
||||
/* === Горизонтальная линия y = a === */
|
||||
+ '<line x1="55" y1="'+yL+'" x2="345" y2="'+yL+'" stroke="#dc2626" stroke-width="2.2" stroke-dasharray="7 4"/>'
|
||||
+ '<rect x="346" y="'+(yL-11)+'" width="48" height="22" fill="#fee2e2" stroke="#dc2626" stroke-width="1.2" rx="4"/>'
|
||||
+ '<text x="370" y="'+(yL+4)+'" text-anchor="middle" font-size="12" font-family="JetBrains Mono,monospace" font-weight="800" fill="#dc2626">y = a</text>'
|
||||
/* Метка значения a на оси y */
|
||||
+ '<text x="'+(c.cx-9)+'" y="'+(yL+4)+'" text-anchor="end" font-size="12" font-family="JetBrains Mono,monospace" font-weight="800" fill="#dc2626">a</text>'
|
||||
/* === Сектор угла π/6 === */
|
||||
+ '<path d="M '+c.cx+' '+c.cy+' L '+(c.cx+34)+' '+c.cy+' A 34 34 0 0 0 '+(c.cx + 34*Math.cos(x1))+' '+(c.cy - 34*Math.sin(x1))+' Z" fill="rgba(13,148,136,.22)" stroke="#0d9488" stroke-width="1.5"/>'
|
||||
+ '<text x="'+(c.cx+44)+'" y="'+(c.cy-12)+'" font-size="11" font-family="JetBrains Mono,monospace" font-weight="800" fill="#0f766e">π/6</text>'
|
||||
/* === Сектор угла 5π/6 (от 0 идём CCW почти до 5π/6, но рисуем оба угла рядом) === */
|
||||
+ '<path d="M '+c.cx+' '+c.cy+' L '+(c.cx+30*Math.cos(x1))+' '+(c.cy-30*Math.sin(x1))+' A 30 30 0 0 0 '+(c.cx+30*Math.cos(x2))+' '+(c.cy-30*Math.sin(x2))+' Z" fill="rgba(124,58,237,.18)" stroke="#7c3aed" stroke-width="1.4" stroke-dasharray="3 2"/>'
|
||||
/* === Радиусы к точкам решения === */
|
||||
+ c.radius(x1, {color:'#0d9488', width:2.8})
|
||||
+ c.radius(x2, {color:'#7c3aed', width:2.8})
|
||||
/* === Точки решения P_{π/6} и P_{5π/6} с подписями === */
|
||||
+ c.point(x1, {color:'#0d9488', label:'P_{π/6}', labelOffset:22, fontSize:13, labelColor:'#0f766e'})
|
||||
+ c.point(x2, {color:'#7c3aed', label:'P_{5π/6}', labelOffset:22, fontSize:13, labelColor:'#6d28d9'})
|
||||
/* === Вертикальные пунктиры — sin α для обеих точек === */
|
||||
+ '<line x1="'+p1.px+'" y1="'+p1.py+'" x2="'+p1.px+'" y2="'+c.cy+'" stroke="#dc2626" stroke-width="1.4" stroke-dasharray="2 3"/>'
|
||||
+ '<line x1="'+p2.px+'" y1="'+p2.py+'" x2="'+p2.px+'" y2="'+c.cy+'" stroke="#dc2626" stroke-width="1.4" stroke-dasharray="2 3"/>'
|
||||
/* === Формульный блок === */
|
||||
+ '<rect x="22" y="368" width="356" height="56" rx="10" fill="rgba(13,148,136,.10)" stroke="#0d9488" stroke-width="2"/>'
|
||||
+ '<text x="'+(c.W/2)+'" y="386" text-anchor="middle" font-size="10" font-family="Unbounded,Inter,sans-serif" font-weight="800" fill="#0f766e" letter-spacing="1px">ОБЩАЯ ФОРМУЛА</text>'
|
||||
+ '<text x="'+(c.W/2)+'" y="412" text-anchor="middle" font-size="16" font-family="JetBrains Mono,monospace" font-weight="800" fill="#0d9488">x = (−1)ⁿ · arcsin a + πn, n ∈ Z</text>'
|
||||
+ c.close;
|
||||
svgSin = s;
|
||||
}
|
||||
|
||||
/* === SVG 2: геометрия cos x = a === */
|
||||
/* === SVG 2: геометрия cos x = a (премиум) === */
|
||||
let svgCos = '';
|
||||
if(A){
|
||||
const c = A.tri.canvas({id:'p8-cos', W:320, H:320, R:120});
|
||||
const a = 0.5; /* cos x = 0.5 */
|
||||
const x1 = Math.acos(a);
|
||||
const x2 = -x1;
|
||||
const c = A.tri.canvas({id:'p8-cos', W:400, H:430, R:125, bg:'#fff'});
|
||||
const a = 0.5; /* cos x = 1/2 */
|
||||
const x1 = Math.acos(a); /* π/3 */
|
||||
const x2 = -x1; /* -π/3 */
|
||||
const xL = c.cx + a * c.R;
|
||||
const p1 = c.pointPx(x1);
|
||||
const p2 = c.pointPx(x2);
|
||||
let s = c.open
|
||||
/* === Заголовочная плашка === */
|
||||
+ '<rect x="0" y="0" width="'+c.W+'" height="48" fill="rgba(8,145,178,.08)"/>'
|
||||
+ '<text x="'+(c.W/2)+'" y="22" text-anchor="middle" font-size="14" font-family="Unbounded,Inter,sans-serif" font-weight="800" fill="#0891b2">УРАВНЕНИЕ: cos x = a</text>'
|
||||
+ '<text x="'+(c.W/2)+'" y="40" text-anchor="middle" font-size="11" font-family="Inter,sans-serif" font-style="italic" fill="#64748b">Пример: a = 1/2 → корни ±π/3</text>'
|
||||
/* === Оси и окружность === */
|
||||
+ c.axes()
|
||||
+ c.circle({width:2})
|
||||
/* Вертикальная линия x = a */
|
||||
+ '<line x1="'+xL+'" y1="'+(c.cy-c.R-10)+'" x2="'+xL+'" y2="'+(c.cy+c.R+10)+'" stroke="#dc2626" stroke-width="2" stroke-dasharray="6 3"/>'
|
||||
+ '<text x="'+(xL+5)+'" y="'+(c.cy-c.R-4)+'" font-size="12" font-family="JetBrains Mono,monospace" font-weight="700" fill="#dc2626">x = a</text>'
|
||||
+ c.radius(x1, {color:'#0d9488'})
|
||||
+ c.point(x1, {color:'#0d9488', label:'P_{x_1}', labelOffset:18, fontSize:11})
|
||||
+ c.radius(x2, {color:'#7c3aed'})
|
||||
+ c.point(x2, {color:'#7c3aed', label:'P_{x_2}', labelOffset:18, fontSize:11})
|
||||
+ '<text x="160" y="304" text-anchor="middle" font-size="11" font-family="JetBrains Mono,monospace" font-weight="700" fill="#1e293b">x_{1,2} = ±arccos a</text>'
|
||||
+ c.circle({width:2.5})
|
||||
/* === Вертикальная линия x = a === */
|
||||
+ '<line x1="'+xL+'" y1="55" x2="'+xL+'" y2="345" stroke="#dc2626" stroke-width="2.2" stroke-dasharray="7 4"/>'
|
||||
+ '<rect x="'+(xL-22)+'" y="42" width="44" height="20" fill="#fee2e2" stroke="#dc2626" stroke-width="1.2" rx="4"/>'
|
||||
+ '<text x="'+xL+'" y="56" text-anchor="middle" font-size="12" font-family="JetBrains Mono,monospace" font-weight="800" fill="#dc2626">x = a</text>'
|
||||
/* Метка значения a на оси x */
|
||||
+ '<text x="'+(xL-3)+'" y="'+(c.cy+18)+'" text-anchor="middle" font-size="12" font-family="JetBrains Mono,monospace" font-weight="800" fill="#dc2626">a</text>'
|
||||
/* === Сектор угла π/3 (верхний) === */
|
||||
+ '<path d="M '+c.cx+' '+c.cy+' L '+(c.cx+34)+' '+c.cy+' A 34 34 0 0 0 '+(c.cx + 34*Math.cos(x1))+' '+(c.cy - 34*Math.sin(x1))+' Z" fill="rgba(8,145,178,.22)" stroke="#0891b2" stroke-width="1.5"/>'
|
||||
+ '<text x="'+(c.cx+44)+'" y="'+(c.cy-10)+'" font-size="11" font-family="JetBrains Mono,monospace" font-weight="800" fill="#0e7490">π/3</text>'
|
||||
/* === Сектор угла -π/3 (нижний) === */
|
||||
+ '<path d="M '+c.cx+' '+c.cy+' L '+(c.cx+30)+' '+c.cy+' A 30 30 0 0 1 '+(c.cx + 30*Math.cos(x2))+' '+(c.cy - 30*Math.sin(x2))+' Z" fill="rgba(124,58,237,.18)" stroke="#7c3aed" stroke-width="1.4"/>'
|
||||
+ '<text x="'+(c.cx+44)+'" y="'+(c.cy+22)+'" font-size="11" font-family="JetBrains Mono,monospace" font-weight="800" fill="#6d28d9">-π/3</text>'
|
||||
/* === Радиусы === */
|
||||
+ c.radius(x1, {color:'#0891b2', width:2.8})
|
||||
+ c.radius(x2, {color:'#7c3aed', width:2.8})
|
||||
/* === Точки решения === */
|
||||
+ c.point(x1, {color:'#0891b2', label:'P_{π/3}', labelOffset:22, fontSize:13, labelColor:'#0e7490'})
|
||||
+ c.point(x2, {color:'#7c3aed', label:'P_{-π/3}', labelOffset:22, fontSize:13, labelColor:'#6d28d9'})
|
||||
/* === Горизонтальные пунктиры — cos α для обеих точек (от P до оси y) === */
|
||||
+ '<line x1="'+p1.px+'" y1="'+p1.py+'" x2="'+c.cx+'" y2="'+p1.py+'" stroke="#dc2626" stroke-width="1.4" stroke-dasharray="2 3"/>'
|
||||
+ '<line x1="'+p2.px+'" y1="'+p2.py+'" x2="'+c.cx+'" y2="'+p2.py+'" stroke="#dc2626" stroke-width="1.4" stroke-dasharray="2 3"/>'
|
||||
/* === Формульный блок === */
|
||||
+ '<rect x="22" y="368" width="356" height="56" rx="10" fill="rgba(8,145,178,.10)" stroke="#0891b2" stroke-width="2"/>'
|
||||
+ '<text x="'+(c.W/2)+'" y="386" text-anchor="middle" font-size="10" font-family="Unbounded,Inter,sans-serif" font-weight="800" fill="#0e7490" letter-spacing="1px">ОБЩАЯ ФОРМУЛА</text>'
|
||||
+ '<text x="'+(c.W/2)+'" y="412" text-anchor="middle" font-size="16" font-family="JetBrains Mono,monospace" font-weight="800" fill="#0891b2">x = ± arccos a + 2πn, n ∈ Z</text>'
|
||||
+ c.close;
|
||||
svgCos = s;
|
||||
}
|
||||
|
||||
/* === SVG 3: геометрия tg x = a === */
|
||||
/* === SVG 3: геометрия tg x = a (премиум) === */
|
||||
let svgTg = '';
|
||||
if(A){
|
||||
const c = A.tri.canvas({id:'p8-tg', W:340, H:320, R:120});
|
||||
const a = 0.6; /* tg x = 0.6 */
|
||||
const x1 = Math.atan(a); /* arctg a */
|
||||
const x2 = x1 + Math.PI; /* arctg a + π */
|
||||
const c = A.tri.canvas({id:'p8-tg', W:440, H:430, R:125, bg:'#fff'});
|
||||
const a = Math.sqrt(3)/3; /* tg x = √3/3 ≈ 0.577 */
|
||||
const x1 = Math.atan(a); /* π/6 */
|
||||
const x2 = x1 + Math.PI; /* 7π/6 */
|
||||
const xAx = c.cx + c.R;
|
||||
const yA = c.cy - a * c.R;
|
||||
/* Прямая через O и A_a, продлённая в обе стороны */
|
||||
const k = a; /* y = kx */
|
||||
const xL_start = c.cx - c.R - 12;
|
||||
const xL_end = c.cx + c.R + 12;
|
||||
const yL_start = c.cy + k * (c.cx - xL_start);
|
||||
const yL_end = c.cy - k * (xL_end - c.cx);
|
||||
let s = c.open
|
||||
+ c.axes({xExt:c.R+40})
|
||||
+ c.circle({width:2})
|
||||
+ c.tgAxis()
|
||||
/* Метка точки A_a на оси тангенсов */
|
||||
+ '<circle cx="'+xAx+'" cy="'+yA+'" r="4" fill="#dc2626" stroke="#fff" stroke-width="1.5"/>'
|
||||
+ '<text x="'+(xAx+6)+'" y="'+(yA+4)+'" font-size="11" font-family="JetBrains Mono,monospace" font-weight="700" fill="#dc2626">A_a = (1; a)</text>'
|
||||
/* Линия от точки A через начало координат */
|
||||
+ '<line x1="'+(c.cx-c.R-10)+'" y1="'+(c.cy+a*(c.R+10))+'" x2="'+(c.cx+c.R+10)+'" y2="'+(c.cy-a*(c.R+10))+'" stroke="#dc2626" stroke-width="1.5" stroke-dasharray="3 2"/>'
|
||||
+ c.point(x1, {color:'#0d9488', label:'P_{x_1}', labelOffset:14, fontSize:10})
|
||||
+ c.point(x2, {color:'#7c3aed', label:'P_{x_2}', labelOffset:14, fontSize:10})
|
||||
+ '<text x="170" y="304" text-anchor="middle" font-size="11" font-family="JetBrains Mono,monospace" font-weight="700" fill="#1e293b">x = arctg a + πn (одна формула!)</text>'
|
||||
/* === Заголовочная плашка === */
|
||||
+ '<rect x="0" y="0" width="'+c.W+'" height="48" fill="rgba(22,163,74,.08)"/>'
|
||||
+ '<text x="'+(c.W/2)+'" y="22" text-anchor="middle" font-size="14" font-family="Unbounded,Inter,sans-serif" font-weight="800" fill="#16a34a">УРАВНЕНИЕ: tg x = a</text>'
|
||||
+ '<text x="'+(c.W/2)+'" y="40" text-anchor="middle" font-size="11" font-family="Inter,sans-serif" font-style="italic" fill="#64748b">Пример: a = √3/3 → корни π/6 и 7π/6 (одна серия!)</text>'
|
||||
/* === Оси, окружность, ось тангенсов === */
|
||||
+ c.axes({xExt:c.R+50})
|
||||
+ c.circle({width:2.5})
|
||||
+ c.tgAxis({color:'#16a34a', ext:c.R+5})
|
||||
/* === Прямая через O и A_a === */
|
||||
+ '<line x1="'+xL_start+'" y1="'+yL_start+'" x2="'+xL_end+'" y2="'+yL_end+'" stroke="#dc2626" stroke-width="2" stroke-dasharray="6 3"/>'
|
||||
/* === Точка A_a на оси тангенсов === */
|
||||
+ '<circle cx="'+xAx+'" cy="'+yA+'" r="5" fill="#dc2626" stroke="#fff" stroke-width="2"/>'
|
||||
+ '<rect x="'+(xAx+8)+'" y="'+(yA-12)+'" width="90" height="24" fill="#fee2e2" stroke="#dc2626" stroke-width="1.2" rx="4"/>'
|
||||
+ '<text x="'+(xAx+53)+'" y="'+(yA+4)+'" text-anchor="middle" font-size="11" font-family="JetBrains Mono,monospace" font-weight="800" fill="#dc2626">A_a = (1; a)</text>'
|
||||
/* === Сектор угла π/6 === */
|
||||
+ '<path d="M '+c.cx+' '+c.cy+' L '+(c.cx+34)+' '+c.cy+' A 34 34 0 0 0 '+(c.cx + 34*Math.cos(x1))+' '+(c.cy - 34*Math.sin(x1))+' Z" fill="rgba(22,163,74,.22)" stroke="#16a34a" stroke-width="1.5"/>'
|
||||
+ '<text x="'+(c.cx+44)+'" y="'+(c.cy-10)+'" font-size="11" font-family="JetBrains Mono,monospace" font-weight="800" fill="#15803d">π/6</text>'
|
||||
/* === Точки решения === */
|
||||
+ c.point(x1, {color:'#16a34a', label:'P_{π/6}', labelOffset:22, fontSize:13, labelColor:'#15803d'})
|
||||
+ c.point(x2, {color:'#7c3aed', label:'P_{7π/6}', labelOffset:22, fontSize:13, labelColor:'#6d28d9'})
|
||||
/* === Формульный блок === */
|
||||
+ '<rect x="22" y="368" width="396" height="56" rx="10" fill="rgba(22,163,74,.10)" stroke="#16a34a" stroke-width="2"/>'
|
||||
+ '<text x="'+(c.W/2)+'" y="386" text-anchor="middle" font-size="10" font-family="Unbounded,Inter,sans-serif" font-weight="800" fill="#15803d" letter-spacing="1px">ОБЩАЯ ФОРМУЛА (одна серия, период π)</text>'
|
||||
+ '<text x="'+(c.W/2)+'" y="412" text-anchor="middle" font-size="16" font-family="JetBrains Mono,monospace" font-weight="800" fill="#16a34a">x = arctg a + πn, n ∈ Z</text>'
|
||||
+ c.close;
|
||||
svgTg = s;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user