Here’s a little fun one that I made this evening. I’ve used some Flash code that I found and turned it into JS. Every time I do one of these I realise how much easier things are in ActionScript. But that’s not why I’m doing it of course! Still not working 100% in IE. excanvas.js is doing its job and getting the canvas element plus the bouncing ball to show up in IE8, however it’s not playing nicely with the event listeners. Will explore it in more detail soon. Pun intended.

Anyway, here is what I have so far:

http://www.stevekane.com.au/test/canvas/throw.html

- Stevo

OK here we go. I’ll try and explain this one a little bit. I looked everywhere for a good tutorial on performing angled bounces with an object in the <canvas> element but found nothing specific enough. So after a lot of late nights, I finally found one that was written in ActionScript. I’ve adapted it back to JavaScript (which is basically the same thing) to further play with what the new HTML5 features give us.

I won’t go into detail about the movement of the ball or the paddle… If you want me to – email me.

Please excuse my variable names. They’re horrible – I know… Just bare with them for now. posx and posy are the positions of the ball. x1 and y1 are the starting positions of the line and x2 and y2 are the end of the line.

cos and sin are tricky ones. I haven’t shown the whole code here (obviously) but further up I have made these into sort of a shortcut.

var angle = lineAngle * Math.PI / 180;
var cos = Math.cos(angle);
var sin = Math.sin(angle);

For all this rotational stuff to work your degrees need to be converted to radians. pi / 180 will convert that for you.

I have commented most of the code in the actual HTML page(click the picture at the top to get there).

Right, below is where all the magic happens… I think the math is based on a 3×3 rotational matrix, that isn’t something I’m very familiar with so apologies if that’s not 100% correct. If there is anyone that has a better explanation of rotational matrices than the ones currently online please let me know!

The reason it looks messy is because you need to rotate everything(ball position, the line position and the velocity of the ball) to (0,0) coordinates. Then run the test to see if the ball has hit the line, if it has, make the ball bounce in the other direction and rotate everything back, if not, just rotate everything back and carry on as before with the ball traveling in the same direction. Next frame, rotate it all and test again. That’s right! So 25 times a second it is rotating all the elements to (0,0), testing if something happens, then rotating it all back. Seems criminally inefficient right? That’s just how it works.

Hope this is easy enough to follow:

get position of ball, relative to line
x1 y1 – Start point of line and x2 y2 – end point

newposx = posx - x1;
newposy = posy - y1;
newposx2 = posx - x2;
newposy2 = posy - y2;

rotate coordinates giving the rotated position of the ball
relative to the line

rotposx = cos * newposx + sin * newposy;
rotposy = cos * newposy - sin * newposx;
rotposx2 = cos * newposx2 + sin * newposy2;
rotposy2 = cos * newposy2 - sin * newposx2;

rotate velocity
vx1 vy1

rotvelx = cos * velx + sin * vely;
rotvely = cos * vely - sin * velx;

perform bounce with rotated values
if ball hits on top of the line

if (rotposy >  -  r && rotposy < 0 - (r / 2) &&
    newposx > 0 && newposx < 100)
{
	rotvely *=  bounce;
	rotposy =  -  r;
}

if ball hits on the bottom of the line

if (rotposy <  r && rotposy > 0 + (r / 2) &&
    newposx > 0 && newposx < 100)
{
	rotvely *=  bounce;
	rotposy =  r;
}

rotate everything back;

newposx = cos * rotposx - sin * rotposy;
newposy = cos * rotposy + sin * rotposx;
newposx2 = cos * rotposx2 - sin * rotposy2;
newposy2 = cos * rotposy2 + sin * rotposx2;
velx = cos * rotvelx - sin * rotvely;
vely = cos * rotvely + sin * rotvelx;
posx = x1 + newposx;
posy = y1 + newposy;

As you can see, when rotating everything back, you are simply changing the + to a – in the cos and sin equations. I’ll look at optimising this code a little bit too when I get some free time. I’m sure there’s a few shortcuts that I could have taken. But you get the general idea of how the physics work.

I hope you have got something beneficial out it.

- Stevo

O.K. One more for good luck. This one is very similar to the bricks game. I used most of the collision detection code from that one with some slightly different values in the array and a little different how the array is used. Instead of the mouse to change the direction I have assigned some keys.

I’ll try my hand at adding another key that rotates the angle of the paddle to change the angle of the ball bouncing back. <canvas> is quite limited in its controls so this seemingly easy idea is not that easy to code. We’ll see. Anyway, like the other nonsense games that I’ve done – ENJOY!

This will be the last <canvas> demo for a while. I’m playing a little more with jQuery at the moment so the next few posts will be related to that. I made a cool fading image switcher with a few simple lines of JS. I’ll post that soon. For now, enjoy the bricks game! Special thanks to Andy for co-coding this with me. If you want a challenge, the harder version (faster ball) can be found here.

It is buggy – yes, I know. Collision detection in JS isn’t an easy thing to do. If you move the mouse too quickly it can skip over the frame where the ball collides with the paddle. I’ve commented the code on the hard version (mostly). This will briefly explain what all the code does. I’ll finish it soon when I get a little more free time.

O.K. here it is! I will keep working on this one making it prettier and have a few extra features (maybe a colour picker or something). Simply draw on the left canvas after choosing your brush style. The right canvas still replicates the left. I have left this on purely for fun, it does have some cool effects on the right hand side! Special thanks go to my sister(28) for the demo drawing you see below. If you really like your creation, right click and choose save image. Stay tuned for a bouncing ping pong ball coming up as I dive into a bit of animation. This stuff is fun!

This was a fun one! It came about as I was testing the createRadialGradient() method. Originally I had random x and y positions, then random radius sizes. This then moved onto a little bit of simple maths to create the ‘mirror image’ on the second canvas. This then developed into a bit more interactivity. Starting with addEventListener('click',function,false) to trigger the circles to move to the position on the canvas that had been clicked by getting the mouse coordinates. A simple change from click to mousemove made this little test come alive. Try it out!