d3.js глаза, следующие за блоками мыши

Question

Я пытаюсь создать 2 d3.js & svg глаза, которые следуют курсору мыши со зрачками, и когда мышь наступает над ними, они перемещаются в случайном положении. Однако после случайного числа успешных движений они замерзают, и я не могу понять, почему.

Это код:

var width = 1200, 
    height = 600; 

var ptdata = []; 

var pray = 10, 
    eray = 50; 

var cx0 = 0, cx1 = 100 
    cy = 0; 

var svg = d3.select("body") 
.append("svg") 
.attr("width", width) 
.attr("height", height) 
.append("g"); 

var eye0 = svg.append("circle") 
.attr("id", "eye0") 
.attr("class", "eye") 
.attr("cx", cx0) 
.attr("cy", cy) 
.attr("r", eray) 
.attr("stroke", "black") 
.attr("fill", "white") 
.data([ptdata]); 

var eye1 = svg.append("circle") 
.attr("id", "eye1") 
.attr("class", "eye") 
.attr("cx", cx1) 
.attr("cy", cy) 
.attr("r", eray) 
.attr("stroke", "black") 
.attr("fill", "white") 
.data([ptdata]); 

var pupil0 = svg.append("circle") 
.attr("id", "pupil0") 
.attr("class", "pupil") 
.attr("cx", cx0) 
.attr("cy", cy) 
.attr("r", pray) 
.attr("fill", "black") 
.data([ptdata]); 

var pupil1 = svg.append("circle") 
.attr("id", "pupil1") 
.attr("class", "pupil") 
.attr("cx", cx1) 
.attr("cy", cy) 
.attr("r", pray) 
.attr("fill", "black") 
.data([ptdata]); 

var eyes = svg.selectAll(".eye"); 
var pupils = svg.selectAll(".pupil"); 

function init() { 
    var tx0 = 0, ty0 = 0; 
    while (tx0<eray || (tx0+cx1)>(width-eray)) { 
     var randx = Math.round(Math.random() * width, 2); 
     tx0 = randx; 
    } 
    while (ty0<eray || (ty0+cy)>(height-eray)) { 
     var randy = Math.round(Math.random() * height, 2); 
     ty0 = randy; 
    } 

    cx0 += tx0; cx1 += tx0; cy += ty0; 
    eye0.attr("cx", cx0); 
    eye1.attr("cx", cx1); 
    eyes.attr("cy", cy); 
    pupil0.attr("cx", cx0); 
    pupil1.attr("cx", cx1); 
    pupils.attr("cy", cy); 
} 
init(); 

var distanceThreshold = eray - pray; 

var mouseX = cx0, mouseY = cy; 

var svgagain = d3.select("body").select("svg") 
.on("mousemove", function() { 
    var pt = d3.mouse(this); 
    follow(pt); 
}); 

function follow(pt) { 
    ptdata.push(pt); 

    var x = pt[0]; 
    var y = pt[1]; 

    var d0 = { 
     dx: x - cx0, 
     dy: y - cy 
    }; 
    var distance0 = Math.sqrt(d0.dx * d0.dx + d0.dy * d0.dy); 

    var d1 = { 
     dx: x - cx1, 
     dy: y - cy 
    }; 
    var distance1 = Math.sqrt(d1.dx * d1.dx + d1.dy * d1.dy); 

    mouseX0 = d0.dx/distance0 * distanceThreshold + cx0; 
    mouseY0 = d0.dy/distance0 * distanceThreshold + cy; 

    var xp0 = cx0, yp0 = cy; 
    var xp1 = cx1, yp1 = cy; 

    pupil0.attr("cx", 
     function(d) { 
      xp0 += (mouseX0 - xp0)/1; 
      return xp0; 
     }) 
    .attr("cy", 
     function(d) { 
      yp0 += (mouseY0 - yp0)/1; 
      return yp0; 
     }); 

    mouseX1 = d1.dx/distance1 * distanceThreshold + cx1; 
    mouseY1 = d1.dy/distance1 * distanceThreshold + cy; 


    pupil1.attr("cx", 
     function(d) { 
      xp1 += (mouseX1 - xp1)/1; 
      return xp1; 
     }) 
    .attr("cy", 
     function(d) { 
      yp1 += (mouseY1 - yp1)/1; 
      return yp1; 
     }); 
} 

function move(pt) { 
    ptdata.push(pt); 

    var x = pt[0]; 
    var y = pt[1]; 

    var tx = 0, ty = 0; 
    var newCX0 = cx0, newCX1 = cx1, newCY = cy; 
    while (x<(newCX1+eray) && x>(newCX0-eray) && y<(newCY+eray) && y>(newCY-eray) || 
     (newCX0<eray || newCX1>(width-eray) || newCY<eray || newCY>(height-eray))){ 
     var randx = Math.round(Math.random() * width, 2); 
     tx = Math.random() < 0.5 ? (-randx) : randx; 
     newCX0 += tx; newCX1 += tx; 
     var randy = Math.round(Math.random() * height, 2); 
     ty = Math.random() < 0.5 ? (-randy) : randy; 
     newCY += ty; 
    } 

    cx0 = newCX0; cx1 = newCX1; cy = newCY; 
    eye0.attr("cx", cx0); 
    eye1.attr("cx", cx1); 
    eyes.attr("cy", cy); 
    pupil0.attr("cx", cx0); 
    pupil1.attr("cx", cx1); 
    pupils.attr("cy", cy); 
} 

var eye0again = eye0.on("mouseover", function() { 
    var pt = d3.mouse(this); 
    move(pt); 
}); 

Answer 1

Я решил таким образом:

function move(pt) { 

    var x = pt[0]; 
    var y = pt[1]; 

    var newCX0 = cx0, newCX1 = cx1, newCY = cy; 
    while (newCX0>(cx0-eray) && newCX0<(cx1+eray) && newCY>(cy-eray) && newCY<(cy+eray)) { 
     var randx = Math.random()*(width-(eray*4)) + eray; 
     newCX0 = Math.round(randx, 2); 
     newCX1 = newCX0+(eray*2); 
     var randy = Math.random()*(height-(eray*2)) + eray; 
     newCY = Math.round(randy, 2); 
    } 

    cx0 = newCX0; cx1 = newCX1; cy = newCY; 
    eye0 
    .attr("cx", cx0); 
    eye1 
    .attr("cx", cx1); 
    eyes 
    .attr("cy", cy); 

    pupil0 
    .attr("cx", cx0); 
    pupil1 
    .attr("cx", cx1); 
    pupils 
    .attr("cy", cy); 
    }); 
} 

Answer 2

Похоже, что ваш код застрять в петле while в вашей move функции. Условия в петле while не сходятся, так как глаза движутся по странице.

Попробуйте это:

var width = 600, 
 
    height = 300; 
 

 
var ptdata = []; 
 

 
var pray = 10, 
 
    eray = 50; 
 

 
var cx0 = 0, 
 
    cx1 = 100, 
 
    cy = 0; 
 

 
var svg = d3.select("#vis") 
 
    .append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height) 
 
    .append("g"); 
 

 
var eye0 = svg.append("circle") 
 
    .attr("id", "eye0") 
 
    .attr("class", "eye") 
 
    .attr("cx", cx0) 
 
    .attr("cy", cy) 
 
    .attr("r", eray) 
 
    .attr("stroke", "black") 
 
    .attr("fill", "white") 
 
    .data([ptdata]); 
 

 
var eye1 = svg.append("circle") 
 
    .attr("id", "eye1") 
 
    .attr("class", "eye") 
 
    .attr("cx", cx1) 
 
    .attr("cy", cy) 
 
    .attr("r", eray) 
 
    .attr("stroke", "black") 
 
    .attr("fill", "white") 
 
    .data([ptdata]); 
 

 
var pupil0 = svg.append("circle") 
 
    .attr("id", "pupil0") 
 
    .attr("class", "pupil") 
 
    .attr("cx", cx0) 
 
    .attr("cy", cy) 
 
    .attr("r", pray) 
 
    .attr("fill", "black") 
 
    .data([ptdata]); 
 

 
var pupil1 = svg.append("circle") 
 
    .attr("id", "pupil1") 
 
    .attr("class", "pupil") 
 
    .attr("cx", cx1) 
 
    .attr("cy", cy) 
 
    .attr("r", pray) 
 
    .attr("fill", "black") 
 
    .data([ptdata]); 
 

 
var eyes = svg.selectAll(".eye"); 
 
var pupils = svg.selectAll(".pupil"); 
 

 
function init() { 
 
    var tx0 = 0, 
 
    ty0 = 0; 
 
    while (tx0 < eray || (tx0 + cx1) > (width - eray)) { 
 
    var randx = Math.round(Math.random() * width, 2); 
 
    tx0 = randx; 
 
    } 
 
    while (ty0 < eray || (ty0 + cy) > (height - eray)) { 
 
    var randy = Math.round(Math.random() * height, 2); 
 
    ty0 = randy; 
 
    } 
 

 
    cx0 += tx0; 
 
    cx1 += tx0; 
 
    cy += ty0; 
 
    eye0.attr("cx", cx0); 
 
    eye1.attr("cx", cx1); 
 
    eyes.attr("cy", cy); 
 
    pupil0.attr("cx", cx0); 
 
    pupil1.attr("cx", cx1); 
 
    pupils.attr("cy", cy); 
 
} 
 
init(); 
 

 
var distanceThreshold = eray - pray; 
 

 
var mouseX = cx0, 
 
    mouseY = cy; 
 

 
var svgagain = d3.select("body").select("svg") 
 
    .on("mousemove", function() { 
 
    var pt = d3.mouse(this); 
 
    follow(pt); 
 
    }); 
 

 
function follow(pt) { 
 
    ptdata.push(pt); 
 

 
    var x = pt[0]; 
 
    var y = pt[1]; 
 

 
    var d0 = { 
 
    dx: x - cx0, 
 
    dy: y - cy 
 
    }; 
 
    var distance0 = Math.sqrt(d0.dx * d0.dx + d0.dy * d0.dy); 
 

 
    var d1 = { 
 
    dx: x - cx1, 
 
    dy: y - cy 
 
    }; 
 
    var distance1 = Math.sqrt(d1.dx * d1.dx + d1.dy * d1.dy); 
 

 
    mouseX0 = d0.dx/distance0 * distanceThreshold + cx0; 
 
    mouseY0 = d0.dy/distance0 * distanceThreshold + cy; 
 

 
    var xp0 = cx0, 
 
    yp0 = cy; 
 
    var xp1 = cx1, 
 
    yp1 = cy; 
 

 
    pupil0.attr("cx", 
 
     function(d) { 
 
     xp0 += (mouseX0 - xp0)/1; 
 
     return xp0; 
 
     }) 
 
    .attr("cy", 
 
     function(d) { 
 
     yp0 += (mouseY0 - yp0)/1; 
 
     return yp0; 
 
     }); 
 

 
    mouseX1 = d1.dx/distance1 * distanceThreshold + cx1; 
 
    mouseY1 = d1.dy/distance1 * distanceThreshold + cy; 
 

 

 
    pupil1.attr("cx", 
 
     function(d) { 
 
     xp1 += (mouseX1 - xp1)/1; 
 
     return xp1; 
 
     }) 
 
    .attr("cy", 
 
     function(d) { 
 
     yp1 += (mouseY1 - yp1)/1; 
 
     return yp1; 
 
     }); 
 
} 
 

 
function move(pt) { 
 
    ptdata.push(pt); 
 

 
    var x = pt[0]; 
 
    var y = pt[1]; 
 

 
    var tx = 0, 
 
    ty = 0; 
 
    var newCX0 = cx0, 
 
    newCX1 = cx1, 
 
    newCY = cy; 
 
    while (x < (newCX1 + eray) && x > (newCX0 - eray) && y < (newCY + eray) && y > (newCY - eray) || 
 
    (newCX0 < eray || newCX1 > (width - eray) || newCY < eray || newCY > (height - eray))) { 
 
    var randx = Math.round(Math.random() * width, 2); 
 
    tx = Math.random() < 0.5 ? (-randx) : randx; 
 
    newCX0 += tx; 
 
    newCX1 += tx; 
 
    var randy = Math.round(Math.random() * height, 2); 
 
    ty = Math.random() < 0.5 ? (-randy) : randy; 
 
    newCY += ty; 
 
    } 
 

 
    cx0 = newCX0; 
 
    cx1 = newCX1; 
 
    cy = newCY; 
 
    // eye0.attr("cx", cx0); 
 
    // eye1.attr("cx", cx1); 
 
    // eyes.attr("cy", cy); 
 
    pupil0.attr("cx", cx0); 
 
    pupil1.attr("cx", cx1); 
 
    pupils.attr("cy", cy); 
 
} 
 

 
/* 
 
var eye0again = eye0.on("mouseover", function() { 
 
    var pt = d3.mouse(this); 
 
    move(pt); 
 
}); 
 
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id="vis"></div>

Я закомментирована пару секций, которые остановятся поведение, которое вы видели. Биты, которые я прокомментировал, заставляли глаза прыгать вокруг svg. В какой-то момент позиция, в которой они оказались, заставляла вашу функцию move застревать в цикле while, как упоминалось выше. При остановке прыжка петля while, кажется, заканчивается правильно.

Answer 3

Ниже старый сценарий я написал в 2001 году и обновлен год назад. Не совсем то, что вы хотите, но вы должны перенести «глазную математику».

(function() { 
 

 
    /* Following Eyes 2003 - kurt.grigg@yahoo.co.uk (Updated) */ 
 

 
    var eye = 50; //Eye size in pixels 
 

 
    if (eye % 2 == 0){ 
 
     eye++; 
 
    } 
 
    var eye5 = eye/2 | 0; 
 
    var pup = 42 * eye/100; 
 
    if (pup % 2 == 0){ 
 
     pup++; 
 
    } 
 
    var pup5 = (pup - 3)/2; 
 
    if (pup5 % 2 == 1){ 
 
     pup5++; 
 
    } 
 
    var grng = (eye - pup)/2; 
 
    if (grng % 2 == 1){ 
 
     grng++; 
 
    } 
 
    var rng = eye5/grng; 
 
    var d = document; 
 
    var my = 0; 
 
    var mx = 0; 
 
    var fy = 0; 
 
    var fx = 0; 
 
    var ros = eye + 2; 
 
    var scy = 0; 
 
    var scx = 0; 
 
    var mls = 1000/60; 
 
    var lastEx = performance.now(); 
 
    var h, w, dy, dx, chy, chx, d1, d2, a1, a2, le, re, yec, xec; 
 

 
    var cstyle = 
 
     'position:absolute;top:0px;left:0px;width:'+(ros*2)+'px;height:'+ros+'px;' 
 
     +'margin:0px;border:none;padding:0px;display:inline-block;'; 
 

 
    var estyle = 
 
     'position:absolute;top:0px;left:0px;height:'+eye+'px;' 
 
     +'width:'+eye+'px;background-color:#ffffff;' 
 
     +'border-radius: 50%;border: 1px solid #000000;' 
 
     +'box-shadow: inset -'+eye/3+'px -'+eye/3+'px '+eye/2+ 
 
     'px -'+(eye/10|0)+'px rgba(0,0,0,0.16);'; 
 

 
    var pstyle = 
 
     'position:absolute;top:45%;left:45%;height:'+pup+'px;' 
 
     +'width:'+pup+'px;background-color:#000000;border-radius: 50%;'; 
 

 
    var wstyle = 
 
     'position:absolute;top:16%;left:16%;width:20%;height:20%;' 
 
     +'background:#ffffff;border-radius:50%;' 
 
     +'transform: skewX(-15deg) skewY(-18deg);'; 
 

 
    var c = d.createElement('div'); 
 
    var e1 = d.createElement('div'); 
 
    var e2 = d.createElement('div'); 
 
    var p1 = d.createElement('div'); 
 
    var p2 = d.createElement('div'); 
 
    var w1 = d.createElement('div'); 
 
    var w2 = d.createElement('div'); 
 

 
    c.setAttribute('style', cstyle); 
 
    e1.setAttribute('style', estyle); 
 
    e2.setAttribute('style', estyle + 'left:'+ros+'px;'); 
 
    p1.setAttribute('style', pstyle); 
 
    p2.setAttribute('style', pstyle); 
 
    w1.setAttribute('style', wstyle); 
 
    w2.setAttribute('style', wstyle); 
 

 
    d.body.appendChild(c); 
 
    c.appendChild(e1); 
 
    c.appendChild(e2); 
 
    d.body.appendChild(p1); 
 
    d.body.appendChild(p2); 
 
    p1.appendChild(w1); 
 
    p2.appendChild(w2); 
 

 
    function scrl(v) { 
 
     var y, x; 
 
     y = window.pageYOffset; 
 
     x = window.pageXOffset; 
 
     return (v == 0) ? y : x; 
 
    } 
 

 
    function initscroll() { 
 
     scy = scrl(0); 
 
     scx = scrl(1); 
 
    } 
 

 
    function windims() { 
 
     var tmp = d.documentElement.clientWidth; 
 
     var ch = (typeof tmp == 'number'); 
 
     var sc = (ch) ? window.innerWidth - tmp : 0; 
 
     h = window.innerHeight; 
 
     w = window.innerWidth - sc; 
 
    } 
 

 
    function mouse(e) { 
 
     if (!e) { 
 
      e = window.event; 
 
     } 
 
     my = e.pageY - window.pageYOffset; 
 
     mx = e.pageX - window.pageXOffset; 
 
    } 
 

 
    function ani() { 
 
     //Keep eyes on screen. 
 
     chy = Math.floor(fy - (ros*1.2)); 
 
     if (chy <= 0) { 
 
      chy = 0; 
 
     } 
 
     if (chy >= h - ros) { 
 
      chy = h - ros; 
 
     } 
 

 
     chx = Math.floor(fx - ros); 
 
     if (chx <= 0) { 
 
      chx = 0; 
 
     } 
 
     if (chx >= w - (ros*2)) { 
 
      chx = w - (ros*2); 
 
     } 
 

 
     //Eyeball centres. 
 
     yec = chy + eye5; 
 
     xec = chx + eye5; 
 

 
     d1 = Math.sqrt((my - yec) * (my - yec) + (mx - xec) * (mx - xec)); 
 
     d2 = Math.sqrt((my - yec) * (my - yec) + (mx - (xec + ros)) * (mx - (xec + ros))); 
 

 
     a1 = Math.atan2(my - yec, mx - xec) * 180/Math.PI; 
 
     a2 = Math.atan2(my - yec, mx - (xec + ros)) * 180/Math.PI; 
 

 
     le = (d1 < eye5) ? d1/rng : grng; 
 
     re = (d2 < eye5) ? d2/rng : grng; 
 

 
     c.style.top = chy + scy + 'px'; 
 
     c.style.left = chx + scx + 'px'; 
 

 
     p1.style.top = yec - pup5 + le * Math.sin(a1 * Math.PI/180) + scy + 'px'; 
 
     p1.style.left = xec - pup5 + le * Math.cos(a1 * Math.PI/180) + scx + 'px'; 
 

 
     p2.style.top = yec - pup5 + re * Math.sin(a2 * Math.PI/180) + scy + 'px'; 
 
     p2.style.left = (xec + ros) - pup5 + re * Math.cos(a2 * Math.PI/180) + scx + 'px'; 
 
    } 
 

 
    function move() { 
 
     dy = fy += (my - fy) * 0.05; 
 
     dx = fx += (mx - fx) * 0.05; 
 
     ani(); 
 
    } 
 

 
    function init() { 
 
     windims(); 
 
     draw(); 
 
    } 
 

 
    function draw() { 
 
     var now = performance.now(); 
 
     if ((now - lastEx) > (mls)) { 
 
      move(); 
 
      lastEx = performance.now(); 
 
     } 
 
     requestAnimationFrame(draw); 
 
    } 
 

 
    window.addEventListener("resize", windims, false); 
 
    window.addEventListener("load", init, false); 
 
    d.addEventListener("mousemove", mouse, false); 
 
    window.addEventListener("scroll", initscroll, false); 
 

 
})();

Answer 4

Удалось найти и подбодрить другие мои старые глаза смотреть скрипт с вне его после мыши. Это легко изменяемый размер и блок в линии так

(function() { 
 

 
    /* Watching Eyes 2001 - kurt.grigg@yahoo.co.uk (Updated) */ 
 

 
    var eye = 60; //Eye size in pixels 
 

 
    if (eye % 2 == 0){ 
 
     eye++; 
 
    } 
 
    var eye5 = eye/2 | 0; 
 
    var pup = 42 * eye/100; 
 
    if (pup % 2 == 0){ 
 
     pup++; 
 
    } 
 
    var pup5 = (pup - 1)/2; 
 
    if (pup5 % 2 == 1){ 
 
     pup5++; 
 
    } 
 
    var grng = (eye - pup)/2; 
 
    if (grng % 2 == 1){ 
 
     grng++; 
 
    } 
 
    var rng = eye5/grng; 
 
    var p1, p2, osy, osx, yec, xec, d1, d2, a1, a2, le, re; 
 
    var ros = eye + 2; 
 
    var pix = 'px'; 
 
    var d = document; 
 

 
    var cstyle = 
 
     'position:relative;width:'+(ros*2)+'px;height:'+ros+'px;' 
 
     +'margin:0px;border:none;padding:0px;display:inline-block;'; 
 

 
    var estyle = 
 
     'position:absolute;top:0px;left:0px;height:'+eye+'px;' 
 
     +'width:'+eye+'px;background-color:#ffffff;' 
 
     +'border-radius: 50%;border: 1px solid #000000;' 
 
     +'box-shadow: inset -'+eye/3+'px -'+eye/3+'px '+eye/2+ 
 
     'px -'+(eye/10|0)+'px rgba(0,0,0,0.16);'; 
 

 
    var pstyle = 
 
     'position:absolute;top:45%;left:45%;height:'+pup+'px;' 
 
     +'width:'+pup+'px;background-color:#000000;border-radius: 50%;'; 
 

 
    var wstyle = 
 
     'position:absolute;top:16%;left:16%;width:20%;height:20%;' 
 
     +'background:#ffffff;border-radius:50%;' 
 
     +'transform: skewX(-15deg) skewY(-18deg);'; 
 

 
    var c = d.createElement('div'); 
 
    var e1 = d.createElement('div'); 
 
    var e2 = d.createElement('div'); 
 
    var p1 = d.createElement('div'); 
 
    var p2 = d.createElement('div'); 
 
    var w1 = d.createElement('div'); 
 
    var w2 = d.createElement('div'); 
 

 
    c.setAttribute('style', cstyle); 
 
    e1.setAttribute('style', estyle); 
 
    e2.setAttribute('style', estyle + 'left:'+ros+'px;'); 
 
    p1.setAttribute('style', pstyle); 
 
    p2.setAttribute('style', pstyle); 
 
    w1.setAttribute('style', wstyle); 
 
    w2.setAttribute('style', wstyle); 
 

 
    d.body.appendChild(c); 
 
    c.appendChild(e1); 
 
    c.appendChild(e2); 
 
    e1.appendChild(p1); 
 
    e2.appendChild(p2); 
 
    p1.appendChild(w1); 
 
    p2.appendChild(w2); 
 

 
function ani(y, x) { 
 
    osy = c.offsetTop; 
 
    osx = c.offsetLeft; 
 

 
    yec = osy + eye5; 
 
    xec = osx + eye5; 
 

 
    d1 = Math.sqrt((y - yec) * (y - yec) + (x - xec) * (x - xec)); 
 
    d2 = Math.sqrt((y - yec) * (y - yec) + (x - (xec + ros)) * (x - (xec + ros))); 
 
    a1 = Math.atan2(y - yec, x - xec) * 180/Math.PI; 
 
    a2 = Math.atan2(y - yec, x - (xec + ros)) * 180/Math.PI; 
 

 
    le = (d1 < eye5) ? d1/rng : grng; 
 
    re = (d2 < eye5) ? d2/rng : grng; 
 

 
    p1.style.top = yec - pup5 + le * Math.sin(a1 * Math.PI/180) - osy + pix; 
 
    p1.style.left = xec - pup5 + le * Math.cos(a1 * Math.PI/180) - osx + pix; 
 

 
    p2.style.top = yec - pup5 + re * Math.sin(a2 * Math.PI/180) - osy + pix; 
 
    p2.style.left = (xec) - pup5 + re * Math.cos(a2 * Math.PI/180) - osx + pix; 
 
} 
 

 
function mouse(e) { 
 
    var y, x; 
 
    if (!e) { 
 
     e = window.event; 
 
    } 
 
    y = e.pageY - 1; 
 
    x = e.pageX - 1; 
 
    ani(y, x); 
 
} 
 

 
d.addEventListener("mousemove",mouse,false); 
 

 
})();

может быть размещен аккуратно среди потока HTML.