From the course: Vanilla JavaScript: Animations
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
✓ Solution: Adding effects - JavaScript Tutorial
From the course: Vanilla JavaScript: Animations
✓ Solution: Adding effects
(cymbals) - [Instructor] Here is how I solved the challenge of randomizing the various properties of the circle animation within our canvas element. Within our JavaScript file, I created a new variable called Position-Y, so that we can randomize a Y-position of the circle as it's drawn. Initially, I set that to canvas dot height divided by two, so the center point of the Y-axis of our canvas element. Here is the the makeRandom function that we saw in the challenge. As mentioned, we just pass in a number for N when we call makeRandom, and it will return a number between zero and the number that we pass in. Looking down a little more, here's our canvas animation, and here, I've commented out the old drawCircle invocation because, instead of passing in canvas dot height divided by two, we're passing in that new variable, Position-Y. Inside of the drawCircle function itself, instead of just simply setting circleX equal to zero and velocity equal to one, each time the circle leaves the…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.