?????? ?? ?? ??? ??? ?????? ?? ? ? ???? ??? ?? ?? ? ??? ????? ?? ?????.

?? ????? ?? ??? ??? ??? ??? ??? ??? ?? ????? ???? ???? ???? ????? ??? ?????.

Iframe? ?? ???? ??? ?? ?????. ??? ? ???? ???? ???? ????? ??? ?? ? ????.

??? ??? ??? ???? ? ??? ?? ??? ??????? ?? ?? ??? ??????.

??? ??

??? ????? ???? "????"?? ??? ???? ????. ???? ?? ??? ????, ?? ???? ?? ????? ??? ??????. ??? ??? ?? ? ???? ??? ?? ???? ?? ???? ??? ????. ?????? ?? ? ??? ??? ???? : ??? ?? (?? ? ?? Perlin Noise).

? ?? ??? ??? ?? ?? ??? ??? ??? ???? ??? ????? ??? ?? ?????.

? ?? ??? ?? ?? ???? ?? ??? ?? ??? ? ???? ?? ? ????. ? ??? ? ??? ?? (x ?, ???? ?????)? ?? ??? ??? ???? ?? ??? ?? ?? ? ????. ? ?? ?? ???? x ? y ??? ???????? ? ?? ??? ?????.

??? ??? ??? ?????? ?? ? ?? ???? Daniel Shiffman? ??? "I.5 : Perlin Noise- ??? ??"?????.

??? ??? ????

?????? ??? ????? ?? ???? ???? ????? ???????. ? ?? Seph ??? ????? ?????.

??? ????????? ????? ???? ??? ? ????.

??? ???? ??? ???? position: fixed; ??? .mouse ??????. ?????? ????? ?? ??? ????? ? ?? ????.

??? ?? ?????.

 // dom const el = document.querySelector ( '. mouse')?? ???? ?????.

// ??? ??? ??????? ?? (a) {
  // ?? a? ????? ??? ?? ?? ? ?? ?? ????. // ? ????? ? ?? ?? ??? ?? ??? ???? ??? ?? ????.
  const noisex = (Noise.simplex2 (0, a * 0.0005) 1) / 2;
  // ??? y ?? ?? ?? ??? ?? ?? ? x? ?? ?? ??? ?? ??? ? ?? ?? ??? ?? ?? ?? ???????. const noisey = (Noise.simplex2 (1, a * 0.0005) 1) / 2;

  // ??? ?? [0, 1]?? ? ??? ?? const x = noisex * window.innerWidth;
  const y = noisey * window.innerheight;

  // x & y ??? ??? ??????. el.style.transform =`translate ($ {x} px, $ {y} px)`;

  // ????? ??? ? ??? ??? ???? ?? ?? requestAnimationFrame (render)? ????.
}

// ????? ??? ???? ????? requestAnimationFrame (render)? ?????.

?? ????? ???? ?? ??? ??? ????.

?? ??? ?????

?? ??? ???? ? ?? ??? ?? ??? ? ????. ??? ?? ??? ? ?? ??? ??? ???? ?? ? ?? ??? ???? ?? ??? ?? ? ? ?? ???? ?? ???????.

 const el = document.querySelector ( '. ???');
LastMove = 0???;

// ?? onMousEmove (e) {
  // x ? y ?? x = e.clientx? ?????.
  y = E.Clienty;

  // ??? ?? ??? ?????. lastmove = date.now ();
}

// X & Y ??? ?? ??? ?? ???? ???? updatemouse (x, y) {
  el.style.transform =`translate ($ {x} px, $ {y} px)`;
}

?? ?? (a) {
  // if (date.now () - LastMove> 500) ?? ??? ??? 500ms? ????? ??????.
    // ??-??? ?? ?? // ...
    Updatemouse (x, y);
  }
}

// ??? ???? ????.

?? ???? ???? ?? ???? ???? ?????. 500 ?? ? ??? ???? ???? ?? ???? ?? ???? ?????.

?? ???

? ?? ?? ??? ?? ???? ??? ??? ???? ? ? ????. ????, ??? ?? ??? 0.0005? ???? ?? ??????.

 // ?? ?? ?? const ?? = a * 0.0005;
// ??? ???? Const Noisex = (Noise.Simplex3 (1, 0, ??) 1) /2;

?? ???? ? ?? ???? ???? ?? ??? ????? ?? ? ????.

 ??? = 0???;
?? ?? (a) {
  // ...
  // ??? ?? ??????? random = 0.1;
  // ? ??? ?? x ?? ??? ?? const randx = noise.simplex3 (1, 0, random) * window.innerWidth * 0.1;
  // ? ??? ???? y ?? ???? ?????. const randy = noise.simplex3 (3, 0, random) * window.innerheight * 0.1;

  // X & Y ?? (??? * ??) ???? ???? ?????.
  const y = Noisey * InnerHeight Randy;
  // ...
}

?? ?? ???? ??? ???? ?? ? ?? ?? ???? ???? ?? ??? ???? ??????.

?? ???

?? ???? ?????? 500? ??? ??????

?? ?? ?? ?? ??? ??? ???? ????. ???? ???? ??? ??????? ?? ?????? ???? ???? ???? ?? ????? ??? ??? ?? ???? ?????.

???? ??? ???? ??? ??? ???? ???? ??? ??????.

? ??? ??? ???? ????????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!