How to Code: Sine Waves

NEW: Canvas Image Manipulation course only at chriscourses.com/courses/image-manipulation/introd…

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

📸Gear I used to produce this video: kit.com/chriscourses/chris-courses-studio-setup

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

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 ...  

Twitter: twitter.com/chriscourses
Facebook: www.facebook.com/chriscourses
Instagram: www.instagram.com/chriscourses