бамп
бамп
бамп
Кстати, вон внизу я rotation минус 90 делаю, хуй знает почему, но без этого не работает. Она че-то резко скачет по углам без этого.
Есть тут еще такие имбецилы, которые кодят без малейшего понимания, что они делают?
бамп
В зависимости от положения мышки рассчитывается угол поворота градиента, так чтобы было красиво.
Да ето я понимаю, меня интересует именно математический аспект этих расчетов. Вот что такое вообще atan2? Арктангенс, я так полагаю? Как он работает и че это вообще такое? Помню в 9 или 10 классе че-то такое проходили, слова по крайне мере я такие слышал, но я тогда не интересовался этим особо. А почему мы этот угол умножаем на 180 деленное на пи?
бамп
atan2(y, x) это вернуть угол в раиданах по координатам
умножить на 180 / PI это перевод из радианов в градусы
потом ставишь поворот в градусах (хз может и в радианах можно)
минус девяносто это тупа фикс, может картинка градиента неправильная.
Везде разные радинаы, градусы, по чаовой, прпотив часовой. Это нужно подгонять.
Почему арктангенс, а не тангенс/синус/косинус/... ?
Берётся положение курсора (x,y) на элементе, считая от центра элемента
Затем вычисляется угол, на котором курсор относительно центра, через арктангенс (x и y катеты).
Получается угол в радианах, его переводят в градусы.
Затем элементу с градиент ом прописывается вычисленный угол
Затем вычисляется угол, на котором курсор относительно центра, через арктангенс (x и y катеты).
Получается угол в радианах, его переводят в градусы.
Затем элементу с градиент ом прописывается вычисленный угол
Ты тупой?
Потому что это типа катеты прямоугольного треугольника
Подробную задроченную хуйню с расчетами неплохо генерирует чатгпт, я даже не запариваюсь в последнее время думать об этом.
Бля, да я школу лет 10 назад закончил, не помню что это вообще такое, и оч бесит, что мне эти штуки приходится делать просто брутфорсом, так как матеши не знаю.
>Затем вычисляется угол, на котором курсор относительно центра, через арктангенс (x и y катеты).
Вот это единственный непонятный момент. Неужели мне только и остается, что повторить школьный курс тригонометрии, чтобы это ОСОЗНАТЬ и ПОНЯТЬ как следует? Что такое тангенс, что такое катет вообще, почему не синус/хуинус/косинус?
Еблан? Где там треугольник? Судя по видео, это прямоугольник вообще-то.
планиметрию только
Двачую, нахуя все это самому считать и разбираться в этом, когда есть калькуляторы и нейросети, которые лучше тебя это сделают?
Получается, мы не можем посчитать тангенс по точке, потому что чтобы посчитать тангенс, нам нужно в функцию подставить угол, а у нас нет угла, у нас есть точка?
А так как мы берём арктангенс, то у нас в данном случае всегда будет получаться угол от 0 до 90 градусов? Так как Х и Y меняется от 0 до разрешения экрана.
А так как мы берём арктангенс, то у нас в данном случае всегда будет получаться угол от 0 до 90 градусов? Так как Х и Y меняется от 0 до разрешения экрана.
А исходник дашь печатный? Я бы спиздил. Спасибо заранее.
Ну там фишка в том, что берутся координаты относительно центра прямоугольника, нарисуй две оси через центр и по ним для любой позиции курсора можно найти x и y. Затем по x и y найти угол
Я правильно понимаю, что тангенс - это когда мы по углу получаем отношение катетов, а арктангенс - это когда мы по отношению катетов получаем угол?
Мне лень щас куда-то это выкладывать
жс:
import { Controller } from "@hotwired/stimulus";
export default class InteractiveBorderController extends Controller<HTMLElement> {
connect() {
this.element.addEventListener(
"mousemove",
this.calculateRotation.bind(this)
);
}
disconnect() {
this.element.removeEventListener(
"mousemove",
this.calculateRotation.bind(this)
);
}
calculateRotation(e: MouseEvent) {
const mouseX =
this.element.offsetLeft + this.element.offsetWidth / 2 - e.pageX;
const mouseY =
this.element.offsetTop + this.element.offsetHeight / 2 - e.pageY;
const angle = Math.atan2(mouseY, mouseX);
const rotation = Math.round(angle * (180 / Math.PI));
this.element.style.setProperty("--rotation", `${rotation - 90}deg`);
}
}
цсс:
.interactive-border {
position: relative;
&::after,
&::before {
content: "";
display: block;
position: absolute;
}
&::before {
background: linear-gradient(
var(--rotation),
transparent 60%,
$fire-red 70%,
$orange-50 90%
);
inset: 0;
z-index: 1;
border-radius: inherit;
opacity: 0;
transition: opacity 0.25s ease-out;
}
&::after {
width: calc(100% - 0.2rem);
height: calc(100% - 0.2rem);
border-radius: inherit;
z-index: 1;
inset: -0.1rem;
margin: auto;
background-color: $white;
}
&:hover {
&::before {
opacity: 1;
}
}
}
.interactive-border__content {
z-index: 2;
}
И короче тангенс он не только для угла до 90 градусов, но и до 360 (ну типа катет может быть как бы отрицательный)
https://preview.themeforest.net/item/porto-multipurpose-ghost-blog-theme/full_screen_preview/47642992
Я здесь это увидел первый и решил повторить, если что. Цсс почти полностью я оттуда спиздил, так как лень было верстать.
>ну типа катет может быть как бы отрицательный
Как это возможно...
Бамп вопросу
бамп
Не надо срать этой хуйней, сайиы и так тормозят.
Да ладно, от пары арифматических расчетов подобных вряд ли будет что-то тормозить, там же сложность алгоритма самая кайфовая - O(n).
Красота требует жертв.
Пробовал выходить в интернет не с тостера, а с нормальной пеки?
Каждой точке на окружности ставят в соответствие тангенс
Какие же пыниксы тупые.
Отличный пример как объяснить так чтобы никто нихуя не понял.
ЧТОБЫ СДЕЛАТЬ РАМОЧКУ НАЧИНАЕШЬ ВЫЧИСЛЯТЬ ЗНАК 2100 ЧИСЛА ПИ
@
ДЛЯ СОЗДАНИЯ ГРАДИЕНТА РАСКЛАДЫВАЕШЬ ЧИСЛОВЫЕ РЯДЫ ФУРЬЕ
@
ДЛЯ АНИМАЦИИ СОЗДАЕШЬ СИМУЛЯЦИЮ ВСЕЛЕННОЙ ОТ БОЛЬШОГО ВЗРЫВА ДО ТЕПЛОВОЙ СМЕРТИ
@
СУПЕРКОМПЬЮТЕР НЕ МОЖЕТ ЭТО ДАЖЕ НАЧАТЬ РЕНДЕРИТЬ
@
ВЫЗВАННЫЙ НА ПОМОЩЬ ИИ ПРЕДПОЧЕЛ НАЧАТЬ ЯДЕРНУЮ ВОЙНУ С ТУВАЛУ И САМОЛИКВИДИРОВАТЬСЯ
>Есть тут еще такие имбецилы, которые кодят без малейшего понимания, что они делают?
Да. Получчаю 140к в крупной корпе. Фронтенд реакт макака.
В рот ебал учить матешу. Когда что то сложное нужно, то я либо наобум накидываю формулу, либо гуглю и пизду, либо пишу бывшему однокласснику отличнику и прошу составить формулу за меня....
Нах напрягаться если можно не напрягаться...
Алсо у тя на скрине рассчеты примитивные, всё подписано и гуглится. Яхз чому у тебя вызвало трудности разобраться в том че там происходит.
Первое че ты должен научиться делать - гуглить и пинать чатжпт.
ПАРСИШЬ ЖИСОНЧИКИ
@
СНИМАЕШЬ ЗЭПЭШКУ
@
ЗАЕБИСЬ
Спасибо. Ебать как из-за этой шляпы тормозит сайт.
>Да. Получчаю 140к в крупной корпе. Фронтенд реакт макака.
Да я как бы тоже примерно такую же зп получаю и тоже фронтэнд макака. Но у нас стек некст жс, и стимулус для небольших проектов.
>Первое че ты должен научиться делать - гуглить и пинать чатжпт.
Я чет в последнее время поймал себя на мысли, что я что-то слишком обленился и отупел, чуть что непонятно - я сразу иду в гугл или того хуже - пишу жпт, и не пытаюсь сам ни в чем разобраться. Разве тебя это мысль не гнетет?
>Кстати, вон внизу я rotation минус 90 делаю, хуй знает почему, но без этого не работает. Она че-то резко скачет по углам без этого.
> хуй знает почему,
Это абсолютная классика и вполне норма иногда, если работает
Я думаю, этот css
>Она че-то резко скачет по углам без этого.
Делает задержку, от чего эффект от движения мыши меняет значения плавно, а не скачет от первого рассчета к последнему.
Т.е. если ты ведешь мышь от одного угла в другой быстро, то первое положение резко заменится последним и будет "резко скачет по углам".
Rotation это все сглаживает, т.е. пок он плавно перевернет первые координаты, начнет отрабатывать последние из-за этой саоего-рода задержки в рендеринге (я могу ошибаться).
Какой правильный ответ?
Rotation это все сглаживает, т.е. пок он плавно перевернет первые координаты, начнет отрабатывать последние из-за этой саоего-рода задержки в рендеринге (я могу ошибаться).
Какой правильный ответ?
>Разве тебя это мысль не гнетет?
Нет, мне буквально платят за то что я умею гуглить. Мы и так фронтендеры тупа бибизяны - за нас все делают фреймворки и либы, только значения в нужные места подставляй и сохраняй структуру кода приемлимую.
Меня бы угнетало, если б я нихуя не умел, усевшись на должность кодописца нейросетей или ченить такое йоба тяжёлое.
>Какой правильный ответ?
Т.е. rotation он поворачивает на 90 градусов плавно, и он отрендерит каждый пиксель поворота. Это "медленно", поэтому новые координаты успевают попасть в новый рендеринг нового поворота "медленно".
Без этого у тебя быстро первые координаты перезапишутся последними и будет подрыгивание.
Так какой правильный ответ?
Я думаю, что это делает "сглаживание".
Но какая разница, зачем париться, если твоя либа работает?
Т.е. rotation он поворачивает на 90 градусов плавно, и он отрендерит каждый пиксель поворота. Это "медленно", поэтому новые координаты успевают попасть в новый рендеринг нового поворота "медленно".
Без этого у тебя быстро первые координаты перезапишутся последними и будет подрыгивание.
Так какой правильный ответ?
Я думаю, что это делает "сглаживание".
Но какая разница, зачем париться, если твоя либа работает?
Привет. Докладываю.
Сама твоя штука - это приложение на руби (рельсах), использует hotwire turbo, это удобная батарейка для создания микро фронтентов, которая под собой подразумевает что на фронте используешь ее фронтовую затычку, происходит вешание эвент листнера , который делает такую цветовую хуйню в зависимости от положения твоей мышки
>Сама твоя штука - это приложение на руби (рельсах)
Откуда инфа? У опа джаваскрипт, который может быть встроен куда угодно
Во-первых, если посмотришь внимательнее, там тайпскрипт. Во-вторых, ты прав, это небольшой фронтэнд фреймворк в первую очередь для простенького фронта, когда фреймворки типа реакта/ангуляра/вью могут быть оверкиллом, ну и тот чел прав - у стимуласа хорошая интеграция с приложениями руби он рэйлс, но мы в компании его используем с битриксом и пхп.
hotwire, а это рельсовая штука, есть конечно еще hotwire laravel, ну может быть и пыха, окей
Проводим воображаемую линию от центра элемента к курсору
Вычисляем угол между этой линией о осью икс
Крутим градиент на этот угол
В итоге градиент следует за курсором, а мы получаем 2к за нс
>2к за нc
За что?
Пиздец, какой хуйней занимаются фронтендеры.
Бэкэндер? Вы в моих глаза вообще ничто более, чем обычные перекладыватели джейсонов.
>Бэкэндер? Вы в моих глаза вообще ничто более, чем обычные перекладыватели джейсонов.
Валидация, индексы, хайлоад, алгоритмы, оптимизация запросов, архитектура баз данных, прочий рефакторинг vs поменять цвет кнопки
Будет пиздато если оно ещё будет отключать градиент на мауслив, чтобы не вся страница переливалась как новогодняя ёлка а только элемент в фокусе внимания, чтобы юзера эпилепсия не ебанула.
> весь хайлоад бекенд
vs
> button1.color = #00FF00
Блядь, скот ебаный, иди нахуй.
Там не нужен мауслив, там опасити на ховере от 0 до 1 в цсс тригерится.
>Валидация, индексы, хайлоад, алгоритмы, оптимизация запросов, архитектура баз данных, прочий рефакторинг vs поменять цвет кнопки
Нужно набросить еще умных слов - инкапсуляция методов моделей, например, наследования классов, фильтрация запросов vs typeof undefined
Дефрагментация диска, ротация логов, удаление временных файлов
МАШИНЛЁНИНГ ВЕРСАС МАРГИН=0
Да у тебя же десять юзеров в сутки, хайлоадер чуханский, иди рабит перезагрузи чот зависло там.
>весь хайлоад бекенд
Ахаха, с появлением некст.жс простым бэком теперь и мы на фронте можем заниматься, плюс для большинства задач достаточно какого-нибудь файербэйса или страпи. Вы реально не нужны.
Заебок
>Да у тебя же десять юзеров в сутки, хайлоадер чуханский, иди рабит перезагрузи чот зависло там.
Да, кеширование вот данных, проксирование запросов вебсокетов на отдельный процесс
Я ТЕБЯ БЛЯДЬ ЩАС ВЫЧИСЛЮ НАХУЙ ПИДАРАСИНА ТЫ ФРОНТЕНДНАЯ БЛЯДЬ! КАК ЖЕ Я ВАС НЕНАВИЖУ БЛЯДЬ! ФОРМАШЛЁПЫ ЕБАНЫЕ! РЯЯЯЯЯЯЯЯЯЯЯЯЯЯ!
Да, кеширование вот данных, проксирование запросов вебсокетов на отдельный процесс приложения, который запускают бэкграунд функционал очередей vs ну шрифтик тут жирненький сделай и водочки нам принеси
Это называется творить, бэкендерам не понять.
Спроси у чатгпт
Оптимизация баш скриптов
Двачую, эти дауны лишены всяческого творческого мышления, иначе бы они выбрали наряжать ёлку вместо того, чтобы ее рубить.
>ну шрифтик тут жирненький сделай и водочки нам принеси
Т.е. это была ирония метафорически переосмысленная на примере классического кинематографа эпохи зарождения интернета, где бэкенд код выглядит сильно лучше, конечно, с фронт-энд апдейтами жирного-шрифта-парика, но основная логика и вся биохимия с цепочками днк, делением клеток и нейронами в мозгу даже тян все же работают на бекенде.
Такие дела.
терпи хуйня
получать за свой горб ты будешь столько же, сколько и смузихлёб формошлёп красильщик кнопок.
но ты можешь продолжать гордиться что занимаешься более сложным трудом)0
ТЫ ЧМО ЕБАНОЕ! А Я ПРОГРАММИСТ!
Да не занимается он ничем сложным, в бэкэнде есть точно такой же готовый сет инструментов, который все за тебя делает, как у нас на фронте. Выебывается больше.
>сколько и смузихлёб формошлёп красильщик кнопок.
На самом деле я утрирую. Фронтенд бывает очень сложный с reducer логикой и с прочими асинхронными хреновинами, что офигеть можно.
Бамп годному треду
Да на самом деле нихуя там сложного нет. Я порой думаю что мне платят просто за нихуя. С моей работой может ряльно ребенок справится, если научится гуглить.
Редьюсеры всякие ваще проблем не вызывают, это базовая хуйня.
Сейчас вот занимаюсь картами - вот тут уже посложнее. Пришлось географию вспоминать, проекции изучать, с тучей координат и вычислений ебаться. Но это прям интересно.
Единственное что сейчас какие то трудности вызывает - оптимизация логики кода. Все эти On и прочая залупа. Вот это ваще не понимаб сложно+непонятно.
Да, и все это, чтоб отдать фронту джейсон по итогу. В итоге вся суть вашей работы - это собрать джейсон для фронта.
1 Картинка: эти айтишники ничего не делают, только на кнопки жмут, за что им платить
2 картинка: я точно знаю, это именно так
2 картинка: я точно знаю, это именно так
1 Картинка - получил данные с бекенда и нарисовал по ним карту
2 Картинка - юзер заскроллил вглубь и всё сломалось
Ты какую апишку/либу для карт используешь? Яндекс, гугл, лифлет?
Нет, 1 картинка - это якобы ничего не знающий айтишник, которого надо повесить по мнению плановоэкономических и прочих. 2 картинка символизирует "я тоже так могу". В сумме имеем "за что им платить, только на кнопки жмут".
OpenLayers.
Мне нужна векторная карта с максимумом настроек, доступом к каждой отдельной геометрии и возможность работать не только с меркатором.
>Мне нужна векторная карта
Уже строите алгоритмы поиска кратчайшего пути, наблюдая за разумной плесенью?
Нет, мы просто рисуем на карте векторные 3д объекты в ебучей снежной пустыне где то на севере..........
Ладно, извини
Избератель: ух ща правительство демографию как починит, наверное всем детным денег насыпит льгот навалит.
Правительство: кхех мнем пук, ну вводим новый налог, наверное, если надо, по обстоятельствам.
Ебало имаджинировали?
Причем тут твой детский сад в треде про айти?
Когда к врачу пойдешь со своим маразмом и прочей евгеникой? Я просто в шоке.
как же хочется уехать
>наверное всем детным денег насыпит льгот навалит.
И со своим плановоэкономическим социальным социализмом. Серьезно, иди к врачу, ты надоеел, больной, ты задолбал нахрен
> АРРРРЯ МАТЕМАТИКА НИНУЖНА ПРОГРАМИСТАМ
> ОБЪЯСНИТЕ КТО-НИБУДЬ ЭТИ РАСЧЕТЫ
Я такие штуки как на видео чисто на опыте делаю за минут 15-20, так как давно кнопочки во фронте крашу. Просто задумался недавно, а я ведь глубоко не понимаю, что я вообще делаю, когда код пишу, особенно когда мне приходится подключать какие-то математические расчеты, и мне захотелось это исправить.
бамп
бамп
Бамп
Бамп
На каком-то сайте увидел такой вот бордер эффект градиентный, который следует за мышкой, захотел повторить. Вроде смог по итогу (видеорелейтед), но я до этих расчетов чисто методом тыка дошел, вообще нихуя не понимаю, что здесь происходит и как это работает. Есть знатоки школьной математики в этом ИТТ in diesem Faden thread зыс нити? Может кто-нибидь объяснить, что здесь вообще происходит? Я из матеши только сложение и вычитание помню и таблицу умножения до 6.