I need to make ellipses go around a circle to make a flower, i've gotten pretty close to the solution but I don't know how to fix it, it's going through the circle, is there any way I could make the ellipes shorter + go around the circle?
This is the code:
pkg load geometry
clf
figure;
t=0:0.01:2*pi;
x=10*cos(t);
y=3*sin(t)/2;
for i=1:12
hold on;
q=[x;y];
e=pi/12*i;
z=[cos(e) -sin(e);sin(e) cos(e)];
k=z*q;
r=k(1,:);
d=k(2,:);
plot(r,d);
axis square;
pause(1);
endfor
hold on;
drawCircle(0,0,1);
This is what mine looks like:
This is what it is supposed to look like:
You need to circle the ellipses' centres as well, they're all centred on the origin now. That means, add a static offset. Something like
dist = 1; % Distance from the origin, change as necessary
x_Offset = dist * cos(e);
y_Offset = dist * sin(e);
plot(r + x_Offset, d + y_Offset);
Related
TLDR: How to find boxes that are lined up horizontally
Given I have the data from an image like this:
We can visually see that we have two lines:
Tare: 11700 kg 10:40:58 am 16-May
Gross: 21300 kg 12:49:34 pm 9-Aug
The data I have for each blue box shown in the image is:
Top
Left
Width
Height
Coordinates for each corner of the box (X, Y)
My main thought is to start from the top of my "grid" and loop through each value of y, and then group boxes where they share the largest amount of matching "y" values, but it seems very over the top for something that seems simple.
Unsure really where to go from here
Example data set
I was able to get boxes lined up using this bit of code (in JavaScript), it essentially finds the first "most top left" box, and then finds any boxes that "intersect" with a line that starts from the middle of that first box
We don't care what order we get the boxes in, so as long as we start with the most left on any line we are golden.
function getMostTopLeftBox(boxes) {
const sorted = boxes.slice()
.sort(
(a, b) => {
if (a.Left === b.Left) {
return a.Top < b.Top ? -1 : 1;
}
return a.Left < b.Left ? -1 : 1;
}
);
return sorted[0];
}
function getAlignedBoxesFromSet(boxes) {
const mostTopLeftBox = getMostTopLeftBox(boxes);
const line = mostTopLeftBox.Top + (mostTopLeftBox.Height / 2);
return boxes
.filter(({ Top, Height }) => Top < line && (Top + Height) > line)
.sort(({ Left: a }, { Left: b }) => a < b ? -1 : 1)
}
function getAlignedBoxes(boxes) {
let remaining = boxes;
const lines = [];
const next = () => {
const line = getAlignedBoxesFromSet(remaining);
lines.push(line);
remaining = remaining.filter(box => line.indexOf(box) === -1);
if (!remaining.length) {
return;
}
return next();
};
next();
return lines;
}
The above code with the data set provided above gives us this result
However, it doesn't account for slight angles on the boxes, for example this image:
Another example of different boxes, with senstive information removed:
You can see from the above that the values below should be considered to be on the same line:
Product: [type]
Num Of [type]: 0
[value]: [value]
I may make a new question for this, but part of the answer to this is to figure out the actual curve of a line, and not just assume that the median angle of all lines is the actual "curve" of the line, so if I was to start with the most left box, then progress to the second box, now I have two distinct lines that I would want to find the smoothed curve for, which I would then use to find the next box, as I find each box I would want to adjust this curve to find the complete line, I will investigate this one further, if anyone has any hints, please do mention it.
I've managed to solve this, with a variant of the code posted in the question.
Here is a code sandbox of the solution, I will do a full write up of this, but here it is for now: https://codesandbox.io/s/102xnl7on3
Here is an example of grouped boxes based on angled lines calculated from the angle of all horizontal lines, if all the boxes were to be straight, then the result would be the lines being straight as well, so it should work in all scenarios.
Here is also an example where the lines are straight:
You can see the lines from the box before intersecting with the next box, it does this each time until it can find a complete line of boxes (till no more line up), this works out better than using an average angle from the entire data set.
I would like to be able to generate a mathematical curve for the already found boxes and apply that to find the next box, but for now, using the previous box as the anchor works pretty well.
How can I make a very large skybox?
Example:
var skybox = BABYLON.Mesh.CreateBox("skyBox", 15000.0, this.scene);
The result is bad:
The first thing I suggest is to reduce the scale factor of your spaceship and planet models. It seems that having a SkyBox size larger than 10000 causes the ugly texture seams/tearing of the Skybox at particular camera angles and distances. So bring everything down in scale if possible to make more room inside the limits of the Skybox perimeter.
Next try this: set .infiniteDistance = true to keep the Skybox away from the camera, and also set .renderingGroupId = 0 on the Skybox. Lastly, set .renderingGroupId = 1 or more, on all the models and objects to help stop them from disappearing into thin air.
var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:10000.0},
this.scene);
skybox.infiniteDistance = true;
skybox.renderingGroupId = 0;
...and for models and sprite objects...
myModel.renderingGroupId = 1; /* greater than 0 */
These little tricks helped me to achieve a to-scale solar system simulation, but may not work in all cases.
Hello you need to increase camera.maxZ to a value larger than your skybox.
I want to ask for help to deal with the possible use of non-standard coordinates on the map Leaflet.
I want to use Leaflet to display custom maps with my own tile generator. Tiles are generated on the fly by script, depending on where it is planned to display (parameters {x}, {y}, {z} in the URL request to the script)
Map will be zoomable (from 0 to 10), size of ~16000 * 16000 tiles in maximum zoom, and 16 * 16 tiles in a minimum) and it will display a variety of objects, each object in a separate tile.
Each tile of 64 * 64 pixels is the object on map.
For each object (a square-tile) I want to display it`s information on mouse click, by sending via AJAX request to the server. I did not want to pre-load all information about all objects for the goal of optimization.
My main issue - I cannot understand how to correctly get the X Y Я coordinates of the tile on which mouse clicked.
Essentially because each tile when it is loaded from the server is bound to the grid {x}, {y}, {z}, and so I want to get these {x}, {y}, {z} from clicks on the map and send them for further AJAX request for getting information about the object.
Now it is possible to get click point as Latlng coordinates or coordinates in pixels relative to the upper-left corner of the map, which I cannot reference to tiles grid.
And also I wanted to know the possibility to get the coordinates of the click relative to the tile. For example, If the tile has dimensions of 64 * 64, and click was in the center of the tile, so how can I get relative coordinate of click [32, 32]?
Because If we knowing {X}, {Y}, {Z} coordinates of the tile and relative X* and Y* coordinates of click inside the tile, then we can do “universal alternative coordinate grid”.
May be this is not a problem and it can be solved easily, but I've never worked with any Maps API, and therefore I want to know the answer to this question.
Thanks in advance for your help!
Here is a working example for getting Zoom, X, and Y coordinates of clicked tile (using openstreet map): http://jsfiddle.net/84P9r/
function getTileURL(lat, lon, zoom) {
let xtile = parseInt(Math.floor((lon + 180) / 360 * (1 << zoom)));
let ytile = parseInt(Math.floor((1 - Math.log(Math.tan(lat.toRad()) + 1 / Math.cos(lat.toRad())) / Math.PI) / 2 * (1 << zoom)));
return zoom + "/" + xtile + "/" + ytile;
}
based on an answer https://stackoverflow.com/a/19197572
You can use the mouseEventToLayerPoint and mouseEventToContainerPoint methods in the Leaflet API to convert pixels onscreen to pixels relative to the top-left of the map, and then using a little math, you can derive the location within a tile.
This is what Leaflet does internally:
const tileSize = [256, 256]
let pixelPoint = map.project(e.latlng, map.getZoom()).floor()
let coords = pixelPoint.unscaleBy(tileSize).floor()
coords.z = map.getZoom() // { x: 212, y: 387, z: 10 }
So I am writing a game, but I have come to the part where i need to do some collision response, and I have been stumped. I have an algorithm that finds the objects collision angle, and collision depth meaning how much the two objects over lap. I understand what i want to do and that is to find a perpendicular vector to the collision angle and push back the object that is colliding by it's collision depth, but I just can't seem to write it correctly.
Here is the code I'm working with for the time being.
var collision:Object = collisions[i];
var angle:Number = collision.angle;
var overlap:Number = collision.overlapping.length;
trace(overlap);
trace(angle);
var moveX = Math.cos(angle) * overlap;
var moveY = Math.sin(angle) * overlap;
obj2.x -= moveX;
obj2.y += moveY;
basically I just want the object that is colliding with the wall to stop when it hits it.
any help would be greatly appreciated.
I worked on elastic collision with flash as3 once.I tried to fix overlap a lot of.But i could'nt solved it completely.They did not overlapping normally but if you forced enought, they overlapping.
if you want look at my work, i uploaded my codes.You can download and look at my code.
And if you solve this problem completely, please tell me solution.
swf(with friction, it's more problem) : http://nafiz.in/collision/carpisma.swf
swf(without friction, it's little problem than first.) : http://nafiz.in/collision/carpisma_surtunmesiz.swf
q : add a ball at mouse location.
w, a,s,d : controll #1 ball.
Click with mouse without relase and move mouse and relase. You selected balls.
When you press space, selected balls will go mouse location.
Cods : http://nafiz.in/collision/collision.rar
i hope you solve.
So after a few hours of tweaking the code, I came up with the solution that works well. here is my new code:
public function Colisions(obj1,obj2) {
var collisions:Array=MyCollision.checkCollisions();
for (var i = 0; i < collisions.length; i++) {
var collision:Object=collisions[i];
var angle:Number=collision.angle;
var overlap:Number=collision.overlapping.length;
// finds the amount in x and y coordinates to move the ball back, and it devides overlap by 20 so that the ball does not jump as much.
var moveX=Math.cos(angle)*(overlap/20);
var moveY=Math.sin(angle)*(overlap/20);
// sets the ball to it's original location before the colision.
obj2.x=obj2.x-moveX;
obj2.y=obj2.y-moveY;
}
}
just as a side note I am using CDK which stands for the collision detection toolkit as the algorithm that finds the collisions and the info associated with the collisions.
I have a chart with a DateTime axis as my horizontal and a Linear Axis for my vertical inside a Adobe Flex Line Chart. I want to use a Cartesian Data Canvas as a background element and draw custom set of background graphics mostly rectangles. When I have more than a single data point, the graphics work perfectly since they are supposed to span the width of the entire chart.
When I have only a single data point, however, I can't seem to get the rectangles to draw. Since I want my rectangles to span the entire width of the chart, I was thinking that I could get the x-coordinates from my axis, but this isn't working.
var canvasWidth:Number = chtCanvas.width;
var canvasHeight:Number = chtCanvas.height;
var minPt:Array;
var maxPt:Array;
var minPtDate:Date;
var maxPtDate:Date;
var minPtComplete:Point;
var maxPtComplete:Point;
// This works fine when there is more than 1 data point
minPt = chtCanvas.localToData(new Point(0, 0));
maxPt = chtCanvas.localToData(new Point(canvasWidth,canvasHeight));
//This does return a date object, but wont draw below
minPtDate = axisDate.minimum;
maxPtDate = axisDate.maximum;
//This returns NaN for the x
minPtComplete = chtCanvas.dataToLocal(minPtDate, axisSalary.minimum);
maxPtComplete = chtCanvas.dataToLocal(maxPtDate, axisSalary.maximum);
// Also tried this. Also returns NaN for the x value
//minPtComplete = chtCanvas.dataToLocal(axisDate.minimum, axisSalary.minumum);
//maxPtComplete = chtCanvas.dataToLocal(axisDate.maximum, axisSalary.maximum);
My actual drawing method is as follows:
// Tried this, works with points >2, does not draw with single data point
chtCanvas.drawRect(minPt[0], detail[i].MaxValue, maxPt[0], detail[i].MinValue);
//tried this, no effect with single point
//chtCanvas.drawRect(minPtDate, detail[i].MaxValue, maxPtDate, detail[i].MinValue);
// Tried this, no effect with single point
//chtCanvas.drawRect(minPtDate, minPt[1], maxPtDate, detail[i].MinValue);
// Tried this also
//chtCanvas.drawRect(minPtComplete.x, detail[i].MaxValue, maxPtComplete.x, detail[i].MinValue);
In this example, detail is an array collection of salary values and Im using the data value in the array to determine the vertical bounds of my rectangles.
I need to draw the rectangles the entire width of the chart (even when there is only a single data point). Thanks
Thanks to Heikki for his help. The following code works to use the axis values to draw on your Cartesian Data Canvas:
chtCanvas.drawRect(axisDate.minimum as Date, axisSalary.maximum, axisDate.maximum as Date, axisSalary.minimum);
Casting the values as Date really helped. The rest of the code used above is unecessary.
One thing to note, I was using a DateFormatter to format the date values from my data. What I didn't consider was that when using a DateTimeAxis, Flex will automatically add in extra dates to display on the axis. In my case, I was using a custom parse function to create MY points, but wasnt considering the points Flex was creating and also passing to my parse function (Therefore, they were not getting parsed correctly). Once I corrected this, the values laid out correctly in the case of multiple data points. I'm still having a bit of an issue with single data points and them not filling the chart entirely, but they are now drawing.
UPDATE:
Although there are signs of life, the minimum and maximum are still not drawing the entire width of the chart in some cases depending on the dataUnits and labelUnits combination.
UPDATE #2: SOLVED
Ok, so the axis does work as minimum/maximum values for the Cartesian Data Canvas but there is something important to remember. For a single point (and probably for multiple points as well, I just couldnt visually see the difference), when using a custom DateTimeAxis parse function such as what was in the Adobe Flex ASDoc tutorials:
private function axisDateParseFunction(item:String):Date
{
var inputDate:String = item;
inputDate = fmtDate.format(inputDate);
var newDate:Date = new Date();
if(inputDate)
{
var a:Array = inputDate.split('/');
newDate.fullYear = a[2];
newDate.month = a[0] - 1;
newDate.date = a[1];
newDate.hours = 0;
newDate.hoursUTC = 0;
newDate.minutes = 0;
newDate.minutesUTC = 0;
newDate.seconds = 0;
newDate.secondsUTC = 0;
newDate.milliseconds = 0;
newDate.millisecondsUTC = 0;
}
return newDate;
}
You MUST remember to set the UTC values as shown above also. Since the DateTimeAxis uses date AND time, when you create new Date objects, their time values also get set to the local system time. Remember to set those values to zero also or you will get points that dont exactly line up with your axis labels.