Code Art: Learn Creative Coding To Generate Visuals With Js

为什么要编码艺术？因为一旦你学会了用编码创造艺术，实际上就没有限制。你没有视觉效果程序的界限！创意算法是数据驱动的，可以实时和交互工作。它是技术方面和设计的结合。创意编码有多种语言和方式。我们将使用html和javascript这门课程，因为现在 javascript 无处不在。您将有机会使用 JS 使您的项目与其他技术交互。我们将创建可以听音乐并表现不同的粒子。学习此技术后，您可以使用音频输入任何你想要的效果！当你看到制作这些动画是多么容易时，你会感到震惊。如果你已经知道一种编程语言，这是一个很大的优势。我在哪里可以使用这些视觉效果？这取决于你！您可以创建自己的 NFT 集合。将效果上传到您的网站，将它们放在您的作品集中，或者只是为了让它们变得有趣！为什么要开设这门课程？作为 Yeti 团队，我们正在努力创建专业的在线教育讲座。我们正在努力使其尽可能简单。您将找到创意编码的最佳实践。本课程由 Windows 和 Mac 用户共同创建，这意味着无论您是 Windows 用户还是 Mac 用户，您都可以充分受益。所有学生都可以访问我们的讲师、教学的问答论坛助理和社区随时准备帮助回答您的问题并为您的成功欢呼。

What you’ll learn
Code Art
Creative Coding
Generative Art
Creating Visuals with Coding
Code Animations
Javascript Animations
Html5 Canvas
Html5 CTX
Canvas-sketch library
ThreeJS
Making Audio Visualizers
Particle Effect
Requirements
Basic Math Skills
Code Editor
Browser
Programming experience is an advantage
Description
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 – DevelopersDesignersFreelancersAnimatorsGraphic DesignersWho feels comfortable with another programming language and want to learn creative codingEveryone interested in animations, visuals, algorithms, and art

Overview

Section 1: Javascript Particles

Lecture 1 Before Start

Lecture 2 Getting Started

Lecture 3 Event Listeners in JS

Lecture 4 Draw an Arc (Circle)

Lecture 5 Generate Atoms

Lecture 6 Destroy and Blur

Lecture 7 Create a Nice Sky-Stars Effect

Lecture 8 Custom Movements of Particles (Parabolic)

Section 2: Pixel Effect for Images

Lecture 9 What is Pixel Rain Effect?

Lecture 10 Setting Up the Project

Lecture 11 Get Image Data in JS

Lecture 12 Create Particle Class

Lecture 13 Mapping from 2 Dimension to 1 Dimension

Lecture 14 Apply the Mapping Formula

Lecture 15 Draw Function

Lecture 16 Complete the Effect

Lecture 17 Add RGB Colors

Section 3: Canvas-sketch library

Lecture 18 Node and NPM

Lecture 19 Install canvas-sketch

Lecture 20 What is canvas-sketch?

Lecture 21 Practice Rectangles

Lecture 22 Canvas Translate

Lecture 23 Canvas Rotate

Lecture 24 Save and Restore

Lecture 25 Randomness

Lecture 26 Bounce Animation

Lecture 27 Circle Class

Lecture 28 Generate Circles

Lecture 29 Animate Circles

Lecture 30 Bounce Circles

Lecture 31 Euclidean Distance

Lecture 32 Draw Lines

Lecture 33 Get the Distance Between Two Dots

Lecture 34 Responsive Line Width

Section 4: How to make an Audio Visualizer?

Lecture 35 Introduction

Lecture 36 Set up For the Audio Visualizer

Lecture 37 HTML Template

Lecture 38 Complete HTML

Lecture 39 microphone.js

Lecture 40 Get Microphone Data

Lecture 41 Ball Class

Lecture 42 Generate Balls

Lecture 43 Falling Balls

Lecture 44 Jumping Balls

Lecture 45 Audio Input

Section 5: Circular Audio Visualizer

Lecture 46 Getting Started

Lecture 47 Setup

Lecture 48 Create Figures

Lecture 49 Circular Movement

Lecture 50 Change Size with Microphone Input

Lecture 51 Play Music

Lecture 52 Teleport

Section 6: Introduction to three.js

Lecture 53 What is three.js?

Lecture 54 Use Cases of three.js

Lecture 55 Install three.js

Lecture 56 Open the Project

Lecture 57 Import three.js

Lecture 58 Creating the Scene and Camera

Lecture 59 Create the Renderer

Lecture 60 Create a Cube

Lecture 61 Render the Scene

Lecture 62 Animate the Cube

Section 7: 3D Space Effect

Lecture 63 Introduction

Lecture 64 Setup

Lecture 65 Init( ) Function

Lecture 66 Create the Stars

Lecture 67 Use Geometry and Material

Lecture 68 Animate Function

Lecture 69 Finish the Project

Lecture 70 Some three.js Examples

This course is for both developers and designers who want to draw with code.