Tag: html

I’m really enjoying giving a control panel of sorts to the end user and letting them control the physics rules of their canvas. Let’s add more motion to it by applying a jitter to the velocity of each dot. This is similar to earlier, when we first started animating by applying a random number to the coordinates, but now we’ll apply a (smaller) random number to the velocity. This will be much smoother and will give a sense of real life to the dots. Straight lines and trajectories is always theoretical and hypothetical, but to make things look more real, sometimes we have to break the clean, straight lines. This will be another checkbox to control the float. I’m really enjoying the fact that the more properties we add to our controls we get exponentially more possible configurations. Perhaps we should even give a slider to control the strength of gravity…
interactive physics animations via javascript & canvas | 17.

[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
var total_dots = 10;
var fps = 24;

canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);
var dots = new Array();
var drag_i = -1;
var gravity = 0;
var friction = .98;
var bounce = -.96;
var wrap = false;
var float = true;

var this_dot = {};
for (var i=0; i < total_dots; i++){ createDot(); } function createDot(x, y, r, vx, vy){ var this_dot = { x: typeof(x) != 'undefined' ? x : Math.random()*canvas.width, y: typeof(y) != 'undefined' ? y : Math.random()*canvas.height, radius: typeof(r) != 'undefined' ? r : Math.random()*20+10, vx: typeof(vx) != 'undefined' ? vx : Math.random()*30-10, vy: typeof(vy) != 'undefined' ? vy : Math.random()*30-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; } } //none clicked if (!drag) { createDot(event.pageX - this.offsetLeft, event.pageY - this.offsetTop); } }); $("#canvas").mouseup(function (event) { drag = false; drag_i = -1; }); $("#canvas").mousemove(function (event) { if(drag) { dots[drag_i].old_x = dots[drag_i].x; dots[drag_i].old_y = dots[drag_i].y; dots[drag_i].x = event.pageX - this.offsetLeft - clickX; dots[drag_i].y = event.pageY - this.offsetTop - clickY; dots[drag_i].vx = dots[drag_i].x - dots[drag_i].old_x; dots[drag_i].vy = dots[drag_i].y - dots[drag_i].old_y; draw(); } }); function update(){ for (var i=0; i < dots.length; i++){ if (drag_i != i){ var this_dot = dots[i]; if (float){ this_dot.vx += Math.random() - .5; this_dot.vy += Math.random() - .5; } this_dot.vx *= friction; this_dot.vy = this_dot.vy * friction + gravity; this_dot.x += this_dot.vx; this_dot.y += this_dot.vy; if (wrap){ if (this_dot.x > canvas.width + this_dot.radius){
this_dot.x -= canvas.width + this_dot.radius*2;
}
else if(this_dot.x < 0 - this_dot.radius){ this_dot.x += canvas.width + this_dot.radius*2; } if (this_dot.y > canvas.height + this_dot.radius){
this_dot.y -= canvas.height + this_dot.radius*2;
}
else if(this_dot.y < 0 - this_dot.radius){ this_dot.y += canvas.height + this_dot.radius*2; } } else if (!wrap) { 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);$("#gravity").click(function(){ if($("#gravity").is(':checked')){ gravity = 2; } else{ gravity = 0; } }); $("#wrap").click(function(){ if($("#wrap").is(':checked')){ wrap = true; } else{ wrap = false; } }); $("#float").click(function(){ if($("#float").is(':checked')){ float = true; } else{ float = false; } }); }); [/cc]Follow the whole Interactive Physics Animations via Javascript & Canvas series.

I always want to give the end user (at least some) control of how they view and interact with data. Earlier we gave users control over gravity. Here let’s give them control over the canvas edges. Rather than having our dots bounce on the edges of the canvas, lets have them wrap across to the other side. Like in the asteroids game the ship can fly to the edge of the screen and see space wrap them back to the other side. We’ll set this up as a control exposed to the user much like gravity. Let’s call it wrap and use a boolean value to store the setting. We’ll need to add another block of conditionals for this case where we have the set already with the bouncing. I took some care with the values so that the dots leave the canvas before they make the hyper-jump to the other side. Otherwise you’d see the magic. interactive physics animations via javascript & canvas | 16.

[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
var total_dots = 10;
var fps = 24;

canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);
var dots = new Array();
var drag_i = -1;
var gravity = 0;
var friction = .98;
var bounce = -.96;
var wrap = true;

var this_dot = {};
for (var i=0; i < total_dots; i++){ createDot(); } function createDot(x, y, r, vx, vy){ var this_dot = { x: typeof(x) != 'undefined' ? x : Math.random()*canvas.width, y: typeof(y) != 'undefined' ? y : Math.random()*canvas.height, radius: typeof(r) != 'undefined' ? r : Math.random()*20+10, vx: typeof(vx) != 'undefined' ? vx : Math.random()*30-10, vy: typeof(vy) != 'undefined' ? vy : Math.random()*30-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; } } //none clicked if (!drag) { createDot(event.pageX - this.offsetLeft, event.pageY - this.offsetTop); } }); $("#canvas").mouseup(function (event) { drag = false; drag_i = -1; }); $("#canvas").mousemove(function (event) { if(drag) { dots[drag_i].old_x = dots[drag_i].x; dots[drag_i].old_y = dots[drag_i].y; dots[drag_i].x = event.pageX - this.offsetLeft - clickX; dots[drag_i].y = event.pageY - this.offsetTop - clickY; dots[drag_i].vx = dots[drag_i].x - dots[drag_i].old_x; dots[drag_i].vy = dots[drag_i].y - dots[drag_i].old_y; draw(); } }); function update(){ for (var i=0; i < dots.length; i++){ if (drag_i != i){ var this_dot = dots[i]; this_dot.vx *= friction; this_dot.vy = this_dot.vy * friction + gravity; this_dot.x += this_dot.vx; this_dot.y += this_dot.vy; if (wrap){ if (this_dot.x > canvas.width + this_dot.radius){
this_dot.x -= canvas.width + this_dot.radius*2;
}
else if(this_dot.x < 0 - this_dot.radius){ this_dot.x += canvas.width + this_dot.radius*2; } if (this_dot.y > canvas.height + this_dot.radius){
this_dot.y -= canvas.height + this_dot.radius*2;
}
else if(this_dot.y < 0 - this_dot.radius){ this_dot.y += canvas.height + this_dot.radius*2; } } else if (!wrap) { 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);$("#gravity").click(function(){ if($("#gravity").is(':checked')){ gravity = 2; } else{ gravity = 0; } }); $("#wrap").click(function(){ if($("#wrap").is(':checked')){ wrap = true; } else{ wrap = false; } }); }); [/cc]Follow the whole Interactive Physics Animations via Javascript & Canvas series.

Earlier we worked on making all the dots draggable, but what’s better than simply dragging dots? Let’s set up a way to throw the dots! Now as we drag it we record the positions and use that to calculate a new velocity. Then when a dot is dropped, it will have a trajectory to follow that matches the path and speed it was dragged. This iteration only looks at the current frame and the previous frame, but a better solution may be to average the previous few positions to get a better feel. I’ve noticed that (with a mouse especially) people tend to stop dragging just before they mouseup, so this kills any velocity the dot receives during the drag. Enjoy throwing the dots around the canvas! interactive physics animations via javascript & canvas | 15.

[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
var total_dots = 10;
var fps = 24;

canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);
var dots = new Array();
var drag_i = -1;
var gravity = 2;
var friction = .98;
var bounce = -.96;

var this_dot = {};
for (var i=0; i < total_dots; i++){ createDot(); } function createDot(x, y, r, vx, vy){ var this_dot = { x: typeof(x) != 'undefined' ? x : Math.random()*canvas.width, y: typeof(y) != 'undefined' ? y : Math.random()*canvas.height, radius: typeof(r) != 'undefined' ? r : Math.random()*20+10, vx: typeof(vx) != 'undefined' ? vx : Math.random()*30-10, vy: typeof(vy) != 'undefined' ? vy : Math.random()*30-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; } } //none clicked if (!drag) { createDot(event.pageX - this.offsetLeft, event.pageY - this.offsetTop); } }); $("#canvas").mouseup(function (event) { drag = false; drag_i = -1; }); $("#canvas").mousemove(function (event) { if(drag) { dots[drag_i].old_x = dots[drag_i].x; dots[drag_i].old_y = dots[drag_i].y; dots[drag_i].x = event.pageX - this.offsetLeft - clickX; dots[drag_i].y = event.pageY - this.offsetTop - clickY; dots[drag_i].vx = dots[drag_i].x - dots[drag_i].old_x; dots[drag_i].vy = dots[drag_i].y - dots[drag_i].old_y; draw(); } }); function update(){ for (var i=0; i < dots.length; i++){ if (drag_i != i){ var this_dot = dots[i]; this_dot.vx *= friction; this_dot.vy = this_dot.vy * friction + gravity; 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);$("#gravity").click(function(){ if($("#gravity").is(':checked')){ gravity = 2; } else{ gravity = 0; } }); }); [/cc]Follow the whole Interactive Physics Animations via Javascript & Canvas series.

Here is an update to allow the end user to create more dots. A good way to do that is to just let users click on the canvas, and if they click a dot, drag it, if they don’t click a dot, create a new dot at the point of click. I moved the dot creation into it’s own function and we can use that as our constructor for every dot. It has settings we can send in, but the defaults are set to pick random values. This could also be used to create a particle emitter of sorts, but for now it’s just creating a dot on clicking the blank canvas. interactive physics animations via javascript & canvas | 14.

[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
var total_dots = 10;
var fps = 24;

canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);
var dots = new Array();
var drag_i = -1;
var gravity = 2;
var friction = .98;
var bounce = -.96;

var this_dot = {};
for (var i=0; i < total_dots; i++){ createDot(); } function createDot(x, y, r, vx, vy){ var this_dot = { x: typeof(x) != 'undefined' ? x : Math.random()*canvas.width, y: typeof(y) != 'undefined' ? y : Math.random()*canvas.height, radius: typeof(r) != 'undefined' ? r : Math.random()*20+10, vx: typeof(vx) != 'undefined' ? vx : Math.random()*30-10, vy: typeof(vy) != 'undefined' ? vy : Math.random()*30-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; } } //none clicked if (!drag) { createDot(event.pageX - this.offsetLeft, event.pageY - this.offsetTop); } }); $("#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.vx *= friction; this_dot.vy = this_dot.vy * friction + gravity; 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);$("#gravity").click(function(){ if($("#gravity").is(':checked')){ gravity = 2; } else{ gravity = 0; } }); }); [/cc]Follow the whole Interactive Physics Animations via Javascript & Canvas series.

Now that we have gravity we’re really seeing some natural looking movement. Yet, it’s still missing something. In the real world we have friction or drag (or even air resistance) on everything. Without this friction it’s like these balls are moving in space. Even when they bounce on the walls they don’t loose any velocity, it’s just reversed. Typically, there should be a dampening effect that lessens the velocity by a fraction because it looses some speed in turning around on the wall. In this step we’re decreasing the velocity of x and y slightly every frame with a friction variable we’ve set to .98. Over time we see the velocity lessen and the dots move slower and slower until they come to a stop. e’re also updating the bounce variable from -1 to -.96, just to give a sense that changing direction lessens the velocity. interactive physics animations via javascript & canvas | 13.

[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
var total_dots = 25;
var fps = 24;
var bounce = -.96;
var gravity = 2;
var friction = .98;

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.vx *= friction; this_dot.vy = this_dot.vy * friction + gravity; 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);$("#gravity").click(function(){ if($("#gravity").is(':checked')){ gravity = 2; } else{ gravity = 0; } }); }); [/cc]Follow the whole Interactive Physics Animations via Javascript & Canvas series.

Adding gravity! Here we’ve adjusting the y velocity in every frame with the force of gravity. It’s fun to play with options and see how they are affecting the animation and the physics, so I’ve also got a checkbox that will toggle gravity to either a vlaue of 2 or 0. interactive physics animations via javascript & canvas | 12.

[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
var total_dots = 25;
var fps = 24;
var bounce = -1;
var gravity = 2;

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.vy = this_dot.vy + gravity; 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);$("#gravity").click(function(){ if($("#gravity").is(':checked')){ gravity = 2; } else{ gravity = 0; } }); }); [/cc]Follow the whole Interactive Physics Animations via Javascript & Canvas series.

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.

[cc lang=”javascript”]
$(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); }); [/cc]Follow the whole Interactive Physics Animations via Javascript & Canvas series.

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 and fluid movement. Adding to each dot a vx and vy (we’re looking at the velocity in each dimension or axis). Then we update the x and y each frame by the current velocity. This iteration we’re just applying a flat random velocity, but it will be easy to apply a force like gravity, friction or anything to this velocity and it will calculate the balls position for us. This is when physics gets fun. interactive physics animations via javascript & canvas | 10.

[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
var total_dots = 25;
var fps = 24;

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.vy = this_dot.vy; this_dot.vx = this_dot.vx; 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); }); [/cc]Follow the whole Interactive Physics Animations via Javascript & Canvas series.

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.

[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
var total_dots = 25;
var fps = 24;

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, 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 += Math.random() * 10 - 5; this_dot.y += Math.random() * 10 - 5; } } } 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); }); [/cc]Follow the whole Interactive Physics Animations via Javascript & Canvas series.