Главная страницаКатегория javascriptЭкспериментальный Javascript

Экспериментальный Javascript

Name: Экспериментальный Javascript
Price: 13 USD
Rating: 5 (12 reviews)

Experimental Javascript

superhi.com

★5 (всего оценок - 12)

Продолжительность

9 ч 37 мин

Категория

JavaScript

Количество уроков

104 Видео

Дата добавления

7 янв. 2022 г., 00:28

Язык

Английский

Дата обновления

29 апр. 2026 г., 13:43

Экспериментальный Javascript открывает путь в мир креативного веб-разработки, где визуальные эффекты, физические симуляции и интерактивная 3D‑графика становятся мощными инструментами для создания цифрового искусства. Этот курс идеально подойдет тем, кто хочет выводить проекты за рамки стандартных шаблонов и создавать по-настоящему необычные веб‑опыты.

Что вы изучите в этом курсе

Курс объединяет три ключевые библиотеки — Three.js, Matter.js и PIXI.js — и шаг за шагом показывает, как комбинировать визуальные эффекты, физику и интерактивность для создания впечатляющих веб‑экспериментов.

Работа с холстом и пользовательскими событиями

Взаимодействие с HTML‑canvas средствами JavaScript
Добавление реакций на касания, движения мыши, перетаскивания и ориентацию устройства

Физика и столкновения с Matter.js

Вы научитесь создавать механики обнаружения столкновений и простые физические симуляции, которые добавляют реализма и динамики вашим проектам.

Эффекты и визуальные эксперименты в PIXI.js

Работа с картами смещения
Создание эффектов цветоделения и других фильтров
Комбинирование рендера и взаимодействия для получения необычных визуальных результатов

Интерактивный 3D‑мир с Three.js

Откройте для себя возможности 3D в браузере: создавайте сцены, управляйте камерой, добавляйте освещение и делайте объекты интерактивными.

Кому подойдет этот курс

Этот курс будет полезен:

веб‑разработчикам, которые хотят выйти за рамки стандартной анимации;
дизайнерам, стремящимся добавить интерактивность и глубину своим работам;
творческим специалистам, ищущим инструменты для создания цифрового искусства;
всем, кто хочет научиться создавать экспериментальные веб‑сайты и визуальные эффекты.

Результаты обучения

После завершения курса вы сможете:

создавать интерактивные сцены и визуальные эффекты на canvas;
работать с физическими движками и управлять столкновениями объектов;
использовать карты смещения и фильтры для художественных эффектов;
строить полноценные 3D‑проекты на Three.js;
создавать сайты, которые реагируют на действия пользователя в реальном времени.

Почему этот курс выделяется

В отличие от типичных курсов по JavaScript, здесь основной фокус — на экспериментальности, творческом подходе и создании уникальных визуальных впечатлений. Вы научитесь мыслить не только как разработчик, но и как digital‑художник.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:03:59
Welcome to the Experimental Javascript course
Урок 2. 00:01:24
Introduction to Hyperhi
Урок 3. 00:01:42
What is the SuperHi Editor?
Урок 4. 00:05:55
Setting up a custom cursor
Урок 5. 00:08:12
Adding our first Javascript file
Урок 6. 00:08:05
Adding functions to Javascript
Урок 7. 00:06:59
Growing and shrinking the cursor
Урок 8. 00:10:35
Making the cursor follow the mouse
Урок 9. 00:03:02
Variation: adding text to our custom cursor
Урок 10. 00:08:39
Setting up our canvas
Урок 11. 00:04:51
What is context in HTML canvas?
Урок 12. 00:08:35
Drawing rectangles with HTML canvas
Урок 13. 00:04:51
Drawing a line with HTML canvas
Урок 14. 00:06:55
Pen up and down
Урок 15. 00:02:19
Adding independent paths
Урок 16. 00:03:01
Variation 1: hidden text
Урок 17. 00:02:30
Variation 2: making the canvas size full page
Урок 18. 00:02:59
What are blend modes
Урок 19. 00:04:52
Adding in mix-blend-mode
Урок 20. 00:01:54
Variation: adding in background animation
Урок 21. 00:01:33
Scratch out, not in
Урок 22. 00:02:18
Combining scratch outs and ins using Figma
Урок 23. 00:07:42
Joining blend modes together
Урок 24. 00:01:43
Fixing the design on window resize
Урок 25. 00:03:05
Adding in shadow blur to HTML canvas
Урок 26. 00:03:27
Introduction to the project
Урок 27. 00:10:31
Setting up Matter.js
Урок 28. 00:11:40
What is deconstruction and adding options?
Урок 29. 00:11:01
Adding shapes to Matter.js
Урок 30. 00:03:29
Rendering a body shape
Урок 31. 00:04:01
Adding a static ball
Урок 32. 00:06:22
Adding a ground floor
Урок 33. 00:04:08
Adding walls
Урок 34. 00:06:27
How to add mouse control to Matter.js
Урок 35. 00:05:19
Variation: adding more options from Matter.js
Урок 36. 00:05:56
Adding a stack of shapes on load
Урок 37. 00:05:50
Adding an image sprite to a shape
Урок 38. 00:02:05
Putting a mix-blend-mode
Урок 39. 00:07:23
Variation: adding hover changes to shapes
Урок 40. 00:06:41
Variation: adding a gravity change in a loop
Урок 41. 00:05:06
Variation: adding device orientation to gravity
Урок 42. 00:04:56
Variation: Adding a wrapping plugin to Matter.js
Урок 43. 00:02:51
Variation: adding randomness to our shapes
Урок 44. 00:02:33
Introduction to Bookwave
Урок 45. 00:05:09
Setting up the HTML and CSS
Урок 46. 00:05:55
Initial Javascript setup
Урок 47. 00:05:39
Adding Pixi.js applications
Урок 48. 00:08:22
Importing an image into Pixi
Урок 49. 00:03:10
Variation: Adding rotation to the sprite
Урок 50. 00:04:24
Adding a blur filter
Урок 51. 00:06:34
Adding a displacement filter: part 1
Урок 52. 00:06:45
Adding a displacement filter: part 2
Урок 53. 00:05:45
Adding a RGB split filter
Урок 54. 00:03:12
Interacting with our filters using mousemove
Урок 55. 00:07:50
Tweening our interactions
Урок 56. 00:03:21
Changing our RGB split filter
Урок 57. 00:01:59
Automatic movement
Урок 58. 00:01:50
Introduction to Line Drawer
Урок 59. 00:13:22
Setting up Three.js
Урок 60. 00:09:16
Adding a shape to Three.js
Урок 61. 00:05:09
Adding lights to Three.js
Урок 62. 00:03:39
Animating rotation on a shape
Урок 63. 00:04:22
Changing position of shapes
Урок 64. 00:04:32
Adding shapes on click
Урок 65. 00:04:18
Drawing shapes on mouse interaction
Урок 66. 00:04:46
Changing the shape's hue
Урок 67. 00:05:50
Selecting a random geometry
Урок 68. 00:04:52
Moving the camera and the shapes
Урок 69. 00:01:55
Fixing inertia scrolling on mobile
Урок 70. 00:04:46
Changing our camera settings
Урок 71. 00:03:06
Intro to Planet Wilson
Урок 72. 00:07:28
Setting up Three.js on our page
Урок 73. 00:10:32
Adding Planet Wilson as a sphere geometry
Урок 74. 00:08:40
Adding a texture to a material
Урок 75. 00:04:49
Variation: turn globe on scroll events
Урок 76. 00:12:04
Adding rings to our scene
Урок 77. 00:03:07
Variation: adding a moon
Урок 78. 00:03:47
Camera movement with mouse
Урок 79. 00:04:09
Tweening the camera movement
Урок 80. 00:09:31
Adding a points field to Three.js
Урок 81. 00:06:53
Making our star field spherical
Урок 82. 00:06:40
Adding a texture to our stars
Урок 83. 00:03:51
Adding fog to a scene
Урок 84. 00:02:46
Variation: adding a random texture
Урок 85. 00:08:39
Variation: adding a trail line
Урок 86. 00:05:08
Variation: draw to move
Урок 87. 00:04:46
Variation: spherical camera movement
Урок 88. 00:01:38
Adding real randomness
Урок 89. 00:03:22
Introduction to Poly Cat
Урок 90. 00:07:41
Setting up Three.js
Урок 91. 00:14:13
Adding a Google Poly earth model
Урок 92. 00:07:07
Refactoring our code with Promises
Урок 93. 00:05:18
Adding a Google Poly cat
Урок 94. 00:04:53
Changing the model's material
Урок 95. 00:04:14
Adding a floor for our cat
Урок 96. 00:03:59
Camera movement with tweening
Урок 97. 00:06:29
Adding a camera zoom on mouse wheel
Урок 98. 00:08:52
Casting shadows
Урок 99. 00:07:09
Adding eyes to our cat
Урок 100. 00:06:39
Making the eyes follow the camera and cursor
Урок 101. 00:08:31
Changing the cat color on click
Урок 102. 00:06:55
Using TweenMax to tween colors
Урок 103. 00:08:10
Variation: how to click on objects within Three.js
Урок 104. 00:01:57
Back to Twotwentytwo

Автор - superhi.com

superhi.com

Мы делаем онлайн-курсы, которые помогают творческим людям выделиться. Узнайте, как писать, разрабатывать и управлять проектами в нашем глобальном сообществе!

+99