Premium Features

Download Video

How to Code: Sine Waves

Published 5 years ago

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.


Want to participate?

Create a free Chris Courses account to begin


No comments yet, be the first to add one

Providing the lift to launch your development career

© 2024 Chris Courses. All rights reserved.