maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(math6): живой график y=kx / y=k/x (Гл.5 §3) — плавное перетекание при k

Browse Source 
Math6Anim.plotLive: canvas-плоскость с сеткой/осями; кривая плавно «перетекает»
(easing к целевому k). Переключатель прямая (y=kx, через начало) / обратная
(y=k/x, две ветви). Слайдер k (−4..4, шаг 0,5) двигает кривую вживую.
Вшито в Гл.5 §3 рядом со статичным графиком. Headless-safe. Тесты 19/19.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-06-02 21:33:47 +03:00
parent 61de12e2de
commit 1fc1672acd
3 changed files with 60 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/tests/math6-page.test.js
+3
View File
@@ -189,6 +189,9 @@ test('анимации: canvas-демо монтируются (headless-safe)',
const r5 = await loadDom('math_6_ch5.html');
r5.doc.defaultView.goTo('p2'); await wait(100);
assert.ok(r5.doc.querySelector('#p2-car canvas'), 'canvas «машинка + график» §5.2');
r5.doc.defaultView.goTo('p3'); await wait(100);
assert.ok(r5.doc.querySelector('#p3-livefig canvas'), 'canvas «живой график y=kx/k÷x» §5.3');
assert.ok(r5.doc.querySelectorAll('#p3-live [data-m]').length === 2, 'переключатель прямая/обратная §5.3');
assert.deepEqual(r5.errors, [], 'ch5 без ошибок: ' + r5.errors.join(' | '));
});
frontend/js/math6_anim.js
+42
View File
@@ -236,4 +236,46 @@ M.carGraph = function (host, opts) {
return { stop: L.stop };
};
/* ============================ ДЕМО 6: ЖИВОЙ ГРАФИК y=kx / y=k/x ============================ */
M.plotLive = function (host, opts) {
opts = opts || {};
var W0 = 360, H0 = 360; var sc = sceneCanvas(host, W0, H0);
var st = { k: opts.k != null ? opts.k : 2, target: opts.k != null ? opts.k : 2, mode: opts.mode || 'kx' };
var XMIN = -6, XMAX = 6, YMIN = -6, YMAX = 6, pad = 24;
function X(x) { return pad + (x - XMIN) / (XMAX - XMIN) * (W0 - 2 * pad); }
function Y(y) { return H0 - pad - (y - YMIN) / (YMAX - YMIN) * (H0 - 2 * pad); }
function draw() {
var ctx = sc.ctx; if (!ctx) return;
var pri = cssVar('--pri', '#059669'), acc = cssVar('--pri2', '#047857'), bd = cssVar('--border', '#e2e8f0'), axc = cssVar('--text', '#0f172a');
st.k += (st.target - st.k) * 0.12;
ctx.clearRect(0, 0, W0, H0);
ctx.strokeStyle = bd; ctx.lineWidth = 0.8;
for (var gx = XMIN; gx <= XMAX; gx++) { if (gx === 0) continue; ctx.beginPath(); ctx.moveTo(X(gx), Y(YMIN)); ctx.lineTo(X(gx), Y(YMAX)); ctx.stroke(); }
for (var gy = YMIN; gy <= YMAX; gy++) { if (gy === 0) continue; ctx.beginPath(); ctx.moveTo(X(XMIN), Y(gy)); ctx.lineTo(X(XMAX), Y(gy)); ctx.stroke(); }
ctx.strokeStyle = axc; ctx.lineWidth = 1.6; ctx.beginPath(); ctx.moveTo(X(XMIN), Y(0)); ctx.lineTo(X(XMAX), Y(0)); ctx.moveTo(X(0), Y(YMIN)); ctx.lineTo(X(0), Y(YMAX)); ctx.stroke();
ctx.fillStyle = axc; ctx.font = 'italic 13px serif'; ctx.textAlign = 'left'; ctx.fillText('x', X(XMAX) - 4, Y(0) + 16); ctx.fillText('y', X(0) + 8, Y(YMAX) + 12);
ctx.strokeStyle = pri; ctx.lineWidth = 3; ctx.lineJoin = 'round'; ctx.lineCap = 'round';
if (st.mode === 'kx') {
ctx.beginPath(); var started = false;
for (var x = XMIN; x <= XMAX; x += 0.06) { var y = st.k * x; if (y < YMIN - 1 || y > YMAX + 1) { started = false; continue; } if (started) ctx.lineTo(X(x), Y(y)); else { ctx.moveTo(X(x), Y(y)); started = true; } }
ctx.stroke();
} else {
[[XMIN, -0.12], [0.12, XMAX]].forEach(function (seg) {
ctx.beginPath(); var s2 = false;
for (var x2 = seg[0]; x2 <= seg[1]; x2 += 0.04) { if (Math.abs(x2) < 0.08) continue; var y2 = st.k / x2; if (y2 < YMIN - 1 || y2 > YMAX + 1) { s2 = false; continue; } if (s2) ctx.lineTo(X(x2), Y(y2)); else { ctx.moveTo(X(x2), Y(y2)); s2 = true; } }
ctx.stroke();
});
}
ctx.fillStyle = acc; ctx.font = 'bold 16px Inter, sans-serif'; ctx.textAlign = 'left';
var kk = Math.round(st.k * 10) / 10;
ctx.fillText(st.mode === 'kx' ? ('y = ' + kf(kk) + ' · x') : ('y = ' + kf(kk) + ' / x'), pad + 4, pad + 10);
}
var L = loop(host, draw);
return {
stop: L.stop,
setK: function (v) { st.target = v; if (st.mode === 'kdx' && Math.abs(v) < 0.5) st.target = (v < 0 ? -0.5 : 0.5); },
setMode: function (m) { st.mode = m; if (m === 'kdx' && Math.abs(st.target) < 0.5) st.target = 0.5; }
};
};
})(window);
frontend/textbooks/math_6_ch5.html
+15
View File
@@ -307,6 +307,11 @@ function buildP3(){
+'<div class="wg-help">Двигай коэффициент $k$ — смотри, как меняется наклон прямой.</div>'
+'<div class="sliders"><label>$k$ = <b id="p3-kv">2</b><input type="range" id="p3-k" min="-3" max="3" step="1" value="2"></label></div>'
+'<div id="p3-fig"></div></div>';
h+='<div class="wg" id="p3-live"><div class="wg-header"><span class="wg-badge">Анимация</span><div class="wg-title">Живой график: двигай k</div></div>'
+'<div class="wg-help">Переключай вид зависимости и двигай $k$ — график <b>плавно перетекает</b>. Прямая $y=kx$ всегда проходит через начало координат; гипербола $y=k/x$ — две ветви, через начало не проходит.</div>'
+'<div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:8px"><button class="btn primary" data-m="kx">прямая $y=kx$</button><button class="btn" data-m="kdx">обратная $y=k/x$</button></div>'
+'<div class="sliders"><label>$k$ = <b id="p3-lkv">2</b><input type="range" id="p3-lk" min="-4" max="4" step="0.5" value="2"></label></div>'
+'<div id="p3-livefig"></div></div>';
h+='<div class="wg" id="p3-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Прямая или обратная?</div></div>'
+'<div class="wg-help">Определи по графику вид зависимости.</div>'
+'<div class="score-display"><span>Вопрос <b id="p3-i">1</b> / 6</span><span>Очки: <b id="p3-s">0</b> / 6</span></div>'
@@ -322,6 +327,16 @@ function buildP3(){
h+=secNav('p2','app')+readBtn('p3');
box.innerHTML=h; renderMath(box);
(function(){
if(!window.Math6Anim) return;
var ctrl=Math6Anim.plotLive(document.getElementById('p3-livefig'),{k:2,mode:'kx'});
var sl=document.getElementById('p3-lk'), kv=document.getElementById('p3-lkv');
sl.oninput=function(){ var v=+sl.value; kv.textContent=String(v).replace('.',','); ctrl.setK(v); };
document.querySelectorAll('#p3-live [data-m]').forEach(function(b){ b.addEventListener('click',function(){
document.querySelectorAll('#p3-live [data-m]').forEach(function(x){x.classList.remove('primary');}); b.classList.add('primary');
ctrl.setMode(b.getAttribute('data-m')); }); });
})();
(function(){
var sl=document.getElementById('p3-k'), fig=document.getElementById('p3-fig');
function render(){ var k=+sl.value; document.getElementById('p3-kv').textContent=k;