How to Code: Sine Waves

Описание: NEW: Canvas Image Manipulation course only at https://chriscourses.com/courses/imag...

🚀Download the free HTML5 Canvas cheat sheet at https://chriscourses.com/cheatsheet

📸Gear I used to produce this video: https://kit.com/chriscourses/chris-co...

Project Git Repo: https://github.com/chriscourses/sine-...
Project on CodePen: https://codepen.io/chriscourses/pen/p...

Steps:
01. Draw a line 1:20
02. Ensure line has individual points to control y coordinates 2:46
03. Alter each point with Math.sin() 4:20
04. Add amplitude to increase wave height 5:25
05. Add wavelength to elongate waves 5:41
06. Import dat.gui to fine-tune wave properties 6:48
07. Animate frequency with requestAnimationFrame 11:19
08. Clear background 15:28
09. Add fade effect 16:10
10. Add colors to wave 17:14
11. Add colors to background 23:23
12. Make properties dynamic with animation and Math.sin() 25:46
13. Experiment! 28:28

Tag @chriscourses on Twitter, Facebook, or Instagram for your chance to be featured across all three social media platforms as well as the official chriscourses.com website. The top ten submissions will be chosen and featured on May 31, 2019.

Sorry for some of the audio issues, had some trouble mixing and recording everything to sound consistent.

Canvas for Beginners Playlist:    • HTML5 Canvas Tutorials for Beginners | Bec...  

Twitter:   / chriscourses  
Facebook:   / chriscourses  
Instagram:   / chriscourses