Очень трудно нарисовать линию с градиентом и прозрачностью
Очередной раз игрался с алгоритмами и наделал артов с линиями. И ведь самая проблема как раз в прозрачности, кто бы мог подумать, что обычно canvas 2D api рисует линию с багами, так еще и с такими, что доверять ему прозрачность решительно нельзя. На помощь пришел WebGL, который выполняет правильное вычисление цвета для линий, нарисованных при помощи canvas 2D api
https://codepen.io/lekzd/pen/azbyPbb
Очередной раз игрался с алгоритмами и наделал артов с линиями. И ведь самая проблема как раз в прозрачности, кто бы мог подумать, что обычно canvas 2D api рисует линию с багами, так еще и с такими, что доверять ему прозрачность решительно нельзя. На помощь пришел WebGL, который выполняет правильное вычисление цвета для линий, нарисованных при помощи canvas 2D api
https://codepen.io/lekzd/pen/azbyPbb
❤11🔥2👍1💘1
YouTube
Tbilisi JS Meetup #5 — «Generative Art with JS» — Alexander Korotaev
Tbilisi JS Meetup #5, February 2025 😎
Supported by TradingView https://www.tradingview.com/
Join us! https://news.1rj.ru/str/tbilisi_js
Alexander Korotaev, a frontend developer, speaker, and member of the Holy.js program committee, will discuss how generative art…
Supported by TradingView https://www.tradingview.com/
Join us! https://news.1rj.ru/str/tbilisi_js
Alexander Korotaev, a frontend developer, speaker, and member of the Holy.js program committee, will discuss how generative art…
Доклад про генеративное исcкуство на TbilisiJS
Уже второй раз езжу туда выступать с докладом, потому что это небольшое теплое комьюнити, родилось там где все было против, где ранее не было ничего подобного. Но, спустя год с небольшим они уже организовали целую конференцию, и несколько митапов, куда приходит уже по 100 человек!
видео: https://www.youtube.com/watch?v=JxBbe26uE-M
слайды: https://lekzd.github.io/presentations/generative_art_tbilisi/bundled/
Уже второй раз езжу туда выступать с докладом, потому что это небольшое теплое комьюнити, родилось там где все было против, где ранее не было ничего подобного. Но, спустя год с небольшим они уже организовали целую конференцию, и несколько митапов, куда приходит уже по 100 человек!
видео: https://www.youtube.com/watch?v=JxBbe26uE-M
слайды: https://lekzd.github.io/presentations/generative_art_tbilisi/bundled/
🔥16❤4💘2
Почему трудно быть Коротаевым?
Сегодня надо было перечислить все свои комьюнити где я что-то периодически делаю и все сразу стало понятно:
Я Саша, помогаю организовывать SPB-Frontend, BeerJS, TbilisiJS и еще я в программном комитете HolyJS.
Кто-нибудь хочет помочь?)
Сегодня надо было перечислить все свои комьюнити где я что-то периодически делаю и все сразу стало понятно:
Я Саша, помогаю организовывать SPB-Frontend, BeerJS, TbilisiJS и еще я в программном комитете HolyJS.
Кто-нибудь хочет помочь?)
❤13🔥1👏1💅1💘1
This media is not supported in your browser
VIEW IN TELEGRAM
Клубок
Продолжая эксперименты с тем что можно нарисовать на спирографе, сдвигая центры окружностей нарисовался клубок, положение нитей которого контролируется притяжением к центру. Чем оно ниже, тем больше он расплетается.
Если отключить ноут от кабеля питания, он начинает слегка попискивать при рисовании)
https://codepen.io/lekzd/pen/JojLQrW
Продолжая эксперименты с тем что можно нарисовать на спирографе, сдвигая центры окружностей нарисовался клубок, положение нитей которого контролируется притяжением к центру. Чем оно ниже, тем больше он расплетается.
Если отключить ноут от кабеля питания, он начинает слегка попискивать при рисовании)
https://codepen.io/lekzd/pen/JojLQrW
🔥5😈1💘1
This media is not supported in your browser
VIEW IN TELEGRAM
Плавающие молекулы
Очередной раз задумывалось одно, но вышло совсем другое, главное найти красивое состояние, на котором можно остановиться
https://codepen.io/lekzd/pen/GgRdMVv
Очередной раз задумывалось одно, но вышло совсем другое, главное найти красивое состояние, на котором можно остановиться
https://codepen.io/lekzd/pen/GgRdMVv
🔥6💘2
This media is not supported in your browser
VIEW IN TELEGRAM
Пробуем вписаться в Codepen challenge
Нужно сделать глитч, как у старого монитора, но я предпочел цветные блики на линзах оптики, посмотрим, пройдет или нет)
https://codepen.io/lekzd/pen/QwWxWOY
Нужно сделать глитч, как у старого монитора, но я предпочел цветные блики на линзах оптики, посмотрим, пройдет или нет)
https://codepen.io/lekzd/pen/QwWxWOY
🔥7💘1
Генклуб, где, я многому научился, поставил мою прошлую работу на аватарку, приятно, спасибо им.
🔥13❤7👍3💘1
не знал что за это еще и платят 😁
круто будет посмотреть на работы
круто будет посмотреть на работы
💘2🤓1
Forwarded from artalog (artalar)
50$ криптой тому господину, который запилит самую крутую демосцену на тему https://reatom.dev/favicon.noscript
https://github.com/artalar/reatom/issues/1071
Условия:
- она должна мне понравится на столько что бы ее можно было сунуть куда-то на лендинг (сайта реатома)
- музыка не обязательна
- максимум в пару десятков КБ
- до конца недели
- перевод в сетке эфира
Что такое демосцена? Это аудиовизуальная абстракция или история сделанная с помощью кода! Преимущественно микроскопического размера. Можно потыкать тут https://nanogems.demozoo.org/. Крутой пример: https://youtu.be/4r1732c04aY
https://github.com/artalar/reatom/issues/1071
Условия:
- она должна мне понравится на столько что бы ее можно было сунуть куда-то на лендинг (сайта реатома)
- музыка не обязательна
- максимум в пару десятков КБ
- до конца недели
- перевод в сетке эфира
Что такое демосцена? Это аудиовизуальная абстракция или история сделанная с помощью кода! Преимущественно микроскопического размера. Можно потыкать тут https://nanogems.demozoo.org/. Крутой пример: https://youtu.be/4r1732c04aY
YouTube
림프닌자 - 변신 로봇 3 (limp ninja - transformer 3)
Limp Ninja's demo for Revision 2019 and invitation for Evoke 2019.
code / design: bruce
design: langford
music: variafx
code / design: bruce
design: langford
music: variafx
❤3💘1
This media is not supported in your browser
VIEW IN TELEGRAM
Reatom
пробую сделать демку по заказу из поста https://news.1rj.ru/str/korotaev_to_hard/98
минут за 20 накидал
работа продолжается...
https://codepen.io/lekzd/pen/xbxJrpb
пробую сделать демку по заказу из поста https://news.1rj.ru/str/korotaev_to_hard/98
минут за 20 накидал
работа продолжается...
https://codepen.io/lekzd/pen/xbxJrpb
🔥13👍4❤🔥1💘1
Reatom universe
Сделал целую вселенную из крутящихся частей логотипа Reatom, которые собираются буквально из хаоса. Получилась аналогия, что стейт менджер приводит все в порядок)
Одна беда, не могу понять какой вариант лучше
https://codepen.io/lekzd/pen/wBvExKo
Сделал целую вселенную из крутящихся частей логотипа Reatom, которые собираются буквально из хаоса. Получилась аналогия, что стейт менджер приводит все в порядок)
Одна беда, не могу понять какой вариант лучше
https://codepen.io/lekzd/pen/wBvExKo
🔥11❤2👍1💘1
Побочные эффекты
Обожаю когда что-то делаешь и пока еще не готово происходят баги, каждый из которых стоит того, чтобы записать его для истории
Обожаю когда что-то делаешь и пока еще не готово происходят баги, каждый из которых стоит того, чтобы записать его для истории
🔥9💘2👾1
Media is too big
VIEW IN TELEGRAM
Соединил наработки вместе
После репоста в сообществе @artalog получилмассу подозрений в наркомании ценного фидбека и постарался улучшить демку.
Появилась идея, что все наработанное можно объединить в одну сцену: сначала будет хаос, затем его упорядочит Reatom, который потом распадется на цветы и обратно в хаос.
https://codepen.io/lekzd/pen/xbxyROL
После репоста в сообществе @artalog получил
Появилась идея, что все наработанное можно объединить в одну сцену: сначала будет хаос, затем его упорядочит Reatom, который потом распадется на цветы и обратно в хаос.
https://codepen.io/lekzd/pen/xbxyROL
🔥12❤3😁3😍1💘1
Danielchasehooper
Learn Shader Programming with Rick and Morty
An interactive guide on making animations on the GPU
SDF или как сделана демка из этого поста
Signed Distance Fields (SDF) — это техника в шейдерах, позволяющая описывать формы с помощью функций, возвращающих расстояние до ближайшей поверхности объекта. Визуализация происходит путём вычисления расстояния для каждого пикселя и определения, находится ли он внутри или снаружи фигуры.
Наткнулся на крутую статью про это, там рисуют анимацию из Рика и Морти, пошагово: берем кружок, потом еще один, искривляем и вот у нас уже голова,далее рисуем остальную сову.
https://danielchasehooper.com/posts/code-animated-rick/
Signed Distance Fields (SDF) — это техника в шейдерах, позволяющая описывать формы с помощью функций, возвращающих расстояние до ближайшей поверхности объекта. Визуализация происходит путём вычисления расстояния для каждого пикселя и определения, находится ли он внутри или снаружи фигуры.
Наткнулся на крутую статью про это, там рисуют анимацию из Рика и Морти, пошагово: берем кружок, потом еще один, искривляем и вот у нас уже голова,
https://danielchasehooper.com/posts/code-animated-rick/
🔥9❤1😁1💘1
Media is too big
VIEW IN TELEGRAM
Туннель из 5 синусов
Как справедливо заметил @StrangerintheQ про туннель из логотипов Reatom: "я вижу тут sin sin sin", а их оказалось 5
В начале я сделал просто рендер колец, идущих друг за другом, было уже поздно, решил оставить работу как есть, но добавить туда немного ряби, так как с ней все выглядит лучше. И увлекся синусами настолько, что за 20 минут превратил кольца во что-то неузнаваемое, даже создатель Codepen оценил и запинил работу в тренды.
https://codepen.io/lekzd/pen/gbOdMpr
Как справедливо заметил @StrangerintheQ про туннель из логотипов Reatom: "я вижу тут sin sin sin", а их оказалось 5
В начале я сделал просто рендер колец, идущих друг за другом, было уже поздно, решил оставить работу как есть, но добавить туда немного ряби, так как с ней все выглядит лучше. И увлекся синусами настолько, что за 20 минут превратил кольца во что-то неузнаваемое, даже создатель Codepen оценил и запинил работу в тренды.
float ripple(vec4 p, float rad, float freq, float amp, float time) {
return
sin((rad) * freq) * amp
+ sin(p.x * freq) * amp
+ sin(p.y * freq) * amp
+ sin((p.z * 0.01) * freq) * amp
+ sin(time * 0.01) * amp
;
}https://codepen.io/lekzd/pen/gbOdMpr
🔥9💘2
YouTube
Animation vs. Coding
/(^∇^) ╯ https://brilliant.org/alanbecker
30-day free trial and 20% off 👍
🖐 ASK ME ANYTHING! ► https://www.youtube.com/noogai89/join
👕 MERCH! ► https://alanbecker.shop
💬DISCORD SERVER ► https://discord.gg/alanbecker
🕹️ANIMATORS VS GAMES ► @AnimatorsVSGames…
30-day free trial and 20% off 👍
🖐 ASK ME ANYTHING! ► https://www.youtube.com/noogai89/join
👕 MERCH! ► https://alanbecker.shop
💬DISCORD SERVER ► https://discord.gg/alanbecker
🕹️ANIMATORS VS GAMES ► @AnimatorsVSGames…
Очередная серия Animations vs, теперь про кодинг
Как сказали в комментариях:
https://www.youtube.com/watch?v=EFmxPMdBqmU
Как сказали в комментариях:
Episode 4 of the "I don't understand much of it but it looks amazing"
https://www.youtube.com/watch?v=EFmxPMdBqmU
❤3💘2