Tag Archives: javascript

Well, the last iteration was fun, but the animation went so quick. Now we’re going to do something to contain these dots in our canvas. Let’s have them bounce off the edges of the canvas. We’ll multiply the velocity by a bounce variable. This will reverse the direction the dot is going. We’ll have a [...]

Now that we have our framework for animation we can make things a bit more fluid. Let’s use a velocity to update the positions or coordinates of each dot rather than just throwing random numbers at them. We can then adjust the velocity or rate of movement and it will be a much more natural [...]

Here’s a quick and easy update. I tend to think of frames in animation and rarely do I think of milliseconds. I’m going to make a var called fps and it will be used to calculate our animation rate. interactive physics animations via javascript & canvas | 09. $(function () {     var canvas, [...]

Thus far, we’ve been doing lot of setup and it hasn’t been very visually exciting. Now we start the fun stuff! Adding motion! Before we just has a draw function, but now we’ll add a function that will control the animations and we’ll also need a way to execute code repeatedly over a period of [...]

Here’s an interesting rendering I found when I was playing with drawing multiple dots. interactive physics animations via javascript & canvas | 07 B. $(function () {     var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;     var total_dots = 25;           [...]

This step we’ll add a variable to hold the total number of dots we want to create and use it in our for loop that creates the dots. We’ll also give the dots a little more randomness by varying the size with a radius value. interactive physics animations via javascript & canvas | 07. $(function [...]

Now we’ll apply this object oriented programming to each dot and give them all random placement. interactive physics animations via javascript & canvas | 05. $(function () {     var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;             canvas = $("#canvas")[0];   [...]

This time we won’t make the canvas any different visually, it’s more just cleaning up the code. We’re making the circle into a dot object, then later it will be easier to keep track of it (and any others). interactive physics animations via javascript & canvas | 04. $(function () {     var canvas, [...]