Mô tả

Why code art?

  • Because once you learn creating art with coding, there is actually no limit. You don’t have the boundaries of visual effect programs!

  • Creative algorithms are data driven can work real time and interactive.

  • It’s combination of technical side and design.

  • There are many languages and ways of creative coding.

  • We’ll use html and javascript in this course, because nowadays javascript is everywhere.

  • You’ll have a chance to make your project interactive with other technologies with JS.

  • We’ll create particles that will listen the music and behave differently.

  • After learning this technique you can use audio input in any effect you want!

  • You’ll be shocked when you see how easy it is to make these animations.

  • If you already know a programming language that’s a big advantage.

Where can I use these visuals?

It’s up to you! You can create your own NFT collection. Upload effects to your website, put them in your portfolio, or just to make them for fun!


Why this course?

We as Yeti team, are working to create professional online education lectures. We are trying to keep it as simple as possible. You'll find the best practices for creative coding.

This course is created with both Windows and Mac users, meaning you can get full benefit whether you are a windows or mac user.

All students have access to the Q&A forums where our Instructors, Teaching Assistants and Community are ready to help answer your questions and cheer on your success.


Who this course is for:

  • Programmers - Developers

  • Designers

  • Freelancers

  • Animators

  • Graphic Designers

  • Who feels comfortable with another programming language and want to learn creative coding

  • Everyone interested in animations, visuals, algorithms, and art


Bạn sẽ học được gì

Code Art, Creative Coding, Generative Art

Creating Visuals with Coding

Learn to draw with code

Javascript Animations

Html5 Canvas and CTX

Particle Effect with Vanilla JS

Canvas-sketch library

ThreeJS

Making Audio Visualizers

Yêu cầu

  • Basic Math Skills
  • Code Editor
  • Browser
  • Programming experience is an advantage

Nội dung khoá học

7 sections

Javascript Particles

15 lectures
Before Start
03:10
Create Project Files
01:41
HTML5 Canvas
02:25
Create Canvas and CTX
03:14
Draw a Rectangle
04:12
What is Live Server?
02:00
Event Listener in JS
02:15
Event Listeners Practice
02:04
Arc
03:09
Reminder (Video Speed)
00:13
Generate Atoms
10:48
Destroy and Blur
10:09
Create a Nice Sky-Stars Effect
04:36
Custom Movements of Particles (Parabolic)
07:25
Sierpiński Triangle Challenge
00:16

Pixel Effect for Images

9 lectures
What is Pixel Rain Effect?
01:25
Setting Up the Project
09:31
Get Image Data in JS
12:15
Create Particle Class
08:46
Mapping from 2 Dimension to 1 Dimension
02:44
Apply the Mapping Formula
00:46
Draw Function
01:28
Complete the Effect
06:03
Add RGB Colors
05:47

Canvas-sketch library

18 lectures
Introduction
00:27
Node and NPM
01:35
Install canvas-sketch
05:34
What is canvas-sketch?
06:13
Practice Rectangles
05:28
Canvas Translate
03:43
Canvas Rotate
02:11
Save and Restore
02:27
Randomness
04:55
Bounce Animation
00:54
Circle Class
05:59
Generate Circles
02:54
Animate Circles
03:31
Bounce Circles
02:50
Euclidean Distance
01:51
Draw Lines
06:10
Get the Distance Between Two Dots
02:53
Responsive Line Width
03:10

How to make an Audio Visualizer?

11 lectures
Introduction
00:41
Set up For the Audio Visualizer
01:58
HTML Template
01:22
Complete HTML
01:25
microphone.js
04:06
Get Microphone Data
05:39
Ball Class
05:44
Generate Balls
07:57
Falling Balls
03:55
Jumping Balls
12:12
Audio Input
07:08

Circular Audio Visualizer

7 lectures
Getting Started
00:42
Setup
01:27
Create Figures
08:36
Circular Movement
05:10
Change Size with Microphone Input
07:11
Play Music
00:29
Teleport
05:20

Introduction to three.js

10 lectures
What is three.js?
01:05
Use Cases of three.js
03:58
Install three.js
04:39
Open the Project
02:29
Import three.js
02:06
Creating the Scene and Camera
03:12
Create the Renderer
01:47
Create a Cube
03:54
Render the Scene
02:00
Animate the Cube
02:14

3D Space Effect

8 lectures
Introduction
00:27
Setup
01:39
Init( ) Function
01:54
Create the Stars
03:28
Use Geometry and Material
02:03
Animate Function
06:42
Finish the Project
02:35
Some three.js Examples
04:49

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.