Related
I have a simple transform class to apply translations, scales and rotations on a div in any arbitrary order:
class TransformDiv{
constructor(div)
{
this.div = div;
this.translateX = 0;
this.translateY = 0;
this.scaleX = 1;
this.scaleY = 1;
this.shearX = 0;
this.shearY = 0;
}
translate(x, y)
{
this.translateX += x;
this.translateY += y;
this.setTransform();
}
scale(x, y, anchorX = 0, anchorY = 0)
{
this.scaleX *= x;
this.shearX *= x;
this.scaleY *= y;
this.shearY *= y;
this.translateX -= (this.translateX - anchorX) * (1 - x);
this.translateY -= (this.translateY - anchorY) * (1 - y);
this.setTransform();
}
rotate(rad, anchorX = 0, anchorY = 0)
{
let cos = Math.cos(rad);
let sin = Math.sin(rad);
// the composition of two successive rotations are additive
let newScaleX = this.scaleX * cos + this.shearX * sin;
let newShearX = this.scaleX * (-sin) + this.shearX * cos;
let newShearY = this.shearY * cos + this.scaleY * sin;
let newScaleY = this.shearY * (-sin) + this.scaleY * cos;
this.scaleX = newScaleX;
this.shearX = newShearX;
this.shearY = newShearY;
this.scaleY = newScaleY;
//rotation about an arbitrary point
let originX = (this.translateX - anchorX);
let originY = (this.translateY - anchorY);
this.translateX -= (originY * sin - originX * (cos - 1));
this.translateY -= (-originY * (cos - 1) - originX * sin);
this.setTransform();
}
setTransform()
{
this.div.style.transform = `matrix(${this.scaleX}, ${this.shearY}, ${this.shearX}, ${this.scaleY}, ${this.translateX}, ${this.translateY})`;
}
}
A problem arises when I wish to rotate after a non-uniform scale has been made.
Edit - Newer interactive example: https://codepen.io/manstie/pen/RwGGOmB
Here is the example I made:
https://jsfiddle.net/ft61q230/1/
In the example here:
div2.translate(100, 100);
div2.scale(2, 1, 100, 100);
div2.rotate(Math.PI / 2, 100, 100);
The expected result is for Test 1 Text and Test 2 Text to be the same length, as if you were rotating from the top left of the div clockwise 90 degrees; but as you can see the result is such that the rotation logic I am performing retains the scale on the world-space axis, so now Test 2 Text is twice as tall rather than twice as long.
Current outcome:
Desired outcome:
The current rotation logic is based on multiplying the existing transformation matrix that makes up rotation by another transformation matrix containing an angle to rotate by, but I realize it is not as simple as that and I am missing something to retain local-axial scale.
Thank you for your assistance.
Edit:
Was recommended DOMMatrix which does all this math for me, but it has the same problem, although there is some skew which I don't think is accurate:
https://jsfiddle.net/heqo7vrt/1/
The skew is caused by the scale function scaling it's local X axis while it is rotated, and then rotating after not keeping that local X axis scaling. Also, DOMMatrix translate function has the translations apply on its local axis which is not desired in my situation but if its rotate function worked as expected I would be able to use it.
I managed to fix it here:
Regular: https://jsfiddle.net/sbca61k5/
let newScaleX = cos * this.scaleX + sin * this.shearY;
let newShearX = cos * this.shearX + sin * this.scaleY;
let newShearY = -sin * this.scaleX + cos * this.shearY;
let newScaleY = -sin * this.shearX + cos * this.scaleY;
DOMMatrix version: https://jsfiddle.net/b36kqrsg/
this.matrix = new DOMMatrix([cos, sin, -sin, cos, 0, 0]).multiply(this.matrix);
// or
this.matrix = new DOMMatrix().rotate(deg).multiply(this.matrix);
The difference is to have the rotation matrix multiplied by the rest of the matrix to "add" it on, not the other way round:
[a c e] [cos -sin 0] [scx shy tx]
[b d f] = [sin cos 0] . [shx scy ty]
[0 0 1] [0 0 1] [0 0 1 ]
I'm unsure about the details of the anchor mathematics but the DOMMatrix version's anchor is relative to its own top left whereas the other is relative to the top left of the document.
From my interactive example the anchor maths does not work as after a multitude of rotations the objects get further away from the anchor origin.
https://codepen.io/manstie/pen/PoGXMed
I'm trying to rotate an image inside a canvas.
Here's my Fiddle: https://jsfiddle.net/kevinludwig11/s6rgpjm9/
I try it with save and restore, but the path is also rotating.
The falcon should fly with his face towards and change the angle in the corners.
Can anybody help me?
Edit: One solution i've found: save the image 360 times with every rotation and load every image in the right position. But i think thats not the smartest solution.
Canvas 2D image lookat transform.
No need to create 360 images to rotate a single image. Also you had a few incorrect ways of doing things.
Code problems
Only load the image once. You were loading it each time it was rendered.
Use requestAnimationFrame on its own. Putting it inside a timer makes its use completely redundant.
If you find yourself typing in long lists of numbers, and especially if you repeat these numbers in other sections of code you should use a single store to hold everything. Eg your paths were all hand coded. Move them into an array then iterate the array for the various things you need to do with the paths. One of the top ten programing rules. "Don't repeat/duplicate anything."
The lookat transform
To do the bird you will need to get the direction it is heading towards so I added a second point on the curves that is ahead of the bird. With these two points (birds pos and lookat pos) I then create a transformation using the lookat direction as the xAxis of the transformation. See function drawImageLookat(image,pos,lookat) I found that the image is not along the X axis so I rotate the bird 90deg after finding the lookat transformation.
Lookat function
// function assumes front (forward) of image is along the x axis to the right
function drawImageLookat(image, point, lookat ) {
var xAx,xAy; // vector for x Axis of image
var x,y;
x = lookat.x - point.x;
y = lookat.y - point.y;
var dist = Math.max(0.01,Math.sqrt(x * x + y * y)); // Math.max to avoid zero which will create NaN
xAx = x / dist; // get x component of x Axis
xAy = y / dist; // get y component of x Axis
// y axis is at 90 deg so dont need y axis vector
ctx.setTransform( // position the image using transform
xAx, xAy, // set direction of x Axis
-xAy, xAx, // set direction oy y axis
point.x, point.y
);
ctx.drawImage(image, -image.width / 2, -image.height / 2);
}
Demo from fiddle.
Your code that I took from the fiddle https://jsfiddle.net/kevinludwig11/s6rgpjm9/ and modified to run as your question implies.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// only load image once
var birdImage = new Image();
birdImage.src = 'http://www.happy-innovation.de/images/Falke_Flug.png';
birdImage.onload = function(){animate()}; // start animation when image has loaded
// set starting values
var speed = 0.25
var percent = speed;
var direction = speed;
var length = 300;
function animate() {
ctx.setTransform(1,0,0,1,0,0); // restore default transform incase its not
ctx.clearRect(0, 0, canvas.width, canvas.height);
percent += direction;
// need to keep the position away from the ends as there is no lookat beyond the path.
if(percent >= length - speed){
percent = length- speed;
direction = -speed;
}else if(percent <= speed){
percent = speed;
direction = speed;
}
draw(percent,direction);
requestAnimationFrame(animate);
}
function P(x,y){return {x,y}}; // quick way to create a point
var paths = [
{col : 'red', points : [P(100, 200), P(600, 350), P( 700, 400)]},
{col : "green", points : [P(700, 400), P( 900, 500), P( 200, 600), P( 950, 900)]},
{col : "blue", points : [P(950, 900), P(1200, 950), P( 300, 200), P( 150, 1200)]},
{col : "brown", points : [P(150, 1200),P( 120, 1700),P( 1000, 700),P(850, 1500)]},
{col : "Purple",points : [P(850, 1500),P(800, 1900), P( 200, 900), P( 250, 1800)]},
{col : "yellow", points : [P(250, 1800),P(250, 1950), P( 600, 1500),P(950, 1800)]},
]
// draw the current frame based on sliderValue
function draw(sliderValue,direction) {
var getPos = false; // true if need pos on current curve
var getForwardPos = false; // true if need pos on current curve
var percent,percent1; // get the percentage on curves
var birdPos; // get bird pos
var birdLookAtPos; // get bird look at pos
ctx.lineWidth = 5;
for(var i = 0; i < paths.length; i ++){
var path = paths[i]; // get a path from array
var p = path.points;
ctx.strokeStyle = path.col;
ctx.beginPath();
ctx.moveTo(p[0].x,p[0].y);
if(sliderValue >= i * 50 && sliderValue < (i+1) * 50){
getPos = true;
percent = (sliderValue % 50) / 50;
}
if(sliderValue + direction >= i * 50 && sliderValue + direction < (i+1) * 50){
getForwardPos = true;
percent1 = ((sliderValue + direction) % 50) / 50;
}
if(p.length > 3){
ctx.bezierCurveTo(p[1].x,p[1].y,p[2].x,p[2].y,p[3].x,p[3].y);
if(getPos){
birdPos = getCubicBezierXYatPercent(p[0],p[1],p[2],p[3],percent);
getPos = false;
}
if(getForwardPos){
birdLookAtPos = getCubicBezierXYatPercent(p[0],p[1],p[2],p[3],percent1);
getForwardPos = false;
}
}else{
ctx.quadraticCurveTo(p[1].x,p[1].y,p[2].x,p[2].y);
if(getPos){
birdPos = getQuadraticBezierXYatPercent(p[0],p[1],p[2],percent);
getPos = false;
}
if(getForwardPos){
birdLookAtPos = getQuadraticBezierXYatPercent(p[0],p[1],p[2],percent1);
getForwardPos = false;
}
}
ctx.stroke();
}
drawImageLookingAt(birdImage,birdPos,birdLookAtPos);
}
function drawImageLookingAt(image, point, lookat ) {
if(lookat === undefined){ // if no lookat then exit or it will crash.
return;
}
var xAx,xAy; // vector for x Axis of image
var x,y;
x = lookat.x - point.x;
y = lookat.y - point.y;
var dist = Math.max(0.01,Math.sqrt(x * x + y * y)); // Math.max to avoid zero which will create NaN
xAx = x / dist; // get x component of x Axis
xAy = y / dist; // get y component of x Axis
// y axis is at 90 deg so dont need y axis vector
ctx.setTransform( // position the image using transform
xAx, xAy, // set direction of x Axis
-xAy, xAx, // set direction oy y axis
point.x, point.y
);
// bird is pointing in the wrong direction. Not along x axis
// so rotate the image 90 deg clockwise
ctx.rotate(Math.PI / 2);
ctx.drawImage(image, -image.width / 2, -image.height / 2);
ctx.setTransform(1,0,0,1,0,0); // Restore default Not really needed if you only use setTransform to do transforms
// but in case you use transform, rotate, translate or scale you need to reset the
// transform.
}
// line: percent is 0-1
function getLineXYatPercent(startPt, endPt, percent) {
var dx = endPt.x - startPt.x;
var dy = endPt.y - startPt.y;
var X = startPt.x + dx * percent;
var Y = startPt.y + dy * percent;
return ({
x: X,
y: Y
});
}
// quadratic bezier: percent is 0-1
function getQuadraticBezierXYatPercent(startPt, controlPt, endPt, percent) {
var x = Math.pow(1 - percent, 2) * startPt.x + 2 * (1 - percent) * percent * controlPt.x + Math.pow(percent, 2) * endPt.x;
var y = Math.pow(1 - percent, 2) * startPt.y + 2 * (1 - percent) * percent * controlPt.y + Math.pow(percent, 2) * endPt.y;
return ({
x: x,
y: y
});
}
// cubic bezier percent is 0-1
function getCubicBezierXYatPercent(startPt, controlPt1, controlPt2, endPt, percent) {
var x = CubicN(percent, startPt.x, controlPt1.x, controlPt2.x, endPt.x);
var y = CubicN(percent, startPt.y, controlPt1.y, controlPt2.y, endPt.y);
return ({
x: x,
y: y
});
}
// cubic helper formula at percent distance
function CubicN(pct, a, b, c, d) {
var t2 = pct * pct;
var t3 = t2 * pct;
return a + (-a * 3 + pct * (3 * a - a * pct)) * pct + (3 * b + pct * (-6 * b + b * 3 * pct)) * pct + (c * 3 - c * 3 * pct) * t2 + d * t3;
}
<canvas height="1961" width="1000" id="canvas"></canvas>
What I am aiming to do is arc the position of a circle towards the position of the mouse cursor, this all being relative to the world viewed through the canvas. To keep a handle on the speed at which the circle moves I decided to make a boundary larger than the circle, if the mouse is outside the boundary then the "position" of the mouse is brought to the boundary so that when I arc towards the coords, if they arent super far from the position of the circle it doesnt move at crazy speeds. I have this working and this is the code which does it:
dx = Game.controls.mouseX - (this.x - xView); // get the distance between the x coords
dy = Game.controls.mouseY - (this.y - yView); // get the distance between the y coords
radii = this.radius + 1; // +1 because the "radius" of the mouse is 1
if((dx * dx) + (dy * dy) > radii * radii) // is the mouse not over the player?
{
if((dx * dx) + (dy * dy) < 301 * 301)
{
this.x += ((Game.controls.mouseX - (this.x - xView)) * 2 / (this.mass)) + step;
this.y += ((Game.controls.mouseY - (this.y - yView)) * 2 / (this.mass)) + step;
}
else
{
mx = Game.controls.mouseX;
my = Game.controls.mouseY;
do
{
dx = mx - (this.x - xView);
dy = my - (this.y - yView);
mx += (((this.x - xView) - mx) * 2 / (this.mass)) + step;
my += (((this.y - yView) - my) * 2 / (this.mass)) + step;
} while((dx * dx) + (dy * dy) > 301 * 301)
this.x += ((mx - (this.x - xView)) * 2 / (this.mass)) + step;
this.y += ((my - (this.y - yView)) * 2 / (this.mass)) + step;
}
}
The magic for 'outside the boundary' lies withing the do while. This is the best fix I could come up with and I cant see this as being an elegant or fast solution and am wondering what the proper course of action should be.
Im no artist but hopefully this image helps to illustrate what I am trying to achieve. The Black dot is the mouse pos, the black circle is the circle and the red circle is the boundary I have specified. I want to get the coords marked by the X.
Your question is a special case of Circle line-segment collision detection algorithm?, in this case with B and C being the same points, so you can use your center point for both of them.
That solution is given in C, but it translates to JavaScript very easily, just replace float with var, use Math.sqrt() and so on...
Oh, and then there is a JvaScript version here: Calculate the point of intersection of circle and line through the center, that's more appropriate :-)
If the black circle is in the center of the red circle and you have the radius of the red circle
// c is circle center
// mouse is the mouse position. Should have properties x,y
// radius is the circle radius;
// returns the point on the line where the circle intercepts it else it returns undefined.
function findX(c, mouse, radius)
var v = {};
// get the vector to the mouse
v.x = mouse.x - c.x;
v.y = mouse.y - c.y;
var scale = radius / Math.hypot(v.x,v.y);
if(scale < 1){ // is it outside the circle
return {
x : c.x + v.x * scale,
y : c.y + v.y * scale
};
}
return;
}
And if the the line start is not the center then a general purpose line circle intercept function will solve the problem. If the line starts inside the circle the function will return just one point. If the line is not long enough it will return an empty array..
// p1,p2 are the start and end points of a line
// returns an array empty if no points found or one or two points depending on the number of intercepts found
// If two points found the first point in the array is the point closest to the line start (p1)
function circleLineIntercept(circle,radius,p1,p2){
var v1 = {};
var v2 = {};
var ret = [];
var u1,u2,b,c,d;
// line as vector
v1.x = p2.x - p1.x;
v1.y = p2.y - p1.y;
// vector to circle center
v2.x = p1.x - circle.x;
v2.y = p1.y - circle.y;
// dot of line and circle
b = (v1.x * v2.x + v1.y * v2.y) * -2;
// length of line squared * 2
c = 2 * (v1.x * v1.x + v1.y * v1.y);
// some math to solve the two triangles made by the intercept points, the circle center and the perpendicular line to the line.
d = Math.sqrt(b * b - 2 * c * (v2.x * v2.x + v2.y * v2.y - radius * radius));
// will give a NaN if no solution
if(isNaN(d)){ // no intercept
return ret;
}
// get the unit distance of each intercept to the line
u1 = (b - d) / c;
u2 = (b + d) / c;
// check the intercept is on the line segment
if(u1 <= 1 && u1 >= 0){
ret.push({x:line.p1.x + v1.x * u1, y : line.p1.y + v1.y * u1 });
}
// check the intercept is on the line segment
if(u2 <= 1 && u2 >= 0){
ret.push({x:line.p1.x + v1.x * u2, y : line.p1.y + v1.y * u2});
}
return ret;
}
I've been working with phoria.js and have really got a kick out of it. I have a player avatar model and have been using a first person camera. The phoria.js camera is positioned with two coordinates of 3D space: the first: the camera's actual position in the scene graph, the second: the point which the camera looks at. I've been using two angles: angleX and angleY defined in degrees (I know that radians are better) for easy thinking as well as a constant distance of 10 units.
The code for the fp camera goes like
{within an object definition}
setLookAtByAngle: function(camera, angleX, angleY) {
lookAt = {x: camera.position.x, y: camera.position.y, z: camera.position.z};
extent = 10;
lookAt.x += Math.tan(angleX * (Math.PI / 180)) * extent;
lookAt.y += Math.tan(angleY * (Math.PI / 180)) * extent;
lookAt.z += extent;
camera.lookat = lookAt;
},
getAngleByLookAt: function(camera) {
xPlanarLookAt = {x: camera.lookat.x, y: camera.position.y, z: camera.lookat.z};
yPlanarLookAt = {x: camera.position.x, y: camera.lookat.y, z: camera.lookat.z};
hypotX = getDistanceBetweenTwoPoints(camera.position, xPlanarLookAt);
oppX = Math.abs(camera.lookat.x - camera.position.x);
angleX = Math.asin(oppX / hypotX) * (180/Math.PI);
hypotY = getDistanceBetweenTwoPoints(camera.position, yPlanarLookAt);
oppY = Math.abs(camera.lookat.y - camera.position.y);
angleY = Math.asin(oppY / hypotY) * (180/Math.PI);
return {x: angleX, y: angleY};
},
{continue object definition}
. What I have so far of the third person camera uses my own SpaceUtils. It takes the observee's position1 and the inverted x[2],y[3] angles and calls SpaceUtils.translateByAngle([1], [2], [3], 10) with 10 as a distance constant to be modified later along with FOV when I add zooming functionality.
SpaceUtils looks like
SpaceUtils = {
degSin: function(theta) {
return Math.sin(theta * (Math.PI / 180));
},
degCos: function(theta) {
return Math.cos(theta * (Math.PI / 180));
},
degTan: function(theta) {
return Math.tan(theta * (Math.PI / 180));
},
translateByAngle: function(pos, angleX, angleY, distance) {
dest = {x: pos.x, y: pos.y, z: pos.z};
dest.z += distance * SpaceUtils.degSin(angleY);
hyp = distance * SpaceUtils.degCos(angleY);
dest.x += hyp * SpaceUtils.degCos(angleX);
dest.y += hyp * SpaceUtils.degSin(angleX);
return dest;
}
};
My calculator has Pol() and Rec() functions which do the job in 2D.
I supposed I just need the correct one of these for 3D, so I began implementing. It all works in the four x > 0 quadrants, but pushes the camera down as I transition across x == 0 where y > 0 (y is up-down axis) so that when I start with x > 0 and y > 0, I end up with x < 0 and y < 0 when y > 0 should be the case.
In short, I need a 3D Rec(r, theta) function ideally in degrees, but radians is fine if it's not purpose written.
I realise that this is a sizable ask, so I'll bounty 50 or 100 rep if it comes to that.
Phoria uses x as forward-backward, y as upward-downward, and z as sideways, while conventional mathematics swaps the purposes of y and z. You should to. That last function in SpaceUtils should go something more along the lines of the follwing.
translateByAngle: function(pos, angleX, angleY, distance) {
dest = {x: pos.x, y: pos.y, z: pos.z};
dest.y += distance * SpaceUtils.degSin(angleY);
hyp = distance * SpaceUtils.degCos(angleY);
dest.x += hyp * SpaceUtils.degSin(angleX);
dest.z += hyp * SpaceUtils.degCos(angleX);
return dest;
}
I need to have all point coordinates for a given circle one after another, so I can make an object go in circles by hopping from one point to the next. I tried the Midpoint circle algorithm, but the version I found is meant to draw and the coordinates are not sequential. They are produced simultaneously for 8 quadrants and in opposing directions on top of that. If at least they were in the same direction, I could make a separate array for every quadrant and append them to one another at the end. This is the JavaScript adapted code I have now:
function calcCircle(centerCoordinates, radius) {
var coordinatesArray = new Array();
// Translate coordinates
var x0 = centerCoordinates.left;
var y0 = centerCoordinates.top;
// Define variables
var f = 1 - radius;
var ddFx = 1;
var ddFy = -radius << 1;
var x = 0;
var y = radius;
coordinatesArray.push(new Coordinates(x0, y0 + radius));
coordinatesArray.push(new Coordinates(x0, y0 - radius));
coordinatesArray.push(new Coordinates(x0 + radius, y0));
coordinatesArray.push(new Coordinates(x0 - radius, y0));
// Main loop
while (x < y) {
if (f >= 0) {
y--;
ddFy += 2;
f += ddFy;
}
x++;
ddFx += 2;
f += ddFx;
coordinatesArray.push(new Coordinates(x0 + x, y0 + y));
coordinatesArray.push(new Coordinates(x0 - x, y0 + y));
coordinatesArray.push(new Coordinates(x0 + x, y0 - y));
coordinatesArray.push(new Coordinates(x0 - x, y0 - y));
coordinatesArray.push(new Coordinates(x0 + y, y0 + x));
coordinatesArray.push(new Coordinates(x0 - y, y0 + x));
coordinatesArray.push(new Coordinates(x0 + y, y0 - x));
coordinatesArray.push(new Coordinates(x0 - y, y0 - x));
}
// Return the result
return coordinatesArray;
}
I prefer some fast algorithm without trigonometry, but any help is appreciated!
EDIT
This is the final solution. Thanks everybody!
function calcCircle(centerCoordinates, radius) {
var coordinatesArray = new Array();
var octantArrays =
{oct1: new Array(), oct2: new Array(), oct3: new Array(), oct4: new Array(),
oct5: new Array(), oct6: new Array(), oct7: new Array(), oct8: new Array()};
// Translate coordinates
var xp = centerCoordinates.left;
var yp = centerCoordinates.top;
// Define add coordinates to array
var setCrd =
function (targetArray, xC, yC) {
targetArray.push(new Coordinates(yC, xC));
};
// Define variables
var xoff = 0;
var yoff = radius;
var balance = -radius;
// Main loop
while (xoff <= yoff) {
// Quadrant 7 - Reverse
setCrd(octantArrays.oct7, xp + xoff, yp + yoff);
// Quadrant 6 - Straight
setCrd(octantArrays.oct6, xp - xoff, yp + yoff);
// Quadrant 3 - Reverse
setCrd(octantArrays.oct3, xp - xoff, yp - yoff);
// Quadrant 2 - Straight
setCrd(octantArrays.oct2, xp + xoff, yp - yoff);
// Avoid duplicates
if (xoff != yoff) {
// Quadrant 8 - Straight
setCrd(octantArrays.oct8, xp + yoff, yp + xoff);
// Quadrant 5 - Reverse
setCrd(octantArrays.oct5, xp - yoff, yp + xoff);
// Quadrant 4 - Straight
setCrd(octantArrays.oct4, xp - yoff, yp - xoff);
// Quadrant 1 - Reverse
setCrd(octantArrays.oct1, xp + yoff, yp - xoff);
}
// Some weird stuff
balance += xoff++ + xoff;
if (balance >= 0) {
balance -= --yoff + yoff;
}
}
// Reverse counter clockwise octant arrays
octantArrays.oct7.reverse();
octantArrays.oct3.reverse();
octantArrays.oct5.reverse();
octantArrays.oct1.reverse();
// Remove counter clockwise octant arrays last element (avoid duplicates)
octantArrays.oct7.pop();
octantArrays.oct3.pop();
octantArrays.oct5.pop();
octantArrays.oct1.pop();
// Append all arrays together
coordinatesArray =
octantArrays.oct4.concat(octantArrays.oct3).concat(octantArrays.oct2).concat(octantArrays.oct1).
concat(octantArrays.oct8).concat(octantArrays.oct7).concat(octantArrays.oct6).concat(octantArrays.oct5);
// Return the result
return coordinatesArray;
}
Use can try the following approach: use the algorithm you gave but push your coordinates to eight different coordinateArrays. Afterwards you have to reverse half of them (those with (x0+x,y0-y), (x0-x,y0+y), (x0+y,y0+x), (x0-y,y0-x)) and afterwards append all arrays in the correct order. Take care that you add the first four points to the correct arrays.
As far as I know, you cannot do it without trigonometry, but it works pretty fast for me. Sorry I'm not familiar with Java, so I write the code in VB:
Dim PointList As New List(Of PointF)
For angle = 0 To Math.PI * 2 Step 0.01
'the smaller the step, the more points you get
PointList.Add(New PointF(Math.Cos(angle) * r + x0, Math.Sin(angle) * r + y0))
Next
x0 and y0 are the center coordinates of the circle, r is the radius.
Hope I answered your question.
Here is a javascript implementation based on Dave's answer. A bit over-engineered, I wanted to avoid calling sin and cos more than necessary. Ironically making use of Dave's first answer without the radius :)
function calculateCircle(x,y,radius) {
var basicPoints = getBasicCircle();
var i = basicPoints.length;
var points = []; // don't change basicPoints: that would spoil the cache.
while (i--) {
points[i] = {
x: x + (radius * basicPoints[i].x),
y: y + (radius * basicPoints[i].y)
};
}
return points;
}
function getBasicCircle() {
if (!arguments.callee.points) {
var points = arguments.callee.points = [];
var end = Math.PI * 2;
for (var angle=0; angle < end; angle += 0.1) {
points.push({x: Math.sin(angle),
y: Math.cos(angle)
});
}
}
return arguments.callee.points
}