Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 21.11.2017, 20:45
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 163

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

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

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

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

Последний раз редактировалось void(), 21.11.2017 в 20:53.
Ответить с цитированием
  #22 (permalink)  
Старый 21.11.2017, 21:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 21,709

Сообщение от void()
А за счет чего в прошлой версии падала производительность?
там было сколько точек столько ножек, не все видно но они есть, сейчас ножки ограничены - меньше прорисовки.
Ответить с цитированием
  #23 (permalink)  
Старый 23.11.2017, 01:05
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 3,652

void(),
<canvas width="400" height="200" style="outline:1px solid black;cursor:none;"></canvas>
<script>
class Point {
    constructor(x, y, radius) {
        this.x = x;
        this.y = y;
        this.radius = radius;
    }
    render(game) {
        game.ctx2d.beginPath();
        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.points = new Set();
    }
    search(points) {
        this.points.clear();
        for (let point of points)
            if (this.filter(this, point))
                this.points.add(point);
    }
    render(game) {
        this.search(game.points);
        game.ctx2d.beginPath();
        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) => A.length > Math.hypot(A.x - B.x, A.y - B.y)),
    new Array(100).fill(0).map(() => new Point(400 * Math.random(), 200 * Math.random(), 2))
);
</script>
Ответить с цитированием
  #24 (permalink)  
Старый 23.11.2017, 01:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 21,709

Rise,
здорово!
Ответить с цитированием
  #25 (permalink)  
Старый 23.11.2017, 19:43
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 163

Rise,
клааас. Мега-круто! Даже визуально код выглядит, как стихи - я поражаюсь... Надеюсь, недели 2 мне хватит, чтобы выкупить, что в этом скрипте происходит А потом, научившись на этих примерах, я уже и сам тоже начну думать мозгом)
Ответить с цитированием
  #26 (permalink)  
Старый 27.11.2017, 06:03
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 3,652

рони,
void(),

// Square
(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
// Grid
new Array(10 * 20).fill(0).map((v, i) => new Point(20 * (i % 20), 20 * (i / 20 | 0), 2))
Ответить с цитированием
  #27 (permalink)  
Старый 27.11.2017, 09:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 21,709

Rise,

<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>
Ответить с цитированием
  #28 (permalink)  
Старый 29.11.2017, 15:59
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 3,652

рони,
... хамеленожка
<canvas width="400" height="200" style="outline:1px solid black;cursor:none;"></canvas>
<script>
class Point {
    constructor(x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
    }
    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, color, length, filter) {
        super(x, y, radius, color);
        this.length = length;
        this.filter = filter;
        this.points = new Set();
    }
    search(points) {
        this.points.clear();
        for (let point of points)
            if (this.filter(this, point))
                this.points.add(point);
    }
    render(game) {
        this.search(game.points);
        game.ctx2d.beginPath();
        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.strokeStyle = `hsl(${Math.random() * 360 | 0}, 100%, 50%)`;
        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, 'gray', 50, (A, B) => A.length > Math.hypot(A.x - B.x, A.y - B.y)),
    new Array(10 * 20).fill(0).map((v, i) => new Point(20 * (i % 20), 20 * (i / 20 | 0) + 10 * (i % 2), 2, 'gray'))
);
</script>
Ответить с цитированием
  #29 (permalink)  
Старый 29.11.2017, 16:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 21,709

Rise,
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как скопировать скрипт с переадресующей страници ramisa Элементы интерфейса 9 09.07.2013 23:59
Как вывести дату, чтобы не повторять скрипт пару раз xXapokalypsesXx Общие вопросы Javascript 10 27.06.2013 13:43
Не работает скрипт :( VladimirV Javascript под браузер 5 21.12.2010 14:26
Люди, помогите адаптировать скрипт под Оперу KiLLk Opera, Safari и др. 1 01.06.2009 01:05
добавление окошка в скрипт подсчета слов Гость Общие вопросы Javascript 10 11.03.2008 17:07