How to Code: Sine Waves

Published a year ago

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.

Comments

Want to participate?

Create a free Chris Courses account to begin

or
Sign In

No comments yet, be the first to add one

Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Now

Providing the lift to launch your development career

© 2020 Chris Courses. All rights reserved.