# Interactive Physics Animations Javascript Canvas 11

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 series of conditional statements that will check a dots coordinates against the canvas width and height, factoring in it’s own radius so it the edge of the circle kisses the edge of the canvas rather than letting the center of the circle be what bounces on the walls. I hope it’s not too much for one iteration, I know I started with the premise of babysteps, but I’m getting anxious. interactive physics animations via javascript & canvas | 11.

 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 \$(function () {     var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;     var total_dots = 25;     var fps = 24;     var bounce = -1;             canvas = \$("#canvas")[0];     context = canvas.getContext("2d");     var dots = new Array();     var drag_i = -1;         var this_dot = {};     for (var i=0; i < total_dots; i++){         var this_dot = {             x: Math.random()*canvas.width,             y: Math.random()*canvas.height,             vx: Math.random()*30-10,             vy: Math.random()*30-10,             width:canvas.width,             height: canvas.height,             radius:Math.random()*20+10         };         dots.push(this_dot);     }             draw();       \$("#canvas").mousedown(function (event) {         var dx, dy, dist;         for (var i=0; i < dots.length; i++){             dx = event.pageX - this.offsetLeft - dots[i].x;             dy = event.pageY - this.offsetTop - dots[i].y;             dist = Math.sqrt(dx * dx + dy * dy);             if(dist < radius) {                 drag = true;                 drag_i = i                 clickX = dx;                 clickY = dy;                 continue;             }         }     });       \$("#canvas").mouseup(function (event) {         drag = false;         drag_i = -1;     });       \$("#canvas").mousemove(function (event) {         if(drag) {             dots[drag_i].x = event.pageX - this.offsetLeft - clickX;             dots[drag_i].y = event.pageY - this.offsetTop - clickY;             draw();         }     });       function update(){         for (var i=0; i < dots.length; i++){             if (drag_i != i){                 var this_dot = dots[i];                 this_dot.x += this_dot.vx;                 this_dot.y += this_dot.vy;                 if (this_dot.x > canvas.width - this_dot.radius){                     this_dot.x = canvas.width - this_dot.radius;                     this_dot.vx = this_dot.vx * bounce;                 }                 else if(this_dot.x < 0 + this_dot.radius){                     this_dot.x = this_dot.radius;                     this_dot.vx = this_dot.vx * bounce;                 }                 if (this_dot.y > canvas.height - this_dot.radius){                     this_dot.y = canvas.height - this_dot.radius;                     this_dot.vy = this_dot.vy * bounce;                 }                 else if(this_dot.y < 0 + this_dot.radius){                     this_dot.y = this_dot.radius;                     this_dot.vy = this_dot.vy * bounce;                 }             }         }     }     function draw() {         context.clearRect(0, 0, canvas.width, canvas.height);         for (var i=0; i < dots.length; i++){             context.beginPath();             context.arc(dots[i].x, dots[i].y, dots[i].radius, 0, Math.PI * 2, false);             context.fill();             context.closePath();         }     }         setInterval(function() {         update();         draw();     }, 1000/fps); });

Follow the whole Interactive Physics Animations via Javascript & Canvas series.

This entry was posted in interactive javascript canvas, tutorial. Bookmark the permalink. Both comments and trackbacks are currently closed.
• Zumzza

Thanks for the lessons
I have a question.
How to put a picture a soccer ball instead of a circle drawn ?

• ### Recent Posts

There needs to be a cultural change in how we approach building for the web. Yes, some of the tools we choose are part of the problem, but the bigger problem is that performance still isn’t being recognised as the most important factor in how people feel about websites (and by extension, the web). This […]

## human_time_diff « WordPress Codex

Determines the difference between two timestamps.The difference is returned in a human readable format such as “1 hour”, “5 mins”, “2 days”. Source: Function Reference/human time diff « WordPress Codex Used this little known, but nice gem today. It’s a core WordPress function that gives human relative time from any other datetime in “U” format. […]

## Cyclomatic Complexity: Logic in CSS – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

I recently hit upon a way of thinking that made me realise that CSS does include logic, and the fact that it’s rarely viewed as such is probably also why we end up with such poor CSS at all.I found myself explaining compound selectors to a client as being made up of the subject—the thing […]