ݺߣ

ݺߣShare a Scribd company logo
Одна простая
анимация
Юра
Верстка
Юрій Артюх, "Історія однієї анімації"
• Занимаюсь фронтендом
• Люблю математику
• Просто нравится учиться
• Люблю арбузы
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
–Дизайнер
“А можешь сделать паутинку, как будто
за запотевшим стеклом?”
🤔
• г
Юрій Артюх, "Історія однієї анімації"
— Это сложно?
🤔
Не знаю как рисовать линию
Не знаю как рисовать такой грид
Как, вообще сделать, чтобы оно не тупило?
— Та, несложно,
сделаем.
Юрій Артюх, "Історія однієї анімації"
THREE.JS
PlaneGeometry
geometry.vertices
z = sin(x)
z = sin(x + time)
z = Math.random()
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
z = noise(x,y)
Юрій Артюх, "Історія однієї анімації"
CPU
THREE.JS !== GPU
vertex shader
No loop.
GLSL
CPU
Окей, получилось
Юрій Артюх, "Історія однієї анімації"
вырежем повторчик
• кусок который как паттерн
вырежем повторчик
• кусок который как паттерн
Текстура
😭😭😭
–Кто-то в интернетах
“На GLSL можно сделать четенько”
fragment shader
step(a,b)
Юрій Артюх, "Історія однієї анімації"
step(a,b)
(0,0)
(1,1)(0,1)
(1,0)
step
step(0.4,x)
step
1 - step(0.6,x)
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
step*step
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
😭😭😭😭😭
smoothstep
smoothstep
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
SDF
Юрій Артюх, "Історія однієї анімації"
128x128px
Юрій Артюх, "Історія однієї анімації"
🎉🎉🎉
– ❤️
“Ah, we forgot one thing,
lets change path depending on mouse!
And highlight hexagons.”
• г
Resources collected over 20 years!
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
Как делают pathfinding?
Не то.
Canvas2D
Graph
github.com/anvaka/ngraph
Юрій Артюх, "Історія однієї анімації"
Yeah!
START
FINISH
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
Ради чего?
– Дизайнер
Спасибо, клёво получилось
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
Юрій Артюх, "Історія однієї анімації"
–Johnny Appleseed
“Type a quote here.”
Овечка-Гальватрон!
Спасибо!
• http://riverco.de - работаю
• twitter.com/akella
• https://www.youtube.com/user/flintyara
• facebook.com/akella
Ad

Recommended

Yurii Artyukh "One simple animation explained"
Yurii Artyukh "One simple animation explained"
Fwdays
Fast is Best. Using .NET MinimalAPIs
Fast is Best. Using .NET MinimalAPIs
Sigma Software
"Are you developing or declining? Don't become an IT-dinosaur"
"Are you developing or declining? Don't become an IT-dinosaur"
Sigma Software
Michael Smolin, "Decrypting customer's cultural code"
Michael Smolin, "Decrypting customer's cultural code"
Sigma Software
Max Kunytsia, “Why is continuous product discovery better than continuous del...
Max Kunytsia, “Why is continuous product discovery better than continuous del...
Sigma Software
Marcelino Moreno, "Product Management Mindset"
Marcelino Moreno, "Product Management Mindset"
Sigma Software
Andrii Pastushok, "Product Discovery in Outsourcing - What, When, and How"
Andrii Pastushok, "Product Discovery in Outsourcing - What, When, and How"
Sigma Software
Elena Turkenych “BA vs PM: Who' the right person, for the right job, with the...
Elena Turkenych “BA vs PM: Who' the right person, for the right job, with the...
Sigma Software
Eleonora Budanova “BA+PM+DEV team: how to build the synergy”
Eleonora Budanova “BA+PM+DEV team: how to build the synergy”
Sigma Software
Stoyan Atanasov “How crucial is the BA role in an IT Project"
Stoyan Atanasov “How crucial is the BA role in an IT Project"
Sigma Software
Olexandra Kovalyova, "Equivalence Partitioning, Boundary Values ​​Analysis, C...
Olexandra Kovalyova, "Equivalence Partitioning, Boundary Values ​​Analysis, C...
Sigma Software
Yana Lysa — "Decision Tables, State-Transition testing, Pairwase Testing"
Yana Lysa — "Decision Tables, State-Transition testing, Pairwase Testing"
Sigma Software
VOLVO x HACK SPRINT
VOLVO x HACK SPRINT
Sigma Software
Business digitalization trends and challenges
Business digitalization trends and challenges
Sigma Software
Дмитро Терещенко, "How to secure your application with Secure SDLC"
Дмитро Терещенко, "How to secure your application with Secure SDLC"
Sigma Software
Яна Лиса, “Ефективні методи написання хороших мануальних тестових сценаріїв”
Яна Лиса, “Ефективні методи написання хороших мануальних тестових сценаріїв”
Sigma Software
Тетяна Осетрова, “Модель зрілості розподіленної проектної команди”
Тетяна Осетрова, “Модель зрілості розподіленної проектної команди”
Sigma Software
Training solutions and content creation
Training solutions and content creation
Sigma Software
False news - false truth: tips & tricks how to avoid them
False news - false truth: tips & tricks how to avoid them
Sigma Software
Анна Бойко, "Хороший контракт vs очікування клієнтів. Що вбереже вас, якщо вд...
Анна Бойко, "Хороший контракт vs очікування клієнтів. Що вбереже вас, якщо вд...
Sigma Software
Дмитрий Лапшин, "The importance of TEX and Internal Quality. How explain and ...
Дмитрий Лапшин, "The importance of TEX and Internal Quality. How explain and ...
Sigma Software
Катерина Міщенко, "Верстальник — теж людина"
Катерина Міщенко, "Верстальник — теж людина"
Sigma Software
Олексій Пастухов, "Чи є життя без single-state management?"
Олексій Пастухов, "Чи є життя без single-state management?"
Sigma Software
Роман Савіцький, "Webcomponents & lit-element in production."
Роман Савіцький, "Webcomponents & lit-element in production."
Sigma Software
Анна Головченко, "Як перестати сидіти в чаті та почати працювати. 10 практик ...
Анна Головченко, "Як перестати сидіти в чаті та почати працювати. 10 практик ...
Sigma Software
Анна Піскун, "Трансформація HR функції як результат змін у світі на реальних ...
Анна Піскун, "Трансформація HR функції як результат змін у світі на реальних ...
Sigma Software
Максим Говорищев, "Exploring fault-tolerance patterns with Resilience4j"
Максим Говорищев, "Exploring fault-tolerance patterns with Resilience4j"
Sigma Software
Андрій Рева, "How to build reactive java application"
Андрій Рева, "How to build reactive java application"
Sigma Software

More Related Content

More from Sigma Software (20)

Eleonora Budanova “BA+PM+DEV team: how to build the synergy”
Eleonora Budanova “BA+PM+DEV team: how to build the synergy”
Sigma Software
Stoyan Atanasov “How crucial is the BA role in an IT Project"
Stoyan Atanasov “How crucial is the BA role in an IT Project"
Sigma Software
Olexandra Kovalyova, "Equivalence Partitioning, Boundary Values ​​Analysis, C...
Olexandra Kovalyova, "Equivalence Partitioning, Boundary Values ​​Analysis, C...
Sigma Software
Yana Lysa — "Decision Tables, State-Transition testing, Pairwase Testing"
Yana Lysa — "Decision Tables, State-Transition testing, Pairwase Testing"
Sigma Software
VOLVO x HACK SPRINT
VOLVO x HACK SPRINT
Sigma Software
Business digitalization trends and challenges
Business digitalization trends and challenges
Sigma Software
Дмитро Терещенко, "How to secure your application with Secure SDLC"
Дмитро Терещенко, "How to secure your application with Secure SDLC"
Sigma Software
Яна Лиса, “Ефективні методи написання хороших мануальних тестових сценаріїв”
Яна Лиса, “Ефективні методи написання хороших мануальних тестових сценаріїв”
Sigma Software
Тетяна Осетрова, “Модель зрілості розподіленної проектної команди”
Тетяна Осетрова, “Модель зрілості розподіленної проектної команди”
Sigma Software
Training solutions and content creation
Training solutions and content creation
Sigma Software
False news - false truth: tips & tricks how to avoid them
False news - false truth: tips & tricks how to avoid them
Sigma Software
Анна Бойко, "Хороший контракт vs очікування клієнтів. Що вбереже вас, якщо вд...
Анна Бойко, "Хороший контракт vs очікування клієнтів. Що вбереже вас, якщо вд...
Sigma Software
Дмитрий Лапшин, "The importance of TEX and Internal Quality. How explain and ...
Дмитрий Лапшин, "The importance of TEX and Internal Quality. How explain and ...
Sigma Software
Катерина Міщенко, "Верстальник — теж людина"
Катерина Міщенко, "Верстальник — теж людина"
Sigma Software
Олексій Пастухов, "Чи є життя без single-state management?"
Олексій Пастухов, "Чи є життя без single-state management?"
Sigma Software
Роман Савіцький, "Webcomponents & lit-element in production."
Роман Савіцький, "Webcomponents & lit-element in production."
Sigma Software
Анна Головченко, "Як перестати сидіти в чаті та почати працювати. 10 практик ...
Анна Головченко, "Як перестати сидіти в чаті та почати працювати. 10 практик ...
Sigma Software
Анна Піскун, "Трансформація HR функції як результат змін у світі на реальних ...
Анна Піскун, "Трансформація HR функції як результат змін у світі на реальних ...
Sigma Software
Максим Говорищев, "Exploring fault-tolerance patterns with Resilience4j"
Максим Говорищев, "Exploring fault-tolerance patterns with Resilience4j"
Sigma Software
Андрій Рева, "How to build reactive java application"
Андрій Рева, "How to build reactive java application"
Sigma Software
Eleonora Budanova “BA+PM+DEV team: how to build the synergy”
Eleonora Budanova “BA+PM+DEV team: how to build the synergy”
Sigma Software
Stoyan Atanasov “How crucial is the BA role in an IT Project"
Stoyan Atanasov “How crucial is the BA role in an IT Project"
Sigma Software
Olexandra Kovalyova, "Equivalence Partitioning, Boundary Values ​​Analysis, C...
Olexandra Kovalyova, "Equivalence Partitioning, Boundary Values ​​Analysis, C...
Sigma Software
Yana Lysa — "Decision Tables, State-Transition testing, Pairwase Testing"
Yana Lysa — "Decision Tables, State-Transition testing, Pairwase Testing"
Sigma Software
Business digitalization trends and challenges
Business digitalization trends and challenges
Sigma Software
Дмитро Терещенко, "How to secure your application with Secure SDLC"
Дмитро Терещенко, "How to secure your application with Secure SDLC"
Sigma Software
Яна Лиса, “Ефективні методи написання хороших мануальних тестових сценаріїв”
Яна Лиса, “Ефективні методи написання хороших мануальних тестових сценаріїв”
Sigma Software
Тетяна Осетрова, “Модель зрілості розподіленної проектної команди”
Тетяна Осетрова, “Модель зрілості розподіленної проектної команди”
Sigma Software
Training solutions and content creation
Training solutions and content creation
Sigma Software
False news - false truth: tips & tricks how to avoid them
False news - false truth: tips & tricks how to avoid them
Sigma Software
Анна Бойко, "Хороший контракт vs очікування клієнтів. Що вбереже вас, якщо вд...
Анна Бойко, "Хороший контракт vs очікування клієнтів. Що вбереже вас, якщо вд...
Sigma Software
Дмитрий Лапшин, "The importance of TEX and Internal Quality. How explain and ...
Дмитрий Лапшин, "The importance of TEX and Internal Quality. How explain and ...
Sigma Software
Катерина Міщенко, "Верстальник — теж людина"
Катерина Міщенко, "Верстальник — теж людина"
Sigma Software
Олексій Пастухов, "Чи є життя без single-state management?"
Олексій Пастухов, "Чи є життя без single-state management?"
Sigma Software
Роман Савіцький, "Webcomponents & lit-element in production."
Роман Савіцький, "Webcomponents & lit-element in production."
Sigma Software
Анна Головченко, "Як перестати сидіти в чаті та почати працювати. 10 практик ...
Анна Головченко, "Як перестати сидіти в чаті та почати працювати. 10 практик ...
Sigma Software
Анна Піскун, "Трансформація HR функції як результат змін у світі на реальних ...
Анна Піскун, "Трансформація HR функції як результат змін у світі на реальних ...
Sigma Software
Максим Говорищев, "Exploring fault-tolerance patterns with Resilience4j"
Максим Говорищев, "Exploring fault-tolerance patterns with Resilience4j"
Sigma Software
Андрій Рева, "How to build reactive java application"
Андрій Рева, "How to build reactive java application"
Sigma Software

Юрій Артюх, "Історія однієї анімації"