AlexGyver / alexgyver.github.io

Repo for GitHub Pages
https://alexgyver.github.io/
43 stars 15 forks source link

Может сделать отрисовку линий сразу в svg #25

Open alfedukovich opened 1 year ago

alfedukovich commented 1 year ago

Это позволит менять толщину линий и количество линий после получения результата. И приведёт к единому виду результата в рендеринге и просмотре svg. Или сделать эти параметры изменяемыми в просмотре svg.

GyverLibs commented 1 year ago

Там проблема в том что для рисования в svg нужно создать канвас svg, а у него в несколько раз медленнее работает рисование графики

alfedukovich commented 1 year ago

99% времени занимают проверки пикселей - выбор лучшего пути и изменения массива исходного изображения. Отрисовка по-сравнению с этим, в любом случае будет казаться мнгновенной. Для проверки отключил отрисовку затирания линий на исходном изображении - скорость ощутимо не поменялась. Peek 2023-03-24 10-56 На практике svg из 5000-10000 элементов появляется мнгновенно и изменения свойств на лету тоже происходит быстро.

AlexGyver commented 1 year ago

а как быть с выводом исходного изображения?

alfedukovich commented 1 year ago

Также как и сейчас. Просто правый круг рисовать в svg.

AlexGyver commented 1 year ago

для этого нужно создать canvas в SVG, а в рамках одного p5js скетча канвас может быть только один. Можно сделать два через instance режим и сверстать под разные скетчи разные div блоки, но мне кажется это порка

AlexGyver commented 1 year ago

я добавил в страничку svg слайдер, которым можно покрутить количество линий. Сейчас 1 мин гитхаб сайт обновит

AlexGyver commented 1 year ago

а как такую гифку вставил? Отдельно делал или гитхаб как то сам?

alfedukovich commented 1 year ago

Софтина в ubuntu(может для других систем есть) изображение

GyverLibs commented 1 year ago

Захватывает с экрана и выдает гифу?

alfedukovich commented 1 year ago

Да. Вот такое простое окошко для захвата. изображение

AlexGyver commented 1 year ago

супер, я нашел себе аналог под вин

copych commented 1 year ago

Кстати, по поводу быстродействия, в консоли браузера вот такое предлагают... Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently

AlexGyver commented 1 year ago

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