Recently I've been thinking about how to transform a complex polygon into a non-complex polygon. How is this done?
This is the sort of thing I want to do:
I'm going to end up with JavaScript when I'm done, but any form of a solution is fine (language, algorithm, or just plain English).
I would use the same heuristic that I would use when drawing the polygon by hand (which is probably not the most mathematically efficient way to caluclaute that polygon, but probably the easiest to understand/implement).
Start at a point
Find all the intersections between my current point and the point I'm trying to get to
If none exist draw to the next point
If one does, then draw to there, and then set the next point to the next point from there
If you aren't back to the beginning then goto 2.
Here is an example implementation on jsfiddle. Note: it isn't optimized.
I believe the easiest route is to perform a plane sweep to detect all the edge-edge intersections. It is not difficult to augment a basic plane-sweep algorithm implementation to maintain
the outermost boundary, which is what you want. Almost every textbook on computational geometry explains this well.
This is a late answer, but this can be done using Javascript Clipper Library. The desired operation is Simplifying (which internally uses Union operation) and it removes self-intersections where edge(s) crosses other edge(s).
Note! Javascript Clipper 5 cannot ensure that in all cases the solution consists only of truly simple polygons. This like special case is the vertices touching edges. Clipper 6 (Javascript version not yet ready) can handle these like special cases also.
Simplifying Polygons using Javascript Clipper Main Demo
You can play with Clipper using Javascript Clipper Main Demo. Click Polygons-Custom and you can input your own polygon there and then make the desired operations.
Let's take your example:
[[7,86, 196,24, 199,177, 47,169, 51,21, 224,102, 223,146, 7,140, 7,86]]
If you input these points in demo (as Subject or Clip), you get the following polygon:
Then make a Simplify operation which produces the following solution:
If you click Solution in Polygon Explorer, you can see the coordinates of simplified polygon:
[[199,177, 47,169, 47.75,141.13, 7,140, 7,86, 49.62,72.02, 51,21, 114.51,50.73, 196,24, 197.28,89.49, 224,102, 223,146, 198.38,145.32]]
Code example of Simplifying Polygons
And finally, I put the full functional code in JSBIN, which includes SVG drawing functions and is therefore rather long:
<html>
<head>
<title>Javascript Clipper Library / Simplifying Polygons</title>
<script src="clipper.js"></script>
<script>
function draw() {
var subj_polygons = [[{"X":7,"Y":86},{"X":196,"Y":24},{"X":199,"Y":177},{"X":47,"Y":169},{"X":51,"Y":21},{"X":224,"Y":102},{"X":223,"Y":146},{"X":7,"Y":140},{"X":7,"Y":86}]];
var scale = 100;
subj_polygons = scaleup(subj_polygons, scale);
var cpr = new ClipperLib.Clipper();
cpr.AddPolygons(subj_polygons, ClipperLib.PolyType.ptSubject);
var solution_polygons = new ClipperLib.Polygons();
solution_polygons = cpr.SimplifyPolygons(subj_polygons, ClipperLib.PolyFillType.pftNonZero);
//console.log(JSON.stringify(solution_polygons));
var svg = '<svg style="margin-top:10px; margin-right:10px;margin-bottom:10px;background-color:#dddddd" width="240" height="200">';
svg += '<path stroke="black" fill="yellow" stroke-width="2" d="' + polys2path(solution_polygons, scale) + '"/>';
svg += '</svg>';
document.getElementById('svgcontainer').innerHTML = svg;
}
// helper function to scale up polygon coordinates
function scaleup(poly, scale) {
var i, j;
if (!scale) scale = 1;
for(i = 0; i < poly.length; i++) {
for(j = 0; j < poly[i].length; j++) {
poly[i][j].X *= scale;
poly[i][j].Y *= scale;
}
}
return poly;
}
// converts polygons to SVG path string
function polys2path (poly, scale) {
var path = "", i, j;
if (!scale) scale = 1;
for(i = 0; i < poly.length; i++) {
for(j = 0; j < poly[i].length; j++) {
if (!j) path += "M";
else path += "L";
path += (poly[i][j].X / scale) + ", " + (poly[i][j].Y / scale);
}
path += "Z";
}
return path;
}
</script>
</head>
<body onload="draw()">
<h2>Javascript Clipper Library / Simplifying Polygons</h2>
This page shows an example of simplifying polygon and drawing it using SVG.
<div id="svgcontainer"></div>
</body>
</html>
You should maintain list of incident edges for every intersection point.
Then for ever point choose edge (outgoing), which has the smallest angle (anti-clockwise) with the previous (incoming) edge.
It seems like you're going to want to look into Convex Hull algorithms. Here's an applet of a few Convex Hull algorithms. You might be able to modify one of the algorithms to get your extreme points and go from there.
Ok, it seems I made working solution:
http://mrpyo.github.com/Polygon/
It's ActionScript so you should have no problem translating it into JavaScript.
I can explain used algorithm if somebody is interested...
Related
I'm looking to have an algorithm that can randomly draw a "squiggly wiggly" pattern as per the picture.
It would be nice if it were progressively drawn as you would draw it with a pen and if it were based on speed, acceleration and forces like a double pendulum animation might be.
This would be for javascript in the p5 library.
Is there some way of producing this that a) looks hand drawn and b) fills a page, somewhat like a Hilbert curve?
Very interested to hear ideas of how this could be produced, regardless of whether there is some kind of formal algorithm, although a formal algorithm would be best.
Cheers
I can think of two solutions, but there could be more as I'm not very good at coding in general yet.
First of all, you can use perlin noise. With the code
var noiseSeeds = [];
//This changes the noise value over time
var noiseTime = 0;
var x = 0;
var y = 0;
function setup() {
createCanvas(400, 400);
//This will help for making two separate noise values later
noiseSeeds = [random(100), random(100)];
}
function draw() {
//Finding the x value
noiseSeed(noiseSeeds[0]);
x = noise(noiseTime)*400;
//Finding the y value
noiseSeed(noiseSeeds[1]);
y = noise(noiseTime)*400;
//Increasing the noise Time so the next value is slightly different
noiseTime += 0.01;
//Draw the point
stroke(0);
strokeWeight(10);
point(x, y);
}
You can create a scribble on screen. You would have to use createGraphics()in some way to make this more efficient. This method isn't the best because the values are generally closer to the center.
The second solution is to make a point that has two states - far away from an edge and close to an edge. While it is far away, the point would keep going in relatively the same direction with small velocity changes. However, the closer the point gets to the edges, the (exponentially) bigger the velocity changes so that the point curves away from the edge. I don't know exactly how you could implement this, but it could work.
I'm making a bot for a project called Ogar, an Agar.io server implementation written in Node.js.
This bot has an obstacle, a green spiky cell called a virus (see illustration). I need to program this bot to avoid that obstacle, but I'm with no luck. Since there are a lot of targets like in the illustration, it's based on updates.
Here is the code that I ended up with until now.
BotPlayer.prototype.avoidObstacles = function(cell, angle) {
// Sum up all of the vector angles of obstacles to cell and react against it
var angleSum = 0;
var collided = this.collisionFromList(cell, this.obstacles);
if (collided.length == 0) return angle; // Not to return NaN
for (var i = 0; i < collided.length; i++) {
angleSum += this.angle(cell.position, collided[i].position);
}
angleSum /= collided.length; // Average out the angle sum
// TODO: Find closest available edge
angleSum += Math.PI / 2;
return angle + angleSum;
};
This DOES work in most cases, but the bot sometimes completely ignores the obstacle (this.collisionFromList(cell, this.obstacles); is perfectly fine) and ends up literally going through it (explode into a lot of cells).
BotPlayer.prototype has a lot of useful functions for this kind of calculations. See this link.
I don't need any pathfinding squabbles, just this simple avoid measure.
There is an alternative approach to what you are trying to do. The approach is to use attractors to describe entities in your system. Your "bot" is the agent, it has a position and it knows about other entities in the world and their attraction force. Say your destination has +1 attraction force and obstacles have -X attraction force, effectively repelling the "bot" (agent).
Here's a decision pseudo-code:
/**
* #param {Array.<{position:Vector2, attraction:Number}>} entities
*/
Agent.prototype.calculateDirectionVector = function(entities){
var agentPosition = this.position;
var result = new Vector2(0,0);
entities.forEach(function(entity){
//calculate separation between agent and entity
var displacement = entity.position.clone().sub(agentPosition);
//figure out distance between entities
var distance = displacement.length();
//dampen influence of attraction linearly with distance
var influence = entity.attraction/distance;
//produce force vector exerted by this entity on the agent
var force = displacement.normalize().multiplyScalar(influence);
//add up forces on the entity
result.add(force);
});
//normalize the resulting vector
result.normalize();
return result;
}
It's a big heuristic you made but if you wish to remain with this logic then consider taking into account the cartesian distance to the viruses, since you apparently have access to their position.
The function is BotPlayer.prototype.getDist or BotPlayer.prototype.getAccDist
You can use a threshold value DIST_MIN and a simple if or use a function like angle/distance (better) to reduce the impact the distant viruses have on the angle.
I am working on a plugin to allow "natural looking" signatures to be drawn using mouse or touch. When confirmed by the user, the result will be a stored SVG that can then be displayed in place of the "Click to sign" button.
The attached JSFiddle http://jsfiddle.net/TrueBlueAussie/67haj4nt/3/ shows a testbed for what I am trying to do. The SVG generated image should look close to the original canvas paths.
The first div contains a canvas, in which I draw some multiple-segment lines (e.g. paths). Using quadraticCurveTo, and a midpoint for the control point, I draw the lines with smooth curves. This works just fine.
The key part of the curved line drawing is:
$.each(lines, function () {
if (this.length > 0) {
var lastPoint = this[0];
ctx.moveTo(lastPoint[0], lastPoint[1]);
for (var i = 1; i < this.length; i++) {
var point = this[i];
var midPoint = [(lastPoint[0] + point[0]) / 2, (lastPoint[1] + point[1]) / 2];
ctx.quadraticCurveTo(lastPoint[0], lastPoint[1], midPoint[0], midPoint[1]);
lastPoint = point;
}
// Draw the last line straight
ctx.lineTo(lastPoint[0], lastPoint[1]);
}
});
I have tried multiple options for SVG generation of the same output, but I am stumped on how to convert the same sets of points to equivalent curved lines. Quadratic Beziers require "proper" control points, but I would prefer to use the far simpler mid-points if possible.
Any ideas? Is this possible or will I have to convert both to use Beziers with calculated control point(s). Is there a simple way to calculate control points that will do the same job?
jQuery or raw JavaScript solutions are fine, but you need to demonstrate in the JSFiddle provided :)
It's just a bug in your code. You are not updating lastPoint in your SVG version.
http://jsfiddle.net/67haj4nt/4/
And if you update the SVG version to match the canvas version, you get identical curves.
http://jsfiddle.net/67haj4nt/5/
I'm using the algorithm posted by the author of the question in the below thread to draw an N point bezier curve defined by some array of points.
how to draw smooth curve through N points using javascript HTML5 canvas?
Here's a fiddle of the project:
http://jsfiddle.net/lee2808/2YVx4/
If you copy and paste that into a js file and replace "AddImage.png" in the Curve's Ctor call on line 15 with an image file, all should work fine! You need to click on the canvas three times for the curve to begin to draw.
I'm dynamically adding points on a mousedown + mouseup event.
Anyway my implementation half works (if that's a thing lol). Once I have placed the first 3 points on the canvas a bezier is drawn as expected. However when I add further points the start point for the next curve is not at the end point of the previous curve.
It seems it's starting from the previous point.
Anyway here's my implementation :
Curve.prototype.drawCurve = function(pContext){
pContext.save();
if(this.getPoints().length >2){
pContext.moveTo(this.getPoints()[0].getX(),this.getPoints()[0].getY());
var i = 1;
for(i; i < this.getPoints().length-2; i++){
var modX = (this.getPoints()[i].getX() + this.getPoints()[i+1].getX()) /2;
var modY = (this.getPoints()[i].getY() + this.getPoints()[i+1].getY()) /2;
pContext.quadraticCurveTo(this.getPoints()[i].getX(), this.getPoints()[i].getY(),modX,modY);
}
if(this.getPoints().length > 2){
pContext.quadraticCurveTo(this.getPoints()[i].getX(),this.getPoints()[i].getY(), //last control point
this.getPoints()[i+1].getX(),this.getPoints()[i+1].getY());//end point
}
pContext.stroke();
}
pContext.restore();
};
Pretty much identical. Can anyone see the flaw in my logic?
I'm trying to produce a chain of bezier curves so that I can then animate an object to follow that path incase anyones interested as to why I want to do this.
Thanks in advance!
I am simulating a page turn effect in html5 canvas.
On each page I am drawing lines to simulate lined paper.
These lines are drawn as the page is turned and in order to give natural perspective I am drawing them using quadratic curves based of several factors (page turn progress, closeness to the center of the page etc.. etc...)
The effect is very natural and looks great but I am looking for ways to optimize this.
Currently I am drawing every line twice, once for the actual line and once for a tiny highlight 1px below this line. I am doing this like so:
// render lines (shadows)
self.context.lineWidth = 0.35;
var midpage = (self.PAGE_HEIGHT)/2;
self.context.strokeStyle = 'rgba(0,0,0,1)';
self.context.beginPath();
for(i=3; i < 21; i++){
var lineX = (self.PAGE_HEIGHT/22)*i;
var curveX = (midpage - lineX) / (self.PAGE_HEIGHT);
self.context.moveTo(foldX, lineX);
self.context.quadraticCurveTo(foldX, lineX + ((-verticalOutdent*4) * curveX), foldX - foldWidth - Math.abs(offset.x), lineX + ((-verticalOutdent*2) * curveX));
}
self.context.stroke();
// render lines (highlights)
self.context.strokeStyle = 'rgba(255,255,255,0.5)';
self.context.beginPath();
for(i=3; i < 21; i++){
var lineX = (self.PAGE_HEIGHT/22)*i;
var curveX = (midpage - lineX) / (self.PAGE_HEIGHT);
self.context.moveTo(foldX, lineX+2);
self.context.quadraticCurveTo(foldX, lineX + ((-verticalOutdent*4) * curveX) + 1, foldX - foldWidth - Math.abs(offset.x), lineX + ((-verticalOutdent*2) * curveX) + 1);
}
self.context.stroke();
As you can see I am opening a path, looping through each line, then drawing the path. Then I repeat the whole process for the 'highlight' lines.
Is there any way to combine both of these operations into a single loop without drawing each line individually within the loop which would actually be far more expensive?
This is a micro-optimization, I am well aware of this. However this project is a personal exercise for me in order to learn html5 canvas performance best practices/optimizations.
Thanks in advance for any suggestions/comments
Paths can be stroked as many times as you like, they're not cleared when you call .stroke(), so:
create your path (as above)
.stroke() it
translate the context
change the colours
.stroke() it again
EDIT tried this myself - it didn't work - the second copy of the path didn't notice the translation of the coordinate space :(
It apparently would work if the path was created using new Path() as documented in the (draft) specification instead of the "current default path" but that doesn't appear to be supported in Chrome yet.