How to Code: Sine Waves

Released 02/19/19

Project Git Repo: Project on CodePen: 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 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.

1 Lessons

30:28 minutes

Skill Level



Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.