Javascript-форум - Паукообразный скрипт

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Паукообразный скрипт (https://javascript.ru/forum/misc/71455-paukoobraznyjj-skript.html)

void()

20.11.2017 14:25

Паукообразный скрипт

Здравствуйте!

Когда-то видел на сайте очень красивый скрипт, чем-то напоминающий паука. Попытался изобразить на картинке:

А сейчас найти не получается ничего похожего.

Смысл в том, что есть точки и когда ведешь мышью над этими точками, вблизи курсора возникают нити, которые приклеиваются к курсору.

Может, кто-то знает что-то подобное? Или хотя бы как это называется:) А если делать самому, то с чего начать? Вижу тут несколько проблем:
- как выбрать точки, которые находятся рядом с курсором (перебрать массив из точек и сравнивать координаты x и y?).
- ну хорошо, если даже так, то что представляют собой эти нити? Прозрачная png картинка или что?
- поворот нитей осуществляется с помощью transform rotate?

Nexus

20.11.2017 14:32

void(), это наверняка было полотно canvas или svg

void()

20.11.2017 14:34

Nexus,
о, блин - до этих тем я еще не добрался. Вообще-то да - наверняка даже canvas...

Dilettante_Pro

20.11.2017 14:58

void(),
Здесь есть нечто похожее

рони	20.11.2017 15:03

void(),
там был canvas, где тоже не помню ...
варианты на тему
http://javascript.ru/forum/showthrea...768#post444775
http://javascript.ru/forum/showthrea...976#post405988

void()

20.11.2017 15:04

Dilettante_Pro,
рони,
wow! Спасибо вам - это то, что надо!

рони	20.11.2017 15:08

void(),
http://vincentgarreau.com/particles.js/

void()

20.11.2017 15:36

рони,
Класс) Эх, буду пытаться повторить)

void()

20.11.2017 16:45

Rise,
Упс, странный все-таки этот google photos. Для меня картинка отображалась. Похоже остальные включили телепатические способности)))

void()

20.11.2017 16:59

Rise,
тогда воспользуюсь старым добрым piccy.info. Спасибо, что обратили на это внимание, а то я бы так и постил картинки, а их никто бы не видел. Капец :lol:

Да тут картинка - это сильно звучит) каракули, только чтобы понять смысл.

Dilettante_Pro

20.11.2017 17:01

void(),
У меня в хроме вполне видны.
В ИЕ - тоже. Теперь все три.

рони	20.11.2017 17:04

Rise,
видно?

рони	21.11.2017 10:23

void(),

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  html, body{
    height: 100%;
  }

  body{
    position: relative;
    background-color: #FFD700;
  }

  hr.connection{
    position: absolute;
    width: 0px;
    height: 1px;
    background-color: #00008B;
    padding: 0;
    margin: 0;
    z-index: 2;
    transition: width .8s linear;
  }





  .one {
    background-color: #A0522D;
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;

  }

  .two{
    border-radius: 8px;
    border: 6px solid #006400;
    position: absolute;
    top: 30%;
    left: 50%;
    background-color:  #228B22;
    z-index: 1;
    width: 128px;
    height: 128px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
(function($) {
    $.fn.connectionItem = function(options) {
        var defaults = {
            to: $(window)
        };
        var settings = $.extend({}, defaults, options);
        return this.each(function() {
            var from = $(this);
            var x0, y0;
            var x, y, x1, y1, r;
            var to = $(settings.to);
            var hr = $("<hr/>", {
                "class": "connection",
                css: {
                    position: "absolute"
                }
            }).appendTo("body");
            hr.css("transform-origin", 0);
            hr.css("-moz-transform-origin", 0);
            hr.css("-webkit-transform-origin", 0);
            hr.css("-o-transform-origin", 0);

            function fn(event) {
                var pos = from.offset();
                x0 = pos.left - 6;
                y0 = pos.top - 6;
                x1 = event.pageX - 8;
                y1 = event.pageY - 8;
                x = x1 - x0;
                y = y1 - y0;
                var w = Math.sqrt(x * x + y * y);
                w > 150 && (w = 0);
                r = 180 - 180 / Math.PI * Math.atan2(y, x);
                hr.css({
                    left: x1,
                    top: y1,
                    width: w
                });
                hr.css("transform", "rotate(-" + r + "deg)");
                hr.css("-moz-transform", "rotate(-" + r + "deg)");
                hr.css("-webkit-transform", "rotate(-" + r + "deg)");
                hr.css("-o-transform", "rotate(-" + r + "deg)")
            }
            $(document).on({
               mousemove: fn
            })
        })
    }
})(jQuery);

$(function(){
function rand(a) {
        return 5 + Math.floor(Math.random() * a)
    }

$.each(Array(40),function(indx, element){
$('<div>',{css : {top : rand(80)+"%",left : rand(80)+"%"} , "class" : "one"})
.appendTo('body')

      });
$(".one").connectionItem();//
});


  </script>
</head>

<body>

</body>

</html>

void()

21.11.2017 13:16

:write:
Все забрал - пошел разбираться и писать код.

Rise,
Спасибо за формулу, класс!

рони - все-таки нереально крутой. нет слов) :thanks:

рони	21.11.2017 15:45

void(),
на всякий случай, сделано из прошлого варианта, некоторые строки лишние , нет оптимизации, можно попробовать убрать строку 26

void()

21.11.2017 18:51

рони,
ок.

рони	21.11.2017 20:03

void(),
количество ножек "паучка" можно указать в строке 121 :)

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  html, body{
    height: 100%;
  }

  body{
    position: relative;
    background-color: #FFD700;
  }

  hr.connection{
    position: absolute;
    width: 0px;
    height: 1px;
    background-color: #00008B;
    padding: 0;
    margin: 0;
    z-index: 2;

  }





  .one {
    background-color: #A0522D;
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;

  }

  .two{
    border-radius: 8px;
    border: 6px solid #006400;
    position: absolute;
    top: 30%;
    left: 50%;
    background-color:  #228B22;
    z-index: 1;
    width: 128px;
    height: 128px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
(function($) {
    $.fn.connectionItem = function(options) {
        var defaults = {
            num: 5
        };
        var settings = $.extend({}, defaults, options);
        var elems = $(this).get();
        var num = Math.min(settings.num, elems.length);
        var line = $.map(Array(num), function(indx, element) {
            var hr = $("<hr/>", {
                "class": "connection",
                css: {
                    position: "absolute"
                }
            }).appendTo("body");
            hr.css("transform-origin", 0);
            hr.css("-moz-transform-origin", 0);
            hr.css("-webkit-transform-origin", 0);
            hr.css("-o-transform-origin", 0);
            return hr
        });

        function extraction(event) {
            var k = elems.map(function(el) {
                var x0,
                    y0, x, y, x1, y1, r, w, pos;
                pos = $(el).offset();
                x0 = pos.left - 6;
                y0 = pos.top - 6;
                x1 = event.pageX - 8;
                y1 = event.pageY - 8;
                x = x1 - x0;
                y = y1 - y0;
                w = Math.sqrt(x * x + y * y);
                r = 180 - 180 / Math.PI * Math.atan2(y, x);
                return {
                    left: x1,
                    top: y1,
                    width: w,
                    transform: "rotate(-" + r + "deg)"
                }
            }).sort(function(a, b) {
                return a.width - b.width
            }).slice(0, num).forEach(function(css, i) {
                line[i].css(css)
            })
        }
        $(document).on({
            mousemove: extraction
        });
        return this
    }
})(jQuery);

$(function(){
function rand(a) {
        return 5 + Math.floor(Math.random() * a)
    }

$.each(Array(47),function(indx, element){
$('<div>',{css : {top : rand(80)+"%",left : rand(80)+"%"} , "class" : "one"})
.appendTo('body')

      });
$(".one").connectionItem({num : 6});//
});


  </script>
</head>

<body>

</body>

</html>

void()

21.11.2017 20:45

рони,
я в шоке!! Как??? :)

А за счет чего в прошлой версии падала производительность?

Я пытался оптимизировать, но до такого вообще и близко не дотянул)

А, все - я понял) Это "бомба"!

рони	21.11.2017 21:10

Цитата:

Сообщение от void()

А за счет чего в прошлой версии падала производительность?

там было сколько точек столько ножек, не все видно но они есть, сейчас ножки ограничены - меньше прорисовки.

рони	23.11.2017 01:29

Rise,
здорово! :thanks:

void()

23.11.2017 19:43

Rise,
клааас. Мега-круто! Даже визуально код выглядит, как стихи - я поражаюсь... Надеюсь, недели 2 мне хватит, чтобы выкупить, что в этом скрипте происходит :D А потом, научившись на этих примерах, я уже и сам тоже начну думать мозгом)
:thanks:

рони	27.11.2017 09:44

Rise,
:thanks: :)

<canvas width="400" height="200" style="outline:1px solid black;cursor:none;"></canvas>
<script>
"use strict"
class Point {
    constructor(x, y, radius) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = "#0000FF";
    }
    render(game) {
        game.ctx2d.beginPath();
        game.ctx2d.fillStyle = this.color;
        game.ctx2d.arc(this.x, this.y, this.radius, 0, 7);
        game.ctx2d.fill();
    }
}
class Cursor extends Point {
    constructor(x, y, radius, length, filter) {
        super(x, y, radius);
        this.length = length;
        this.filter = filter;
        this.color = "#" + ("000000" + (Math.random() * 0xffffff | 0).toString(16)).slice(-6);
        this.points = new Set();
    }
    search(points) {
        this.points.clear();
        for (let point of points) {
            point.color = "#0000FF";
            if (this.filter(this, point)) {
                point.color = "#7FFF00";
                this.points.add(point);
            }
        }

    }
    render(game) {
        this.search(game.points);
        game.ctx2d.beginPath();
        game.ctx2d.strokeStyle = this.color;
        for (let point of this.points) {
            game.ctx2d.moveTo(this.x, this.y);
            game.ctx2d.lineTo(point.x, point.y);
        }
        game.ctx2d.closePath();
        game.ctx2d.stroke();
        super.render(game);
    }
}
class Game {
    constructor(canvas, cursor, points) {
        this.ctx2d = canvas.getContext('2d');
        this.cursor = cursor;
        this.points = new Set(points);
        this.render();
        canvas.onmousemove = (e) => {
            this.cursor.x = e.offsetX;
            this.cursor.y = e.offsetY;
            this.render();
        };
    }
    render() {
        this.ctx2d.clearRect(0, 0, 400, 200);
        for (let point of this.points)
            point.render(this);
        this.cursor.render(this);
    }
}
const theGame = new Game(
    document.querySelector('canvas'),
    new Cursor(200, 100, 2, 50, (A, B) => B.x > A.x - A.length && B.x < A.x + A.length && B.y > A.y - A.length && B.y < A.y + A.length),
    new Array(10 * 20).fill(0).map((v, i) => new Point(20 * (i % 20) + 10, 20 * (i / 20 | 0) + 10, 2))
);
</script>

рони	29.11.2017 16:02

Rise,
:) :victory:

Часовой пояс GMT +3, время: 13:17.