CODEWITHSUNDEEP
javascripthtmljquery-uicanvas
user2401931
user2401931

Reputation:

draw moving circles

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.

Upvotes: 3

Views: 11454

Answers (3)

Keestu
Keestu

Reputation: 1

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();
                    }

Upvotes: 0

Mike-O
Mike-O

Reputation: 894

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/

Upvotes: 5

mwcz
mwcz

Reputation: 9301

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.

Upvotes: 1

Related Questions