Ответы пользователя по тегу Canvas
  • Как эффективно хранить canvas попискельно в БД с последующим отображением?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Я сделал бы несколько иначе, сохранял в бд примерное следующее:

    1. кто, когда и как рисовал
    userID - идентификатор пользователя
    timeStamp - временная метка
    point - координата мышки

    2. информация о смене инструмента рисования (кисточки) и настроек инструмента
    userID - идентификатор пользователя
    timeStamp - временная метка
    toolType - тип инструмента (кисточки)
    toolSettings - JSON строка с параметрами инструмента(цвет, размер и т.д.) (у разных кисточек могут быть свои, уникальные наборы параметров, поэтому систематизировать не выйдет, и поэтому JSON строка)

    Имея такие записи в 2-х таблицах получим:
    - в большинстве случаев гораздо меньший объем сохраняемой информации
    - возможность undo как для своих действий, так и для действий других пользователей
    - возможность в последствии отобразить не только результат совместного творчества, но и сам процесс
    - возможность отключать на холсте с результатом как художества отдельных пользователей так и результат применения отдельных инструментов

    ЗЫ: от себя добавлю, что для этой задачи в том виде как ее описал я больше подойдут noSQL базы, в которых можно будет обойтись одной коллекцией и несколькими типами записей:

    1. запись о смене инструмента
    {"action": "changeTool",  userID: "xxxxxxx",  timeStamp: 0000000000000, toolType:"pen"}


    2. запись об изменении параметров инструмента
    {"action": "changeToolSettings",  userID: "xxxxxxx",  timeStamp: 0000000000000, setings: {
        тут у каждого инструмента что-то свое, общими наверно будут только цвет и размер
    }}


    3. запись об пути мазюкания инструментом
    {"action": "path",  userID: "xxxxxxx", path:[
        {timeStamp: 0000000000000, "x": 0, "y": 0},
        {timeStamp: 0000000000000, "x": 0, "y": 0},
        {timeStamp: 0000000000000, "x": 0, "y": 0},
        {timeStamp: 0000000000000, "x": 0, "y": 0},
        ....
    ]}
    Ответ написан
  • Как сделать текст по спирали на канвасе?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    просто накидал пример. Думаю посмотрев его вы сможете внести нужные правки в ваш код.

    спираль закручена против часовой стрелки


    спираль закручена по часовой стрелки

    Ответ написан
    Комментировать
  • Какими средствами можно удобно и быстро рисовать изометрические тайлы со сдвигом назад?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    такие тайлы?
    grass.flowers.v0.01.pnggrass.usual.03.pngsand.03.pngsand.grass.v0.03.png

    примеры компоновки
    5fa40d4a91088638688812.jpeg
    5fa40d57b9d44457809720.jpeg


    Если да, то эти я делал в blender-e (при рендеринге включить изометрическую проекцию)
    вот blend файл тайла с травкой
    Ответ написан
    Комментировать
  • Почему не происходит отрисовка canvas в новом окне?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Вы не пробовали смотреть в консоль браузера на предмет выводимых ошибок?

    TypeError: document.all.surface is undefined
    ReferenceError: Numb is not defined
    ReferenceError: check is not defined

    Подготовьте ваш пример в песочнице, например https://jsfiddle.net/
    Проверьте что в консоль не сыпятся ошибки.
    Если сыпятся, то исправьте их.
    Затем кидайте ссылку на песочницу сюда, будем смотреть и помогать)
    Ответ написан
  • Canvas: как задать font, а затем изменить размер?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Похоже что изменяя canvas.width, параметры канваса сбрасываются в дефолтные, что на мой взгляд является логичным поведением. Если это так, то Вам надо либо искать решение с единожды заданной, фиксированной шириной канваса либо делать так как вы сделали (выставлять шрифт 2 раза)

    PS: как и говорил, изменения размера канваса сбрасывают часть его параметров в дефолтные
    https://www.w3.org/html/wg/spec/the-canvas-element.html
    Ответ написан
    7 комментариев
  • 3D-движок для рендеринга карты высот?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    https://threejs.org точно подойдет. Инфа 146%.

    PS: вот даже примерчик имеется rainforest.arkivert.no
    Ответ написан
    Комментировать
  • Как сделать точное вычисление физики гравитации на javascript в canvas методом Верле?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    elleremo, ускорение которое получают планеты пролетая вблизи других планет не является ошибкой!!!

    Этот эффект называется "гравитационный маневр для ускорения объекта" или же "гравитационная праща"

    Swingby_acc_anim.gifГравитационный манёвр для ускорения объекта (гравитационная праща)

    Не стал делать "точную имитацию" гравитации. Пошел по пути:
    1. каждый объект имеет массу равную объему объекта умноженному на плотность объекта
    2. каждый объект влияет на каждый динамический объект
    3. влияние пошагово рассчитывается по формуле (почти) :
    V = сумма(F); // суммарный вектор сил
    F = k*M/D; // сила влияния (расчитывается для каждого объекта оказывающего влияние на текущий)
    M - масса объекта
    D - квадрат расстояния между центрами масс объектов
    k - коэффициент для подгона скоростей (выполняет роль гравитационной постоянной)

    Алгоритм расчета (пошагово):
    1. Для каждого динамического объекта происходит расчет новых координат (сумма текущих координат и вектора скорости, рассчитанного на предыдущей итерации цикла симуляции)
    2. Каждый динамический объект сверяется с каждым объектом на предмет столкновения. Если расстояние между центрами 2х сравниваемых объектов меньше суммы их радиусов то происходит слияние. Если объединяются статичный и динамический объекты, то динамический удаляется а его масса добавляется к статическому с перерасчетом плотности, радиуса и объема. Если объединяются 2 динамических объекта то к первому добавляется масса второго с перерасчетом плотности, радиуса и объема, координаты и вектора скоростей пересчитываются как взвешеная сумма координат и векторов скоростей обоих объектов. После второй объект удаляется.
    3. Для каждого динамического объекта расчитывается сумма векторов силы влияния притяжения всех объектов. Затем данная сумма и вектор скорости текущего объекта суммируются
    4. Переход к новой итерации цикла симуляции.

    Вся реализация расчета тут (в конце скрипта). Все формулы вынесены в класс Calc.

    видеодемонстрация
    демонстрация (масштабируется колесиком мышки, перетаскивается с помощью ЛКМ)

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

    5bbd21b57da99316097769.png
    Добавил настройки:
    • параметры отображения
      • отображать сетку - вкл/выкл отображение координатной сетки
      • отображать источники - вкл/выкл отображение объектов, генерирующих планеты
      • отображать шлейф - вкл/выкл отображение траектории планет

    • Настройки физических величин - позволяют задаь минимальные и максимальные значения для размеров и плотности статических и динамических объектов
    • Управление симуляцией
      • шаг симуляции - экспериментальная величина регулирующая точность расчетов
      • скорость источников - изменяет скорость, с которой источники генерируют планеты
      • включить источники - вкл/выкл генерацию планет источниками



    Доработал механизм расчета влияния гравитации, теперь у каждого объекта масса считается исходя из объема и плотности.
    Ввел изменение в процесс генерации новых планет, теперь они выставляются на лист с рассчитанной первой космической скоростью относительно центрального статичного объекта.
    Установил статичным объектам повышенную плотность, что существенно увеличило их массу (можно менять на панели настроек)
    Установил динамическим объектам пониженную плотность, что существенно уменьшило их массу и взаимовлияние (можно менять на панели настроек)

    5bbd22bc10be0483291405.png
    Ответ написан
    2 комментария