draw moving circles

Question

while searching that How can I made a moving circle using php, I found this question.But as I am not much expert in php so most of the things were not being understandable by me.So I thought now I must consult the experts :)
I want to Draw a circle which will move in circular motion on my php page.
MY EFFORT : I have tried alot to figure this out but the only thing I found that It would be achieved by canvas HTML5.But I got stuck in cartesian , radius etc.These things are really confusing me.
Anhy suggestions please.

PHP __cannot__ move a circle around in the browser: PHP simply generates HTML that is sent to the browser; it's up to that html (or js) to perform actions within the browser itself — Mark Baker, Jul 20 '13 at 19:23
Start by regular circle, before moving one. http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/ — Zlatko, Jul 20 '13 at 19:24
Then you can simply add other commands, as you google them one at a time. Without knowing what "cartesian", "radius" and stuff even means. Just read a bit ;) — Zlatko, Jul 20 '13 at 19:24
@MarkBaker appreciated .. so what should be next step or should I study? how can I that `PHP which simply generates HTML that is sent to the browser` — , Jul 20 '13 at 19:25
@user2600487's answer has me thinking... do you want to move a circle, or do you want to move something in a circular path? — mwcz, Jul 20 '13 at 19:34

Mike-O · Accepted Answer · 2013-09-01T07:47:11.687

5

The mathematics behind is:

x = centerX + radius * Math.cos(angle * Math.PI / 180);
y = centerY + radius * Math.sin(angle * Math.PI / 180);

Now you can input the result to a div element which contains the ball:

var element = document.getElementById('ball');
var angle = 0;
var x = 0;
var y = 0;
var w = (window.innerWidth - 50) / 2;
var h = (window.innerHeight - 50) / 2;

function ballCircle() {
    x = w + w * Math.cos(angle * Math.PI / 180);
    y = h + h * Math.sin(angle * Math.PI / 180);

    ball.style.left = x + 'px';
    ball.style.top = y + 'px';

    angle++;
    if (angle > 360) {
        angle = 0;
    }
    setTimeout(ballCircle,20);
}
ballCircle();

I made a demo on jsfiddle here: http://jsfiddle.net/AqKYC/

edited Sep 01 '13 at 07:47

answered Jul 20 '13 at 19:31

Mike-O

844
1
11
16

This is really awesome! I'm just curious, because I'm always trying to learn new things, but do you think this is possible to do with css3 animation. – zazvorniki Jul 20 '13 at 19:58
I am not sure but I think you can use the animation feature with CSS. I guess you need to use a bigger image body with the circle in one end to get the pivot center outside the circle. I dunno how you can make it animate in an ellipse form though. – Mike-O Jul 20 '13 at 21:58

score 1 · Answer 2 · answered Jul 20 '13 at 19:28

PHP is a server-side programming language. It sounds like what you want to do is animate a circle in the browser. PHP does not run in the browser, so you cannot use PHP to animate a circle.

You can, however, create a <canvas> and use JavaScript to animate it. Here is a MDN tutorial on canvas, including animations.

As an alternative to canvas, you could use a simple <div>, turn it into a circle with CSS border-radius: 50%, and then animate it with either pure JavaScript, or jQuery.

Here's a jsfiddle with the circle drawn and using jQuery.animate to move it right, left, and right again.

jQuery.animate is fully documented here.

Keestu · Answer 3 · 2014-01-20T04:15:34.270

Here is a sample for a html5 moving circle with a tutorial explaining the code and how it's done. The code is under gplv3 license so obviously free too.
https://www.youtube.com/watch?v=6j4Y14TEO6s

Snippet in focus ctx.strokeStyle = 'rgb(255,0,0)'; ctx.lineWidth = 10;

                ctx.beginPath();
                ctx.arc(x, y, radius, 0, Math.PI * 2, false);
                ctx.closePath();
                ctx.stroke();

Another sample is as follows where it shows the animated perspective of the same if that's what you are looking for.
https://www.youtube.com/watch?v=eKDeKFFZDNo

The focus is to break the animation at some point and thus the below snippet in focus in the redraw section of the code.

                if (!ctx.isPointInPath(300,500)) {
                    x = x + 1;
                    y = y + 2;
                    ctx.strokeStyle = colorToHex(getRandom(255),getRandom(255),getRandom(255));
                    ctx.lineWidth   = 10;

                    ctx.beginPath();
                    ctx.arc(x, y, radius, 0, Math.PI * 2, false);
                    ctx.closePath();

                    ctx.stroke();
                    }

Just posting links is not a real answer. It would be better as comments or if you could extract the essential piece of codes from those videos. — Dirk, Jan 19 '14 at 12:02

draw moving circles

3 Answers3